Today, big front end is not a strange word, we occasionally hear people talking about it, a few days ago, I saw zhuo wrote an article titled “The Survival of App Developers in the Era of big front End”, indicating that the word has become a consensus.

But what exactly does a big front end mean? In fact, there is no clear definition of big front end. It was invented in China, and there is not even an English word for it (if there is, please whisper to the uninformed writer). Some people do not think of the invention of technical vocabulary, but I think the development of domestic front-end related technology is not bad compared with foreign countries, we need to make some achievements in theory, standards, so as to match our development situation.

Last month, when I was preparing for GMTC2017, I visited Liu Pingchuan of Meituan Dianping, Zuo Zhipeng of Didi, and Tian Shi of Handtao, and had an in-depth discussion on the problem of big front end. Here, I would like to use this article to discuss the definition of big front end. Hope to see more discussion and sharing about it.

Big front end on three levels

If we analyze exactly when we use a big front end, there are probably three different contexts in which the definition of a big front end is different.

The large front end and NodeJS are separated from the front and back ends

The big front end is sometimes referred to with NodeJS and sometimes with the separation of the front and back ends. In fact, the concept of the big front end is also proposed by the front end students, from which we can derive the original definition of the big front end.

Front-end technology has experienced explosive growth over the past few years, and one of the most important drivers of this growth is NodeJS. NodeJS provides a bridge between the front-end and the system, allowing the front-end technology to shine not only on the server side, but also on the local front-end development tools and workflows, freeing up the front end and allowing JavaScript to rule the world.

However, when people calm down, they find that NodeJS does not have too many advantages on the server side, coupled with some twists and turns in the development of NodeJS technology itself, resulting in its unsatisfactory application on the server side. However, the front-end students achieved some stage victories, the result of which was the separation of the front and back ends.

In the past, the front-end page template was generated by the back-end, resulting in low efficiency when the page needed frequent modification. Front-end separation means that the back-end only provides interfaces, and the front-end has complete control over the page. At the same time, the front and back ends are separated through the middle layer, where data is extracted, aggregated, and distributed. This middle layer is usually also handled by the front end students.

In this sense, the original definition of a big front end can be called the expansion of front-end technologies, including NodeJS, while having greater control over Web pages and developing pages that host more functionality.

The large front end interacts with the pan-GUI

With the advent of the era of mobile Internet, mobile APPS become the new mainstream, while the status of browsers is gradually reduced, and the traditional front-end development is embarrassed.

Of course, the front end is not really in trouble. Hybrid development represented by PhoneGap/Cordova, WebView development embedded in App, and “wechat Web” after wechat becomes the mainstream, the front end technology is also widely used in mobile terminals.

However, when people talked about mobile development, they mostly referred to iOS and Android Native development technologies, and that changed with the release of React Native. In fact, until now, React Native has not been widely used at home and abroad, but it does solve the pain points of Native cross-platform code reuse and dynamic, and avoids the performance problems of Hybrid before, so it has attracted wide attention.

With the addition of React Native, the technology stack on the front end expands again. In addition, React Native allows us to find that by adding a Virtual DOM, codes of logical operations and models can be reused to a large extent. According to the existing practice summary, most React Native codes can be reused by more than 80%.

The virtual view layer can be used not only in mobile terminals, but also in all places where human computer interaction is carried out through the GRAPHICAL interface. In PC, Web, mobile devices and even all kinds of devices in the future that have not yet been invented, as long as the system can run JavaScript engine, development solutions similar to React Native can theoretically be adopted. This front-end technology, of course, can be called a big front end.

If the front end separation is the front end getting bigger vertically, the front end technology across different terminals is the front end getting bigger horizontally.

Big front end team status

In practice, there is also a case for using a large front end, which is a large front end team/department of a domestic company. As far as I know, meituan-Dianping, Ele. me and netease hangyan all have teams called “Big front end” or use this title externally.

However, since there was no clear definition of the big front end, the composition of these teams was different, and each company set up their own understanding of the big front end and the need to support their business. The details are as follows (with possible deviation) :

  • Front-end team of Meituan Dianping: including FE, iOS, Android development, and some engineering work.
  • Ele. me big front-end team: Mainly FE, including NodeJS, Weex, etc.
  • Front-end team of netease Hangyan University: In a share by Wang Yuan, executive president of netease Hangyan University at the end of last year, he said that the technology system of netease Hangyan University front-end includes Web front-end, PC client and mobile terminal.

These words, written in press releases and printed on business cards, are an important help in landing the concept of the big front end, and are also the basis for determining what the definition of the big front end is. Of course, there are too few cases to affect our understanding of the big front end.

Why is a big front end the trend

In client development, the debate between Native and HTML5 has lasted for nearly ten years, and people have lost interest after the debate. At present, there is no one to replace each other, but a trend of integration, and the product of integration is the big front end.

