Welcome to the 4th edition of JavaScript Rising Stars!
Let's see by the numbers the projects that got traction on GitHub in 2019.
Welcome to the 4th edition of JavaScript Rising Stars!
Let's see by the numbers the projects that got traction on GitHub in 2019.
In 2019, Svelte disrupted the category of the UI frameworks, taking the 3rd position behind Vue.js and React but before Angular.
Does it mean that we have now a BIG-4 instead of a BIG-3?
Svelte is very different that the other frameworks because it's not really a framework but a compiler that runs its magic at building time, not at run time.
Like React or Vue, it lets developers build applications by creating components that update when data changes but the big difference is that the framework does not run in the browser, it runs at the building time.
The compiler is able to generate imperative code that manipulates the DOM directly from the components written by the developer.
Therefore the code shipped to the browser is both small and very fast to run (making Svelte applications suitable for embedded devices for example).
Besides its top notch performance, it’s easy to create complex transitions that run in CSS.
The version 3 improves the concept of reactivity: updating a variable is all you need to trigger a change in the UI.
It's too early to state that Svelte will be as successful as the 3 other frameworks but it's worth following in 2020.
In the Node.js framework category, we have a new champion: Nest!
Nest is a full-featured web framework that borrows a lot of concepts from Angular.
Next.js, the champion of 2018, is number 2 this year. It's one of the best solutions to build a full-stack web application with React on the front-end and Node.js in the back-end.
At position number 3, Strapi is a completely open source headless CMS that allows you to quickly generate and manage API endpoints. “Get started in just four commands”. API Endpoints can be consumed using REST or GraphQL!
Following is Nuxt, a full-stack framework to build web applications with Vue.js, supporting differents strategies, server-side rendering, client-side only or static generated.
Express is almost as old as Node.js but it's still in the top 5. Of course it has a huge eco-system and it's familiar to a lot of Node.js developers but it's worth mentioning that the last commit was made 7 months ago. Times are changing?
At positions 1 and 5, Ant Design and Material UI projects were the most popular sets of components and widgets for React.
At the position 2 Create React App is still the de-facto standard to create a new React application. A major update this year: TypeScript is now supported.
The biggest change in the React world was the introduction of the hooks pattern.
React being only the view layer, the question about how to share logic between components has always been controversial. It seems there is an evolution that can be described in 4 steps:
This year we have seen a lot of libraries that leverage the power offered by the hooks to solve problems related to:
Are hooks the final step of the evolution?
This year we asked our friend Sébastien Chopin to talk about the Vue.js landscape.
Sébastien Chopin is the creator of Nuxt that is in the TOP 5 of 2 different categories (Vue.js ecosystem and Node.js frameworks)
Vue Element Admin, the most popular Vue project for the second year, is a solution to build beautiful dashboards using Vue.js components, based on Element.
At number 2 is Element, an UI library with plenty of components to use.
Vuetify, the Material component framework, released its v2.0 in July and rises in the top 5 for 2019.
Nuxt, the web framework to build Vue.js applications, stays in the top 5 for 3 years in a row.
Finally, at number 5, we have vue-cli, the official Vue.js toolkit to bootstrap projects with a powerful graphical user interface.
This year we asked our friend Benjamin Blackwood to talk about the Angular landscape.
Benjamin is a Frontend Developer at Australia Post and has been working with Angular for over 4 years.
ngx-admin, the most popular Angular project, provides templates to create admin dashboards.
At number 2 is Material Design for Angular which includes Material Design components as well as the Angular CDK.
Similarly to React and Vue, the Ant Design component library NG-ZORRO is at number 4.
Angular had one major release in 2019. Version 8 was released in May. As part of that release, Angular CLI now creates two seperate bundles (modern and legacy) shrinking bundle sizes up to 20%. There is also a new Builders API which allows you to modify existing CLI commands or add new commands.
Version 9 is currently in release candidate and is expected to come out early 2020. A major change for version 9 will be a new compiler called Ivy which is expected to have faster re-build time and smaller bundle sizes, among other improvements.
This year, instead of limiting the category to the frameworks used to write test suites, we have also included tools related to End-to-End (E2E) testing and browser automation.
Puppeteer is a very popular tool to control a headless Chrome browser. It has a lot a use cases (scrapping the web, taking snapshots of web pages...) and it's used by the Chrome extension puppeteer-recorder, at position number 6.
Storybook is a UI component workshop that provides development, testing, documentation, and a rich addon ecosystem. In 2019 it upgraded to an example format that can be directly imported in Jest and other testing tools.
Cypress is a solution to do end-to-end testing, it provides a very nice UI to describe interactions between a user and web page.
At position number 4, Jest is the most popular testing framework, used in both front-end and back-end projects.
At position 5 React Testing Library is a solution to test React applications built on top of the DOM Testing Library by Kent C. Dodds. It provides nice patterns and abstractions to help test how an application should behave, instead of testing implementation details.
Among the interesting trends in the front-end side: will Svelte framework keep growing?
Or will we see more adoption of web standards such as web components?
One of the most interesting stories of 2019 was the fact that Apple released its music web client that uses Web components, compiled with Stencil, one of the top UI frameworks of the year. This is a "real world" usage of Web Components!
The fact that you can ship an application that uses native modules, is also a big improvement.
On the back-end side, Node.js turned 10 years in 2019 but new features keep being added at a fast pace.
As of v13.2.0, Node.js supports ES modules out of the box and can import Web Assembly modules. The Workers Threads API enables heavy computing operations.
So whether we talk about the browser or Node.js, the platform keeps evolving and this is what makes JavaScript development so exciting.
Thank you for your attention and see you next year!
Authors
Creator of Best of JS
Author of Discover Meteor and creator of Vulcan, a React+GraphQL open-source framework.
For the 4th consecutive year, Vue.js is the overall winner of our contest, with more then 30,000 stars added on GitHub in 2019.
No surprises at the following spots: React and the code editor VS Code follow in the same order as last year.
The biggest jump in the rankings is Vue Element Admin, a solution to build nice dashboards using Vue.js components, number 4 this year.
Svelte has been around for a few year but it really took off in 2019 and it holds the position number 5.
TypeScript enters the TOP 10, its success has been one of the main changes in JavaScript landscape over the last years.
Deno, the JavaScript run-time built by the creator of Node.js was one of the newcomers in 2018. It's still trendy, at the 13th position.