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:
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.
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...
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.
Top comments (5)
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:
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!
We use NUXT as main engine. Why and what const and pros we have from our point of view?
poaand 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.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.
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!