A Recap of Frontend Development in 2019

A look back at the top events, news, and trends for frontend and web development

The world of frontend development once again evolved at a rapid pace over the past year, and this article recaps all the important events, news, and trends from 2019.

NPM Downloads for Popular Frontend Frameworks and Libraries in 2019

React once again claims the top library and is still growing, and jQuery is surprisingly holding at #2. Not far behind that Angular and Vue both have a strong user base of passionate developers. Svelte has received a lot of attention this past year, but it is still fighting to gain adoption.

From npmtrends.com — https://www.npmtrends.com/@angular/core-vs-react-vs-vue-vs-jquery-vs-svelte-vs-backbone-vs-react-native

WebAssembly becomes the 4th language of the web joining HTML, CSS, and JavaScript

After a rather quiet year, WebAssembly received some huge news early December — it is officially recommended as a language of the web by the W3C Consortium. The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web.

Since the announcement of WebAssembly in 2017, it has garnered heavy attention and rapid adoption. In previous years, we saw the 1.0 specification created and integration in all major browsers.

Another piece of news for WebAssembly in 2019 is the formation of the Bytecode Alliance which looks “to forge WebAssembly’s outside-the-browser future by collaborating on implementing standards and proposing new ones”.

We are still waiting for WebAssembly to truly take hold and gain mass adoption, and with each update, we get closer to that goal. There is no question that the W3C statement was a huge step to legitimize it for companies, and we need to continue to lower the barrier of entry for using WebAssembly to enable products to be more easily built with it.

TypeScript usage surges — many developers fall in love

2019 was the year of TypeScript. Not only has TypeScript become the defacto choice for adding data types to JS code, many developers are frequently electing to use it over vanilla JavaScript for both personal projects and at work.

In the StackOverflow Survey released early in 2019, TypeScript was tied for 2nd with Python as the most loved language, falling only behind Rust. It wouldn’t be surprising to see TypeScript climb even higher in the new survey released in early 2020.

TypeScript has consumed the web development world — both for the frontend and backend. Some developers tried to dismiss TS as a fad and thought it would go the way of Coffeescript, but TypeScript has proven to solve a core problem for JS developers and appears to only be growing in usage.

TypeScript provides web devs a better developer experience with integrations for all major text editors. JavaScript developers view TypeScript as a tool that results in fewer bugs while also being easier to read code with the types and object interfaces offering self-documentation.

It’s worth noting just how popular TypeScript has become with it passing React in NPM downloads in 2019. It also has far more downloads than competitors such as Flow and Reason.

TypeScript and React solve entirely different problems, so this isn’t meant to be a direct comparison. It is only a demonstration of the popularity of TypeScript.

TypeScript v3.0 came out in late 2018 and through 2019 it has released up to version 3.7 which includes newer ECMAScript features such as optional chaining and nullish operators as well as improvements to the type checking functionality.

React continues to lead while devs are consumed by hooks

Vue and Angular have passionate users, with Vue even surpassed React in GitHub stars, but when it comes adoption for personal and professional projects, React continues to hold onto a strong lead.

In late 2018, the React team introduced hooks. In 2019, hooks consumed the React world with an overwhelming majority of developers adopting them as their preferred way to manage state and the component lifecycle. Throughout the year, countless articles were written about hooks, patterns began to solidify, and the most important React packages built custom hooks to expose their library’s functionality.

Hooks provide a way to manage a component’s state and lifecycle in functional components using a simple and concise syntax. In addition, React provides the ability to build custom hooks which allows us to create reusable code and shared logic without needing to create higher-order components or use render props.

The React core team shifts to focusing on developer experience and tools to make us more productive

After the huge addition of hooks in React v16.8, most of the changes afterward were relatively minor while releasing up to version 16.14 in 2019.

