1 the introduction

The whole industry has found many breakthrough directions in the continuous iteration of front-end framework, such as RN, Flutter in cross-platform, server GraphQL, Serverless. The integration of front-end and client is getting closer and closer. With the support of Node and Electron, front-end has expanded its layout to server and desktop.

At the same time, as the front-end development becomes more and more complex, the whole front-end development has experienced the evolution of artificial -> tool -> engineering -> intelligence. At present, each large factory is constantly iterating in the engineering practice, and many front-end intelligent solutions such as Low/No Code have emerged. The engineering practice has also been deeply carried out in all links of r&d, and the standardization ability of front-end r&d has been continuously improved. Moreover, with the addition of machine learning and the emergence of various UI2Code solutions, front-end research and development has entered a completely different era.

With the increasing capabilities of endpoints, there are more and more things to do on endpoints now. First of all, the direction of data visualization, all kinds of charts, maps, 3D and other data visualization attempts are becoming more and more. Secondly, with the support of ARTIFICIAL intelligence, the application of artificial intelligence on the end has become popular, reducing the interaction of the server and improving the real-time response capability of the system. Finally, with the adoption of technologies such as Webassembly, it is possible to take the front-end capabilities up a notch and do more complex on-end computing.

In order to understand the development trend of the current front end, let’s start from the major domestic Internet companies to understand their latest trends and future planning.

The last article has given a detailed introduction to the overall technology system of Alibaba Group, including infrastructure, service layer, application layer, UI component layer, cross-platform, engineering and intelligence. We can see many cutting-edge explorations, which are very helpful for students who want to understand the development trend of the front end. I suggest students who have not read ali first.

This one starts from Baidu.

2. Baidu team introduction

Baidu’s business has been sluggish since entering 2019, and its team and organizational structure have been constantly adjusted. From the stock price trend this year, we can see that its development is really not smooth. In terms of market value, it has been surpassed by Meituan and JINGdong in succession. Since then, there is no BAT in the river’s lake, only AT remains.

However, baidu, as an established Domestic Internet company, especially after years of experience in searching large amounts of data, is a company with the strongest engineer culture in China and is known as the Huangpu Military Academy of The Internet in China.

Therefore, although the business/market value is no longer comparable to Alibaba and Tencent, the technology system is still the top level in China. The following is a glance of Baidu’s front-end technology system.

The following is a general introduction to baidu front-end related technical team (with public information)

Baidu FEX

fex.baidu.com/

The name FEX comes from the fact that FE stands for front-end, and X stands for the ability of everyone to do something, not only know something about everything, but have a specialty. Like the X-Men, each person has his own unique abilities, but can make things better together as a team. FEX originally belonged to the “Web front-end RESEARCH and development Department”, now the core members are in Baidu Cloud, committed to the front-end technology into technical products.

FEX is committed to improving development efficiency and page experience in complex Web applications, full-end applications, full-end data monitoring and evaluation, and front-end engineering optimization for baidu’s various product lines. FEX is the most influential front-end team within Baidu.

FEX is the earliest open source practitioner of Baidu, and has successively launched libraries and tools such as Tangram, UEditor, FIS, GMU, Chassis, KityMinder, etc. Its main products now include AIPage, Sugar and Amis.

Baidu EFE

efe.baidu.com/

Baidu EFE (Excellent FrontEnd) technology system, formerly ECOM FrontEnd team, gradually formed a set of perfect FrontEnd technology system after the development of technology.

The EFE technology system is now composed of multiple front-end teams that follow the technology system. E(Excellent) represents our technical attitude of pursuing excellence.

EFE team has many open source projects, the most famous of which is the visual chart library ECharts. It is also a very influential team within Baidu.

Baidu EUX

eux.baidu.com/

Baidu Enterprise Product User Experience Center, there is not much information disclosed on the website homepage. As the name implies, it is responsible for the interaction, vision and front end of Baidu enterprise products.

Baidu’s growth

sux.baidu.com/

Baidu User Experience Center, founded on May 17, 2016, is a combination of the former Mobile User Experience Department (MUX), Search User Experience Department (SUX), nuomi design team, Phoenix Nest design team, Hao123 design team and other influential organizations in the industry, covering more than 85% of Baidu product experience design. UXC brand resonates with the era of increasingly prosperous design and docking with the future of more competitive design. Facing the unknown and future, we will continue to promote the perfect integration of art and technology, establish our unique aesthetic and influence, adhere to the design concept of “simplicity and perfection”, and take the user as the center. Our vision is to become the benchmark of user experience in China and a respected user experience organization.

Honesty, mutual assistance, learning, persistence, these excellent qualities should continue to inherit, for our mission escort!

