JavaScript and Web Development InfoQ Trends Report 2020

At InfoQ we periodically update our topics graph to show where we think different topics are in the technology adoption curve. When we do so, we consider the state of practice, emerging ideas and things we hear within our network and at meetups, conferences, analyst events, etc. We also take into account traffic patterns on the site and attendance at sessions at QCon and other industry conferences.

If a topic is on the right-hand part of the graph, you will probably find lots of existing content on InfoQ about it – we covered it when it was new, and the lessons learned by the innovators and early adopters are available to help guide individuals, teams and organizations as they adopt these ideas and practices.

The topics on the left-hand side of the curve are the ones we see as emerging now, being used by the innovators and early adopters, and we focus our reporting and content on bringing these ideas to our readers’ attention so they can decide for themselves whether they should be exploring them now, or waiting to see how they unfold.

The report provides a summary of how the InfoQ editorial team currently sees the adoption of technology and emerging trends within the JavaScript/Web Development space. This is an opinion piece that is formed from extensive internal discussions with our editors, who are active software engineers themselves, reviews of external public survey results, and reviews of internal or private survey and analysis results, as well as looking at the level of browser support for key technologies such as web components.

This month we’re looking at JavaScript and Web Development as this rapidly changing industry requires an update more than once a year. This is how the graph looked for us in Q4 of 2018, when we last reviewed it.

Given how much the JavaScript and web ecosystem have grown, it is no longer practical to have all areas on one graph. As a result, we've now split our analysis into 11 primary areas.

• Web Development Languages / Standards / Patterns
• Web Development Client-side frameworks / libraries
• Server-side platforms / frameworks / data / APIs for Web Engineers
• Cloud for Web Engineers
• Package management / bundling / optimizing
• Web Development testing and automation
• Mobile / desktop environments and frameworks
• IoT / Blockchain / Machine learning for web engineers
• Visualization / XR for web engineers
• CSS
• Web Development Code editors and IDEs

The web development space is always an interesting one for us, with new JavaScript projects launched almost daily. Trying to decide which ones to focus on and which ones to ignore is particularly challenging. Developers can learn and gather inspiration from interesting approaches even if they do not currently use them in their daily development efforts.

Web Development Languages / Standards / Patterns

Innovators

The annual ECMAScript release, ES2020, is approaching with the greatest number of new language features since ES2015, including optional chaining, BigInt, globalThis, nullish coalescing, and dynamic import. All of these features are considered stable with at least two working browser implementations.

PureScript provides an alternative language to TypeScript. There is debate on whether it will progress past innovator status in the near future, though it did score highly in the recent State of JavaScript 2019 survey.

Early Adopters

Looking at our early adopters, we continue to track Flow, a static type checker for JavaScript, and Elm and Reason, alternative languages to JavaScript for generating JavaScript-based web apps. Interest and development of Flow appear to have waned due to the rise of TypeScript, but we're still tracking it should that change.

WebAssembly has perhaps been the most talked-about trend on the web since our last report. Applications for WebAssembly have moved beyond the browser via WASI, and WebAssembly reached a stable 1.0 W3C Recommendation in late 2019. We have thus promoted WebAssembly to Early Adopters status.

Beyond the traditional W3C process, the Web Incubator CG (WICG) continues to propose a wide arrange of new features and possible standards. Web Audio also continues to gather attention in making the web platform viable for a variety of audio applications.

Early Majority

Functional and reactive programming patterns continue to dominate the discussion around how to build JavaScript applications most efficiently. Vue.js founder Evan You explains that even with the project's switch to TypeScript, "Ironically I think TypeScript has helped me more with avoiding classes than using them. Vue 3 is a 100% TS codebase with 0 usage of classes."

Web components have moved from early adopter to early majority status. Web components have reached mainstream maturity and are now supported natively in Chrome, Firefox, Safari, and other browsers based on these browser engines such as Edge and Brave. Numerous frameworks and libraries also support web components natively including Angular, Dojo, Ionic, Stencil, Svelte, and Vue.js.

We have added two items directly to the early majority category: ES2019 and AMP.

ES2019 added the flat and flatMap methods to arrays after the #smooshgate controversy, Object.fromEntries, and a few small improvements to strings and optional catch binding. This relatively small new set of features are now used by an early majority of JavaScript developers.

