search

gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.27k stars 10.31k forks source link

New types of sites to build for new tutorials #3956

Closed shannonbux closed 6 years ago

shannonbux commented 6 years ago

Description

Would like to see an enhancement to the current kind of site the tutorial requires people to build. It would be cool if it empowered them to build a site that has static stuff and also dynamic stuff.

Help needed

We need ideas of what kinds of Gatsby sites could involve static and dynamic things and can be reasonably built by folks new to Gatsby.

LekoArts commented 6 years ago

What do you exactly mean by "dynamic things"?

shannonbux commented 6 years ago

@LeKoArts I have no idea, since I'm not a developer really. What I mean is something that shows that Gatsby can do more than build just static sites. So, it would be cool if beginners could go through tutorials and build something static (like a marketing site), and then go to some advanced tutorials to add something like an e-commerce store to their marketing site they just built. Does that makes sense?

LekoArts commented 6 years ago

Ahh, so you wanna show that React is actually under the hood and can be used like normal React apps. That would make sense.

In my opinion it would be cool to first build something static (to show Gatsby‘s strenghts) and then enhance this site with React‘s strenghts. One thing that instantly came to my mind (as a first idea):

You often have a list of recent blog posts which are ordered by the graphl schema. Why not build a sorting/filter (by date, title, category, tags etc.) for these blog posts?

Probably the extension/advanced version would be a hybrid app with complete React pages (people quite often ask about that).

shannonbux commented 6 years ago

I like this idea—it seems appealing since many people might actually use it!

On Thu, Feb 15, 2018 at 3:48 AM Lennart notifications@github.com wrote:

Ahh, so you wanna show that React is actually under the hood and can be used like normal React apps. That would make sense.

In my opinion it would be cool to first build something static (to show Gatsby‘s strenghts) and then enhance this site with React‘s strenghts. One thing that instantly came to my mind (as a first idea):

You often have a list of recent blog posts which are ordered by the graphl schema. Why not build a sorting/filter (by date, title, category, tags etc.) for these blog posts?

Probably the extension/advanced version would be a hybrid app with complete React pages (people quite often ask about that).

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/gatsbyjs/gatsby/issues/3956#issuecomment-365890919, or mute the thread https://github.com/notifications/unsubscribe-auth/Ae9o2p584pzjz6xMNXKJxoj9VON6b5xzks5tVAuEgaJpZM4SArxr .

ryandeussing commented 6 years ago

Shannon thanks for this request, I think it's a great idea to showcase in a tutorial the sort of app-like features that are possible when building with Gatsby, as well as to make evident the sort of app experiences or functionality for which Gatsby may not be the ideal tool.

Unless this idea falls in the latter category, perhaps a Gatsby tutorial could take the canonical HN clone example and take it to the next level - allowing authentication/account creation and posting/editing of items and comments. Maybe posts would be static pages while comments and auth status would be dynamic? I don't know, I'll have to check out the tutorial ;)

Firebase, which provides free tiers for both authentication and storage, might be a good fit for implementing these features, and is a popular tool in other learning materials aimed at new React developers.

[edit: link to gatsby-source-firestore]

shannonbux commented 6 years ago

Hi @ryandeussing great ideas! I like that idea because account creation and commenting are very realistic and common things people might want on their blogs and sites. Very valuable idea. I think maybe we'll end up creating individual issues for high-demand tutorials eventually.

Also, very interesting point about whether we should make evident the sorts of functionality for which Gatsby may not be the ideal tool. Hopefully developers will know this without us having to explain it...:)

shannonbux commented 6 years ago

So I see this conversation splitting into two tasks:

KyleAMathews commented 6 years ago

Anyone volunteer to choose one starter for the current set of tutorials and then make sure that the starter will work throughout each set of the tutorial

Why again do people say installing new starters is a problem?

The difficulty with trying to make every part of the tutorial work within the same site is that people will have to start deleting things from previous parts or we'll have to rewrite the tutorial to make sure that it all works together which is much harder.

It gives us a lot more freedom to just start over from scratch every time.

Also, it seems to me to be good practice to have people get used to starting new sites as it's a very common workflow.

shannonbux commented 6 years ago

@KyleAMathews What do you mean by "people will have to start deleting things from previous parts"?

There have been several people who have said they felt confused about why they had to start from scratch for every tutorial (I can send you their notes if helpful). It also takes a lot of room to repeat the same instructions at the beginning of each tutorial so it gets a really prominent position in the learner's mind even though, to me, it seems it is not the most important skill they need to learn. Am I wrong about that? If it is super important for them to learn to install new starters, OR it is impossible to restructure the tutorial, then we should just explain that at the beginning so people aren't confused about "why do I have to keep starting new project when I was just started to get excited about the last one?"

Also, modern learning theory is all about project-based learning, which means that if someone is building a project they care about and has a real audience, they will work harder on it, remember what they're learning, and do anything it takes to finish it. So, if they get to produce something finished (ish) that they are proud of by the end of the tutorials, it is so much more likely that they will remember what they learned and finish it.

It totally makes sense though that rewriting it this way is hard.

KyleAMathews commented 6 years ago

What do you mean by "people will have to start deleting things from previous parts"?

In part 1 we tell them to put certain code in src/pages/index.js for the frontpage. In part 2 we instruct them to make a different front page. Same with part 3 & 4. It'd be weird to tell them to have to delete old code or remove plugins and so forth in each new part.

I think the basic tutorial is more akin to practicing scales on a new instrument. Only in part 4 do we have them start playing basic songs. In the advanced tutorials, they start learning more sophisticated songs. But until they get play notes, no reason to teach them songs.

