Here we go with the last digest of 2020, which is meant to cover the major updates and the most interesting news, articles, and tutorials from the JS world published in December. We hope that you have enjoyed this year despite how hard it has been. 

December was rich with performance articles, so we can start a new 2021 with fast and efficient results!

News

JavaScript turns 25

JetBrains collected and issued the visualization of the history of JavaScript development, its ecosystem, and the web technologies timeline in general. It is pretty curios that already two with a half decades have passed since Netscape's Brendan Eich began work on a new scripting language. The first version was ready in 10 days and was tentatively named Mocha. Later, it was renamed to LiveScript, and then to JavaScript.

jetbrains.com

Firefox 84 released 

This time, the release is small, but with useful improvements:

  • Firefox 84 introduces native support for Apple processors, which results in a twice as fast run of Firefox’s native assembly.
  • The CSS pseudo-class: not () now supports complex selectors.
  • Support for the Paint Timing API has been added to get detailed information about the time taken to create a page, which can be useful for analyzing and monitoring performance.
  • All resources loaded from the localhost, regardless of their URL, are considered loaded in a secure context.

mozilla.org


Security

Kontra OWASP: 10 interactive exercises

Kontra has created a series of interactive exercises to help explore top web application security threats as well as identify and mitigate security vulnerabilities. For developers, it is definitely worth checking. Impressive UI will make the experience flawless.

application.security


Refactoring

100+ frontend microservices migration experience of Lyft

Here, you can learn how Lyft engineers after rapid team expansion and system extension to more than 100 front-end services, found themselves bogged down troubleshooting cryptic build errors and generally having the system productivity sapped by support requests. 

The article describes the problems the team wanted to solve, the reasons why they weren't happy with the old infrastructure, and what bottlenecks they faced during the migration.

eng.lyft.com

From callback hell to callback heaven

This is a handy article about the well-known issue of callback hells with a fresh view on how it could be transformed and refactored. A little spoiler: it is possible not only with async/await but with a custom solution of flattened utility, written by Eugene Ghanizadeh in the blogpost.

dev.to/loreanvictor


Frameworks

Inertia - a new way of building single-page apps without building an API

Even though the developers would argue that it’s not really a framework, it is put into this section because of the approach introduced in it and the practical usage.

Inertia.js takes a new approach to web development by linking the classic back end (routing, controllers, permissions checking, and the like) to React, Vue, or Svelte. As a result, you will get a SPA-like UX without the inherent complexities of SPA.

inertiajs.com

Zero-Bundle-Size React server components

React developers have introduced a new feature - a non-interactive React component with a .server.js extension. It runs entirely on the server-side, allowing it to query a database or read a file from the server's file system inside of the component code. Another important feature of server components is that their code is not included in the client application bundle.

So far, server components are an experimental feature under active development, but you can already experience it and share your feedback in the RFC.

reactjs.org

Performance comparison of modern Javascript frameworks and libraries

Ryan Carniato, the author of the Solid.js library, has compared the performance of popular JS frameworks and libraries.

He has divided all the frameworks into four groups and got some intriguing results:

  • In the group with a slight emphasis on performance, Alpine, Marko, and React have taken the highest places on average ranking.
  • Riot, Preact, and LitElement have ranked first in the group with a strong focus on performance.
  • In the group with a very high emphasis on performance, HyperApp, Svelte, Elm have shown the best results.
  • In the group with the highest emphasis on performance, Solid.js has won with a narrow gap, followed by Inferno.

Instead of a conclusion, it would be most appropriate to note that Virtual DOMs are not guaranteed to be slow, and compilers aren’t guaranteed to produce the smallest bundles. Hence, it all depends on your solution.

medium.com/javascript-in-plain-english


Tools

Headless browser tools: speed comparison

Checkly team decided to run their own benchmarks to compare Puppeteer, Playwright, and WebDriverIO by using Selenium and the DevTools automation protocols. In particular, the results are presented for both a demo website and a real-life web application. Should you be willing to know who's the winner - check out the article!

blog.checklyhq.com

Snowpack - a frontend build tool for the modern web

Snowpack is a front-end builder for modern browsers that requires virtually no configuration and is an alternative to heavier and more complex bundlers like Webpack or Parcel in your development workflow.

The mentioned capabilities:

  • a fast build and caching of its results
  • HMR and Fast Refresh support for better development
  • support for JSX, TypeScript, CSS modules, JSON, images (SVG / JPG / PNG / etc) and WASM out of the box
  • optimization for the production build
  • extensibility through plugins (you can connect Babel, Sass, and others)
  • routing setup for the development server
  • JS API for the programmatic launch of the bundler

snowpack.dev

Hotwire - new approach to build modern web with just a little bit of JavaScript

David Heinemeyer Hansson, an author of the Ruby on Rails web framework, introduced Hotwire, an alternative approach for creating SPA-like applications used to create the hey.com email client.

Hotwire provides a set of three libraries - Turbo, Stimulus, and Strada - for building modern web applications without focusing on JavaScript. One of the core libraries, Turbo, integrates a back-end that sends rendered HTML for updated parts of the application instead of JSON, and a client that subscribes to updates from the back-end via a web socket and replaces parts of the application with the arrived pieces of HTML code. Stimulus leverages HTML in order to add behavior and state to the page. Strada, which is coming out in 2021, will be in charge of handling hybrid apps and manage its communication inside.

