What end 2019 engineers should learn?

To work more than three years, most recently business is not very busy, but my heart is empty. The company recently participated in a UI library development, find themselves do not know too many things. This opportunity it:

1. knowledge necessary to experience the last two years down a little bit, one by one confirmed with the standards and documents, you may say.

2. The tool will be used not only with the good, but also to understand the principle.

3. Even some knowledge of being less than, as a little pursuit of engineers, should do some advance knowledge reserves.

Writes shocked to find myself here two or three years in technical or grew, and in 2016 I looked at the need to share predecessors, everyone said I was useful to school, listen to the older generation always right, 2019 I can according to their own summed up the experience and understanding of how to learn the system, and the heart has its own priorities bottom.

Now go back to the title, what front-end engineers should learn? I wrote an outline, but inside the goal is to learn to say to yourself, issue first, in order to share with you, learn together; the second is that you help me see that nothing is missing under.

My self-positioning did not identify the front end of the field is too broad, which in the end point of the most suitable and worthy of further study? I do not know. But the first full school again, you may say overall correct.

I feel still, still, I will always be a front-end students.

This article does not discouraging results, please rest assured to read. If you are a fresh graduate, pinpoint their location, take your time.


Front-end engineers

First, the basic language

1. HTML-related

    HTML standard, follow-up for the latest HTML standard update.

    HTML tags semantic nested standards.


Learning objectives: to re-sort the tabs relationship. International, future web page structure, in line with accessibility standards.

2. CSS-related

    CSS standard, CSS standards to follow for the latest updates.

    CSS property, the latest attributes.

    CSS programming, Houdini.

  • Web Fonts

Learning objectives: to sort out the relationship between the css properties, more features try to use css to achieve. Master concerned about the latest development of css.

3. JavaScript related

    ECMAScript standard, such as the latest proposal, the browser DOM, BOM.

Learning objectives: the basis of the familiar JavaScript API, parameter clear. JavaScript language abreast of the latest trends.

4. Node.js related

    Node.js global API, the native module, Node.js learn about the latest trends.

Learning objectives: familiar with the role and use native API of Node.js basis. Lay the foundation for learning services side development.

5. TypeScript(TS)

    TS fire into future development trend.

    TypeScript use. The difference between JavaScript

Learning Objectives: Familiar with TypeScript.

6. AssemblyScript(AS)

    In addition to c \ c ++, Rust, Kotlin, Golang and other high-level languages ​​can be translated into WebAssembly byte code, but a new language can be AS. AS is a strict subset of TS can learn together lay the foundation for WebAssembly development.

    AssemblyScript grammar and usage

Learning Objective: Learn basic grammar, AssemblyScript files can be compiled into .wasm format. With it, you can not go to review C / C ++ a.

7. Dart

    Flutter continued hot, Dart as a basis for development, should grasp

    Dart syntax of JavaScript and understand the difference.

Learning Objectives: Familiar with Dart language.

8. Markdown

    Syntax to use.

    Writing articles, writing documentation necessary

Learning Objectives: proficient use Markdown to write articles, and other project documentation.

9. Shell Scripts

    Grammar, commonly used functions

Learning Objectives: You can use the shell to write more common procedures.

10. SQL language

    Common syntax, functions

Learning Objectives: You can write sql statement CARD common queries.

Second, basic computer

1. Data Structures and Algorithms

    Ideas classical algorithm

    Common data structures

Learning Objectives: mastering classical arithmetic thought to apply to the business code in the past, will choose the best data structure in an appropriate scene.

2. Computer Network

    HTTP protocol, TCP protocol, UDP protocol

  • DNS
  • WebSocket

Learning objectives: to master and understand the principles of these network protocols, it can be used to practice.

3. The computer composition principle


    Unicode, ASCII, UTF-8 encoding, etc.

    Computers Work

Learning Objectives: to understand their partner, to understand the “cloud” hosting, web hosting foundation.

4. Operating Systems

    Computer Operating System

    Linux operating system

Learning Objectives: To understand how the operating system works, you can use the linux operating system independent, master commonly used commands.