After the huge hooks release, the React team then shifted their focus to making the lives of developers better by providing more tools. In fact, developer experience was noted as the main theme of React Conf 2019. The keynote speaker of React Conf and manager of the React team, Tom Occhino , stated that developer experience is rooted it 3 things: low barrier to entry, high productivity, and ability to scale. Let’s take a look at what the React team released or plans to release to support this:

• A brand new version of React DevTools
• Brand new React performance profiler tools
• Create React App v3
• Testing utility updates
• Suspense
• Concurrent mode (upcoming)
• CSS-in-JS used at Facebook (upcoming)
• Progressive/selective page hydration (upcoming)
• Accessibility a11y improvements in React core (upcoming)

The belief is that a good developer experience will also lead to a good user experience, so this is a win for everyone. Watch the talk below by Yuzhi Zheng from React Conf 2019 about the upcoming React features or this link for all the talks.

Vue prepares for version 3 release, continues to grow in usage

Vue might not have the most adoption (yet), but it’s hard not to claim it has the most passionate users. Vue has been noted to bring in the best parts of React and Angular while also being more simple. Another huge selling point is that it’s more open and not controlled by a large company like React (Facebook) or Angular (Google).

The biggest news for Vue is its upcoming 3.0 release with alpha expected to land at the end of Q4. In 2019, Vue 2.x only received a few updates early in the year because most efforts are being put into the v3 release.

Just because there weren’t many releases this year, doesn’t mean there wasn’t a lot happening. When Evan You released the RFC for v3, a huge debate was sparked in the community over the changes as seen on Reddit and Hacker News .

The key issue that angered Vue developers is an overhaul of the framework’s API. However, after the backlash, it was noted that the API change will be entirely additive and backward compatible with Vue 2. Depending on how the release goes, many developers claim they may consider Svelte with these proposed changes, fearing Vue is trying to be too much like React. While there are still many in the community that are concerned, the noise seems to have quieted down while they wait for the release.

Aside from the debate, Vue 3 does have some other big changes coming:

• The composition API
• Global mounting/configuration API change
• Fragments
• Time Slicing Support (experimental)
• Multiple v-models
• Portals
• New custom directives API
• Improved reactivity
• Virtual DOM rewrite
• Static props hoising
• A hooks API (experimental)
• Slots Generation optimization (separate rendering for parent & child components)
• Better TypeScript support

The other notable Vue release this year is version 4 of the CLI which is mostly focused on updating the underlying tools.

Angular releases version 8 and 9 along with the new Ivy compilation/rendering pipeline

Angular’s opinionated philosophy has helped it acquire a huge user base. Since Angular is a strongly opinionated framework, it requires devs to do things the Angular way, and it provides all the tooling necessary for its developers.

This removes many of the debates about which libraries and dependencies you should bring into the project, which is a potential issue you would find in teams building React apps. It also requires developers to write their applications in TypeScript. Since most of the choices are already determined, companies view it as a great option because it allows developers to focus on building products instead of spending their time thinking about packages.

In 2019, Angular released version 8, and it also released a new renderer/compilation pipeline known as Ivy. This biggest benefit of Ivy is smaller bundle sizes, but there are many great additional improvements it provides. Currently, Ivy is an opt-in feature until Angular 9. This article details the features released in version 8, but the notable updates are:

• Differential Loading of Modern JavaScript
• Opt-in Ivy Preview
• Angular Router Backwards Compatibility
• Improved Web Worker Bundling
• Opt-In Usage Sharing
• Dependency Updates

During December 2019, the Angular team has prepared the release of version 9 which looks like it will officially come out very late 2019 or early 2020. The biggest change in Angular 9 is that Ivy becomes the standard renderer. Watch the YouTube video below for more details on Angular 9.

Accessibility (a11y) and internationalization(i18n) are becoming more of a priority

The web should be open and usable by everyone, and the frontend world has been making this priority. After JavaScript and the web evolved so rapidly starting in 2015, patterns and frameworks are finally being solidified. Now that things are more stable, this has allowed developers to focus more on tools to localize their apps and make them more accessible, which makes the web better for everyone. We should be proud of the progress we’ve made, but there is still a long way to go.