That's quite an interesting experiment worth trying out.

hotwire.dev


CSS

Bold on hover without the layout shift

Because of the bold text which is often larger and takes up more space, sometimes it makes a difference whether the layout remains the same, e.g. in horizontal rows. Here is a small but useful tip from Chris Coyier for making good UI.

css-tricks.com

UX improvement with correct font CSS settings

Matt Hobbs talks about the nuances of using the font-display CSS property for performance and UX. 

The article attempts to answer the question, how to use the font-display property to improve the user experience. From the point of view of content rendering speed, the values swap, fallback, optional ​​are the most beneficial and have their particular advantages in different conditions, described in the post. 

Matt writes that the UK government website he was working on uses font-display: fallback to prevent users from experiencing a sudden shift in content.

calendar.perfplanet.com

CSS filter editor

A useful tool for editing images using CSS has been discovered. It is available for use with both ready-made presets and manually adjusted ones. You can update the filters by moving the desired sliders. After that, simply copy the result code and paste it into your project.

codepen.io


JS

Core concepts of memory management in JavaScript

Although the JS handles loads of memory management itself without interrupting a usual developer, sometimes, there appears to be a memory leak after the lingering search of application inappropriate behavior. The post by Felix Gerscha has shed some light on how memory management works in JavaScript and explains it step by step from memory allocation and garbage collection to leaks in the hope of decreasing the time for future debugging.

felixgerschau.com

Modern JavaScript is important for faster applications - check out why

At the last Chrome Dev Summit, Houssein Djirdeh and Jason Miller talked about using JavaScript code with modern syntax. The article based on that speech can be partly treated as performance-wise, but it mostly describes the modern JS attitude.

Many projects by inertia use transpilation of new JavaScript features in ES5, which leads to suffering performance in modern browsers. Transpilation to ES5 is only needed for older browsers, which are used by 5% of users.

The article explains in detail how to deliver different versions of bundles for modern and older browsers using Webpack and Rollup along with tips on how to publish npm packages with modern syntax. In addition to this, a new service EStimator.dev was announced, with the help of which you can evaluate the increase in site performance from switching to modern syntax.

web.dev

JavaScript estimator


Performance

What makes the web slow

There is an article about analyzing the performance of a million sites

based on various factors, like the version of HTTP used, the number of requests per page, the libraries, etc.

It may be inquiring that over the most common libraries, jQuery still comes first to be used. Besides, it ranks in the top libraries influencing TTI the most.

catchjs.com

 Why Google Cloud Console always takes much time

The Debugbear blog has posted a study on Google Cloud UI performance issues. Google Cloud is a SPA written in Angular, and the main page content appears six seconds after the page starts loading. In a nutshell, Google Cloud uses only 50% of all the uploaded code at the time of page initialization. Also, the same components and configuration code are duplicated in different bundles. This article investigates the performance of the large JavaScript application and explores how you can speed it up.

debugbear.com

CSS-in-JS: how it affects performance and ways of improvement

Dominic Tobias wrote an article on approaches to improve CSS-in-JS performance. Previously, a study was published on Planet Performance with disappointing results: popular CSS-in-JS libraries that inject styles (Styled Components, Emotion) on the page at runtime affect the performance of complex pages.

To improve performance, the author suggests using CSS-in-JS libraries that can extract styles from JS at compile-time. Also, he advises using CSS variables for theming and recommends abandoning dynamics in styles if possible.

dominictobias.medium.com

The import-on-interaction pattern or why to lazy load resources

Addy Osmani wrote an article on improving website responsiveness using the import-on-interaction pattern. To improve the overall performance, you can load the minimum required code, e.g. to load third-party widgets only after the user scrolls down to them or interacts with them. You can load the pieces of the main application in the same way, and the article demonstrates how to do this with React or Vue.

addyosmani.com


Node

AWS Lambda now has container image support 

AWS Lambda is a serverless platform where you upload code, and then it can be executed on the "pay as you go" basis. The container's support might feel better to many developers wary of Lambda’s usual “upload a ZIP file” approach. The article contains pretty detailed instructions on how to go with Lambda and Docker images using Node.

aws.amazon.com

Node application deploy to AWS Fargate with auto-scaling

There is one more useful article about Node and AWS stack. If you feel that AWS Lambda isn’t for you, maybe AWS Fargate could get you running "serverlessly" without a huge paradigm shift. 

AWS Fargate is a serverless compute engine for containers that removes the need to provision and manage servers. In addition, it improves security through application isolation by design. In the publication, Matthew Kindzerskehelps helps you figure out how to deepen fast.

matthewkindzerske.com


Final Thoughts

As a final note, there has been found a funny and a sacral place for all JS developers -Javascriptlandia. Intrigued? Sure, it is a new foundation's initiative that allows the passionate fans and contributors to help fund and maintain the JavaScript ecosystem. Also, as per guys from Foundation, they even planned to acquire a private island and certify it as a nation-state so that they could start giving out top-level .js domains