Third, Advanced

1. engineering

  • webpack, rollup
  • babel use the principles that can be used with the latest ECMAScript syntax eleven confirmed.

    Use eslint, stylelint, prettier style and grammar, etc., code review tool

    unit using the test tool or library

    sass programming syntax

    postcss postprocessor

    Principle and Implementation uglify

    Multiplayer git collaborative process

    gitlab to build and use

  • CI/CD
  • git hooks, husky,commitlint
  • Document output, StoryBook, gitDoc, gitbook etc.

  • npm, lerna
  • yarn
  • markdown render. Examples of markdown write can be performed online

    Modular, js modular in ECMAScript and Node.js have studied here mainly refers to the css modular several ways

    Data mock

Learning Objectives: scratch can quickly build up a modern multiplayer collaborative front-end engineering project, select the appropriate tools to improve development efficiency, keeping team members coding style uniform, and maximize the use of tools to protect the quality of the code.

2. Components of

  • Vue
  • React
  • WebComponents
  • Browser compatibility, canIUse

Learning Objectives: Familiar with Vue, React development, component-based understanding of future trends WebComponents. Master data-driven thinking, grasp the classic two-way binding implementation principles, read the source code, in-depth understanding. The distal derived product master routing, design and implementation of data management.

3. Web-based services development of Node.js

  • koa
  • express
  • pm2
  • RESTFul style

    Process Management

    Data persistence MongoDB, mysql, etc.

    Redis data cache, etc.

    Long Link Service

  • SSR
  • Docker
  • Nginx configuration, openresty

    Cloud hosting, shared hosting, etc.

Learning objectives: complete the build and deploy Web services independent.

4. Based on the CLI development Node.js

    CLI library and common development principles

    CLI library of popular design, realization of ideas

Learning Objectives: can be developed independently CLI, when there is a demand, you can quickly locate this program.

5. Desktop Application Development

  • Electron
  • NW.JS

Learning Objectives: To understand the development of JavaScript-based desktop applications, when necessary, can quickly locate this technical solution.

6. Mobile Application Development

    Flutter art and related derivatives

    React Native art and related derivatives

  • PWA
  • WEEX

Learning Objectives: to understand and master. Flutter can be used to develop a mobile RN or APP. Learn PWA.

7. Third Party platform

    Small micro-channel program

    Alipay applet

    Baidu applet

    Fast Application

  • wepy
  • mpvue
  • taro

Learning objectives: to quickly get started developing any kind of small program. Learn implementations applet. Understanding of the industry to realize the idea of ​​popular small library of program development.

8. Plug-in Development

    chrome plugin API

    DevTool extension

    VSCode and other IDE Plug-in Development

Learning Objectives: Learn what plug-ins can be done, when necessary, can quickly locate this scheme.

9. The browser works

    Layout engine, browser rendering principle

    Script interpreter engine, the script runs principle, v8

    headless headless browser, puppeteer

Learning Objectives: Mastering the browser works, can be applied to automated testing and performance optimization.

10. Performance Optimization

    RAIL model

    Hardware basis: a frame, the frame rate, the display principle drawing

    Progressive web page index (Progressive Web Metrics, referred to as PWM’s)

    Commonly used performance optimization tool

Learning Objectives: To understand the performance optimization tools, write excellent performance of Web applications.

11. Web browser security

    Browser security policy: origin policy, content security policy, sandbox

    The attack: XSS, CSRF

    Other: CRLF attacks, DNS hijacking and DNS poisoning, clickjacking, browser plug-in exploits, etc.

    Learn about common symmetric encryption and asymmetric encryption algorithms

Learning Objective: Learn common Web browser attacks, to avoid a security risk to write website.

12. Web server security

    Common attacks: directory traversal, DDOS, playback, password cracking, SQL injection

    Other attacks: CC attacks, port penetration

Learning Objectives: Learn about common server attacks and principle, there are obvious loopholes to avoid write Web services.

