Everybody is good! Those of you who are interested in front-end development may know that it is relatively easy to get started on the front-end, but sometimes you feel confused when you are on your way to becoming a senior front-end engineer. This is partly because of the inherent nature of the front-end domain, and partly because most beginners lack a clear path. This article will provide an updated overview of the main aspects involved in moving from entry-level to advanced front-end with the front-end learning Roadmap from Roadmap.

2021 Front-end learning Roadmap

Now let’s look at the specific route:

network

The network is the medium and basis of Web information transfer, so we should have a basic understanding of the whole process of network interaction, working principle, DNS resolution and page presentation of terminal browser. Just like before we learn to drive, we should have a basic understanding of the traffic system and the basic structure of the car, which will play a better auxiliary role in the subsequent driving learning.

HTML, CSS, JavaScript

This is the foundation of front-end development. Most of the functions in Web applications are realized by these three, and most of the work in front-end development is based on these three. If the implementation of Web applications is compared to building architecture, THEN HTML is like steel and cement, forming the architectural body of the building; CSS is like the decoration of the building, making the appearance more beautiful; JavaScript is the power and water system, providing better service and scheduling for the building. So a solid grasp of these three content also grasp the core of front-end development, no matter how the mainstream development framework update, we can do with the same should change.

Version management system

Version management system is one of the important auxiliary tools in coding, mainly responsible for the management of code, the scope of use is not limited to front-end development, generally as long as it involves code management will use it, currently widely used Git, there are many interesting related tutorials. GitHub provides third-party code hosting services and is one of the main gathering places for programmers.

Web security

Web security may be strange to front-end beginners, but with the accumulation of front-end work experience, the more you will feel the importance of Web security. As the saying goes, “a fall into the pit, a gain in your wisdom”, attention to Web security is often treated as dispensable when there is no security incident, but once there is a real learning curve, so it is best to prevent it in the first place.

Package management

NPM and YARN are commonly used package management tools to manage code packages and dependencies used in front-end development. Current front-end development often relies on existing libraries, known as “standing on the shoulders of giants,” including open source front-end frameworks, common tools, and in-house public libraries. Reference management of these packages can be automated with package management tools.

CSS architecture and preprocessing

Handwritten CSS styles often encounter nesting and reuse of styles, which can be seen in the BEM specification. CSS preprocessing is the use of third-party libraries to preprocess the class CSS code written in the development of real CSS code, different frameworks provide similar syntax, the main role is to facilitate the writing and organization of CSS.

Build tools

Web applications usually require a build links before release, including the source code package, validation, formatting, etc., the required items according to the actual demand, main functions include executing code package, an automated build, standardize the code format, and improve the execution efficiency, and other aspects of post code, general each development team will have a unified configuration.

The framework

Now it’s time for the front end framework. The main purpose of the framework is to improve the efficiency of application development and operation, like the “aircraft cannon”, with good tools you don’t need to manually “build the wheel”. React.js and vue. js are the mainstream frameworks used by large and small factories in China. The two frameworks have their own strengths and can be used according to the actual situation.

Modern CSS

As JavaScript frameworks change, new CSS-in-JS frameworks emerge, such as: Styled Components (Styled Components), CSS Modules (Styled JSX), etc., provide a new way for the compilation and maintenance of CSS styles, and reduce the organizational redundancy and style conflicts of CSS codes. It also helps optimize the efficiency of CSS.

Web components

“Web component” is a componentized feature supported by browsers natively. It encapsulates DOM elements and interactive logic and can be used in specific scenarios.

CSS framework

The CSS framework provides common UI components. The styles and interactions are designed in a unified manner, which helps to quickly build application interfaces. If there are no special requirements on interface design, the CSS framework can be directly used for application development. There are many common open source CSS frameworks. You can choose them based on actual requirements or develop them based on the framework.

test

Front-end testing is an important and neglected task. For the entire system before and after the end, when it comes to testing often front is Bug hit hard, on the one hand is the front-end interactive details more easy omission, on the other side is the front and the product function development chain terminal, the back-end most potential bugs in the alignment can be made of front feedback to repair, and the front does not have this layer “alignment”, So the front-end testing challenge is much more serious. With the mainstream testing framework can efficiently complete the front-end application of unit testing and functional testing. As the saying goes, “three designs, one code, six tests,” the same goes for the front end.

Type test

TypeScript is a widely used type detection language instead of JavaScript. If there are no special conditions, it is recommended to use TypeScript as soon as possible, which can effectively avoid many bugs. The larger the application volume, the more advantages TypeScprit has in type detection.

Progressive Web enhancement

Some apis are widely used in mobile terminal Web interaction scenarios, mainly to enhance user experience. The specific implementation should be based on specific business requirements and comprehensive consideration to determine the technology selection.

Server side rendering

Server-side rendering is a page construction implementation relative to client-side rendering, which directly returns the specific content to be displayed by the client to the client after the completion of server-side construction. The advantage lies in that in most cases, the response speed of the page can be improved, which is convenient for SEO and flexible adaptation of the client device. Of course, there are also disadvantages, such as the support for more complex applications, the server resource overhead will reduce the response speed. Server-side rendering increases the complexity of the application’s implementation on the server side and should be evaluated on a case-by-case basis.

GraphQL

GraphQL is a structured data query language. Compared with traditional REST API query, GraphQL supports a more convenient structured query method. Data is taken on demand and convenient for dynamic integration, which better meets the flexible demand for data query in front-end development. Of course, its own also exist a variety of deficiencies, whether to choose is to see the actual situation of the comprehensive assessment.

Static station generation

The technical implementation of static site generation includes SSR and static site compilation. SSR has been introduced above, static website compilation is a way of website construction, mostly used for partial information display websites, such as blogs, product official websites, etc., the advantage is that the content is convenient to publish, easy to use and easy to deploy, can be used as one of the standby selection of lightweight site construction.

Mobile and PC applications

The application development of mobile terminal can also be completed based on the front-end technology stack of the mobile terminal application framework. The bottom layer of the framework provides technical support combined with the native system, providing an efficient and unified implementation scheme for the development of multi-terminal requirements, that is, “write in one place, execute in many places”. It is suitable for ordinary transaction applications, but not suitable for high performance applications such as games. Similarly, the front-end technology stack can also complete PC application development with the help of the framework, and the specific technology selection depends on the actual needs and comprehensive consideration.

Web Assembly

Web Assembly, which is characterized by fast execution and provides a way for other high-level languages to work with JavaScript on the Web, is still evolving and improving.

conclusion

This overview of the main aspects of front-end development, each of which contains enough content to be devoted to a book, and there are many excellent books out there that cover each branch in detail. For beginners, there is no need to be eager to achieve, front-end learning is also a gradual process, I hope that we can always maintain the love of coding, in the continuous practice of harvest joy!

prompt1. Follow the public account, 2. Send:Front-end learning Roadmap