Best Frontend Options for a Better Performing Website
By: Samuel Martins
Tags: Web Development, Software Development, Front End Development, Technology, SEO

Vanilla JS

The rise of frameworks has made developers shy away from using vanilla JS. When I say vanilla JS, I do not necessarily mean JavaScript in particular. It could be TypeScript compiled to JS. What I mean is removing the framework from what gets downloaded to the customer. I mean, I hear a lot about frameworks not being heavy, which is true. They are not heavy but the time lost is usually because the CPU has to go through all the work of parsing it and compiling it on the client-side, especially on these tiny little phones. Another thing we can do is defer or delay the execution of the JavaScript code on the client.

Concurrent Mode in React

If you thought React hooks were a big deal, concurrent mode is an even bigger deal. Concurrent mode is about baking better support for asynchronous behaviour, right into the framework itself. I mean interruptible rendering, transitions, suspenses e.t.c Facebook has done a lot of work in trying to figure out what perceived performance feels like to the consumer and then building that support for creating UIs that do that, right into the framework itself. I think we are going to see other frameworks start to go that way as well. For example, Vue has gone into getting kind of React hooks with Vue.use(). Is it possible to do all that without the framework though? Like actually not have a framework on the client at all? Yes. It can be made possible with custom elements and web components.

Custom Elements and Web Components

Did you know that there is a component-based “framework” built right into the browser itself? That is what custom elements are. That means that you can use components on the client-side without losing the milliseconds/ to bring down your framework code. That is a huge performance boost right there because you are avoiding the compilation and parsing phase that I talked about before. A lot of sites out there are using custom elements including YouTube. If it is good enough for Google and YouTube, it might be worth checking out, don’t you think?

One way to think about custom elements is that they are portable components, meaning that you can reuse them in different contexts. Like if you have a button and a carousel as part of the design system language of your site, you can reuse those in your React, Vue, and Angular code. So that is less code that you have to write in React, Vue, and angular, and you get more consistency because it is always the same across all three. Another use for custom elements is micro frontends.

Micro Frontends

Think about micro frontends as breaking down your page or site into sections like header, footer, product display e.t.c I do not mean little components that are put together, but big chunks of functionality. So high-level components that may work together, or share a little data, but mostly work on their own and can be versioned and deployed independently. Another thing is that you can use different languages to develop them. For example, one of your components could be in vanilla JS if it is not that complex, another could be in React if there is a lot of specific complexity in its behaviour.

The JAMstack

I am not really going to write much about this here because I have done an in-depth article on what it is all about. I really recommend that you look at it.

With JAMstack, You do not have to worry about servers. You do not have to worry about monitoring them. You will get much better latency because when you deploy them with S3, particularly on a CDN, the customers are getting access to your code right there within just a few network hops.

What I am trying to say is that it all comes down to being smart with the tools that we have to get better performance. We have browsers now that can manage and handle their own components with custom elements, we’ve got CDNs ( content distribution networks) which can put our code out there within a customer’s reach. We have micro frontends. This means that you can go and construct the page and independently deploy in version parts of the page. When you use frameworks, you are going to have expanded support for interruptible rendering, which is going to make them feel a lot more performant than they have in the past.