Why React, or any JS frontend for that matter?

Why JS frontend frameworks or libraries?

One of the biggest questions I get asked is why do we need frontend JavaScript libraries, or in Angular’s case even the backend. *Why go to all that trouble?
Can’t you just make a regular website with an MVC framework and use JavaScript for interactive things such as forms and buttons?

*React et al have a steep learning curve, but once you know it, it becomes even quicker to make up your website with reusable components.

Yes. You can keep using MVC frameworks, and ignore React, Vue, AngularJS and the many others taking the internet by storm, as they have better compatibility with older browsers – but here are some compelling reasons as to why this is happening. I will focus on React though, as I have the most experience in it by far compared to the others.

DOM reflects the state

DOM or Document Object Model is the structure of any browser rendered web page. It’s what you get once the browser has successfully parsed all of the code I tell it to parse. It looks very much like HTML. Well, it is HTML. But long ago, people figured HTML just won’t cut it for websites, so here we are and the DOM is now being rendered by a huge number of different languages which ultimately boil down to HTML, but allowing you to do cool stuff such as use variables or write programming logic in the page.

Enter React. React uses JSX which is a peculiar (but awesome) blend of HTML and JavaScript.

One of the nicest things you’ll find when using React is that the proper pattern is to create your state, which can be as simple as “isToolbarShown: 0” and then in the render method you reflect the state.

{isToolbarShown === 1 && <Toolbar />}

That’s a basic use case for the DOM reflecting the state. Now if you toggle the isToolbarShown variable to 1, the Toolbar component will be displayed without any need for manual JavaScript DOM manipulation.

This means it becomes incredibly easy to know what’s shown and when. It can quickly become a garbled mess if you are adding or removing elements manually. On top of that, it takes a long time to write by hand.

Other use cases can get a lot more complex than that. Imagine an array or list of items, and you want to display them all. Ok, done. Now add another. A bit manual with regular JavaScript. Remove one. Same again, manual. In React we would simply output the list via the .map() function and then manipulate the data. Easy.

Super fast page transitions

Have you ever noticed? Go ahead, try it out. If you go from one page to another on this website, the screen doesn’t even go blank. The browser doesn’t even do that little loading icon. It feels instantaneous (particularly if you have cached all of the images).

That is React being extremely clever and comparing the DOM of the target page with the current DOM. It notices that the navbar at the top is going to be the same as this one, and decides to keep using it. The same with the footer, and any elements which are identical. This technique is referred to as DOM Recycling.

Another reason why this site is fast is the smart preloading Gatsby does in the background. It knows when any links are visible on the screen currently and quietly loads the destination pages of those links. Then, if you do decide to click on them, there is no call to the server to fetch the information, because it’s already right there in your device’s memory. That speeds things up tremendously.

Imagine you are about to order at a restaurant, but the chefs have already prepared one of everything just in time for when you arrive. You can’t get that at your local Italian, you can only get that with client-side JavaScript.

You can do some very complex things in a fraction of the time

I recently made a Tetris game in React just for fun and to test myself. It came out okay – wasn’t perfect. You can check it out on my portfolio page. The key thing I learnt was that if I was to do this in standard HTML, CSS and JS, I would be there for weeks just developing it. Instead, it only took me half a day altogether. That’s all because React handled all of the busywork DOM manipulation and allowed me to simply declare an array of 1s and 0s and then move the values around and perform a series of checks as I go.

A huge eco-system is just an import away

Importing new functionality into your React application is extremely simple thanks to the Node Package Manager or Yarn. There are packages which give you prebuilt elements such as Parallax scrolling backgrounds or Navbars. There are packages which implement scripts such as Google Analytics, Tag manager and there are packages which are sort of crucial to most apps such as Redux or similar state management and Babel for transpiling ES6 javascript syntax down to a form that all or most browsers can digest.

That can all be very overwhelming to newcomers, but the good news is that most packages you download can be very easily included in your app. Take the example below from my site.

import Sticky from 'react-sticky-el'

<Sticky
        topOffset={0}
        className="waitingBarTop container-fluid px-0 nav-bar"
        stickyClassName={'stickyBarTop'}
      >
/* Your code for a navbar */
</Sticky>

In the above, we’re importing the library react-sticky-el which does the same thing as position: sticky in css, but also triggers an event when the element becomes sticky. In this example, it applies a class once the navbar hits the top of the screen. I’ve applied some styling to the class to make the background dark. You can test this out by viewing the home page and scrolling until the navbar turns dark and sticks to the top.

How easy was that?