I covered the big front end in the last article about state management, UI components, applets, cross-platform, and framework layers. In this article, I’ll continue to cover programming languages, engineering, monitoring, testing, and the server side, as well as looking ahead to what the big front end can focus on in the second half of the year.

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

  • Technology adoption lifecycle
  • Technical direction

A programming language

statesofjs

At present, the mainstream programming language has been es6/7 +Babel combination, after using ES6/7 basic can not return to the original ES5 era, the emergence of the concept of classes and modules to facilitate the modular loading of JS code, plus a variety of grammar sugar with happy flying. The async await syntax also replaces promise writing, making the code logic more concise. The ES specification continues to iterate rapidly, with an updated version coming out every year, introducing a number of language features, and Babel features that translate new syntax into ES5 versions to run in the browser.

Stateofcss 2019 also has statistics on the use of CSS features, with the outer circle of each feature representing the number of heard and the inner circle representing the number of actually used features.

In fact, the coverage of CSS features depends on the level of browser support, the better the browser support, the more likely to achieve higher usage. You can see that several highly used CSS features work well in browsers, with the exception of Opera Mini and a little IE11.

One interesting thing is that Flexbox is more popular than Grid in terms of layout, probably because Flexbox is better in terms of support in older browsers, but there is no difference in terms of support in current major browsers. Another factor may be that React Native also recommends using Flexbox for layout, which has a large audience.

The concept of CSS in JS should come from React Native, which was quite subversive when I first got to know it. I directly wrote the corresponding CSS definition in JS files, which maximized the integration of components and solved the problem of global CSS pollution. In the web front end, CSS in JS has many ways to achieve, but at present it is still relatively early, the traditional Less, Sass such CSS preprocessing framework has been able to better solve some problems, from the programming habit is also consistent, so CSS in JS concept is good, but to be promoted still needs time.

Houdini proposed an unprecedented vision: open CSS apis to developers, through which developers can extend THEIR own CSS, and provide corresponding tools to allow developers to intervene in the browser rendering engine style and layout process. In a nutshell, Houdini allows people to write CSS polyfills to greatly improve the speed at which new CSS features are introduced. Ironically, it also requires browser support. The W3C standard is still in working draft, and most browsers don’t support it very well yet

engineering

When it comes to engineering, let’s take a picture shared by Tencent Live. Many people will think that engineering is just webpack or gulP packaging. In fact, it should cover the whole process of project creation, development, compilation, packaging, testing, release and monitoring.

Project initialization project scaffolding is now very common, such as create-React-app or vue-CLI are the official standard scaffolding tools. It is recommended for larger companies to package their own scaffolding, which encapsulate best practices such as engineering directory structures, Lint configurations, monitoring configurations, dot-point configurations, etc. Scaffolding is an integral part of the standardization of the landing front end architecture.

The local development lint specification must be implemented early in the project. You can either use the Airbnb specification or customize it. Lint can greatly improve code quality, at least in terms of code style. The introduction of Sonar can further improve the quality of the code, help analyze potential problems, and analyze the code repetition rate, too long and high number, etc. These are the so-called bad smell of code, if left to develop, the project maintenance cost will rise sharply. The necessity of Mock tools in front and back end alignment can fully show, most of the time due to end interface definition is not clear before and after the alignment process is a dispute, if the lack of a Mock tool, the front will also become the backend interface debugging of trigger, click on the front page, back end debug most, front-end friends can’t afford to injury. Mock tools should have at least the ability to define interfaces and Mock locally to greatly enhance the development experience.

Front-end engineering packaging tools strongly recommend WebPack 4, with its powerful plug-in capabilities that allow you to do just about anything. Webpackage 4 introduced a more powerful and intelligent code split ability, which can greatly reduce the package size, usually reduced by 30%-50% after practice, and there is also a great improvement in packaging speed, usually 30% improvement.

monitoring

It’s frustrating when your boss sends you a screenshot of an online problem that you can’t recreate locally and don’t have enough logs to keep.

Monitoring capability can be divided into several stages: Stage 1: Hardware operation and maintenance capability, such as server running status, CPU, memory, disk, network, etc., can respond quickly under extended machine conditions. Stage 2: Monitoring application services, such as service availability, abnormal traffic monitoring, page interface response time, App crash, etc. Stage 3: Monitoring of core business indicators, such as comparison of business core link data on a year-on-year basis. The fourth stage: data monitoring of the whole link, from the client, front end to the service layer and the data layer, can be connected in series through the unique ID, which can facilitate the backtracking of user operations and reproduce the problem site.

It is clear that monitoring these four stages requires a lot of infrastructure, and large factories often have a complete set of wheels. For small teams, adopting an open source solution can quickly fill capabilities.

Cat is an open source industry conscience monitoring solution of Meituan. It has good monitoring ability for both front and back ends and complete data collection. It can provide real-time performance indicators, health status, real-time alarm data and other data, which has been practiced by many Internet companies

Umeng has been widely used as a mobile terminal behavior analysis tool. However, for DACHang, user data is very critical. If you have the ability, you are advised to conduct research by yourself.

Lighthouse/Perf Curve/Perf Budget is a set of performance monitoring tools. Not only can you get real data about your online environment, you can also get early warning of performance problems and best practices for performance optimization during development. It’s also an indispensable tool for you

test

Here usually refers to automated testing rather than manual testing, from the test coverage can be divided into unit testing, UI testing, interface testing and functional automation testing. Few companies or teams I’ve worked with have done a good job of automated testing, and frequent changes in time and requirements are often the biggest excuses, but programmers don’t want to write test cases.

