Less Javascript, more HTML and CSS
Tags: javascript, webdev, html, css
Published: 2020-10-29 17:26:55

I'm a big fan of modern Javascript frameworks. I use them every day and they make development fun again (even if you dislike Javascript!). However, more and more Javascript is something that is making me increasingly uncomfortable. For a number of years now, I've been worried about web obesity. I'm not alone [https://idlewords.com/talks/website_obesity.htm](https://idlewords.com/talks/website_obesity.htm)

We use Javascript for everything! As cool as it is, it's not good for our front-end health.

Maybe I'm old school but I remember when Javascript was used to sprinkle web pages with interaction and other loveliness not available in HTML and CSS. This kept web pages lean, mean and Javascript to a minimum.

## Less Javascript

As I said modern Javascript frameworks are amazing to work with but I've seen them used badly. This results in bloated web applications. It is common to see web apps that are over 2 MB in payload - even after tree-shaking!

This is in part due to the awesomeness of NPM. NPM seems to be a default for many developers looking to solve problems with a library and not considering the extra payload it will add to their applications. NPM packages are primarily for NodeJS and although many do provide browser bundles, often these are transpiled using polyfills and other unnecessary code to make them compatible with all browsers.

In a recent internal hackathon, an open clinic was set-up to allow developers to ask front-end questions at the start of their hacks. One question was asked more than any other "how can I use this NPM package I've found in my hack?". One of the limitations of the hack was that build tools were not allowed - no Webpack, no Rollup, no transpilation - just pure HTML, CSS and Javascript in the browser. Are developers lacking the understanding of how web applications run in the browser?

Progressive Web Apps (PWAs) are web applications that have been designed so they are capable, reliable, and installable. They are meant to be lightweight and fast - to feel like native applications in the browser. PWAs are an excellent set of principles for developing any web application. Performance is key in providing a great experience in your application. Too much Javascript can easily degrade the performance of your application.

## More HTML

Whilst it is easy to fall into the trap of using Javascript for everything, it bloats unnecessarily.

Component based frameworks are amazing but they ultimately mean more and more javascript. Javascript is needed to generate HTML, Javascript is needed to provide user interaction, Javascript is needed to do all the things.

HTML has a rich set of elements for building modern web applications. Using more HTML and sprinkling Javascript where required will result in less Javascript. Less Javascript means more lightweight, fast web applications.

Use of more HTML elements for creating the application shell - navigation, menus, page structure means that Javascript is reserved for the areas where it is needed - a form, a data grid, a tree view.

Web components, whilst Javascript, provide a very lightweight way to extend HTML and provide baked-in solutions for common component problems. Web components can provide a way to implement common UI elements like tabs, dialogs and dropdown menus that work across all modern javascript and server-side frameworks.

## More CSS

Styling web applications can be tricky and there are some great solutions for developers out there. Unfortunately, many of these rely on Javascript - all adding more and more Javascript bloat. Is this really necessary?

Being able to style components and enhance them in a progressive way can all be done natively with CSS. Using modern features like CSS variables and taking the time to split CSS into per page (or route) styles can lead to good web application performance.

## In summary

The governing body for professional cycling in Great Britain,  hired Dave Brailsford in 2003 as its new performance director. At the time, professional cyclists in Great Britain had endured nearly one hundred years of mediocrity. Since 1908, British riders had won just a single gold medal at the Olympic Games, and they had fared even worse in cycling’s biggest race, the Tour de France. In 110 years, no British cyclist had ever won the event.

Brailsford had been hired to put British Cycling on a new trajectory. What made him different from previous coaches was his relentless commitment to a strategy that he referred to as "the aggregation of marginal gains" which was the philosophy of searching for a tiny margin of improvement in everything you do.

This philosophy works well for web application development. In particular, addressing the issue of bloated web applications that have too much Javascript.

We need a new trajectory in front-end web apps; More HTML, CSS, Web components and a little Javascript.

Just imagine how better the user experience will be.