Also I think it is really important to understand how to create new projects and doing it several times reinforces that. We want people to explore multiple starters and be comfortable doing this.

amberleyromo commented 6 years ago

^This could be mitigated with a branch workflow, or by discarding changes via git, or something. But it's probably easier to not get into the business of teaching people git (other than to clone) or working with a CLI (other than scaffolding, running develop, etc). Basically I agree that keeping them separate is overall cleaner, and starting from scratch can only help beginners (both in terms of getting used to using the CLI, and in terms of running into less issues with a pure, clean start).

shannonbux commented 6 years ago

ok, that's fine to keep it how it is. The only issue now is that I divided part 4 into four different tutorials (part 4, 5, 6, 7), so if we merge that change, people can't really jump into part 5, 6, or 7 without doing part 4 first.

On Tue, Mar 6, 2018 at 12:16 PM, Amberley notifications@github.com wrote:

^This could be mitigated with a branch workflow, or by discarding changes via git, or something. But it's probably easier to not get into the business of teaching people git (other than to clone) or working with a CLI (other than scaffolding, running develop, etc). Basically I agree that keeping them separate is overall cleaner, and starting from scratch can only help beginners (both in terms of getting used to using the CLI, and in terms of running into less issues with a pure, clean start).

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/gatsbyjs/gatsby/issues/3956#issuecomment-370913543, or mute the thread https://github.com/notifications/unsubscribe-auth/Ae9o2rtleet4yjy2oY-t6qLn4mxaRVpTks5tbu6rgaJpZM4SArxr .

amberleyromo commented 6 years ago

So this would actually be a really good candidate for a git branch workflow, I think. @KyleAMathews -- wonder what you think about that. Have a dedicated data flow tutorial repo for them to pull down, that consists of a scaffolded starter, with branches corresponding to each section.

I think this is reasonable because:

  1. This is a very safe way to get acquainted with git. We can provide all the commands, and if something gets screwed up, they can clone down a fresh repo.
  2. There's a repo for them to view live completed tutorial code at whichever juncture they choose. This accommodates learners who choose to follow along constructing from the initial starter, or choose to check out each branch, ensuring they have no syntax errors or things blocking them from moving on, or if they'd like to just peruse the repo, they can do that.
KyleAMathews commented 6 years ago

yeah it seems like the rule is:

We still wouldn't need to require git though. gatsby new can create a site from a particular branch. So we could create starter specifically for the soon-to-be expanded part 4 for which the master branch would be the initial starter and then at each point along the way, we turn those into branches and then say at the top of each tutorial that we're assuming they're continuing from the previous but if they're not, they should install this starter w/ branch that'll get them caught up.

amberleyromo commented 6 years ago

That fulfills the same purpose, for sure. Not only if they're not continuing from the previous, but also if they're having some kind of syntax issue/error they can't get past (which stops quite a few learners).

KyleAMathews commented 6 years ago

Yeah, being able to easily toss aside their failed attempt and start again. Way easier than trying to back out of a change. We could even encourage people to do this as it'll give them more confidence to try experimental things as they'll know they can recover easily.

shannonbux commented 6 years ago

That sounds perfect, although if we ever change the tutorials significantly, it just also means we'll have to update the branches. Hopefully won't have to get edited very often.

On Wed, Mar 7, 2018 at 2:37 PM, Kyle Mathews notifications@github.com wrote:

yeah it seems like the rule is:

  • if tutorials are independent you shouldn't have any common starting point
  • if tutorials are dependent on each other, then you need a way to start from scratch at each point along the path.

We still wouldn't need to require git though. gatsby new can create a site from a particular branch. So we could create starter specifically for the soon-to-be expanded part 4 for which the master branch would be the initial starter and then at each point along the way, we turn those into branches and then say at the top of each tutorial that we're assuming they're continuing from the previous but if they're not, they should install this starter w/ branch that'll get them caught up.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/gatsbyjs/gatsby/issues/3956#issuecomment-371309964, or mute the thread https://github.com/notifications/unsubscribe-auth/Ae9o2hhRDbiq8er330PPOK6OAeYRq2u1ks5tcGC9gaJpZM4SArxr .

shannonbux commented 6 years ago

good point @amberleyromo. It'd be great to enable people to keep learning until they're able to get help or resolve errors.

On Wed, Mar 7, 2018 at 2:40 PM, Amberley notifications@github.com wrote:

That fulfills the same purpose, for sure. Not only if they're not continuing from the previous, but also if they're having some kind of syntax issue/error they can't get past (which stops quite a few learners).

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/gatsbyjs/gatsby/issues/3956#issuecomment-371311135, or mute the thread https://github.com/notifications/unsubscribe-auth/Ae9o2m1fQqa5Vxv05NzAgaPM9OPJ1tE6ks5tcGHXgaJpZM4SArxr .

shannonbux commented 6 years ago

Yeah! An easy reset or recovery method could encourage healthy risk taking and exploration

On Wed, Mar 7, 2018 at 2:52 PM, Kyle Mathews notifications@github.com wrote:

Yeah, being able to easily toss aside their failed attempt and start again. Way easier than trying to back out of a change. We could even encourage people to do this as it'll give them more confidence to try experimental things as they'll know they can recover easily.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/gatsbyjs/gatsby/issues/3956#issuecomment-371314196, or mute the thread https://github.com/notifications/unsubscribe-auth/Ae9o2u9fuK1IylkpDPpqFUMUo9z5wckgks5tcGSdgaJpZM4SArxr .

shannonbux commented 6 years ago

This is getting taken care of in multiple advanced tutorials on .org. Closing! Yay!