H5 front-end development knowledge written for back-end development engineers

I. Introduction

The development of the web has a history of nearly 30 years so far. In the early days of the rise of the web, there was no front-end concept. Initially, all development work was done by back-end development engineers. As the business became more complex and the workload gradually increased, the development work of the visualization part and part of the interactive function in the project was gradually separated from the business, forming the front end. development. Around 2000, Yahoo and other companies began to set up front-end engineer positions. Since 2005, the official front-end engineer role has been recognized by the industry. By 2010, the Internet began to fully enter the mobile era, and the work of front-end development became more and more important. The technology development in the front-end field is also getting faster and faster. Various new ideas, design patterns, tools and platforms are developing rapidly, and the skills required for front-end engineers are also getting higher and higher. At this time, major domestic Internet manufacturers have also set up the positions of front-end development engineers.

So What is a front-end engineer? Here, "front" and "end" can be split to understand. "Front" is easy to understand. Compared with the concept of "rear", "end" has a different meaning, as shown in the following figure:

In a broad sense, all engineers who are responsible for layout, typesetting, and displaying pages on the side can be called front-end engineers. Different sides use different languages, among which:

• On the browser side, develop using JavaScript, HTML and CSS languages
• On the IOS side, use Swift or Objective-C language development
• On the Android side, use the Java language to develop
• On WeChat, use small programs to develop

Since browser history is the oldest and most famous of the end, it will use JavaScript , HTML and CSS language, the engineer in charge of the presentation page in the browser, known as front-end engineers.

Second, the entry stage - web foundation

1. Web three-tier structure

In the era of web 1.0 information sharing, the first stage of web development is the static technology stage. At this stage, HTML language is the most effective carrier for Web to display information to users. The common way of writing at this time is to mix HTML, CSS and JavaScript code into a single file, named index.html, and call it a web page. Today, there are still many web pages that write HTML, CSS and JavaScript code in one file, but when the content of the web page becomes more complex, writing different codes in one file will make the content of the file more and more bloated and difficult to maintain. The concept of web three-tier structure. The three-tier structure of the web is shown in the following figure:

• structure layer: is the HTML tag, the tags are combined with each other to build the basic structure of the web page;
• presentation layer: is CSS, which adds styles to labels, such as label color, size, position, etc.;
• behavior layer: is JavaScript, which is used to achieve special effects on web pages, and pages can be dynamically modified in script tags.

In the same web page, the code of different layers is separated, and common code modules can be shared in different projects, reducing the redundancy of the code. Of course, how to split the code of different layers more reasonably requires specific analysis and exploration of the best solution for code splitting according to different projects.

2. DOM and BOM

The concepts of both DOM and BOM are very important in the front-end domain. DOM is the document object model, that is, treats the document as an object, mainly dealing with the methods and interfaces of web page content; BOM is the browser object model, that is, treats the browser as an object, and interacts with the browser. The relationship between the two is as follows:

The core object of the BOM is Window, such as accessing the width and height of the physical resolution of the screen, as follows:

// 屏幕物理分辨率的高 
window.screen.height 
// 屏幕物理分辨率的宽 
window.screen.width 
// 获取当前完整的url链接 
window.location.href 

The fundamental object of the DOM is document, which is an attribute of the window object, namely window.document. You can obtain the nodes in the document through the document object and also operate the nodes. The following is a simple document object tree:

You can get the a tag document node object through the attribute id, as follows

// 通过id为aLink属性获取标签a的文档对象 
const eleDomObj = document.getElementById('aLink')  

You can also add attributes directly to the a tag, as follows:

const eleDomObj = document.getElementById('aLink')  
eleDomObj.setAttribute('href', '******') 

3. Front-end basic system

The above figure mainly shows the basic content that needs to be familiar with in the front-end basic system as front-end development. The actual subdivision or expansion of the relevant content of the front-end basic system is much more than that summarized in the above figure.

3. Advanced stage--single-page application and micro-frontend

1. AJAX and single-page applications