AMP, an alternative that strives to make the web faster, joined the OpenJS Foundation. While InfoQ has so far resisted adopting it, preferring to use existing open web standards, AMP continues to see adoption, primarily across media and news websites.

Late Majority

As the JavaScript ecosystem matures, there are foundational technologies in the late majority category that show no sign of being replaced, and are used by nearly every JavaScript developer.

HTML5 and ES6/2015 - ES2018 are late majority, as nearly every web application today uses these features as a minimum baseline.

TypeScript graduates to the late majority status as well. TypeScript is by far the most widely adopted JavaScript variant, has made substantial progress over the past few years, and a majority of JavaScript frameworks now leverage its tooling and infrastructure. TypeScript on its own is one of the top 10 languages according to a recent GitHub Octoverse report, and the State of JS survey lists TypeScript as by far the most widely used JavaScript variant, with more than 50% of those surveyed saying they use TypeScript and have a favorable opinion of the superset of JavaScript.

Laggards

We conclude our report with laggards, which while still used in many applications, do not receive significant interest for new development efforts. Newer versions have supplanted ES5 and HTML4, though the underlying features in ES5 and HTML4 still comprise a large set of features found in the latest versions of JavaScript and HTML.

Web Development Client-side frameworks / libraries

The JavaScript client-side framework and library space are constantly changing, and while React, Vue, and Angular have dominated in recent years, a new wave of leaner frameworks and application compilers may change the status quo over the next few years.

Innovators

Vue.js 3 has not shipped at the time of this report but is a highly anticipated rewrite of Vue using TypeScript.

Early Adopters

Dojo continues its path towards delivering a lean, TypeScript-first framework, now on version 6 with version 7 expected shortly. Dojo provides a very modern efficient take on building reactive web applications and strongly embraces TypeScript and developer ergonomics. Dojo is part of the OpenJS Foundation.

Ember recently announced Ember Octane, providing a new component model and reactivity system.

LitElement is the successor to Polymer, providing a JavaScript library for creating lightweight web components.

Aurelia continues to have a loyal following and continues work on creating an environment for building component-based applications.

Marko is another OpenJS Foundation project, originally started at eBay, focused on creating reactive UI components.

Omi by Tencent is a cross-framework component creation library supporting web components, JSX, and other component approaches into a unified library.

Early Majority

Three projects debut in the early majority category.

Stencil by Ionic has become the most popular web component creation framework and similar to Omi, a framework for creating components for use across many frameworks.

Svelte has become a popular alternative to React due to its alignment with HTML, and its approach to being a disappearing framework.

Preact is a small <4KB gzipped alternative to React with API parity to the React library.

Late Majority

Angular graduates to late majority status, with Angular 9 in release candidate status at the time of this report, finally shipping its much anticipated Ivy rendering engine update.

Vue.js 2 also graduates to late majority status, being one of the most widely used JavaScript frameworks today.

React remains the most popular JavaScript rendering library and made updates since our last report with hooks.

RxJS remains a popular reactive extensions library, and is widely used by the Angular ecosystem.

Moment, also part of the OpenJS Foundation, remains the most widely used library for managing date and time issues.

While the need for libraries like Lodash (OpenJS Foundation) is starting to diminish, it is still a widely used library for working with JavaScript. Core-js is also a widely used library for working with modern JavaScript.

Laggards

Dojo 1.x and Angular 1.x, while still widely deployed, are in maintenance mode. jQuery, while receiving some improvements, has mostly been replaced by new HTML and JavaScript features or more full-fledged frameworks.

Server-side platforms / frameworks / data / APIs for Web Engineers

The server-side ecosystem for JavaScript has seen a lot of interest recently. One significant innovation is a move towards server-side rendering, static pre-rendering, and build-time rendering to reduce the JavaScript workload on the client-side without changing the reactive programming models used for today's applications.

The lines are blurring between what is server-side vs. APIs vs. client-side, so this category also includes static generation, data, state management, and API approaches that often get shared between the client-side and server-side.

Innovators

Deno is near a 1.0 release. Created by the original Node.js creator Ryan Dahl, Deno strives to create a TypeScript alternative to Node.js.

Dojo added a build-time rendering approach, making it possible to leverage Node.js features at the time an application is built, enabling a range of capabilities for static site generation. Compared to other solutions, Dojo's approach works on a component level providing a highly reusable approach with blocks for key patterns and features. Additionally, Dojo stores provide a predictable, consistent state container with built-in support for common state management patterns.

