How is it like to work with GatsbyJS as a Nuxt.js developer?

Hi there community!

So recently I've been working on a website which I'm gonna show you in a while after this post is published.
Basically I'm a Vue.js developer and I enjoy designing websites with tools like Nuxt.js and other Vue.js related stuff and this is was pretty much my second or third experience with react and here I'm sharing my experience with you.

Note: This is only a personal experience and points of view might be different for any individual. My last post was kind of a comparison between PHP and JavaScript and it got a lot of attention which I appreciate but please note that it is only a personal opinion.

You can checkout my previous post here:

How is it like to be back from Node.js to PHP?

Adnan Babakan (he/him) ・ Nov 5 '19

#php #node #javascript

Anyways let's get to work!

How does GatsbyJS work?

Literally GatsbyJS isn't that complicated by the concept (I know it is a great framework, I just want to simplify the problem), what it does is literally using React for rendering pages and providing some other cool stuff like lazy-load for images and so on which almost all of them work with GraphQL. The greatest thing about GatsbyJS is its lazy-load and GraphQL API.

If you don't know what GraphQL is checkout the official website: GraphQL

What are GatsbyJS's pros?

GatsbyJS is a collection of pros actually and I love it. Here I will explain some that are outstanding in my opinion:

• Using React as the main library for rendering the pages. Which will cause blazing fast pages in my opinion.
• Using GraphQL for data API and other stuff which is gonna make your experience much more cool.
• Being able to deploy the production mode in almost every environment since it is only in HTML, CSS and JavaScript and nothing more.
• Good code splitting and fast load time.
• Almost perfect CMS integration for WordPress and other famous CMS's.

What are GatsbyJS's cons?

So as always nothing is just perfect and it always lacks some stuff.
The most irritating thing I felt about GatsbyJS was the installation step. I'm a Windows 10 user (GUYS I'M GAMER TOO SO I HAVE TO BE ON WINDOWS XD) so I had some troubles installing GatsbyJS CLI on my computer and what I finally did was installing it on my Ubuntu subsystem on Windows and using WSL (Windows Subsystem for Linux) as my command line afterwards.

The next problem I was facing was the file watching problem. For some reason when I was editing and saving files on my IDE (which happens to be PhpStorm) gatsby develop wasn't able to detect the changes due to safe save feature of PhpStorm and I had to turn it off which was one more step into getting GatsbyJS ready to work.

The other problem was and still is the really slow time to hot reload! It is more like a cold reload now because GatsbyJS takes too long and bundle everything again even on development mode. At least this is how it goes on WSL.

This was three main things that were annoying for me.

The next minor thing can be GraphQL. This is a big feature and a main thing that GatsbyJS is built on but still it might add more curves to the learning curve XD.

How does Nuxt.js work?

