Without systematic study, induction and summary, any knowledge is not firmly mastered.

For programmers who are constantly learning, learning new technologies requires not only practice, but also frequent reflection and review, and then writing down their thoughts in notes or blogs.

Front-end development is a very special profession, no front-end development professional in university, most of the classmates are doing front-end development is to learn the computer or other professional through self-study and into the line, this will cause a halfway decent, unstable, the basis of the front-end to master the knowledge of no formation system, cannot be together all the front-end related knowledge, Moreover, most of the time after work may be writing business code, if there is no thinking or summary outside work, then the future will be eliminated and replaced by others is inevitable.

This article discusses how to build your own front-end knowledge system from the basic knowledge of front-end development to advanced applications and then to front-end project management. This article is not only suitable for students who are preparing to change to the front end of the industry, but also suitable for students who have just entered the front end of the industry. It is more suitable for students who do front-end development for 1~3 years.

Basic knowledge of

Oaks from little acorns grow. Without a solid foundation, front-end development is not far off the road. So what are the basics that need to be firmly grasped?

Programming based

  • HTML(HTML5)

Master common tags, semantic meaning of tags, meta attributes, DOM, Canvas, front-end storage

  • CSS(CSS3)

Master CSS selectors, layouts, floats and positions, BFC (Block Format Context), CSS3 animation

  • JavaScript

    1. The data type
    2. Prototype and prototype chain
    3. Scope and scope chain
    4. closure
    5. this
    6. Execution context
    7. Call, apply, bind methods
    8. Event bubbling, event delegation
    9. Anti-shake and throttling
    10. Ajax asynchronous request
    11. Cross domain
    12. Browser event loops, macro and micro tasks
    13. Browser rendering principles, backflow and redraw
    14. Browser cache policy and CDN
    15. The HTTP status code

  • ES6

    1. Let, const
    2. Arrow function
    3. Deconstruction assignment
    4. Template string
    5. Symbol and Symbol properties
    6. Set and Map data structures
    7. The Iterator and for… Of circulation
    8. Asynchronous programming, Generator functions, Promise objects, async functions
    9. Class classes, Class classes, object creation, inheritance, static methods, and properties
    10. The Module of modularity

  • Wechat applets

Development and debugging tools

  • Common shortcuts for VS Code
  • Chrome Developer Tools
  • Postman
  • Fiddler and Charles package capture tool

Class libraries and frameworks, component libraries

  • jQuery
  • Bootstrap
  • underscore
  • Lodash
  • Vue
    1. vue
    2. vuex
    3. vue-router
    4. element-ui
  • React
    1. react
    2. redux
    3. mobx
    4. react-router
    5. antd-design
  • Angular
  • Small application frameworks: Taro, MP-vue, uni-app

Senior advanced

It’s not enough to just know the basics, the basics to get you through the day to day development. And if you want to enter a big factory, if you want a better job, you have to study deeply.

Read the framework source code

  • JQuery /underscore, etc. JS library source
  • Element – UI /Ant Design and other UI component library framework source code
  • Vue source
  • The React source
  • Webpack source

Network related

  • OSI seven layer/four layer model
  • The HTTP protocol
  • HTTPS

The front security

  • CSRF attack and Defense
  • XSS attack and Defense

Performance optimization

  • Performance indicators

    1. First drawing (FP)
    2. First Content Rendering (FCP)
    3. First valid drawing (FMP)
    4. Frames per second (FPS)
    5. User interaction time
    6. DNS Resolution time
    7. TCP connection time
    8. HTTP request response time

  • Assessment tools

    1. Lighthouse
    2. Chrome Developer Tools

Front-end engineering

  • webpack
  • gulp
  • modular
  • componentization
  • The canonical
  • automation

Design patterns

  • Create a type:

Abstract Factory Pattern, Factory pattern, singleton pattern, Builder pattern, prototype pattern

  • Structured:

Bridge mode, proxy mode, Decorator mode, adapter mode, Share mode, Composite mode, facade mode

  • Behavior type:

Observer pattern, template pattern, iteration pattern, state pattern, command pattern, Mediator pattern, interpreter pattern, Responsibility chain pattern, Visitor pattern, Policy pattern, memo pattern

V8 engine mechanics

  • JS execution mechanism
  • V8 Garbage collection
  • V8 optimization

Big front end

  • Flutter
  • React Native

Soft skills

  • The ability to learn
  1. Knowledge reserves
  2. Knowledge sharing
  • Technical ability
  1. To solve the problem
  2. Lead the new

  • Team collaboration

    Communication skills

  • The project management

  1. Understand the business
  2. Demand analysis
  3. Project evaluation
  4. The risk assessment
  • Architecture design ability
  1. Interaction design
  2. availability
  3. scalability
  4. security
  5. performance
  6. Micro front-end
  7. Front-end infrastructure
  8. Front-end performance Monitoring
  9. The front-end buried point

The level is limited, the article inevitably has deficiencies, welcome everyone to pay attention to my wechat public number. (Front-end migrant worker)