2020 Front-end learning route summary

GitHub sees a good front-end learning roadmap, from front-end foundation to front-end engineering, and then to cross-end, covered with knowledge points, highly recommended reading.

Below the picture is a text version of my translation, you can see the picture first and then see the text.

✔ Come ︎

➤ Come to ︎

➤ ➤ ︎ says you don’t need to follow a strict order of arrival in the foreground, but can add your knowledge at any time

– Indicates that the user is no longer recommended

Computer network

Mastering the basis of computer network is the basic quality of a front-end engineer. It is recommended to learn the following knowledge first:

1. ➤ How does ︎ Internet work
2. ✔ ︎ HTTP protocol
3. ✔︎ How the browser works
4. ➤ DNS and its operational mechanism
5. ✔︎ Learn about domain names, web hosting

HTML

1. ➤ Learn the basics of HTML, tags, elements, form validation, and more
2. ➤ ➤ come to ︎
3. ✔ Web Accessibility ︎
4. ✔ Come to ︎

CSS

1. ✔︎ Learn the basics of CSS
2. ✔︎ Make layouts: float, position, display, box model, grid layout, elastic layout
3. ✔ Responsive Design and media query (@media)
4. ✔︎ Create a simple web page in conjunction with HTML as best practice

JavaScript

1. ➤ Learn grammar and basic structure
2. ✔︎ Learn how to work DOM
3. ➤ Learn Fetch API/Ajax (XHR)
4. ➤ ➤ ︎ ES6+ and modular JavaScript
5. ✔︎ Learn about variable promotion, event bubble mechanisms, scopes, prototypes, Shadow DOM, strict patterns, and more

Version control

1. ➤ ➤ ︎ configure Git
2. ✔︎ Create an account and learn to use GitHub
3. ✔︎ Create an account and learn to use GitLab

Web Security knowledge

1. ✔ ︎ HTTPS
2. ✔︎ Content Security Policies (CSP)
3. ✔︎ Cross-domain resource sharing
4. ✔︎ OWASP Security risk

The above content is the most basic part of the front end, it is recommended to spend more time, master every knowledge point.

From there, you’ll move into the front-end engineering section, where you’ll be exposed to many different frameworks and learn to use a variety of tools to improve your development.

Package management tool

NPM and YARN are both good, just choose one to learn, they are similar

1. ✔ ︎ NPM
2. ✔ ︎ yarn

CSS framework

By using modern CSS frameworks and csS-in-JS writing, you don’t have to worry about CSS architecture, but familiarity with the BEM specification is a good choice.

1. ➤ ︎ BEM, a standard for writing
2. ✘ OOCSS
3. ✘ SMACSS

CSS preprocessor

Choose one of the following three to study.

1. ✔ ︎ SCSS
2. ✔ ︎ PostCSS
3. ✔ ︎ Less

Build tools

1. Task executor

   • ✔ ︎ NPM scripts
   • ✘ Gulp

2. Code review and formatting tools

   • ➤ ➤ ︎ Prettier code formatting
   • ✔︎ ESLint code check
   • ✘ StandardJS

3. Module packaging

   1. ✔ ︎ Webpack
   2. ✔ ︎ Rollup
   3. ✔ ︎ Parcel

The front frame

It is recommended to learn React first and understand functional programming and componentization. Vue is characterized by fast handling, complete Chinese documents, and selective learning.

1. ✔ ︎ React.js
   • ✔ ︎ Redux
   • ✔ ︎ MobX
2. ✔ ︎ Vue.js
   • VueX
3. ✔ ︎ Angular
   • RxJS
   • NgRx

Modern CSS

1. ✔ ︎ Styled Component
2. ✔ ︎ CSS Module
3. ✔ ︎ Styled JSX
4. ✔ ︎ Emotion
5. ✘ Radium
6. ✘ Glamorou

Web components

1. ✔ ︎ HTML template
2. ✔︎ Customize elements
3. ✔ ︎ Shadow DOM

CSS framework

There are two kinds of CSS frameworks, one is based on JavaScript framework developed applications. Recommended frameworks are:

1. ✔ ︎ Reactstrap
2. ✔ ︎ Material UI
3. ✔ ︎ TailWind CSS
4. ✔ ︎ available UI

The other is a pure CSS framework that is not used with JavaScript components by default.

1. ✔ ︎ BootStrap
2. ✔ ︎ Materialize the CSS
3. ✔ ︎ Bulma

test

Here you need to learn how to use the following framework for unit, integration, and functional testing.

1. ✔ ︎ Jest
2. ✔ ︎ react – testing – the library
3. ✔ ︎ Cypress
4. ✔ ︎ Enzyme

Type checker

1. ✔ ︎ ✔ ︎ TypeScript
2. ✘ Flow

This is front-end engineering, and the next section covers performance, server-side rendering, and cross-ends, also known as the “big front end.”

PWA

1. ✔ ︎Learn the Web API used in PWA:
   • Storage
   • Web Sockets
   • Service Workers
   • positioning
   • notice
   • Direction of equipment
   • Payments, certificates, etc
2. ✔ ︎Calculate, measure and improve performance:
   • PRPL mode
   • RAIL mode
   • Performance indicators
   • Learning to Use LightHouse
   • Learn to use DevTools

Server side rendering

1. ✔︎ Next. Js (reace.js)
2. ✔︎ nuxt.js (vue.js)
3. ✔︎ Universal (Angular)

✔ ︎ GraphQL

1. ✔ ︎ Apollo
2. ✔ ︎ Relay Modern

✔ ︎Static Site generation

1. ✔ ︎ Next. Js
2. ✔ ︎ GatsbyJS
3. ✔ ︎ Nuxt. Js
4. ✔ ︎ Vuepress
5. ✔ ︎ JekyII
6. ✔ ︎ Hugo

✔ ︎Mobile application development

1. ✔ ︎ ReactNative
2. ✔ ︎ Flutter

✔ ︎Desktop Application development

1. ✔ ︎ Electron
2. ✔ ︎ Carlo
3. ✔ ︎ Proton Native

✔ ︎ WebAssembly

Conclusion, can not help but sigh front-end ecology is rich and colorful, there are a lot of things to learn, they do not understand a lot, some knowledge is also a little taste. There are so many directions, but you still need to find a point to dig deep.

If you’re new to the front end, don’t be intimidated by these frameworks; it’s more important to learn the basics and practice them.

The recommended Roadmap for GitHub will also have a backend and DevOps learning Roadmap that you can browse by yourself, and I’ll put together a text version of that Roadmap if you have time.

Keep Learning.