Recently, The State of JavaScript released its latest annual survey, which collected responses from more than 20,000 engineers, so it’s very useful to understand The State of The JavaScript ecosystem over The past year. This will help you understand which technologies are the trends of the future and which are obvious pitfalls.
In this article, I will summarize the highlights of the report and future trends, as well as provide a number of references to help you form a systematic body of knowledge.
The overview
This report provides a cool overview chart that looks at many technologies and understands the trends and preferences of technical students.
This is a chart showing the trends of various front-end technologies over the past three years, broken down into two dimensions: usage and recommendation
Here is a chart based on the survey satisfaction of technical students, divided into four sections: Adopt: high use, high satisfaction, can use safely without thinking, ASSESS: low use, high satisfaction, can continue to focus on the analysis. High usage, low satisfaction, need to be re-evaluated if already adopted AVOID: Low usage, low satisfaction, current pit should be avoided
A programming language
In terms of programming languages, TypeScript continues to gain traction. In 2019, TypeScript has become the official language for popular third-party code libraries such as Vue 3.0, Mobx, Ant Design, and many others. We can expect TypeScript and ES to continue to compete for the no. 1 front-end programming language position in 2020. TypeScript has a significant advantage over ES in terms of momentum and language features, and will continue to gain popularity in large front-end projects.
The relevant data
TypeScript architecture research report
Ant Financial’s TypeScript practices
Airbnb’s large-scale TypeScript migration practices
Lyft’s TypeScript practices
The front frame
React and Vue continue to trend strongly, increasing usage and satisfaction. Angular continues to increase usage, but satisfaction is getting worse year after year. React and Vue are basically different in China, and even Vue has a higher popularity rate. React is positioned as a front-end Library, while the other parts are co-built by the community. Angular is a large and comprehensive Framework that covers everything. Vue is positioned as a progressive front-end Framework, except for the core Framework. Or provide a variety of standardized capabilities.
React 16. X will be released this year with a number of features such as React Hooks, Fiber, Lazy, Suspense, Memo, etc. The app is expected to evolve from class-based component development to function-based component development.
Vue 3.0 Pre Alpha after a year of backtracking, the Hooks’ Composition API for functional component development is starting to look more and more like it.
It is worth noting that the Svelte framework, from its debut, has won a lot of praise. One of its core appeals is small and fast. It really solves the problem of the current front-end framework being too bloated, which deserves a lot of attention.
The relevant data
Listen to vue.js author Yu Stream how to compare the front end of the three frameworks
Close reading new features of Act16
This is probably the most popular way to open React Fiber
Learn React Hooks in 30 minutes
Vue3.0 source code analysis
Data management
At this level of data management, Redux deserved a brother, but satisfaction is declining, mainly because the story to fit is quite complex, the concepts and template code is very much, want to do asynchronous operations also need to introduce additional middleware code is extremely complicated, so we were a love-hate relationship state in the consistent use of story.
GraphQL+Apollo became a strong dark horse. Indeed, under the support of Facebook, GraphQL is getting more and more attention. At the same time, European and American Internet companies are trying to. Airbnb, for example, shared at this year’s GraphQL Summit that close to 10% of online traffic will be using GraphQL by the end of this year.
GraphQL technology has not been popular in China. It seems that the most important role is to integrate and trim the existing REST API as an alternative to the original Node BFF. Indeed, GraphQL needs both the front and back ends to work together and clearly define the responsibilities of the front and back ends before it can really work.
The relevant data
Airbnb: The practice of large-scale code migration to Apollo+GraphQL
REST APIS are dead, GraphQL is dead
GraphQL from the get-go to the hands-on
The back-end technology
Express, Next, Koa, Nuxt and Gatsby are still the mainstream frameworks of back-end JS technology, and Express has been holding the first place for a long time with a very stable ranking. In Korea, Koa seems to be more popular than the picture shows.
The relevant data
GraphQL with Koa Best Introductory practices
Node.js framework vs. Express vs. Koa
Next. Js official documentation
test
Testing plays a very important role in improving code quality and should be taken seriously. Although the efficiency of initial research and development will be lost, the quality of the whole project including subsequent iterative transformation can bring great confidence. Therefore, for large, active front-end systems, testing should be an important part of it.
The system of Testing includes unit Testing, UI Testing, and Puppeteer Testing. There are many choices in each direction. You can choose Jest + React Testing Library + Puppeteer.
Summary of the front-end test system construction and best practices
Mobile and desktop applications
On mobile and desktop applications, React Native and Electron still dominate usage, but are far from being very popular in terms of data. In the adoption of RN, there are big differences at home and abroad. In the middle of the year, Airbnb gave up RN, and the large-scale reconstruction of RN team also raised doubts on the sustainability of using this framework. On the contrary, domestic large companies still actively embrace RN technology, after all, RN has achieved a very good balance between user experience and r&d efficiency under the current situation.
However, in 2019, Flutter stole some of RN’s thunder. The underlying Flutter uses a common C++ rendering engine to solve the problem of multiple rendering inconsistencies, as well as the communication efficiency between original JS and Native. Its ambitious vision across the Web, iOS, Android, Embeded, and more excited many of its development students.
The relevant data
Dry goods | nearly word long dwelt on the engineering practice of ctrip large-scale application of RN
Airbnb eliminates RN: Sunsetting React Native – Requires a ladder
Electron builds cross-platform applications for Mac/Windows/Linux
Trends for 2020
In this article, we have already mentioned the prospects for 2020, excerpted below.
- With code splitting and the further use of PWA, performance is still the most important part of the Web.
- WebAssembly is becoming more common, practical, and used in products.
- GraphQL is outpacing REST in new startups and projects, while established companies migrate to it.
- TypeScript became the default choice for startups and new projects.
- Css-in-js may become the default style setting method instead of plain CSS.
- “No code” apps are becoming more and more popular. As AI improves and application abstraction layers increase, it becomes easier to build applications
- Flutter may replace React Native as the best way to build cross-platform mobile applications.
- Svelte will be used by more actual projects.
- Deno (the TypeScript project built by the Node creator) is actually available.
- AR/VR has come A long way using libraries such as A-Frame, React VR, and Google VR, as well as improvements to native AR / -VR tools in browsers.
- The influence of containerization (e.g. Docker, Kubernetes) is becoming more common in the front end.
Write in the last
After the rapid development of front-end technology in the past few years, there were not many breakthrough developments in 2019, most of which were continuation of the existing technology path. In fact, each technology needs to go through a long technology maturity curve before it can be adopted on a large scale. Therefore, each team has different business stages and technical stages. It is best to choose their own technology at the right time based on themselves and keep sensitive to new technologies.
Recommended reading
Half way through 2019, have you got all these big front-end technologies? – ok,
Half way through 2019, have you got all these big front-end technologies? – the next
This article covers the 20-year history of JavaScript
