The opening words

Evolution of the front

• “Bronze Age” : Google’s Ajax-based Gmail, which marked the transition from Web 1.0 (static Web) to Web 2.0 (dynamic Web)
• “Silver Age” : The front end was gradually separated from the back end, code became complex, data was saved, data was processed, views were generated, etc
• “Golden age” : With the arrival of the mobile era, front-end responsibilities are more important, with independent release authority and more complex technology. Some traditional software development and Internet server methodology are gradually transplanted into front-end development, and front-end engineering systems are formed, such as continuous integration, front-end separation, online monitoring, etc. In terms of architecture, the front-end task also moved from simply solving compatibility and style issues to advocating componentalization and UI architecture patterns, and finally formed a new generation of front-end frameworks like React, Vue, and Angular, which grew up competing and learning from each other.

Front-end learning method

About the development of front-end engineers,

• First, based on standards, systematic summary and arrangement of front-end knowledge, to establish their own cognition and methodology;
• The second is to look at the team and think about the value and development needs of the front-end team from the business and engineering perspectives.

Content of this course

1. Divided into four parts:

• JavaScript: Discusses the JavaScript language from a grammar and runtime perspective. They are interrelated, and semantics are the bridge between grammar and runtime; They are respectively complete, any language characteristics can not be separated from both
• CSS and HTML: Focuses on language and design ideas
• Browser practices: How browsers work and some important apis, including BOM, DOM, CSSOM, and more
• Front-end comprehensive application: some case explanation in the work of hand shopping and Taobao

2. The role of this course

• Take you to find out the front end of their own learning method;
• Help you build a knowledge structure of front-end technology;
• Gives you an understanding of the core ideas behind the front-end technology.

Learning routes and methods

Learning path

• 0 basic entry, you can read classic front-end teaching materials, such as “JavaScript advanced programming”, “Master CSS” and other books, to read some reference website is also a good option, such as MDN.
• Have at least 1 year of working experience, can study this course

Learning methods

1. The first approach is to build a knowledge framework

• The establishment of a “catalog” or index of knowledge can help us organize scattered knowledge and find some blind spots in knowledge.
• Logic and completeness are the most important elements in building knowledge structure.

2. The second approach: go back to the source

• Pay attention to the background of the technology, pay attention to the original paper, pay attention to what the author says, find the source of knowledge.

Front-end knowledge framework

The target

1. Refer to manuals and language standards

• Reference manual (MDN, etc.) : easy to refer to, easy to understand, comprehensive,
• Language standard: rigorous, without omission, without ambiguity.

2. What’s different about this course:

• Different goals:
  • Explain the principle and background that cannot be solved by consulting
  • Organize things that aren’t easy to refer to or remember.

1. The JavaScript:

The JavaScript knowledge architecture diagram above is explained in detail below.

• First of all, languages can be divided into grammar, semantics and runtime, which conforms to the general law of programming languages: use certain morphology and syntax, express certain semantics, thus operating runtime.
  • (1) The runtime is divided into data structure and algorithm:
    • Data structures contain types and instances
      • The type system is the seven basic types and seven language types of JS,
      • The instance is its built-in object part (objects are more complex than all the other types combined)
    • Algorithms are the execution process of JavaScript: from large structure to small structure, from the top level of programs and modules, event loops and microtasks, to functions, and then to statement level execution. Understand the execution process from rough to fine
  • (2) There is a one-to-one correspondence between grammar and semantics
  • (3) Semantics: not explained separately.

2. HTML and CSS

Above is the knowledge structure diagram of HTML and CSS.

1. html

• Tags: according to the function and language to divide, HTML functions are mainly borne by tags, first of all, the tags will do some classification (focus on the first four tags, forms and forms are less used, and the basic knowledge of consulting) :
  • Document meta information: Elements that usually appear in the head tag and contain information that describes the document itself; For example, title, Meta, style, Link, and Base are used to describe the basic information of a document
  • Semantic relevance: the extension of plain text, to express the structure of the article, different language elements of the tag; For example, section and nav tags have the same visual appearance as divs, but each has its own application scenarios
  • Links: Provides links within and outside the document;
  • Replacement tags: replace the tags with external elements such as sounds, pictures, and videos. Img, video, audio, etc., for importing external content
  • Form: a label used for filling in and submitting information, such as input and button;
  • Table: The structure of a table, such as header, tail, cell, etc.
• An introduction to HTML syntax and several important language mechanisms: entities, namespaces (the markup language is less rigorous)
• An introduction to the HTML complementary standard, ARIA, is an extension of HTML that plays a crucial role in the accessibility arena.

2. CSS

From the language and function of two perspectives to introduce

• The language section, from large to small, introduces the various syntax structures of CSS, such as @rule, selectors, units, and so on
• The functional part can be divided into layout, drawing and interaction classes.
  • Layout class, the two most commonly used layouts: normal flow and elastic layout
  • Drawing class: graphics-related and text-related drawing.
  • Animations and other interactions.

Browser implementation principles and apis

Above is the browser knowledge architecture diagram, take a look.

• The implementation of the browser is fundamental to a deeper understanding of the API.
  • From the general design of the browser, according to the process of parsing, building a DOM tree, computing CSS, rendering, composition and drawing to explain the working principle of the browser.
• In the API section, select a few chunks of API from the scattered W3C standards to go into detail
  • The events, DOM, and CSSOM sections, which cover interaction, semantics, and visibility, respectively, are the main things we use in our work.
  • Other apis: Introduce a Chrome API implementation to the W3C standard mapping and its generation process, to cover other parts.

Front-end engineering practice

• If you have mastered the basic knowledge, you will have mastered the basic ability of being a front-end engineer.
• In the front-end engineering practice module, the front-end engineering practice cases are explained from the aspects of performance, toolchain, continuous integration, system building, architecture and base library

1. performance
   • Performance is the core indicator of its value, and the front-end has a tradition of proving its value through performance.
   • Performance is not a pile of details, nor do quietly do optimization
2. Tool chain
   • Discuss the construction idea of tool chain in enterprise
   • A consistent tool chain is essential for an efficient and collaborative front-end team
   • As an entry point to the development phase, toolchains can be linked to performance, release, continuous integration, and other systems, and become the foundation for team technical management.
3. Continuous integration
   • Continuous integration is not a new concept, but it is a new topic for the front end (and of course the front end is a new topic for continuous integration). For example, the Daily Build does not apply to the front end at all, and the front end code must be available online in real time.
4. Build system
   • Front-end work is often too much and complicated, and traditional manual development is no longer suitable for the high repeatability and modularizable business requirements. Most large front-end teams choose to build systems
5. Architecture and base libraries
   • The software architect mainly deals with the problem of functional complexity, the server architect mainly deals with the problem of high traffic, and the front-end is a system that is naturally decoupled from each other and runs on the client side, but the front-end architecture also has its own problems to solve.
     • The front end is in great demand, and professionals are scarce. The front end runs in the browser, and there is a lot of compatibility work to do. So the main responsibility of the front-end architecture is compatibility, reuse and capability extension.
     • This is the kind of infrastructure that almost every young front-end team needs as they grow.

The front-end body of knowledge is as follows

This article as reference geek time – front of heavy science course of individual learning notes, knowledge in the curriculum and the original case, the original course please refer to the original course links: https://time.geekbang.org/column/article/77804]