*This post was first published on my blog.
I have been a freelance web developer for a while now, but in the beginning, I was always wondering whether WordPress development is going to be the only way to create websites for my clients? I was looking for something to take advantage of my JavaScript knowledge and that's where I found Gatsby. It gave me the option to leave the WordPress space and try out something else! But what's now? Is there something after Gatsby JS? That's what we will talk about today, so let's get right into it!
*Please note: This is the perspective of a web developer wanting to go freelance right from the beginning and not planning to get a corporate job.
Table Of Contents
How I got started
Coming from a self-taught background, I got started, like so many others, with FreeCodeCamp. It is in my opinion the single best resource to get your journey started and although many other resources have come out in the meantime, I think it is still the best.
However, while I was doing FreeCodeCamp I had already started developing my first couple of WordPress websites. In the end, this combination proved good, as it taught me all the basics I needed to get started. But I soon grow discontent with WordPress and its long loading times and lots of other things.
I was wondering whether there is something I had missed in my FreeCodeCamp journey. Back in the day, the curriculum still consisted of only HTML, CSS, JS, and some backend certifications, but I wondered how do I now actually create a website for let's say a bakery around the corner?
Getting into React
I was reading lots about React on the internet, but FreeCodeCamp didn't have anything React-related in their curriculum at the time. So I started going onto Udemy and searching for tutorials there.
Eventually, I settled for "The Complete Web Developer in 2021: Zero to Mastery" by Andrea Neagoie. Thought through and well structured 40 hours on-demand video course that filled in all the gaps that FreeCodeCamp had left me with.
It helped me to get familiar with React file structure, JSX, the idea of component hierarchy and so much more. But again, i*n the end, I had one more project on my portfolio, but was left wondering*, is this how you create a "normal" website if a friend reaches out to you and needs you to code up something simple?
Getting into Gatsby JS
And that's where I found Gatsby JS. After searching for ways to reduce WordPress loading times and how to make "normal" websites with React, I came across this thing called "Jamstack".
And a day and 2 youtube videos later, I was following the Gatsby docs to set up my first Gatsby starter and browse through the numerous Gatsby files.
Immediately, I was hooked.
At first, it was a bit daunting to grasp was gatsby-node.js and gatsby-browser.js APIs meant, but with the huge community and the library of starters, it was just trial and error. The thing that every developer goes through when learning new technologies, right?
The benefits of Gatsby JS
Gatsby offered everything that I liked from WordPress development and more! With Gatsby's theme library I was able to peek at other people's projects and built on top of their themes just like I would have in WordPress. But only this time, I could code in React.
On top of it, hosting small Gatsby websites on Netlify with continuous deployment for basically free, blew me away.
Previously it had always been: "Host your WordPress website for only 5$/month". But now, instead, I was able to decide when to "publish" changes without immediately showing on my site like I had to with most of my WordPress clients.
My time spent learning JavaScript and React now finally paid off too, and for the first time, I felt like FreeCodeCamp had been worth it.
And what shocked me most, how easy it was to get high ratings on Google's Lighthouse Tool for performance as well as SEO. Something that many clients cared about a lot.
I now started to create websites with React and Gatsby instead of WordPress. I felt like I was more in control with less setup and could still give my clients access to their content through headless CMS easily. The best of both worlds.
Why you also might want to move on
So why would I want to move on from Gatsby as it has made my developing experience so much better? Well, things on the Internet, and especially some of my views on web development have changed since I got started with Gatsby. Gatsby is amazing, but it is definitely not the right answer to all static sites.
The competition in the SSG (StaticSiteGenerator) field has become stronger each year, so much that things that used to be unique to Gatsby like effort-less image optimization and SEO have since been adopted by others and make it more difficult to argue why you should go with Gatsby.
My clients' websites also have increased in size and often get updated which makes the build process with Gatsby quite tedious. There are ways to improve build times, but what about the J*avaScript and JSON bloat that gets shipped with every Gatsby site no matter what size*? Now some people will say that with the bloat come configured lots of Gatsby greatest advantages. But what if did not need or want them? I don't have the option to turn them off.
Nowadays, I go for Gatsby if it's a site that needs to be set up quickly, is fairly small in size, and can perhaps be created by using one of the many starters that I have set up for myself in the past.
The plugins that come with Gatsby are also generally great, especially for people getting started, but you might catch yourself later thinking: "Why am I googling whether there is a plugin, again? Shouldn't I maybe try and code this myself?.."
Gatsby is just too convenient.
From once being amazed by all the things that Gatsby provides you out of the box, I now often question myself if I really understood the concept of what I implemented or whether I just "copied and pasted".
What's next?
I have mentioned the growing competition that Gatsby (and React in general) is dealing with and some of the competitor's approaches are quite different and worth looking at.
I think a developer should always strive to learn more and not only deepen knowledge, but also accept that technologies sometimes change completely and as a developer, I might have to revise what I thought was good yesterday, but might not work anymore tomorrow.
I know the React team and the Gatsby community are working relentlessly to improve every day, but I increasingly have a tingle in my fingers that tells me to step out of my comfort zone and try out something new.
One topic that I have come across, again and again, is Svelte with Snowpack. Getting rid of the bloat from React and offering an even better developer experience, seems very promising.
It's currently used by sites like the New York Times, Spotify, Ikea, and Chess.com. These are some really big players that seemed confident enough in Svelte to take the plunge! So this is something I definitely want to try out in 2021!
The other probably more popular choice is VueJS. Becoming very hyped over the last few years, I think we all should at least dabble in the "Hello World" starter and see for ourselves if the hype is justified.
And this is one of the many reasons I love web development. The community strives to challenge each other and constantly introduces new and potentially better concepts. Always on the hunt for a better approach for developers and users.
What will you learn in 2021? Will you also leave your comfort zone and see what else is out there? Let me know in the comments!
That’s pretty much it!
Thanks so much for reading this far and feel free to reach out to me anytime, on my website or Twitter 🙂 And if you like to read more, make sure to check out my other posts on my blog!
Top comments (8)
I definitely have to check out gatsby sometime soon for the theme library alone
Yea, it’s really nice. Something I think other frameworks should consider having as well.
You should go check out NextJS too in your spare time, as part of your "what's next". No pun intended. CRA, Gatsby and NextJS are often compared against each other after all. 🍻
Any good tutorial recommendations or do you reckon just going through the docs is the way to go?
This can be quite subjective. But for me, the docs alone were enough to help me get started. Also, initializing a new NextJS project and playing around with the boilerplate helped too.
Great read. I'm exactly at this point 🙂🙂🙂 I tried Gatsby and now I'm trying to learn pure react to evade this dependency on Gatsby and other ready solutions.
Thanks a lot! Glad to hear that I am not the only one 😅 There a lots of resources and tutorials on React, especially free ones this days, but if you need something in depth I can really recommend Andrei Neagoies courses on Udemy!
That’s interesting! How do you decide to use which for your project?