DEV Community: Karl Hadwen

Code Splitting React Router Routes with React Lazy and React Suspense

Karl Hadwen — Wed, 29 Jul 2020 10:11:11 +0000

Recently I've got back to creating side projects, which is actually quite refreshing, albeit, with all the technology options, it can be quite time consuming and daunting to just get started. Anyhow, as I've been working on my own side project (I will post it to YouTube at some point), I've become much more interested in performance, and as I was optimising my application (which I tend to do after, although if I can get some quick wins along the way, great) I thought the first easy win was to just decrease the bundle size.

So how do we go about decreasing the bundle size? Well, the first quick win, if you're using client-side rendering that is, and of course React Router (this does not work with SSR), is to simply split your routes--basically get rid of anything that isn't directly used on the page the user is visiting.

Here's an example...

A user visits your homepage and let's say the user downloads your initial bundle which isn't cached at around 320kb, well what is in that bundle for it to be 320kb? Turns out you have 5 additional 5 routes in there (that aren't being directly used)...so what do we do with those additional 5-page routes that aren't currently being used on the homepage? The answer is simple, we get rid of them! 🗑️

Karl, but what exactly is code splitting?

Code splitting is basically the removal of code that the user does not need right now. Prime example...the user visits your website and the browser downloads the JavaScipt bundle file which includes the following:

Home, sign in, sign up, faqs, docs

It's clear that we don't need sign in, sign up, faqs, docs right now, so we can just remove them from the initial bundle, lowering our bundle size!

Lowering our bundle size is great because it means our website will load faster and if you're not caching the JS file downloads, you're probably saving your users from having to pay extra for data if they're on mobile!

Only ship the minimal amount of code to the browser to render the page the user is on!

Okay, that's all well and good, but how do we do that?

Enter dynamic routes, React Suspense and React lazy!

Let's say you have a basic React router setup like so:

<Router>
    <Switch>
        <Route path="/sign-in">
            <SignIn />
        </Route>
        <Route path="/sign-up">
            <SignUp />
        </Route>
        <Route exact path="/">
            <Home />
        </Route>
    </Switch>
</Router>

This looks normal, right? Well, it is. Unfortunately, if you look in the dev tools and take a look for your bundle file (take a look, I'm sure you'll be able to find it!), do a search for the contents that are within sign in or sign up. If you have 'username', or 'email address' within the sign in or sign up pages, search for it within your bundle, and you will see it's in there!

We don't want it to be in there because we're not using it right now!

Of course, don't forget your imports:

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import SignIn from './pages/sign-in';
import SignUp from './pages/sign-up';
import Home from './pages/home';

Time to start cleaning this up & to use Dynamic Imports

Even though we just imported our pages (components) above, we want to restructure them to be the following (removing our regular imports and brining in Suspense!):

import React, { Suspense } from 'react';
const Home = React.lazy(() => import('./pages/home'));
const SignIn = React.lazy(() => import('./pages/sign-in'));
const SignUp = React.lazy(() => import('./pages/sign-up'));

What we just did is essentially we converted our regular imports into dynamic imports, which means we have dynamically converted our imports and they're ready to be used as a React component (using React.lazy), there is one caveat...

React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.

The lazy component should then be rendered inside a Suspense component, which allows us to show some fallback content (such as a loading indicator) while we’re waiting for the lazy component to load.

You can read more about code splitting from the React docs here. Basically what a dynamic is saying (in layman terms) is...when you're ready for me to be used, call me!

As the docs state, if we want to use React.lazy, we must use Suspense! Let's go ahead and change our code a little and basically just wrap our React router routes with Suspense!

<React.Suspense fallback={<p>Loading...</p>}>
  <Router>
    <Switch>
      <Route path="/sign-in">
        <SignIn />
      </Route>
      <Route path="/sign-up">
        <SignUp />
      </Route>
      <Route exact path="/">
        <Home />
      </Route>
    </Switch>
  </Router>
</React.Suspense>

As you can see I've provided a fallback of <p>Loading...</p>, that's just me being lazy (no pun intended). To quote the React docs again...

The fallback prop accepts any React elements that you want to render while waiting for the component to load. You can place the Suspense component anywhere above the lazy component. You can even wrap multiple lazy components with a single Suspense component.

Lastly, it's now time to change our Route to something a little different. Remember above when I spoke about calling the dynamic import so we can use it? Well, let's do that!

Change the above code to match the following and you're good to go!

<React.Suspense fallback={<p>Loading...</p>}>
  <Router>
    <Switch>
      <Route path="/sign-in" render={() => <SignIn />} />
      <Route path="/sign-up" render={() => <SignUp />} />
      <Route exact path="/" render={() => <Home />} />
    </Switch>
  </Router>
</React.Suspense>

And that's pretty much it, go ahead and check that pesky bundle file now and you'll see there's no sign in or sign up contents in there, but when you visit the sign in or sign up pages, you'll see in the network tab that it pulls through the contents in an additional JavaScript file!

A quick few notes...this method doesn't work with server-side rendering (I don't believe), but React Loadable does, so check that out!

