Our expert's opinion:
- Aloys Baijer, Associate Consultant
- 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.
- 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.
- 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
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.
- 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
- Web Development Code editors and IDEs
Web Development Languages / Standards / Patterns
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.
- 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.
- 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.
- 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.
- HTML5 and ES6/2015 - ES2018 are late majority, as nearly every web application today uses these features as a minimum baseline.
Web Development Client-side frameworks / libraries
Vue.js 3 has not shipped at the time of this report but is a highly anticipated rewrite of Vue using TypeScript.
- 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.
- 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.
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.
- 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.
- 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.
Server-side platforms / frameworks / data / APIs for Web Engineers
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.
- 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.
- 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.
- 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.
- 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.
Cloud for Web Engineers
A wide range of solutions to help web engineers create and deploy cloud-based applications have emerged.
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.
- Zeit Now is a popular way to deploy web applications, for static and JAMstack deployment, Serverless Functions, and as a global CDN.
- Firebase, another Google offering, provides cloud-based mobile and web infrastructure.
Package management / bundling / optimizing
- Entropic is an early-stage alternative to npm with a more distributed approach to package registration rather than a single federated registry.
- 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.
- 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.
- Lighthouse is a widely used automated tool created by Google for improving application code quality and performance.
Web Development testing and automation
- 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.
- 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.
- 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.
- 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.
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.
NativeScript provides native application compilation using web technologies for Angular and Vue.js applications.
- 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.
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.
- 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.
Visualization / XR for web engineers
Beyond d3 and Three.js, data visualization, charting, and other approaches to visualization and rendering are highly fragmented across many projects.
- 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.
- 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.
d3 is the most widely adopted data visualization library in use today.
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.
Algorithmic CSS is an emerging approach to building composable layouts leveraging built-in CSS algorithms.
- 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.
- 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.
- 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
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.
CodeSandbox is the most widely used cloud-hosted IDE, often described as VS Code in a browser.
- 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.