From the point of view of the difficulty of landing, interface test and unit test is the best landing, not to mention the difficulty of the interface is not high income is good, mainly need to prepare some requirements for data. Unit testing starts with Jest, and can also calculate coverage, but unit testing should be clear about the scope of testing, general business logic and underlying common methods are more suitable. Therefore, it is very important to separate the business logic code from the UI layer code. At this time, state management frameworks like REdux have natural advantages, which can be covered by reducer and action in a single test.

UI testing is usually helpful for component libraries. The simple way to do this is to compare the DOM with snapshot. Functional automation is rarely implemented. Appium or Selenium are among the best, depending on the business situation. If there are frequent page changes, functional automation is cool at the beginning, and subsequent maintenance costs are surprisingly high, and due to the time difference in functional coverage, it still requires a lot of manual testing.

The service side

Since the emergence of Node, front-end technology formally entered the development of the server, so that the front-end partners can carry out the development of the full stack, the scope of the technology stack has become larger, and the ability to control the business has also become stronger.

Node can provide several obvious benefits. First, it can be used as BFF(Backend for Frontend) layer to solve the problem of frequent interface changes. The BFF layer can be used to achieve more flexible interfaces, filter interface fields, and aggregate interfaces. Can be used as SSR(Server Side Render), through the Node layer isomorphism straight out, can put the front-end rendering code on the Server to achieve the first screen of the Server rendering, improve the first screen rendering time third, based on “as long as it can be implemented with JS, will eventually be implemented with JS” law, Node allows the front-end students to use JS to handle the back-end code, and it feels great to be in control

Node also has some disadvantages. First, it needs additional servers. In many scenarios, Node layer only does the work of interface transparent transmission, which is a waste for the server. This puts forward a higher requirement of operation and maintenance ability for front-end students, which often makes front-end students miserable

The server side has recently been able to keep an eye on GraphQL/Serverless, both of which have had a profound impact on the architecture of the front and back ends.

Outlook for second half of 2019

In view of the characteristics of the background business, the lack of detailed interaction design, lack of enough front-end resources, and relatively unified page style, the industry proposed to build the background front-end system through a small amount of code or no code. Some current best practices: Fusion Design, Flyice, Ant Design Pro. Everyone is from several directions to achieve no code in the middle background front-end system, Ant Design Pro based on Ant Design provides a set of middle background website framework and page template, for rapid construction is very helpful. Fusion Design and Flying Ice directly export corresponding page codes from Sketch documents by opening up the Design and coding links, which greatly releases the workload of front-end student code pages.

As a cross-platform solution (iOS, Android, PC and Embedded), Flutter is beautiful, fast, efficient and open. Currently, Flutter has been launched in Companies like Xianyu, Shell and Ali. As the next generation of cross-platform solutions, we can continue to pay attention to Flutter. It has a very big ambition, backed by Google, to smooth out the differences at the bottom of the system, and has a strong technical architecture to support it, which is worth looking forward to in the long term.

Alibaba front-end Committee four technical directions

  1. Setting up Service: Can see the whole building services in both in the background and the wireless terminal, as well as the PC has a large number of scenarios, such a large number of scenarios need to standardize the framework, want to put the inside of the standardization of parts, components and modules, also want to such services to serve all whether today or in the background, C end page, We hope to have such a system — service-oriented and standardized services to get through the whole system, which is why we regard building services as the most important direction for the future.

  2. Serverless: Allows the front end to be closer to the business, allowing more capacity to sink. Moving from the front end to the Node system is a big challenge, but with Serverless we don’t have to worry about deployment, operations, all the DevOps, and the state of the underlying database. It allows us to move forward with the whole front and back end system like the front and back end layer.

  3. Intelligent: Because when AI comes, can we go from a Design to a Code? Each company’s front end has a lot of design today, a large number of the original code, we through a lot of designs and the original code of machine learning, let the middle of the layout can be learning, let the middle of the element can learn, I believe that the future D2C will be able to solve the front-end productivity bottleneck, let the front from today, a large number of low-end development, manual work, Transfer energy to many areas of deep participation, deep breakthrough.

  4. IDE: Today, we made the front end of Ali called Engineering Middle stage. The engineering middle stage controls the front end code from submission to release, including the compilation, construction, detection and release of the whole code after intermediate submission. But in the front office, each team has a tool that is fragmented and cannot be reused. Because engineering is not just about submission to release, front-end engineering should be a complete link, complete pattern from coding to release

Up to now, the whole technology stack is still in the stage of a hundred flowers blooming, but for the company or team, it needs to step from the rough era to the regular army era, which needs to do something in the standardization of the technology stack. For example, for a front-end team of about 10 people, if there are still three front-end frameworks, then technology precipitation and code reuse are out of the question. So it’s important for a front-end team to have a standardized technology stack, with unified scaffolding, Lint configuration, mock tools, programming languages, frameworks, monitoring, and so on.

Write in the last

The technology of the big front end is very complicated. Due to the limited energy of individuals and teams, there are always many omissions that need to be supplemented by friends. The adoption life cycle of each technology is also limited to personal experience and there are always some disputes, so I can only try to be relatively reasonable.

Putting each technology in a different life cycle is not meant to belittle a particular technology. On the contrary, appearing in the Laggards cycle often means that the technology has been tested over time. However, each era always has its own mainstream technology. This summary expects everyone to keep introspecting and reviewing the current technology stack. Staying in the mainstream of the industry is very helpful for future project maintenance and talent attraction.

No matter what kind of technology will be out of date, as a coder, we still need to continue to learn, not only training skills to stay on the use of various technologies, but also more cultivation of tao, to be able to remove the surface of technology, see the principle behind it and the essence of solving problems.

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