3 Infrastructure

cloud.baidu.com

Similar to Alibaba, Baidu also has intelligent cloud services, which provide Serverless function computing, CDN, artificial intelligence, data visualization, IoT visualization, security protection, developer services such as AR platform and performance monitoring APM for the front-end field

• Serverless function computing CFC: provides cloud Serverless computing capability based on event mechanism, elastic, high availability, good scalability and fast response. You can only focus on the code part of the business logic without paying attention to and configuring server resources. Multiple function triggers are supported to meet diversified event triggering scenarios.
• CDN: Baidu intelligent cloud CDN publishes content to the edge nodes closest to users, intelligent scheduling and nearby distribution, relying on high availability and high stability, as well as baidu’s self-built 1000+ high-quality node pairs, 100T+ bandwidth, single node 80G-160g, IPV6 support and other high-quality features. Provide users with baidu search, Baidu map, Baidu network disk quality baidu CDN services, let your site like Baidu search as fast!
• Artificial intelligence: provides a complete solution of artificial intelligence, including voice technology, natural language, image technology, face recognition, video technology, text recognition and so on
• Data visualization -Sugar: Provides large screen visualization services for reports and data, rich chart components, drag-and-drop editing, and supports driller, linkage and other interactive data analysis.
• IoT visualization: Seamless docking of massive real-time data, zero programming design visualization dashboard, perfect support for mobile phone/monitoring display, more powerful customization and embedding functions, make it so easy to launch the Internet of Things visualization applications.

• Security protection: Baidu Cloud provides DDos protection, firewall, security monitoring, penetration testing and other services to escort your application.
• Developer services: Baidu Efficiency Cloud, AR platform (providing face effects, body effects, environment effects, 3D identification and rendering, etc.), application performance management service APM, etc.

Efficiency cloud covers the whole process of R&D from demand, development to delivery. Through project management platform iCafe, code management platform iCode and continuous delivery platform iPipe, it enables all-round R&D and ensures the r&d process.

Application performance management service APM mainly includes two functions: dial test and mobile terminal monitoring. It provides real and continuous performance monitoring for your APP and website, and simultaneously finds various problems from APP end to network layer, locates problems in time, and effectively improves user experience!

4 Front-end application layer framework

LAWAS- Vue. Js based PWA solution

lavas.baidu.com/guide

Lavas is a Vue based PWA solution that can help developers quickly build PWA applications and solve various problems in accessing PWA. It significantly improves user experience and user retention, and developers do not need to pay too much attention to PWA development itself.

Progressive Web App, or PWA, is a new way to improve the experience of Web apps by giving users the experience of native apps.

PWA can achieve the experience of Native application not by referring to a particular technology, but through the application of some new technologies, which has been greatly improved in the three aspects of security, performance and experience. PWA is a Web App in essence, and has some features of Native App with the help of some new technologies. It has advantages of both Web App and Native App.

However, PWA access is still relatively complex, covering Web App Manifest, Service Worker, Notification API & Push API, App Shell & App Skeleton, HTTPS, SSR and so on. So the cost of access is relatively high. Lavas, based on Vue.js, offers a complete PWA solution that helps developers quickly access PWA for a Native Like experience.

San-mvvm front-end framework

San is a component framework for MVVM. It is small (< 15K), compatible (IE6), and delivers excellent performance, making it a reliable and reliable solution for implementing responsive user interfaces.

San through declarative class HTML view templates, outside the support all the native HTML syntax features, also supports the data to the view of binding instructions, the most commonly used in the development of business, branch, loop instructions, etc., on the basis of good usability, completed by framework based on the template parsing a string, and build a tree view layer node relationships, Generate UI views quickly with a high-performance view engine.

The biggest advantages of San over Vue and React front-end frameworks are its small size and excellent performance. As shown in the following figure, San has certain performance advantages when adding, replacing, and deleting rows of tables. However, its problem lies in its lack of ecology. Compared with mature frameworks like Vue and React, it lacks other tools such as engineering, state management and test related tools.

5 UI component library

ECharts- Data visualization component library

ECharts is an open source visualization library using JavaScript, which can run smoothly on PC and mobile devices. It is compatible with most browsers (IE8/9/10/11, Chrome, Firefox, Safari, etc.), and relies on ZRender, the vector graphics library. Provide intuitive, interactive and highly customizable data visualization charts.

ECharts should be the most widely used data visualization component library in China, which covers a wide range, from the simplest line chart, bar chart, to high-level display such as geographic location, 3D graphics and so on, it can be said that the component library is very rich and everything.