Hasura is one of several open-source options for creating GraphQL servers. Per the State of JS 2019 Rising Stars report, interest in Hasura grew significantly in 2019.

Early Adopters

Interest in Koa, a Node.js framework developed by the team that originally created Express, continues to gain interest.

Nuxt is a Vue.js framework that provides server-side rendering, static site generation, or single page apps.

Strapi and Storyblok are two open-source headless content management systems. This area has gained significant interest as organizations strive to provide modern content management options with today's reactive and component-based architectures.

Apollo remains a popular option for GraphQL and originally emerged from the Meteor framework.

Early Majority

Nest.js is a Node.js framework authored in TypeScript that is rapidly rising in popularity due to a wide variety of options and features for enabling full stack TypeScript development.

Next.js is a server-side framework for React applications, supporting server-side rendering, static site generation, and more.

Gatsby leverages GraphQL to get data from various sources and provide efficient rendering options for React-based applications.

Fastify is an OpenJS Foundation project and is an emerging alternative to Express as a high-performance Node.js web framework.

MobX is a state management alternative to Redux that continues to gain adoption.

Late Majority

Node.js remains by far the most widely used approach to running JavaScript on the server-side and is also the foundation for environments like Electron for creating desktop applications with web technologies. Node.js is part of the OpenJS Foundation.

Express remains the most widely used Node.js web framework and is also an OpenJS Foundation project.

While REST remains the most widely used approach for creating APIs, GraphQL has reached significant adoption as a query-based alternative to having all API endpoints defined upfront. It is also common for organizations to leverage REST and GraphQL together in their approach to APIs.

Redux remains the most widely used approach to state management for JavaScript applications, though is being used less in smaller or simpler applications.

Cloud for Web Engineers

A wide range of solutions to help web engineers create and deploy cloud-based applications have emerged.

Innovators

Architect is an OpenJS Foundation project supporting the creation of serverless JavaScript, Python, and Ruby applications.

Early Adopters

AWS Amplify provides a development platform for building mobile and web applications with AWS.

Netlify is one of several popular choices for quickly deploying web applications.

The Azure SDK for JavaScript is growing in popularity in large part because of its flexible IoT and Cognitive Services APIs.

Early Majority

AWS Lambda continues to gain in popularity for running serverless JavaScript functions.

Zeit Now is a popular way to deploy web applications, for static and JAMstack deployment, Serverless Functions, and as a global CDN.

Google Cloud Functions provide the Google cloud approach for running serverless JavaScript functions.

Firebase, another Google offering, provides cloud-based mobile and web infrastructure.

Package management / bundling / optimizing

Bundling, package management, and overall application optimization remain important topics in JavaScript and web application development.

Innovators

pika focuses on providing tooling for JavaScript built with and deployed to ES module supported environments.

Entropic is an early-stage alternative to npm with a more distributed approach to package registration rather than a single federated registry.

Early Adopters

Parcel is an increasingly popular web application bundler. At the time of this report, Parcel 2 is near ready for release.

webhint is an OpenJS Foundation project to complement linting tools for improving accessibility, speed, and cross-browser compatibility.

Early Majority

Prettier is an opinionated code formatter that has ended most debates around code formatting in JavaScript development.

ESLint is another OpenJS Foundation project that provides a rich approach to finding errors and anti-patterns in JavaScript applications. TSLint as a standalone product was deprecated and is now an extension on top of ESLint.

Esprima is a widely used ECMAScript parser to help work with abstract syntax trees and is also part of the OpenJS Foundation.

Yarn is an alternative package manager to npm which leverages the npm package registry.

Rollup is an ES Module bundler created by some of the same team members as Svelte. Rollup is more widely used for libraries and modules whereas webpack gets more commonly used for applications.

Late Majority

NPM is the defacto package manager and registry for JavaScript. npm faced a wide range of controversy in 2019 and the ecosystem may look for alternatives in the near future.

webpack is the most widely used module bundler and code optimizer in the JavaScript ecosystem.

Babel provides a JavaScript transpiler, allowing developers to use newer language features in development but deploy to older variants in production. Babel also recently added TypeScript transpilation, though is of limited utility as it does not offer type checking.

Lighthouse is a widely used automated tool created by Google for improving application code quality and performance.