Accessibility: “The practice of making your websites usable by as many people as possible. We traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections.” — MDN

Internationalization: “Design/develop your content, application, specification, and so on, in a way that ensures it will work well for, or can be easily adapted for, users from any culture, region, or language.” — W3C

ES2019 Features

Continuing with its yearly update cycle, ECMAScript (the spec that JavaScript is based on) added new features for the ES2019 release .

• Object.fromEntries()
• String.trimStart() and String.trimEnd()
• Better handling of unicode in JSON.stringify
• Array.flat()
• Array.flatMap()
• try/catch binding
• Symbol.description

While ES2019 has some great updates, theupcoming ES2020 looks to have some of the most anticipated features since possibly ES6/ES2015:

obj.field?.maybe?.exists
item ?? 'use this only if item is null/undefined'

Flutter explodes and challenges React Native as another excellent option to build cross-platform mobile apps

Flutter was released 2 years after React Native, but it has quickly been gaining ground. Flutter has nearly caught up to React Native in GitHub stars with 80.5k vs 83k and should pass it soon following the current trajectory.

Considering that Flutter doesn’t have the same developer community to leverage for growth like React Native did with React web developers, this is even more impressive. Flutter is making a case for itself to be the best cross-platform mobile framework.

Node.js Foundation and JS Foundation merge to form OpenJS Foundation; Node version 12 launches to continue the path of yearly LTS releases

To support the JavaScript ecosystem and accelerate the growth of the language, the Node.js Foundation and the JS Foundation merged to form the OpenJS Foundation . The message from the foundation is collaboration and growth under a neutral entity that now hosts 31 open source projects, including Node, jQuery, and Webpack. This move is viewed as a positive for the whole JS community and is supported by major tech companies such as Google, IBM, and Microsoft.

Node released version 12 this year which is in long term support (LTS) until April 2023. Node 12 offers a host of new features, security updates, and performance improvements. Some notable updates include native support for import / export statements, private class fields, compatibility with V8 Engine version 7.4, support for TLS 1.3, and additional diagnostic tools.

Svelte gains attention but lags in adoption as it launches version 3

Svelte found a way to inject itself into the conversation in the already-crowded world of frontend frameworks. However, as we saw at the beginning of the article, this didn’t translate to a huge amount of practical adoption yet. The best way to summarize Svelte is “simple but powerful”. The 3 points noted on the Svelte website are:

1. Write less code
2. No virtual DOM
3. Truly reactive

Svelte tries to shift the bulk of its work to the compilation step instead of doing it in the browser at runtime. Svelte has a component-based architecture that compiles down to pure HTML and vanilla JavaScript while also promising less boilerplate code. It uses reactive programming that makes direct updates to the DOM instead of diffing a virtual DOM.

Svelte offers something new and exciting to the frontend landscape… by offering less. In 2020, it will be fun to watch how Svelte grows and develops, and hopefully we’ll get some examples of it being used at scale to see how it compares its bigger competitors in React, Vue, and Angular.

Static sites continue to be utilized, devs adopt the JAMStack

With the increased utilization of frameworks like Gatsby, the rapid growth of static website hosts like Netlify, and the countless number of headless CMS companies popping up, static sites prove they are going to be an integral part of the web.

Static sites combine the old web with the new tools, libraries, and updates to provide an unmatched experience. We are able to build our sites using modern libraries like React but then compile them into static HTML pages at build time. Since all the pages are now pre-built, there is no server time required to hydrate them with data on a request — the pages can be served immediately and take advantage of being cached in CDNs across the globe allowing the content to be as close as possible to your users.

A popular programming pattern utilized with static sites is the JAMStack (JavaScript, APIs, Markup). This is a hybrid static/SPA approach where pages are served statically, but once on the client, it is treated more as a SPA that uses APIs and user interaction to evolve the state of the UI.