In addition to rich graphics components, ECharts can receive multiple data formats, support large data volumes, optimize for mobile, support data graph interactivity and frictionless access, and more.

Sugar- Baidu data visualization platform

Sugar provides data visualization services based on ECharts and D3 visualizations, with rich data components, drag-and-drop editing, drudge down, linkage, and other interactive data analysis.

Sugar is a data visualization platform that includes data sources, component libraries, drag-and-drop layouts, cool large screens, data analysis and permission control. It provides the ability to complete the entire process of data visualization and achieve enterprise data visualization at a low cost. The image below shows Sugar’s big-screen capabilities:

Baidu intelligent small program

Similar to wechat mini program, Baidu smart mini program is also a small program based on baidu Web/APP ecosystem. In the rendering layer, based on WebView/Native View, the logic layer obtains the underlying system capabilities through JSCore and encapsulates web/ Native components. It can also connect with Baidu intelligent cloud to provide basic cloud services and AI services.

In terms of performance, it only needs the first download, while providing pre-download, pre-load, local client container and other capabilities, which is far better than the traditional H5 in terms of experience fluency.

The biggest bright spot of Baidu intelligent small program is that relying on Baidu ecological environment, it provides the flow of search, information flow, hundreds of numbers and post bar, which can obtain user resources as much as possible.

7. Intelligent engineering

FIS- Customized front-end engineering construction

Fis.baidu.com/fis3/index….

FIS3 is a front-end oriented engineering build tool. Solve front-end engineering performance optimization, resource loading (asynchronous, synchronous, on-demand, preloading, dependency management, merge, embedded), modular development, automation tools, development specifications, code deployment and other issues.

FIS covers all aspects of front-end engineering development:

• Rich scaffolding and component repository, automatic listening, local preview, make your pages Run quickly.
• Flexible use of development tools to speed up development, automatic Sprite graphics, resources embedded, file verification, compression, merge.
• Modularity is used to improve maintainability and adapt to development frameworks flexibly
• Comprehensive management of static resources of the whole station, easily handle performance optimization

FIS3 also supports plug-in capabilities that make it easy to customize during compilation, build, packaging, and more, making it very flexible. However, due to the development of this system for a long time, the current front-end engineering in the community has a relatively complete system based on Webpack, Babel and other practices, so FIS3 is relatively difficult to promote.

Amis -Low Code background configuration platform

Amis front-end low code framework that generates various backend pages through JSON configuration. At present, it is widely used in baidu for the front-end development of internal platform, which has been used by 100+ departments and created 1.2 million + pages.

Amis supports the following capabilities:

• Write page components via JSON configuration and provide visual editors
• Data binding and linkage
• Supports multiple Action types
• Form and CRUD page generation capabilities
• Background Interface Configuration

With Amis, I’ve made a lot of money. A moderately complex page can be developed in 20 minutes, with 100+ departments connected, 1.2 million + pages created and 1.8 million active pages created.

AIPage- intelligent website building platform

Baidu Intelligent Portal (AIPage) is a SAAS application product for intelligent website construction and small programs launched by Baidu Intelligent Cloud for users of small and medium-sized enterprises. Users can get started without any programming basis, just like doing PPT drag design and production of their own website and small programs, built-in massive industry templates and components, easy to create “PC website, mobile website, Baidu intelligent small program, micro channel small program, Alipay small program” five end site. The product supports e-commerce and reservation functions, which can be widely applied to the actual application scenarios of users in various industries. Strong integration of a number of Baidu search rights and interests and AI intelligence to attract customers, to help enterprises accurately grasp every business opportunity information, efficient promotion and transformation effect!

AIPage has the characteristics of visual design, massive template components, search engine optimization, AI intelligent customer, full terminal, globalization, user marketing and so on. PC, H5, Baidu intelligent small program, wechat small program, Alipay small program 5 end coverage, visual drag design and template components can save a lot of time for customers to build a site.

conclusion

As an established Internet company in China, Baidu has a profound technological accumulation, which can be seen in application framework, data visualization, intelligent small programs, engineering and other aspects of a good precipitation. Of course, the content of the article is organized based on public information, and many internal technical frameworks are still unknown. I hope students with relevant information can communicate more.

This is the second part of the dachang front-end technology system decryption series. There will be other dachang content in the future. If you are interested, you can follow our official account [Milkdad Code Nong] to get the information as soon as possible.

“Dad” has been engaged in Internet research and development for more than 10 years, and has worked in IBM, SAP, Lufax, Ctrip and other domestic and foreign IT companies. Currently, he is in charge of the big front-end technology team related to catering in Meituan, and regularly shares his thoughts and summaries on big front-end technology, investment and financial management, and personal growth.