It’s already the middle of 2019, and how are the flags set by those who vowed to learn new skills completed? 2019 is not a big year for big front-end technology. The three major technology frameworks are maturing and it is unlikely that there will be any disruptive front-end frameworks in the short term.

This paper makes a technical summary of the first half of 2019 based on personal and team experience, and divides various technical frameworks/languages/tools into two dimensions:

Technology adoption lifecycle

  • Innovators: Technology adventurers who try new technologies the first time
  • Early Adopters: An Early adopter of technology, an adventurer, an opinion leader in a field
  • The early majority are the early adopters, the thoughtful ones, who tend to adopt relatively mature technologies
  • The late majority: the technological masses who follow the trend and adopt the current mainstream technology
  • Laggards: Technology laggards who do not update the technology stack for a long time and have a lot of technical debt

The technical direction is stratified according to the big front-end technology architecture diagram, which is generally divided into: state management, UI components, applets, cross-platform, framework layer, programming language, engineering, monitoring, testing and server.

State management

With the popularity of front-end frameworks like React and Vue, component-based development becomes the mainstream. However, with the increasing complexity of pages, UI rendering, event processing, state management and other things need to be done in a component file, so a file becomes more and more complex. At the same time, as the page component level becomes more complex, the data communication between different components becomes very complicated. It is necessary to refer the data to the parent node, transmit data through property, update the state of the parent node by callback method, etc.

Facebook first proposed Flux framework, introduced one-way data flow programming mode, decoupled Action and Store from View, greatly optimized the original state management architecture.

Redux=Flux+Reducer, due to the unique Store and the Reducer pure function, the data state is predictable, so there are many matching debugging tools based on TimeMachine mechanism, which greatly improves the r&d debugging efficiency. However, due to the pure function nature of Reducer, some side effects of asynchronous requests must be introduced into middleware, resulting in certain complexity.

Vuex, as the only choice for state management of Vue framework, has the same core idea as Flux/Redux, weakening the Reducer concept and replacing Mutations, making the whole framework easier to understand.

Mobx is a very lightweight state management framework that introduces Observable State and computed Value, greatly simplifying the way of state modification. Compared with Redux, it reduces a lot of template code and is quick to use and friendly to use. However, due to the lack of mandatory specifications like Redux, The necessary constraints in use are required.

Dva is a data state management framework produced by Ant Financial, dVA =React+Redux+Saga, which greatly simplifies the programming experience through conventions and deserves continuous attention.

State management is not a must for every front-end application. It needs to be determined by the complexity of its own business. Only if the complexity of business logic requires the decoupling of various modules can it be considered

UI components

Before the three front-end frameworks were unified, component libraries such as Dojo, Bootstrap and Extjs were competing. Since React came along, componentization has become the standard mode for front-end development, and two major UI component libraries have emerged: React based Ant Design and Vue based ElementUI.

As two mature UI component library, if your system is to belong to the background in business, for the UI customization requirements not so strict, so the two must be a choice, do not have too big difference, both the function based UI controls, multilingual, theme configuration, and so on to what is what, the only risk is to give you a snowy Christmas eggs (high risk early warning government websites).

The UI component library will continue to focus on Web Components. After all, Chrome is the parent browser, and Google is behind it. And React/Vue is becoming more and more like Web Components. In addition front-end data visualization, 3D is also a good direction, some cool front-end library friends can wank ~

Small program

2019 small program a hundred flowers bloom, each big super App has launched its own small program application, front-end students to support many small programs, touch hair and sparse a lot of it (em… Another solid step towards senior R&D). There are many ways to implement small programs, which need to be combined with their own business scenarios to choose. , choose a small program primary development way to WeChat give priority to development of small programs, through a small amount of modified portable to other platforms (how much work did not good estimate, but since the original pay treasure copy WeChat small demo program, should not feel!) choose two, H5 embedded development way, natural platform across the end, but there will be some performance loss, There will also be some functional limitations, such as message notifications in wechat cannot be pushed through H5 option 3, mpVue is based on a certain framework of development, MPVue is based on vUE framework to develop small programs, for students familiar with VUE has a low learning curve, but also can realize the reuse of code logic option 4, Taro is a multi-end implementation that supports the use of React development method to write code once, generating applications that can run on wechat, Baidu, Alipay, Bytedance, QQ, fast application, H5, React Native, etc. It is suitable for scenarios where the function needs to meet multiple small program applications.

cross-platform

In Qcon sharing – Meituan mobile mobile Dynamic practice, Meituan summarized the industry and meituan’s cross-platform and dynamic mobile practice. It can be seen that the company has carried out multi-dimensional research and investment in cross-platform and dynamic mobile, which can be applied to different business forms.

Since the mobile terminal has iOS, Android two major platforms, in addition to the original H5 Web terminal, cross-platform has become the most bustling place in the big front end in recent years, after all, no one is willing to do three sets of a function, so a tug of war in user experience and RESEARCH and development experience began, each major manufacturer has their own expertise.

Phonegap and other webView-based implementations are the first to emerge. WebView’s natural cross-platform capability solves the problem of presentation layer very well, and then jsBridge is used to open up the communication between WebView and Native, so that H5 code in browser can also have the Native capability. This approach has the best r&d experience, but the worst user experience.

React Native, Weex and Picasso are based on Virtual Dom or template language. They write UI through JS code and then render it into Native components, perfectly balancing user experience and R&D experience. However, to use these frameworks well, we still need to have high requirements on performance optimization, difference leveling and engineering. Small teams and small companies should be careful to use them, otherwise it is easy to go into the pit and difficult to go out of the pit.

This year’s big hit is Flutter, which can be followed continuously. It has a good technical architecture, a big ambition and a great momentum to dominate the world.

There has been a lot of cross-platform noise for years, and I personally think the current solutions are a compromise, and as mobile performance gets better and browser native capabilities get better, maybe everyone will go back to their roots and go H5.

The framework layer

The framework layer hasn’t changed much in the first half of the year, and the three front-end frameworks are still dominant: React, Vue, Angular. React and Vue are still dominant in terms of team usage. Angular seems to be losing favor. Maybe it’s too hard to learn.

React 16.x was released in the first half of this year with a number of new features such as hooks, lazy, suspense, etc. Hooks need more practice, the overall implementation concept is very different from the original class method, students who are used to the original lifecycle writing method need to get used to it.

Vue 3.x is still in the works, and there will be a lot of updates in roadmap 3.0, such as a virtual DOM rewrite, a smaller and faster framework, full embrace of TypeScript, use of proxies for detection, and more. Call you greatly hurry up to update, vUE students hate teeth itch, KPI in the second half of the year depends on this ~

Angular hasn’t gotten a lot of attention lately, but Angular is a true MVVM framework, unlike React or Vue, which are View frameworks, so it’s a big, comprehensive framework. But the team expected the technology stack to converge, so there wasn’t much investment.

At the framework level, you can keep an eye on PWA and WebAssembly, which can be useful for improving the user experience in weak network environments and as a technical framework for desktop applications. WebAssembly can give the front end a big boost in high-density computing performance, but in limited application scenarios.

I have already written a lot of it, and you also read it very hard. The rest of it will be updated in my next article. Due to my limited energy and combined with the current team situation, THERE must be a lot of deficiencies, welcome friends to supplement.

If you are interested, you can follow the wechat public account Daidadyannong to share information about investment, finance and IT from time to time:

Shanghai Meituan-Dianping is looking for front-end senior/expert engineers. You can email wangdan53[AT]meituan.com.