PWAs see more growth and adoption

Static sites are one of the ways to get incredibly fast products, but they aren’t suited for all apps — another excellent choice is PWAs (progressive web apps). PWAs allow you to cache resources in the browser to make pages respond immediately and also provide offline support. In addition, they allow for background workers to provide native functionality such as push notifications.

Some people have even made the claim that PWAs may even replace native mobile apps. Wherever things end up, there is no doubt that PWAs will be a big part of how companies build products for a long time.

Frontend tooling is getting really good

JavaScript fatigue has been a complaint from frontend developers for a few years now, but we’ve slowly seen it be alleviated with the incredible efforts of open source project maintainers.

Previously, if we wanted to build a SPA, we had to pull in our own dependencies with either Bower or NPM, figure out how to compile it using Browserify or Webpack, write an Express server from scratch, and maintain our apps through the onslaught of library updates.

We had a few years of pain, but now we’ve iterated our way to one of the most vibrant and developed package ecosystems. There are tools to help up us abstract away the painful parts of building applications — Create React App, the Vue CLI, the Angular CLI, Gatsby for static sites, Expo for React Native mobile apps, Next/Nuxt for SSR applications, generators to create our servers, Hasura to remove the need even write a server for GraphQL, automatically generated TypeScript types using GraphQL Code Generator, Webpack continuing to get more streamlined — there is a tool to handle the heavy lifting for almost any need we have.

Maybe now we have tooling fatigue?

GraphQL continues to be loved by developers, gains further adoption in tech companies

GraphQL promises to solve many of the issues presented by traditional REST-based applications. Developers quickly fell in love with GraphQL, and tech companies are finally catching up in adopting it. GitHub wrote it’s newest API in GraphQL a few years ago, and many other organizations are making the change also.

A GraphQL app is data-driven instead of endpoint-driven, allowing the client to declare the exact data they need and receive a corresponding JSON response from the server. GraphQL APIs provide a schema to document all the data and their types, giving the developer full visibility into the API.

Since GraphQL APIs provide a fully typed schema, it also integrates well with applications using TypeScript. Using a tool like GraphQL Code Generator , it can read the queries in our client code and match them against the schema to provide TypeScript types that will flow through our entire application.

GraphQL downloads have more than doubled over the past year, and Apollo is starting to separate itself as the most utilized framework.

CSS-in-JS gains momentum

The progression of web development feels like it has been on a path to unify everything under JavaScript, and this is shown in the adoption of CSS-in-JS where styles are created using JavaScript strings.

This allows us to share styles and dependencies using normal JavaScript syntax through import / export . It also simplifies dynamic styles as the CSS-in-JS component can interpolate props into its styling string. As noted previously, Facebook may even view CSS-in -JS as the future of the frontend and will be releasing their own library.

Below is an example of the classic CSS vs CSS-in-JS. To handle dynamic styles with normal CSS, you have to manage class names in the component and update it based on state / props . You would also need a CSS class for each of the variations:

// Component JS file
const MyComp = ({ isActive }) => {
  const className = isActive ? 'active' : 'inactive';  return <div className={className}>HI</div>
}// CSS file
.active { color: green; }
.inactive { color: red; }

With CSS-in-JS, you no longer manage CSS classes. You simply pass props to a styled component, and it handles the dynamic styling with a declarative syntax. The code is much cleaner, and we have a clearer separation of concerns for styles and React by allowing CSS to manage dynamic styling based on props . It all reads just like normal React and JavaScript code now:

const Header = styled.div`
  color: ${({ isActive }) => isActive ? 'green' : 'red'};
`;const MyComp = ({ isActive }} => (
  <Header isActive={isActive}>HI</Header>
)

The two leading libraries for CSS-in-JS are styled-components and emotion with emotion passing styled-components for downloads in 2019. These two libraries have created quite a bit of separation from other CSS-in-JS options and look like they will continue to grow rapidly.

VS Code dominates the text editor market