13. Monitoring statistics

    Front-end monitoring script error: error stack form, real-time monitoring implementation

    Front-end performance monitoring: performance indicators, implementation

    Server monitoring: hardware monitor, system monitoring, application monitoring, network monitoring, traffic analysis, log monitoring, security monitoring, API monitoring (availability, accuracy, response time), performance monitoring, service monitoring

Learning Objectives: learn how to self-build or build open source monitoring platform. Understand the meaning of some of the common monitoring indicators. Such as performance-related indicators TTLB, QPS What does it mean, what business-related indicators PV, UV, CTR, and so representative.

14. Visualization

    Advanced canvas

    Advanced svg

    WebGL foundation

    Computer Graphics

    Common library: ECharts, D3, etc.

Learning Objectives: This is a future-oriented front-end technology. Learn about common visualization technology solutions, when there is a demand can quickly locate programs. Attention and can be used to apply the latest technology to develop cool, data visualization.

15. SEO

    Search engine crawlers principle

    Search engine algorithm weights

    SEO web page associated with the tag

Learning Objectives: To understand and implement the principles of search results ranking algorithm of search engines. If external websites that can autonomously perform simple SEO, the website ranking in the search engines as high as possible.

16. development and debugging

    Explorer script debugging

    Node.js debugging

    Chrome Dev Tools Advanced use (environmental simulation, rendering performance, memory usage, debugging endpoints, packet capture, console built-in functions, and so on)

  • IDE
  • Use to help develop plug-ins, such as spell checking and so on.

Learning Objectives: mastering using Chrome debugging tools for script development, performance optimization are of great benefit. Master debugging method Node.js services.

17. UI library

    UX base

    Color theory, color light primary colors, color representation page

    Web page with the principles of color, color psychology

    Achieve common UI components

    Common use UI components and source code

Learning objectives: have a certain aesthetic and user experience attention, when there is no designers to participate, can independently design and some interactive programs, understand the meaning of common UI components represent, you can use the right components in the right needs. Identifying common UI component design and realization of ideas, independently developed UI component library.

18. WebAssembly



    Simple application development

Learning Objectives: To understand the development process WebAssembly byte code, understand its operation mode in the browser, when necessary, can quickly locate this program.

19. WebRTC

    Real-time communication solutions

    It is simple to understand and develop

Learning Objectives: Understand and follow WebRTC technology, understand the standards, implementation principle, when necessary, can quickly locate this program.

20. WebXR

    JavaScript developers VR and AR

    Learn WebXR API, follow up the draft process

Learning objectives: understanding and concern WebXR technology, understand the standards, implementation principle, when necessary, can quickly locate this program.

21. WebAuthn

    Biological authentication using a browser

    Learn WebAuthn API, and simple to use

Learning objectives: understanding and concern WebAuthn technology, understand the standards, implementation principle, when necessary, can quickly locate this program.


Here are some additional thinking:

Things have been identified: the next few years, 5G comprehensive commercial, network delay and transmission rate will no longer limit the human imagination, all things Internet era of unlimited anytime touch up.

Uncertain thing: to master the technique of controlled nuclear fusion.

Imagine, even if the future did all things Internet, we can make real-time AR, VR interactive, but not if the phone battery technology development, these assumptions no doubt in castles in the air, unable to fall. We all know now the browser using WebGL degree of power and other technologies. Assuming that humans mastered controlled nuclear fusion technology, and electricity networks have become as ubiquitous and air, that is the real age of the imagination can fly.

Bold prediction about the future development trend of front-end technology: Based WebAuthn biological authentication, we get rid of the shackles password authentication; 5G transmission rate based, open application installation or use open Web access without distinction locally; based WebAssembly, traditional customers end end may migrate to the Web, and has ultra-high performance. Assuming that the phone battery technology has made considerable progress, then WebRTC, WebXR, WebGL will be widely applied. Website qualitative change, traditional web page DOM structure will be called the history class, AR, VR, immersive interactive real-time communications will replace the text and images on mobile phones only need to install a browser, you can do what you want of anything.

But the arrival of the future when I do not know yet, based on the present, look to the future, trying to learn it.

This article published on “a schoolboy’s blog”, please indicate the source.

The End.

Leave a Reply