January 2022 Frontend Updates: Next Gen Tooling, Server Side Rendering, latest React Conferences and more!

The first of a monthly series of posts with compilations of the latest news and trends in the frontend development space. New year, new tools, new habits!

Things are moving fast in the web development world, and there are always new things to learn and exciting software about to emerge. This is not an exhaustive list, but a monthly compilation of some of the most interesting things we saw in the wild. Hope you like it!

Vite: Next Generation Tooling

Before ES modules, there was no way to write JS in a modularized fashion. Over time, bundlers were born to overcome this problem, and tools like webpack greatly improved the development experience.

However, applications started to grow in complexity, and thus, dependencies in projects grew exponentially. Crawling and processing them can take even minutes in large scale projects.

Vite aims to fix this bottleneck by using esbuild for dependency pre-bundling and native ESM for application code in the dev server. Then, it uses Rollup for the production build. Rather than a new bundler, Vite is a pre-configured build and development environment that leverages the latest web technologies and native-compiled JavaScript tools.

It’s worth mentioning Snowpack here too, which is very similar to Vite in philosophy, but less integrated. That makes it more configurable, but also less feature complete out of the box.

Although Vite has been dubbed to be webpack’s successor, the latter is mature, stable and the de facto standar; it will be around for years to come. But for a new project, it may be a good idea to give Vite a try. Take a look at what they have to say!

Server Side Rendering with Remix

Frontend rendered applications are great; they update without reloading the page and they feel snappy and modern. But they have some major drawbacks: First page load is slower and they are not SEO friendly at all.

Server Side Rendering tries to have the best of both worlds: Initially, the server renders the JavaScript application and serves static HTML, and then, the app takes over on the browser and turns it into a dynamic DOM in a process known as hydration.

While chatting about SSR in one of our knowledge sharing Slack channels, Hugo , software engineer and Whitespectre partner, brought Remix into the fore. Remix is a React based framework that focuses on SSR. It’s not new, but it has recently been open sourced and it’s a really interesting one. Compared to the more popular Next.js , which also supports other hybrid approaches like Static Site Generation, Remix does only SSR, but it embraces modern web standards.

In this interesting article they compare both and teach you how to get started. We think you may like it a lot!

React Conf 2021

Last month one of the most remarkable React conferences took place: React Conf 2021 . It’s organized by Meta and keynotes are free to watch. There were many interesting ones around topics like accessibility with React , on device ML with React Native and developer tooling , to name a few. You can see all the keynotes here .

It was not the only one: ReactEurope took place in november too. Not as big as the latter but worth taking a look!

User Preference Queries

Chrome 96 introduces the Auto Dark Mode , which applies an automatically generated dark theme to light themed sites when the user has opted into dark themes in the OS settings.

It’s a bit scary if you ask me, because we lose control over styles. Although it may work well for some websites, heuristics are not perfect and it won’t always look good.

This is a good time to remember that through user preference queries, you can create proper dark themes for your website:

@media (prefers-color-scheme: dark) 

??/* ... */

}        

This, along with prefers-reduced-motion, are the two only user preference queries that have big browser support, but in the future we can also expect prefers-reduced-transparency, prefers-contrast, prefers-reduced-data, forced-colors and prefers-color-scheme, as they are being defined in the W3C working draft for Media Queries Level 5 .

Anything you’d like to add? Think there is something missing? Ping us on @whitespectrehq or LinkedIn , we’d love to read your feedback!