2019 in Frontend Development: JS, TS, React, Vue & More

Originally published on gitconnected.com 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. The API for your developer portfolio → 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 by the W3C Consortium. The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web. officially recommended as a language of the 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 which looks “to forge WebAssembly’s outside-the-browser future by collaborating on implementing standards and proposing new ones”. Bytecode Alliance 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 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. StackOverflow Survey 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. 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. TypeScript v3.0 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, , 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: Tom Occhino A brand new version of React DevTools Brand new React performance profiler tools Create React App v3 Testing utility updatesSuspenseConcurrent 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 from React Conf 2019 about the upcoming React features or for all the talks. Yuzhi Zheng this link 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 released the RFC for v3, a huge debate was sparked in the community over the changes as seen on and . Evan You Reddit 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 APIGlobal mounting/configuration API change FragmentsTime 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. details the features released in version 8, but the notable updates are: This article Differential Loading of Modern JavaScriptOpt-in Ivy PreviewAngular Router Backwards CompatibilityImproved Web Worker BundlingOpt-In Usage SharingDependency 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. Accessibility (a11y) and i (i18n) are becoming more of a priority nternationalization 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. : “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 Accessibility : “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 Internationalization Continuing with its yearly update cycle, ECMAScript (the spec that JavaScript is based on) added . new features for the ES2019 release Object.from Entries() 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, the looks to have some of the most anticipated features since possibly ES6/ES2015: upcoming ES2020 Private class fields Optional chaining nullish coalescing BigInts 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 . 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. merged to form the OpenJS Foundation 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. Node released version 12 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 are: Svelte website Write less code No virtual DOM 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 (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. JAMStack 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 , 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 Code Generator GraphQL downloads have more than doubled over the past year, and Apollo is starting to separate itself as the most utilized framework. 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 (this will be updated when the 2019 survey is released): State of JS Survey 2018 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 cachingImproving long-term caching with better algorithms and defaultsClean up internal patterns without creating any breaking changesJest moves from Flow to TypeScript Facebook maintains the popular testing library and also 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. Jest Flow 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 . In mid-2019 this change reached the beta stage. use Google’s open source Chromium engine 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. (a TypeScript runtime built by the creator of Node) sees practical usage. Deno AR/VR makes strides using libraries like , , and as well as improvements to the native AR/VR tools in the browser. A-Frame React VR Google VR The influence of containerization (ie. Docker, Kubernetes) becomes more prevalent in the frontend process.