Web Development testing and automation

There are many options for authoring and running tests in JavaScript. In the interest of brevity, we have excluded analysis of Chai, Sinon, Jasmine, QUnit, Cucumber, and other similar libraries which provide very useful and popular testing capabilities, but we do continue to track advances in these libraries and many other testing solutions.

Innovators

Playwright is a newly released alternative to Puppeteer for browser automation and testing. Unlike Puppeteer, Playwright targets all modern browser rendering environments.

Machine learning-based testing is an emerging area to automate the generation of tests. There is no shortage of companies attempting to solve this problem, including Applitools, SauceLabs, Testim, Sealights, Test.AI, Mabl, ReTest, ReportPortal, and more. There is no clear right answer in this space, but we expect that to change in the near future. Visual AI testing is also emerging as an alternative to traditional visual regression testing.

Early Adopters

Appium is a test automation framework for native, hybrid and mobile web apps using the W3C WebDriver protocol which emerged from Selenium. Appium is an OpenJS Foundation project.

Intern is an OpenJS Foundation project authored in TypeScript for unit, functional (via WebDriver or perhaps with other environments like Puppeteer or Playright), integration, performance, and other types of testing.

Ava is a popular test runner for Node.js applications.

WebdriverIO is an OpenJS Foundation project and provides a functional and integration testing environment based on the WebDriver protocol.

Early Majority

Cypress has rapidly gained popularity as an end-to-end test runner inside Chromium-based browsers that recently added support for Firefox and Edge.

Storybook is part test framework, part design system, part development environment for creating, testing, and sharing UI components.

Late Majority

Jest is a test framework popularized by the React ecosystem and may be the most widely used testing assertion library today.

Mocha is an OpenJS Foundation project and provides a simple and easy to use unit testing library.

Karma and Protractor remain the popular approach for testing Angular applications.

WebDriver, the protocol that emerged from the Selenium project, remains the most common way to interact with browsers for full test automation.

Puppeteer is a Chromium-only browser automation approach that is in many ways easier to work with than Selenium, but its use is limited in both capabilities and in supported browsers.

Mobile / desktop environments and frameworks for web engineers

Leveraging web technologies for building mobile and desktop applications continues to gain in both popularity and options.

Innovators

Ionic Capacitor is an alternative to Cordova which provides finer control over when to leverage web vs. native technologies in the creation of hybrid applications.

Early Adopters

NativeScript provides native application compilation using web technologies for Angular and Vue.js applications.

Early Majority

Ionic 4+ provides a framework and component library for building applications. Originally started as an Angular framework, Ionic is now framework-agnostic with support for React and other frameworks.

React Native allows developers to create native applications leveraging web technologies and patterns found in React applications. React Native and other similar solutions have mixed reviews to date as they work well in some scenarios but remain challenging to use.

Electron is an OpenJS Foundation project for creating desktop applications using web technologies by embedding Chromium and Node.js. Many applications you use everyday leverage Electron such as Slack.

Late Majority

Cordova remains a widely used environment for creating hybrid mobile applications but risks falling to laggard status in the near future.

IoT / Blockchain / Machine learning for web engineers

Options for web technologies within emerging areas such as IoT, block chain, and machine learning continue to grow.

Innovators

ml.js provides a wide range of machine learning tools for JavaScript developers brain.js provides support for GPU-accelerated Neural networks in JavaScript. While TensorFlow.js remains the most widely used machine learning foundation for JavaScript developers, these two libraries provide promising alternatives.

Neurosity has a developer preview of Notion, a modern thought computing and brain wave measuring device. What sets Neurosity apart from alternatives is its JavaScript APIs.

Early Adopters

Moddable and JerryScript are lightweight ECMAScript engine for IoT projects. JerryScript is an OpenJS Foundation project.

Node-Red, also part of the OpenJS Foundation, provides low-code programming for event-driven applications typically in the IoT space.

johnny-five is a popular JavaScript robotics & IoT platform started by Bocoup.

interledger.js is the JavaScript implementation of the Interledger protocol, an implementation agnostic set of standards for ledgers, blockchains, and cryptocurrencies. The project is part of the Open JS Foundation.

Early Majority

TensorFlow.js was started by Google and is currently the most widely used JavaScript package for machine learning.

Visualization / XR for web engineers

Augmented reality, virtual and reality and mixed reality use is gaining popularity in JavaScript.

