Web Notes
1.0.0
Read online >>
Code cases·Reference materials
Web development is easy to get started but difficult to get to know. It is divided into stages such as first glance at the door, entering the room, and integrating the entire process. If you are reading the author's series of articles for the first time, it is recommended to go to the technical path of a certain bear for a comprehensive understanding. In this series, the author is committed to exploring how to effectively improve the team's R&D efficiency and complete delivery in a timely and reliably manner throughout the life cycle of product iteration; at the same time, it can control the overall complexity of the system and continuously optimize the system's performance and experience.
Looking back at the brilliant changes in Web technology and ecology over the past decades, we have experienced exciting changes and are often lost in the confusion of choice. With the innovation of browser versions and the improvement of hardware performance, web front-end development has entered a rapid and ever-changing era. Countless front-end development frameworks and technical systems are competing for beauty, which has left developers confused and even at a loss. Especially with the emergence of modern web front-end frameworks (Angular, React, Vue.js), the improvement of language features such as JavaScript, CSS, HTML, etc., and the proposed theoretical concepts such as engineering, cross-platform, micro front-end, large front-end, and BFF, the technology stack and community for web front-end development are also constantly enriched and improved. status. As for the so-called modern front-end engineers, they usually need to use a lot of professional knowledge to solve engineering problems, including how to modularize the project, how to design interactions between components, how to improve reusability, how to improve packaging efficiency, optimize browser rendering performance, etc.; no longer as before, they only need HTML/CSS/JS routine to develop static pages.
Overall, any programming ecosystem will go through three stages, first of all, the original period. Since it is necessary to expand on language and basic APIs, this stage will give birth to a large number of auxiliary tools. In the second stage, as the things that are made become more complex, more organizations are needed, and a large number of design patterns and architectural patterns will be introduced. This stage will give birth to a large number of frameworks. In the third stage, with the further complexity of demand and the expansion of the team, it entered the engineering stage, and various hierarchical MVC, MVP, MVVM, etc., visual development, automated testing, and team collaboration systems emerged.
Interestingly, when we stand at different points in time, the division of these three stages is also inconsistent. According to the author's current understanding, it is divided into three different stages: template rendering, front-end separation and single-page application, engineering and micro front-end, large front-end and Serverless.
Of course, every small stage will be accompanied by the emergence of new frameworks and new tools:
Web front-end development can be traced back to Tim Berners-Lee's public mention of HTML description in 1991, and then W3C released the HTML4 standard in 1999. This stage was mainly B/S architecture, and there was no so-called front-end development concept. At this time, it was mostly static pages based on template rendering. The main thing is to write some dynamic templates through JSP, PHP and other technologies, and then parse the templates into HTML files through Web Server. The browser is only responsible for rendering these HTML files. There is no division of labor between front and back ends at this stage, and usually the back end engineer writes the front end page.
In the next few years, with the introduction of architectural standards such as Ajax technology and REST, the concepts of front-end separation and rich client are becoming increasingly recognized. We need to expand on language and basic APIs. At this stage, a series of front-end auxiliary tools represented by jQuery have emerged. Based on AJAX, the front and back ends have also opened up the road of separation, and the front and back end separation architecture has gradually become popular. The front-end is responsible for the interface and interaction, and the back-end is responsible for the processing of business logic. The front and back ends interact through the interface. We no longer need to write hard-to-maintain HTML in each backend language. The complexity of web pages has also shifted from the backend Web Server to the browser-side JavaScript.
Since 2009, the development of smartphones has become popular, and the wave of mobile terminals has been unstoppable. The design concept of SPA single-page application has also become popular. The related front-end modularity, componentization, responsive development, hybrid development and other technologies are urgent. Especially the emergence of Node.js in 2009, as well as the accompanying CommonJS specifications and npm package management mechanism, gave birth to a series of excellent frameworks such as Angular 1 and Ionic, as well as module standards such as AMD, CMD, UMD, RequireJS, SeaJS, and tools such as Grunt and Gulp. Front-end engineers have also become a special development field, with a technical system and architecture model independent of the backend.
In the past, we only needed simple HTML and JS. Now we had to use the package manager to automatically download third-party packages, use the module manager to create a single script file, use the translation compiler to apply new JavaScript functions, and use the task runner to automatically execute each construction step.
In the past two years, with the increase in the complexity of web applications, the expansion of team personnel, and the user's demand for page interaction friendliness and performance optimization, we need a more excellent and flexible development framework to help us better complete front-end development. This stage has emerged many frameworks with relatively concentrated concerns and better design concepts. For example, component frameworks such as React, Vue.js, and Angular 2 allow us to replace imperative programming with DOM operations as the core with declarative programming, which speeds up component development and enhances component reusability and composability. Redux, which follows functional programming, and MobX, which borrows the concept of responsive programming, are both very good state management auxiliary frameworks, helping developers to separate business logic from view rendering, divide project structure more reasonably, better implement the principle of single responsibility and improve the maintainability of code. In project construction tools, task operation management represented by Grunt and Gulp and project packaging tools represented by Webpack, Rollup, and JSPM are all leading the way, helping developers better build front-end construction processes and perform preprocessing, asynchronous loading, Polyfilling, compression and other operations in an automated manner.
The maturity of the tool chain has also brought about engineering demand, with business leading technology and technology driving business. Front-end engineering is to standardize and standardize the front-end development process, technology, tools, experience, etc. based on specific business characteristics. Its purpose is to enable front-end development to form its own system, maximize the development efficiency of front-end engineers, and reduce the coordination and communication costs caused by technology selection, front-end and back-end joint commissioning, etc.
The application's own logical complexity, engineering loading and combination complexity improvements also bring certain challenges to the performance of the front-end. For example, component frameworks such as React will have white screen time when page initialization, which is not friendly to SEO; the front-end has begun to try to solve this problem through server rendering, and replace the templates of server languages such as JSP and PHP based on isomorphic applications implemented by React, Vue, etc., or return them to the browser in the form of a complete HTML document.
Focusing on the full stack, after years of development, Node.js has fully possessed the ability to support enterprise-level applications and has a large number of practices in many domestic and foreign companies such as Lowe, Netflix, and Alibaba. Moreover, Node.js has a natural language affinity, making it easier for developers to assume the responsibilities of the full stack. With the rise of concepts such as microservice architecture and cloud native and Serverless, the backend interfaces gradually become atomic, and the microservice interfaces are no longer directly facing the page, and the front-end calls have become complicated. Therefore, the BFF (Backend For Frontend) concept represented by GraphQL came into being. A BFF layer was added between the microservice and the front-end, and the interface was aggregated and cropped by BFF, and then output to the front-end.
While solving the problems of interface coordination and aggregation, BFF also bears the original concurrent pressure on the backend, which also brings a lot of development and operation and maintenance pressure to front-end engineers. Serverless can alleviate this problem. We can use functions to implement aggregation and cropping of interfaces; the front-end request for BFF is converted into a trigger for FaaS HTTP triggers. This function implements business logic for the request, such as calling multiple microservices to obtain data, and then returning the processing results to the front-end. In this way, the pressure of operation and maintenance has shifted from the previous BFF Server to FaaS services, and the front-end no longer has to care about the server. Serverless can also be applied to server-side rendering, splitting each previous route into functions, and then deploying the corresponding functions on FaaS. In this way, the path requested by the user corresponds to each individual function. In this way, the operation and maintenance operations are transferred to the FaaS platform. When the front-end renders the server side, there is no need to care about the operation and maintenance deployment of the server program. In addition, mini programs such as WeChat and Alipay also provide cloud development platforms that conform to Serverless concepts, empowering the rapid iteration of business front-ends.
For more information and guides, see INTRODUCTION.
Chinese version | English Version
If you are a very experienced developer and want to know about front-end engineering and architecture, it is recommended to read the article Front-end Evolution.
If you don't have a complete understanding of JavaScript basic syntax, it is recommended that you first browse "Modern JavaScript Syntax Basics and Engineering Practice" to understand the basic JavaScript syntax and practical applications.
If you want to understand Node.js full stack development, you can refer to Node-Notes.
After understanding the theoretical knowledge, it is recommended to go to wx-fe to check all the author's front-end related open source projects.
All articles of the author are subject to the Creative Commons Attribution-Non-Commercial Use-Prohibited Explanation 4.0 International License. Reprinting is welcome and copyright is respected. You can also go to the NGTE Books homepage to browse a list of books for multiple categories including knowledge system, programming language, software engineering, model and architecture, Web and large front-end, server-side development practice and engineering architecture, distributed infrastructure, artificial intelligence and deep learning, product operations and entrepreneurship, and other:
