Learning React + Gatsby for an Angular developer
I've developed in Angular since the early (horrible) days of AngularJS 1.x until now with Angular v9. After all these years developing with Angular and teaching a few classes on it I can say that I know it well.
I'm now looking for new frameworks to learn for fun. Gatsby caught my attention. I don't yet have a personal website so I want to learn it by developing a personal site first. I then plan to develop an e-commerce front-end using it (with the Shopify API on the backend).
I started reading on the topic and signed up for a React class as a start. The more I read, the more I realise how different the two frameworks are. I find Angular intuitive but I think that's because I've used it for so long.
Did any one here have a similar experience? Any of you moved from Angular to React (and preferably Gatsby) and documented their journey that I can learn from?
Any tips and insights would be appreciated :-)
Hey Yasser!
I saw your reply to my other comment, but decided to reply here since you had a thread dedicated to the topic...
I've also used Angular since the beginning of the AngularJS days. I think Angular is a great choice for SPA applications, but when I rewrote my site, I had the goal to blog more - so I wanted my site to be SEO friendly and really fast.
While I could have tried Angular Universal (or even just plain old server rendered pages), I had been hearing a lot about Gatsby and Next.js on a podcast that I listen to and really just wanted to try something new. Of the two, I chose Gatsby because the JAMStack was something that appealed to me (my original blog is in Jekyll so it was a familiar concept). Next.js still requires a nodejs server component, rather than hosting pre-built static html files, and I wanted to just skip the infrastructure cost (although I think there is also an option for static site generation now).
All of that being said on why I chose Gatsby, my experience with it was actually pretty straight forward. I had dabbled in React a bit before but certainly wasn't proficient with it like I was with Angular. I did, however, understand how the basics of React worked. As I went through the Gatsby docs, though, I noticed that they are extremely well written. I worked through the tutorial (https://www.gatsbyjs.org/tutorial/) and felt like I had a good grasp on how things worked.
Coming from Angular, I really fell in love with TypeScript, so the first thing I did was installed the gatsby-plugin-typescript plugin. There is a youtube video that I can find for you that was really helpful if you're interested.
A couple of things that I spent a lot of time trying to figure out are...
gatsby-config.jsfile, but it's something to be aware of.gatsby-node.js. It's not as magical as putting your markdown files in a specific directory and then having the runtime automatically generate pages for those - If you want something like that, Jekyll (or Ghost) would be a good fit. Gatsby will first populate a local GraphQL database with data populated from "Source" plugins before building your pages. At build time, Gatsby will run the logic inside ofgatsby-node.js- from which, you can query that GraphQL database and manually register pages for your dynamic data. This was probably the most confusing part for me. You can read more about it in parts 4, 5, and 7 of the tutorial https://www.gatsbyjs.org/tutorial/part-seven/tl;dr - Gatsby does have a bit of a learning curve, mostly because of how it integrates GraphQL into its build process and renders pages dynamically. However, the way that it handles things allows for a variety of different sites to be made with it, scale really well, and be super fast.
Oh, and another project that I've been keeping my eye on is https://github.com/scullyio/scully. It's really early in development, but when it becomes stable, I think this will produce similar benefits to Gatsby.
Edit:
I noticed you said...
The way that Gatsby works is that any time any of your data changes, the site must be rebuilt to produce new static pages. This might be okay if your products don't change much or you have very few products (assuming you set up a CI/CD pipeline to deploy when things change), but if dynamic data is what you're really targeting then Next.js might be something to look into.
Thanks a mill Brandon, that's very helpful!
The dynamic pages part has been my concern since I started reading about it. I do expect a steep learning curve here for me since I'm not sure to the whole concept of statically generated files that have a dynamic part which depends on an API.. Also, I have a basic idea on how GraphQL works but it looks super neat.
Regarding my intention to use it to build an e-commerce site: you're right that on paper, server-side-rendered app may be a better choice (e.g. nextjs or Angular universal or others). However, the e-commerce site I have in mind doesn't need to be updated more than once a week at most since the product offering is focused on a few specialised items. For that, SSR may not be a requirement and a well managed static pipeline might be more than enough.
I will certainly going to use Typescript with it, I can't afford writing anything in vanilla JS anymore..
The most helpful part I learned from you was that gatsbyJS docs are useful! With all the resources I have at hand it's good to know I could rely on the source.
Thanks again!
Yea, the Gatsby docs are amazing. They have some of the best learning material I've ever encountered from a framework.
Here is a great video on how to set up typescript with Gatsby. This was the first thing I did after scaffolding a new app. https://www.youtube.com/watch?v=ji2TtRVlNDQ
Good luck!
Very useful - thanks a lot for the youtube video and everything else. Cheers!
I swapped from Angular 1 to React and loved it.
React just makes so much sense.
I would look at nextjs as well. I used Gatsby but wasn't a fan.
Thank you for your feedback!
You might learn Vue for fun? It has Vuex (= Redux) and Nuxt (= Next).
Vue has directives almost like in angular and class components with typescript, almost like React. Basically, it feels like Vue is 30% new features and the rest taken from React and Angular.
Thank you! So yes I want to learn something for fun, but I want this fun to last a little longer than a few months and I want it to be meaningful :-) I did consider Vue, it seems like a great framework with a growing developer base. I also like what I heard from the founder on his plans to grow it so far. However, I decided against it for a few reasons:
Bottomline, Vue seems to be fun indeed for someone wanting to experiment only or learn Front-end dev while they're good at Backend. But that's not where I'm at. I can already develop complex apps in Angular and run mission critical apps on it, and I want to do the same with a new framework that has an even bigger user-base and an easier way to do Server-side/pre-rendered apps (vs. Angular Universal).
That was exactly my situation - transferring from BE to FE with Vue. In the end, I reached FE Tech Lead position, leading Vue with Typescript dev. But it became boring at some point and now I'm also learning React. ;) So your choice is totally right. :)
Vue is actually totally bullet-proof today and use on the production of many great projects. Laravel guys love Vue especially 😀 But framework is a matter of personal preference.
I work with Angular mostly on my day job, and I like Angular for what it does, especially for enterprise-level applications and big teams. But I know that it's complicated and it's not a tool for indie hackers wanting to build apps the most fast and efficient way.
I tried React and couldn't cope with its architecture and with jsx/tsx (and many Angular-guys I know feel the same).
I tried Vue and fell in love with it because of its simplicity and configurability and separation of concerns. Also, Vuex's Redux implementation is such clear and easy to grasp, that it allows to build even complex apps easily.
Gridsome is also a very cool Vue-based project which (in my opinion) not worse than Gatsby (I built a site with Gatsby once).
So framework choice is not a religios question - it's a trial and error way of finding the tool that would fit your needs and skills and mental paradigm the best way
Thank you! I didn't mean to say that Vue wasn't production-ready, I'm sure that's been done by many. In addition, the developer friendliness seems to be a key attraction. This makes it super appealing for someone wanting to learn something new and useful. However, having worked in a large org that manages popular products and tools I know that change is the only constant. Vue has the support today but I can't guarantee that in a couple of years (by the time I'd become an "expert" in it). The same is true for React, but because it has powerful backers and a much larger community you expect it to last longer. That's all I'm after really. There are new frameworks popping up every week, and I'm sure some of them would be fun to learn or work in, but how long will they last being great? How long could the owner sustain them and lead development? The bigger the audience and support ecosystem the larger the chances that it'll survive.
I totally agree with you on the jsx/tsx part - I can't swallow it yet. But I'm hoping that the whole framework will make sense at some point I just need to give it a chance...
I started with jQuery and native JavaScript and later learned React. It took a bit to wrap my head around not just to React but to several new ES2015 concepts. I worked with React for about 3 weeks, then "Got it" and fell in love.
Then I was contracted, about 2 years ago, to help build a design system. They built their initial site in Angular. So I learned the fundamentals of Angular as well.
And I hated it.
I went into Angular with a totally open mind. Excited to add another tool to my belt. But the entire contract I was frustrated building in Angular.
All that to say, I've used both and favor React. Definitely dive in and enjoy yourself.
Gatsby (deployed via Github/Netlify) has also been fun. I'm building a new site with it. To learn Gatsby, the Frontend Masters course (https://frontendmasters.com/courses/gatsby/) was really enjoyable. I was up and running very quickly even with just the setup on the Gatsby site.
As far as tips go:
Thanks a lot for this, I appreciate your help! props and state are new concepts to me and I am trying to better understand them with examples now. Thanks for the course reference on gatsby, I was looking at egghead.io for that but this one seems more focused and tailored for beginners.
Thanks again!