Beyond d3 and Three.js, data visualization, charting, and other approaches to visualization and rendering are highly fragmented across many projects.

Early Adopters

React 360 provides mixed reality experiences for developers in an approach similar to React.

The WebXR 1.0 recommendation was recently finalized, with work remaining to define augmented reality standards.

BablyonJS provides a 3D visualization and APIs for creating immersive games for JavaScript and TypeScript developers.

Early Majority

Three.js is a low-level API on top of WebGL for 3D drawing in the browser.

A-Frame recently reached its 1.0 release with preliminary support for the WebXR recommendation. A-Frame provides a DOM-based approach wrapping Three.js or native WebXR capabilities.

pixi.js is another WebGL abstraction framework that provides primitives for game development.

Late Majority

d3 is the most widely adopted data visualization library in use today.

CSS

CSS and design have received extensive innovation over the past few years and is many ways almost unrecognizable to the CSS that was authored 5-10 years ago.

Innovators

Algorithmic CSS is an emerging approach to building composable layouts leveraging built-in CSS algorithms.

Early Adopters

CSS Houdini is an emerging approach to accessing the CSS engine to extend CSS by hooking into the styling and layout process of a browser’s rendering engine through the CSS Object Model (CSSOM)

Typed CSS is an approach leveraged by Dojo and others to provide TypeScript safety around CSS modules for efficient and accurate styling in component development.

Ant Design is one of several popular design systems available for modern component usage and development.

TailwindCSS leverages PostCSS to provide a low-level CSS framework.

Early Majority

Design Systems are becoming a very popular way for organizations and projects to share and unify design standards and component libraries to maintain consistency and encourage reuse.

CSS Grids are becoming a widely adopted CSS feature for managing grid layouts in websites and applications.

PostCSS is an alternative to CSS preprocessors, acting more like Babel in transpiling new CSS syntax into the syntax supported by environments needed in production environments.

CSS-in-JS is a pattern that has gained popularity primarily within the React ecosystem for authoring CSS inline in components. Better CSS-in-JS implementations convert inline CSS into separate CSS files for faster rendering in production.

Material Design was the first big open-source design spec and system and remains highly popular across many frameworks and projects.

Linaria is one of the more widely adopted approaches for CSS-in-JS.

Late Majority

Responsive design was born out of the need to scale applications across phones, tablets, and desktop computers and remains the prevalent approach to designing applications. Responsive design has encouraged the world to become more vector driven, with a large majority of the world's companies refreshing their logos and design standards over the past decade to support responsive principles not just for software applications but for use in the physical world as well.

CSS Flexbox is a widely used model for application layout.

SASS remains the most popular and widely used CSS preprocessor.

Web Development Code editors and IDEs

IDEs and code editors for JavaScript and web development continue to improve in flexibility and features. Web-based IDEs also are becoming increasingly powerful in both traditional features as well as collaboration capabilities.

Early Adopters

StackBlitz is one of several cloud-hosted IDEs in a browser, providing a wide range of features that were only possible in a desktop IDE until a few years ago.

Early Majority

CodeSandbox is the most widely used cloud-hosted IDE, often described as VS Code in a browser.

Late Majority

VS Code went from a project many ignored due to its origins at Microsoft to the most widely used IDE in the JavaScript and TypeScript ecosystems in only a few years.

WebStorm remains the most widely used commercial desktop IDE for creating web applications. WebStorm is from the same family of projects as IntelliJ and engineers entering the world of JavaScript from Java often use IntelliJ.

vim and emacs remain popular code editors, though each can be turned into an IDE with a series of extensions and tools. Most vim and emacs fans have built up years of productivity gains in familiarity and efficiency and are unlikely to ever switch to another editor.

With the acquisition of GitHub by Microsoft, some expected Atom to get merged into VSCode, but for now they remain separate projects. Both Atom and VS Code leverage Electron for their desktop environment.

Sublime Text remains an editor used by many, though its popularity continues to decline with the emergence first of Atom and more recently of VS Code.

Conclusions

The JavaScript and web ecosystem is thriving, and while it may be challenging to keep up with the rate of change, we believe that many foundational pieces within this domain have become stable, which is creating additional areas for innovation. The team at InfoQ is here to provide you with expert coverage of the JavaScript and web landscape, and we welcome feedback, comments, and external article contributions.