Nuxt.js is actually not a static site generator though it can be used so. Nuxt.js is only a framework indeed. As much as I remember this thing was my life for a year or so and was a big thing in the programming world too.
Nuxt.js uses Vue.js as the render engine (let's say) and is built on top of Vue.js. Nuxt.js provides you some cool stuff like SPA features and great compatibility with pre-processors like SCSS, LESS and Stylus.

What are Nuxt.js pros?

As GatsbyJS, Nuxt.js is nothing less and maybe more in my opinion, and these are the things I love about Nuxt.js:

• Since it is built on top of Vue.js it provides a single file component for each page and a more clean way of creating pages than React's way.
• Pretty fast hot reload.
• Clean build output.
• Can be both static and served with Nuxt.js itself as a server.
• Provides Webpack Bundle Analyzer by default.

What are Nuxt.js cons?

Nuxt.js has its own problems as well. One of the most dramatic things that can happen in Nuxt.js for you is the plugins configuration! Sometimes it can be that hard so you just let it go.

And the next thing is the bundle size which sometimes can be a problem without proper optimization and cause lots of problem in a website's load time.

This is the city I live in which is called Tabriz

Literally I had no pictures to split the section above and below so I used a picture of my city and maybe you get interested in it. LOL

How is it like to work with GatsbyJS as a Nuxt.js developer?

Better to say *How is it like to work with React as a Vue.js developer? since GatsbyJS and Nuxt.js are both built top of React and Vue.js respectively and they are only some tool-chain providers and nothing more.

The first thing you gonna notice in React after switching from Vue.js is that there are no more in-tag stuff and for each condition you have to use an JSX expression and embed it in your render method or anywhere that's gonna be rendered.

Let's compare two simple things:

<template>
    <div>
        <span v-if="true">This is it!</span>
        <span v-else>Something is wrong!</span>
    </div>
</template>

The code above is in Vue.js and the below one is going to be in React:

import React from "react";

class Index extends React.Component {
    render() {
        let mySpan;
        if(true) {
            mySpan = <span>This is it</span>
        } else {
            mySpan = <span>Something is wrong</span>
        }
        return (
            <div>
                {mySpan}
            </div>
        );
    }
}

BTW I know you can use ternary for conditional rendering in React but this demonstrates my purpose the best.

So basically two codes above do the same thing except for the first one which is Vue.js and the second one is React. To be honest Vue.js needs more setup for a single file component for the first time your are setting up your project but Nuxt.js takes care of that and the last thing you gonna do is the code I've written in the section above.

Still React seems more complex than Vue but more familiar since it is almost only JavaScript and HTML (it's JSX actually) in the other hand Vue.js is more clean but with some strange attributes which might be hard on eyes for some people.

Honestly for the sample above I prefer Vue.js more since don't have to split my code in two parts for a condition and a section to combine it with the template I want to be rendered.

I wanted to keep this article short but...

Image from https://naturaily.com/blog/react-vue-similarities-and-differences

Both React and Vue.js use virtual DOM (What VDOM is, is beyond the purpose of this article) but as seen in the table above Vue is slightly faster.
So I believe Vue.js is going to take over React someday since it is much more convenient and faster.

But what is it that keeps people on React? Honestly React's learning curve is slightly less than Vue so in result lots of people use React and the community is much more bigger at the time I'm writing this post and you might find many developers which faced your issue and solved it and you can use their experience easily by just a search on StackOverflow. I'm not trying to say that Vue.js has a small community but comparatively smaller.

Conclusion: This is a new era for me as a Nuxt.js developer to switch to GatsbyJS and I'm really happy I tried this big guy and enjoyed it so much that I might move my next projects to GatsbyJS.

PS: I'm writing this post almost 12 hours after an earthquake of 5.9 magnitude and all my computer and monitor was shaking as I was working with GatsbyJS. So maybe GatsbyJS wasn't that pleasant for me after all XD.

New update: Although GatsbyJS is a great framework but some problems with it gave me headache. I think this will be the last time for me with GatsbyJS. LOL

Let me know if you have any other point of view or if I'm wrong in the comments section below and I will accept it with pleasure.

Comments

[Daniel Eck]

I just wanted to point out that your example of React lacking inline conditional logic is quite a bit more convoluted than it needs to be, you could just do this:

<div>
    {true && <span>This is it!</span>}
    {!true && <span>Something is wrong!</span>}
</div>

[Adnan Babakan (he/him)]

Hi
This is something more like a JavaScript snippet inside the template rather than a shorthand inline condition. But it still works I suppose! So, thanks!

[Ashique]

Your Gatsby's slow hot load problem is because you may be storing the project folders in Windows file system and using Linux WSL2 terminal. Create the project completely on the linux/ Ubuntu side not on Windows.

I had almost given up on WSL2(Windows sub system on linux) for the same reason but then I read about this issue in some Microsoft WSL documentation, thankfully!

[Milo]

Haha I love Nuxt and Vue and that snippet says it all for me.
Brilliant file structure, can do fully static (sort of), beautiful syntax, stunning and brave. Rarely if ever do I find a framework that doesn't drive me too crazy and actually makes sense.
It's next level in my opinion.
We deployed to AmazonLinux boxes as a headless site using horrible PHP Wordpress as the content editor.
It does take 40ish seconds to build all the pages, when there is a content change, and we never got selective page rebuilds so it's hundreds each time but I get a lovely easy, simple to host well structured thing at the end.
Would recommend for any site.

[Patryk Padus]

We use NUXT as main engine. Why and what const and pros we have from our point of view?

• one guy that is hero and won't change license in midnight. React changed one time license and back-up but we see what's going on ;/ I can sleep well.
• old code and approach is removed, not same as react and gatsby is older and thus having some quirks. Hooks, lifecycle and Composition API. Most plugins have high level of quality thx to poa and other core memebers. All because component are less prone to error. Use all what you need from nuxt as API is new and fully featured.
• component can be mixed like utility (React like) but have some ground level setup requirements (standards) - Like Angular. Not fully MVC but have some minimal structure what gives quality and code coherence. So you can take Vue and add everywhere easily and have same base standard like in nuxt. This for our company help so much :) I don't like to switch between Gatsby and some project that are on PHP/ASP (check this one for vue 3 - dev.to/webdeasy/how-to-build-a-vue...)
• You have some pros and cons of all libraries. What is most important in future is who and how maintain your website. In Nuxt/Vue component way we can onboard in less than 6 month person. Great documentation and less wiring. Maybe not everybody see problem when they hit hard on "staff required" issue. This is MAIN original point to use Nuxt - It supercharge Developer eXperience (DX) in way what Gatsby won't ever do because of complex wiring in background.
• documentation. I like to add Polish version too. Just need time. We all see difference between Nuxt and Gatsby. Community isn't the main point. When using something I need fully documented engine. Some quirks and errors need to have solution. All have issue or documentation - that's huge benefit that You stick with nuxt in long rune. 3 Persons work on 5 different scenarios in one company and can have one standard way of "doing it" is our chance to success and have less bugs in front of clients. That's my 5 cents :)