Furthermore, you have to make sure you have exported your components as a default export! To quote the docs...

React.lazy currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that tree shaking keeps working and that you don’t pull in unused components.

If you’re using Create React App, Next.js, Gatsby, or a similar tool, you will have a Webpack setup out of the box to bundle your app.

That's code splitting 😀

There's much more you can do for performance increases and I strongly recommend taking a look and doing your own research. Not only is it really interesting but in the world of JavaScript, it's something we should take seriously!

For more advanced performance tips, consider following Ivan Akulov on Twitter, he's a performance genius and I basically steal all his tips 😀

I have created a more in-depth tutorial around this on my YouTube channel - considering giving it a watch, or simply skipping to the end if you just want the solution!

🎥 If you enjoyed this post, please consider subscribing to my YouTube channel where I post React, JavaScript, GraphQL videos, and of course quick tips! I'm also on Twitter - feel free to @ me with any questions!

Node.js WebSocket Tutorial - Real-Time Chat Room using Multiple Clients

Karl Hadwen — Mon, 27 Apr 2020 19:00:18 +0000

WebSockets don't have to be scary! Let's create a multi-client real-time chat room together!

We are going to be using the following packages for this tutorial:

WS: https://github.com/websockets/ws
Express: https://github.com/expressjs/express

WS is simple to use, blazing fast and thoroughly tested WebSocket client and server for Node.js -- their words, not mine...although I am partial to agree as it works fantastically!

Install our dependencies

yarn add express ws

If you are using npm, you can install the dependencies that we need for this tutorial by using npm install express ws

Your package.json should now look like this:

{
  "name": "rtm",
  "version": "0.0.1",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "ws": "^7.2.5"
  }
}

Don't worry if your version numbers on the dependencies are different, the authors of the packages could have updated the modules and thus resulting in the version numbers increasing.

Creating our `server.js` file

const express = require('express');
const http = require('http');
const WebSocket = require('ws');

const port = 6969;
const server = http.createServer(express);
const wss = new WebSocket.Server({ server })

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(data) {
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(data);
      }
    })
  })
})

server.listen(port, function() {
  console.log(`Server is listening on ${port}!`)
})

There isn't that much going on here, but it would be great to walk through the code line by line to figure out how this works exactly. If you get the idea as to what's going on here, great! If not, check the detailed overview below 👇

Creating our `index.html` file

<h1>Real Time Messaging</h1>
<pre id="messages" style="height: 400px; overflow: scroll"></pre>
<input type="text" id="messageBox" placeholder="Type your message here" style="display: block; width: 100%; margin-bottom: 10px; padding: 10px;" />
<button id="send" title="Send Message!" style="width: 100%; height: 30px;">Send Message</button>

<script>
  (function() {
    const sendBtn = document.querySelector('#send');
    const messages = document.querySelector('#messages');
    const messageBox = document.querySelector('#messageBox');

    let ws;

    function showMessage(message) {
      messages.textContent += `\n\n${message}`;
      messages.scrollTop = messages.scrollHeight;
      messageBox.value = '';
    }

    function init() {
      if (ws) {
        ws.onerror = ws.onopen = ws.onclose = null;
        ws.close();
      }

      ws = new WebSocket('ws://localhost:6969');
      ws.onopen = () => {
        console.log('Connection opened!');
      }
      ws.onmessage = ({ data }) => showMessage(data);
      ws.onclose = function() {
        ws = null;
      }
    }

    sendBtn.onclick = function() {
      if (!ws) {
        showMessage("No WebSocket connection :(");
        return ;
      }

      ws.send(messageBox.value);
      showMessage(messageBox.value);
    }

    init();
  })();
</script>

How does the code work?

Showing the final code is great, but how exactly does it all connect and work together? Fine, you win! Let's go ahead and dissect the server.js file!

const express = require('express');
const http = require('http');
const WebSocket = require('ws');

const port = 6969;
const server = http.createServer(express);
const wss = new WebSocket.Server({ server })

So here what's going on is we are just doing the usual requires, we pull in express, ws and you might have spotted http as well. We use http so we can initialise a server, and we pass express in there like so: const server = http.createServer(express); along with setting the port to 6969. Lastly, we assign the new WebSocket to wss.

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(data) {
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(data);
      }
    })
  })
})