Here I boldly predict: the big front end will not only become the development trend of mobile development and Web front-end, but also will be the development technology trend of display device terminal in the future.

Why do you say so?

Terminal fragmentation

We have entered an era of fragmentation. This year is exactly 10 years after the first iPhone was released, and in 10 years we have seen no signs of smartphones being replaced. But innovation continues, and we have smartwatches, TVS, glasses, VR headsets, and so on, and we can imagine that the number of devices will continue to grow.

These new devices are also new platforms that, like smartphones, can install third-party apps, and almost all of them have browser support or built-in browser engines. While some platforms restrict the use of Web technologies for application development, this is just platform policy, as long as the restrictions are relaxed, the front-end technology can somehow enter and even become mainstream.

With the exploration of Hybrid in the early stage and React Native later, the front-end has basically become a necessary technology in the development of display terminal applications.

Serverless

Serverless is a hot concept in software architecture. No service here does not mean that there is no need for a server, but that the new architecture replaces the traditional server concept. Serverless is represented by AWS Lamda released by Amazon in 2014, followed by major cloud computing vendors.

For terminal developers, there is no need to know much about Serverless, so I won’t cover it here, except that it is recognized as one of the trends in cloud computing.

The relationship between Serverless and the big front end lies in the fact that Serverless needs a more powerful front end. The book Serverless Architectures on AWS introduces five principles of Serverless, including one such as:

Create thicker, more powerful front ends

Therefore, in terms of software architecture trends, the front end will become “bigger” and more important in the overall system.

The big front end represents technology

Having said that, what are the representative technologies of the big front end? In terms of business, I think terminal development, gateway design, interface design, desktop engineering can be regarded as a big front-end business category. The specific technology is based on HTML5, NodeJS general technology, as well as the proprietary technology of each platform. At this stage, we still need to master some representative frameworks and platforms.

React system and Vue system: two front-end ecosystems

There are currently three front-end frameworks, and React and Vue, in addition to Angular, have their own ecosystems.

The significance of ecology is comprehensive coverage, with almost no shortcomings. React and Vue have covered the current mainstream system platforms, and can use React Native, Weex and other frameworks for Native development, which has strong advantages over other technologies.

PWA: The ideal of openness

PWA is a Google technology that represents standardization efforts and open ideals for front-end developers. It’s not practical yet, but the information I’ve heard recently suggests that the technology has a lot of potential and a lot of supporters. More examples are likely to emerge this year.

Applets: Super App points to another future

After the official release of wechat small program, and it has not been released before the hot formation of inverse ratio, almost no voice in the market. But that’s just the product strategy, not the technology. In fact, the user experience of wechat miniprogram is quite good, which shows the potential of this technology.

More than anything, miniprograms open up the possibility that super Apps could become the spiritual successor to the BROWSER of the PC era, our new operating system.

The impact of a large front end

Finally, the impact of the big front end.

New mobile development technology stack

As the mainstream terminal device, the application development technology of mobile device should be the most concerned technology of big front-end. In the past, the technology stack of mobile development was mainly based on native development, but in the future, I am afraid that mobile development needs to master the front-end technology at the same time. Zhuo’s article also expressed this idea.

At WeexConf in January this year, Tianshi shared a paragraph that impressed me a lot. His idea was that after 10 years of evolution, innovation has slowed down and mobile development is on the road to standardization, so Weex will follow the W3C specification. And I have a deeper understanding: before mobile development, many components need to be developed by ourselves, but as DACHan becomes more open source, we will have less and less need to develop on the basic components/frameworks. Mobile development does not have a W3C specification, but there will be a de facto standard based on open source.

As a result, I think the path for pure native mobile development is getting narrower, and the entire mobile development stack is going to have to change in a big way.

New job: Big front end engineer

As the concept of a big front end takes root, what will it bring? I think there will be a new profession: big front-end engineers.

It differs from the previous Web front-end in that the big front-end will do more terminal development, engineering, and so on, rather than just developing Web pages. The big front end engineer will handle all the development on the end. Compared to the controversial full stack engineer, it is much more maneuverable.

And large front end engineer will be a professional has a strong vitality, because the strong vitality will display terminal equipment, human access to information, after all is more than 80% through visual, no matter how Amazon Echo such speech interactive equipment evolution, display terminal will have a place, large front end so that it won’t lose their jobs.

conclusion

This article is certainly biased, and I can’t be right about everything I say. Hopefully it will get you thinking, and this article has served its purpose.

The authors introduce

Xu Chuan is chief editor of InfoQ Chinese mobile and chief editor of GMTC Conference. Long-term focus on mobile development and front-end technology development.

read

  • The era of big front App developer survival: www.jianshu.com/p/1127b4aab…
  • Taobao side before and after the separation solution: 2014 jsconf. Cn/slides TAB/herm…
  • No server architecture: www.infoq.com/cn/articles…