Developers are passionate about their IDEs/text editors and aren’t afraid to get into arguments about why their choice is the best. However, for the frontend, developers have almost unanimously chosen VS Code as their editor. VS Code is an open source editor that offers plugins to provide an incredible developer experience.

Here is the usage of text editors according to the State of JS Survey 2018 (this will be updated when the 2019 survey is released):

Webpack 5 enters beta and nears release

Webpack has become a core component of nearly all modern JavaScript toolchains and is the most-used build tool. Webpack has continued to improve both its performance and usability, making it better for developers. With version 5, Webpack focuses on the following points:

• Improve build performance with persistent caching
• Improving long-term caching with better algorithms and defaults
• Clean up internal patterns without creating any breaking changes

Jest moves from Flow to TypeScript

Facebook maintains the popular testing library Jest and also Flow which is a TypeScript competitor. With a bold statement at the beginning of 2019, they opted to migrate Jest off of Flow and to TypeScript. This further shows TypeScript has become the standard choice for typed JavaScript and only looks grow in usage in 2020 and beyond.

Chrome releases stable versions 72–78 in 2019

Chrome continues to iterate quickly, rapidly adding new features to the web and developer tools. In 2019, we saw 7 stable versions released with versions 79 in beta, 80 in dev, and 81 in canary. Check the Wiki below for notable additions to Chrome over the past year.

Microsoft Edge browser moves to Chromium, creates a new logo

Internet Explorer and its newer incarnation Edge have been a joke to web developers, and even worse, a terrible pain to work with. The browser constantly lagged behind in web feature implementation and is notoriously difficult to write cross-browser compatible code for. In a huge win for devs, Microsoft has elected to use Google’s open source Chromium engine . In mid-2019 this change reached the beta stage.

Facebook releases Hermes, a JavaScript parser for Android to improve React Native

Facebook decided the Android JavaScript engine isn’t fast enough, so they built their own. Facebook is all-in on React Native, and this move shows they are willing to make the adjustments needed to make it work as effectively as possible on all platforms.

Predictions for 2020

• Performance continues to be the most important aspect of the web with code splitting and PWAs being further utilized.
• WebAssembly becomes more common, sees real adoption, and is utilized in products.
• GraphQL overtakes REST for new startups and new projects while established companies migrate to it even further.
• TypeScript becomes the default choice for new startups and projects.
• We start seeing real apps built without a server and on blockchain, making the web more open.
• CSS-in-JS may become the default styling method instead of plain CSS.
• “Codeless” apps become more popular. With improvements in AI and more layers of abstraction for apps, it’s becoming easier and easier to build applications. In 2020, we may see notable shifts toward creating apps without needing to write code.
• Flutter may overtake React Native as the top way to build cross-platform mobile apps.
• Svelte will see more real projects built using the technology.
• Deno (a TypeScript runtime built by the creator of Node) sees practical usage.
• AR/VR makes strides using libraries like A-Frame , React VR , and Google VR as well as improvements to the native AR/VR tools in the browser.
• The influence of containerization (ie. Docker, Kubernetes) becomes more prevalent in the frontend process.

Top Articles and Videos of 2019

Addy Osmani shows us the cost of JavaScript in 2019

The StackOverflow developer survey shows us the trends in programming

See how Slack rebuilt their entire UI incrementally using modern JavaScript

The GraphQL documentary

Dan Abramov provides a thorough explanation of useEffect

Ryan Dahl gives us more insight into Deno

Eric Elliott takes the stance claiming the benefits of TypeScript aren’t worth the effort

And he also showed us how a $9/hour engineer cost Boeing billions.

Learn technical details of the V8 JavaScript engine, and how it created a performance cliff in React.

Flavio Copes details all the changes to JavaScript since the massive ES2015 update.

Ebay converts a key feature to WebAssembly and realizes huge gains.

Diana Adrianne builds incredible portraits using only CSS.

Rodrigo Pombo shows us how to build our own React.