Table of Contents
Most Popular Projects Overall
Vue Element Admin
Create React App
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.
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.
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?
Create React App
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:
- 2013: Mixins to share functionalities between React classes
- 2015: Higher Order Components to inject props into React components
- 2017: Render prop pattern
- 2019: Hooks to write functional components everywhere
This year we have seen a lot of libraries that leverage the power offered by the hooks to solve problems related to:
- state management: Redux now provides hooks to easily interact with the central store
- routing: React Router provides hooks to access the browser history
- form validation: React Hook Form has a unique way of handling form validation using "uncontrolled" form controls
Are hooks the final step of the evolution?
Vue Element Admin
Guest Writer: Sébastien Chopin
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)
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.
Finally, at number 5, we have vue-cli, the official Vue.js toolkit to bootstrap projects with a powerful graphical user interface.
Material Design for Angular
Guest Writer: Benjamin Blackwood
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.
React Testing Library
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.
Hasura GraphQL Engine
You Don't Know JS
30 seconds of code
JS Algorithms & Data Structures
Node.js Best Practices
Tech Interview Handbook
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.
Thank you for your attention and see you next year!