Next, we listen for a connection on our newly initialised WebSocket by doing wss.on('connection', function connection(ws) { - I named this wss to remind myself that this is the WebSocket Server, but feel free to name this as you like.

Once we have the connection, we listen for a message from the client, next, you'll see that we have a function called incoming, this function gives us data which is the users' messages from the front-end (we will come to the front-end part shortly); we will use data later on to send it to all the connected clients.

So now we have the data (the messages), sent from the clients, we want to broadcast that message to each client (apart from the sending client). Next, we run a forEach loop over each connected client, and then we use an if statement to make sure that the client is connected and the socket is open--an important aspect of this if statement is that we are also checking that we are not sending the message back to the client who sent the message!. If that statement comes back as true, we then broadcast the message using: client.send(data);.

server.listen(port, function() {
  console.log(`Server is listening on ${port}!`)
})

Lastly, for the server.js file, we just listen on our port that we set above--this is just standard Express!

Okay, phew we're done with the server.js file, now onto the index.html file.

<h1>Real Time Messaging</h1>
<pre id="messages" style="height: 400px; overflow: scroll"></pre>
<input type="text" id="messageBox" placeholder="Type your message here" style="display: block; width: 100%; margin-bottom: 10px; padding: 10px;" />
<button id="send" title="Send Message!" style="width: 100%; height: 30px;">Send Message</button>

Here we're creating a box so we can see our messages that are sent from the clients (as well as our own sent messages), secondly, we then create an input that allows the user to input a message, and finally...we create a button that allows a user to send a message!

I'm going to presume you already know what the script tags do, but what does (function() {})() do? Well, that's an immediately invoked function! An immediately invoked function expression just runs as soon as it's defined. So as soon as we call define this function, we invoke the function--basically we run it.

const sendBtn = document.querySelector('#send');
const messages = document.querySelector('#messages');
const messageBox = document.querySelector('#messageBox');

Here, we're just selecting our button, messages, and input DOM elements. Once we've got those selected, we go ahead and create an empty expression let ws; we need this later on.

function showMessage(message) {
  messages.textContent += `\n\n${message}`;
  messages.scrollTop = messages.scrollHeight;
  messageBox.value = '';
}

Here what we're doing is just having a function that we can call when we pass it a message, it just goes in and uses the messages selector, adds the text and then we clear the sent message from the user's message box.

function init() {
  if (ws) {
    ws.onerror = ws.onopen = ws.onclose = null;
    ws.close();
  }

  ws = new WebSocket('ws://localhost:6969');
  ws.onopen = () => {
    console.log('Connection opened!');
  }
  ws.onmessage = ({ data }) => showMessage(data);
  ws.onclose = function() {
    ws = null;
  }
}

The init function is basically built so that we can separate out our implementation of the connection to the server. What we do is we check if there's a connection already for the user if there is a connection, we go ahead and null the connection and then close it. Following that, if the user doesn't have a connection, we initialise a new connection to the server ws = new WebSocket('ws://localhost:6969');.

Once we have a connection to the server, we simply console.log a message that states we have successfully connected to the server.

ws.onopen = () => {
  console.log('Connection opened!');
}

Following the above, we then proceed to check for a message. If there's a message we pass it to showMessage, and we then add it to the chatbox by using our function that we created earlier. Lastly, if the connection closes, we just null that particular connection by using ws = null;.

Furthermore, we then find ourselves at the sendBtn part of the code, now this is quite self-explanatory, but let's make sure we fully understand what is going on here.

So we have sendBtn.onclick, which is our trigger to send a message. We first check if there's currently not an active web socket connection by checking if (!ws). The reason we do this is that we don't want to try to send a message if there's no web socket connection. If there isn't a web socket connection, we just return No WebSocket connection :(. If there is a web socket connection, we fire the message to the server with ws.send(messageBox.value), we then show the message in our message box.

And lastly, the most important part, we run our init function by invoking it with init();.

And we are done!

To run the server, just use yarn start and you should see Server is listening on 6969!. Then if you go ahead and open up index.html in your browser (try it in 2 different browsers), you'll see that if you send a message in one of the windows, you'll get the sent messages to appear in all your open browser connections!

🎥 If you enjoyed this little tip, subscribe to my YouTube channel where I post React, JavaScript, GraphQL videos--and of course quick tips! I'm also on Twitter - feel free to @ me with any questions!

Setup ESLint, Prettier & Airbnb Style Guide in under 2 Minutes

Karl Hadwen — Sat, 25 Apr 2020 15:50:07 +0000

Quit fighting with ESlint & Prettier

We've all been there...we have just started a new project and we need ESLint and Prettier integrated, and before you know it you're one hour deep into Googling why ESlint and Prettier aren't playing nicely together.

But what about installing all the packages that I need? This will do it for you! You'll get the following out of the box:

eslint prettier, eslint-plugin-react-hooks, eslint-config-airbnb, eslint-plugin-jsx-a11y, eslint-plugin-import, eslint-plugin-react babel-eslint

Installation

Navigate to your app directory where you want to include this style configuration.

cd myapp

Run this command inside your app's root directory. Note: this command executes the eslint-prettier-config.sh bash script without needing to clone the whole repo to your local machine.

exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/karlhadwen/eslint-prettier-airbnb-react/master/eslint-prettier-config.sh 2> /dev/null)

(Optional) Zsh Alias

alias install-eslint="exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/karlhadwen/eslint-prettier-airbnb-react/master/eslint-prettier-config.sh 2> /dev/null)"

And we're done, it was that simple!

I recommend forking this (as I did from: https://github.com/paulolramos/eslint-prettier-airbnb-react (thanks for the awesome script, Paulo) and modifying eslint-prettier-config.sh - now each time you integrate ESLint & Prettier, you'll have an up to date configuration integration!

🎥 If you enjoyed this little tip, subscribe to my YouTube channel where I post React, JavaScript, GraphQL videos--and of course quick tips! I'm also on Twitter.