In the Web 1.0 stage, the server will return the entire page or document, and the front-end page needs to refresh the entire page to obtain the background data, which is a very bad user experience. After entering Web 2.0, dynamic web pages have gradually developed. The most representative technology is AJAX. AJAX allows client-side JavaScript scripts to provide request services for partial page content, and then dynamically refresh part of the page content without going back to the server. , which is to update the document object in the browser, that is, the DOM. In the Web2.0 stage, the interaction between the website and the user is strengthened. The content of the website is provided by the user, and many functions of the website are also constructed by the user, which realizes the two-way interaction between the website and the user.

In 2004 and 2005, Google released two heavyweight Web products: Gmail and Google Map, both of which made extensive use of AJAX technology. With the popularity of AJAX technology, more and more websites use AJAX to dynamically obtain data, which makes dynamic web content possible. In addition, CDN began to be used for static resource storage at that time, so SPA (Single Page Application single page) appeared. page application) , the general pattern is shown in the following figure:

As shown in the figure above, the corresponding HTML, JavaScript and CSS are loaded when the Web page is initialized. Once the page is loaded, the SPA will not reload or jump the page due to user operations. Instead, it uses the routing mechanism to implement HTML content. The transformation, UI and user interaction, avoid the reload of the page. The advantages of such a SPA are as follows:

• front-end and back-end Development : of front-end and back-end responsibilities, clear architecture, front-end interactive logic, back-end responsible for data processing, single-page web applications can provide data through REST API, and use the protocol together AJAX fetches data asynchronously;
• Good interaction Experience : can improve the page switching experience, and users will not frequently switch browsing pages when visiting the application page, thus avoiding unnecessary jumps and repeated rendering.

The single-page application development model realizes the separation of front and back ends, making the entire business system architecture clear, which can be developed and tested independently. However, when the background single-page application has multiple different sub-modules, and the sub-modules have relatively independent and complete functional systems, once there are more and more sub-function modules, the entire single-page application will become very large and bloated. The development and maintenance costs will be greatly increased. If in this scenario, the SPA mode is still used for development, the maintenance in the later stage of the project will become unimaginable. At this time, the concept of micro-frontend emerges as the times require.

2. Microservices and Micro Frontends

When it comes to micro front-end, micro-services are inseparable. Back-end students should be very familiar with micro-services. Micro-services allow the back-end architecture to be extended through loosely coupled code bases. Each code base is responsible for its own business logic and exposes it. An API, each independently deployable and each owned and maintained by a different team. The benefits it brings are:

• Disassemble a huge monomer into multiple sub-services, which greatly reduces the development complexity;
• The task boundary is clearly divided, each sub-service is developed independently, and different services can be developed by different developers in parallel to improve development efficiency;
• More fine-grained strengthening of the modular process, higher maintainability and readability;
• Each microservice can be independently deployed and released, making it possible to automate CI (Continuous Integration)/CD (Continuous Delivery).

The idea of micro front-end is to introduce the micro-service architecture into the front-end, which is mainly applied to the browser side and . Its core is to disassemble the web application , and finally aggregate different subsystems or sub-modules into a complete application. In the early days, it is also possible to use the iframe nesting method to realize the integration of multiple independent functional modules in a single application, as shown in the current architecture of the one-stop workbench for the customer service domain:

As shown in the picture above, the red part of is integrated into the workbench through the iframe embedded mode. Through the way of iframe nesting, there are many problems encountered in the one-stop workbench. The main problems are as follows:

• The agent assists in creating the work order module. The switching frequency and operation process of the front-line customer service are very fast. When different modules communicate through postMessage messages, there is a delay phenomenon, which leads to the serialization of work order data;
• The frequency of the work order details is very high, and the static resources need to be reloaded every time they are opened, the rendering efficiency is low, and the user experience is relatively poor;
• Front-line customer service generally opens multiple iframes of work order details or order details at the same time. Too many iframes occupy a large amount of browser memory, causing message sending to be stuck and affecting the user's first sound time.

Based on the above problems, the one-stop workbench architecture of the customer service domain that is currently being reconstructed and optimized using the micro-frontend design idea is shown in the following figure:

Split each individual functional module into different sub-applications through the above figure , such as Work order workbench is a sub-application , Hotline service is a sub-application , different sub-applications are independent Influence, sub-applications share the resources of the main application, and there is no need to reload static resources each time, and each sub-application can be independently published and deployed.

Fourth, the high-level stage - the transition to the full stack

In the rise of web technology for a long time, if front-end developers want to develop server-side code, they must learn back-end languages such as JAVA or PHP. Since the rise of Node.js in 2009, JavaScript has been able to run on On the server side, back-end engineers used traditional back-end languages to complete a lot of work. In theory, front-end engineers can use JavaScript in the runtime environment created by Node.js. At this time, full-stack development engineers are gradually recognized by the industry. Since the rise of Node.js, many star projects have stood out in the front-end field due to its high performance and easy deployment, such as BFF and practice in front-end engineering.

1. What is BFF?

BFF, that is, Backend For Frontend (backend serving the front end) , that is, the server will consider the use of the front end when designing the API, and directly process the business logic on the server side, also known as the user experience adapter. BFF is just a logical layering, not a technical . The emergence of BFF provides a front-end application with an aggregation point for business service calls, which shields the complex service call chain and allows the front-end to focus on the required data instead of the underlying services that provide these data.

Imagine the following scenario: A page needs to send requests to service A, service B, and service C. Different service return values are used to render different component modules in the page, that is, a page has many requests. At this point, each visit to the page requires 3 requests to be sent. At the same time, in order to ensure the different requirements of Android, iOS and Web, it is necessary to write different API interfaces for different platforms, and whenever the value changes, we need to implement it on each client (Android, iOS, Web) separately. The cost of this is obviously considerable. When we have the BFF layer, we do not need to consider the migration of the backend of the system. Any changes in the backend can be modified in the BFF layer, as follows:

As shown in the figure above, adding the BFF layer originally sent 3 requests per access, which became one request. The BFF layer will aggregate the data of multiple services in advance and return it to the front end.

Note: The above is just a simple example to illustrate the benefits of BFF layering. The actual complex business scenarios will be much more complicated for BFF's design .

2. Front-end engineering practice

Front-end engineering is mainly based on Node.js development, and Node.js is suitable for developing various tools in the front-end direction. For example, the package management tool npm integrates various tool modules, including various front-end pre-compilation tools, build tools, scaffolding, and command-line tools. Its main application scenarios are shown in the following figure:

Five, before and after mutual encouragement - summary

• The front-end is not limited to html, css and javascript. It is necessary to understand the knowledge related to the server and database, so that some reasonable suggestions can be made when reviewing technical solutions with the back-end;
• The front end needs to understand the data and control the business logic outside the data, not just focus on the display of the page;
• The back-end needs to understand the knowledge related to the front-end, and consider what data structure is required for page rendering, so that when designing the REST API, a reasonable data structure can be output to the front-end page rendering;
• The back-end needs to have certain front-end skills. After the front-end completes the componentized output to the material library, the back-end can complete the page construction based on the business components of the material library, improving the efficiency of research and development.

The above is just from the perspective of many years of front-end development, explaining the relevant content that back-end students need to know. The actual front-end content is far more than the article describes, such as mobile terminal, layout and typesetting, Hybrid, applet, PWA and Serverless, etc. belong to In the field of front-end technology, there is a long way to go. I will search from top to bottom. I hope this article can bring some help and inspiration to back-end development students, and also allow front-end development students to have a better understanding of front-end knowledge.

6. Reference documents

• Front-end knowledge required for back-end development in the
• Taobao Yubo sparked discussion on the front-end and back-end development model of the Web
• A brief history of WEB development, the development process from Web1.0 to
• A brief history of front-end engineers in "Science Science"
• JavaScript's Dom and Bom
• A preliminary study on the micro front-end architecture and my front-end technology inventory
• Wolf: Node full stack brings more possibilities to the front end

Text/Bill

Pay attention to Dewu Technology and be the most fashionable technical person!