Today’s front end is no longer limited to writing a web page. Mobile terminal, small programs, desktop applications, and even all kinds of intelligent devices, there are front end figures everywhere, where there is a user interface, that is, the front end.

The concept of engineering is deeply rooted in people’s minds, ESM’s comprehensive support, from object-oriented programming to functional programming thinking change, IE’s official death, all are changing the front-end development ecology.

Data is decoupled from the interface and business logic is decoupled from the layout components. Front-end frameworks continue to evolve from data responding in real time to IO performance bottlenecks.

If you just want to try something new

  • Tailwind CSS now that JS is modular, CSS will also be modular one day, Tailwind will give you a completely different experience from bootstrap.
  • Deno We don’t need to debate node versus deno here, at least it gives you an alternative and more possibilities for future JS Runtime.
  • Vite especially boss produced, must belong to the boutique, based on ESM new build tools, bring you fly general feeling.
  • No, no, no, no, no, no, no, no, no, no, no, no, no, no.
  • Vue 3.0’s new lifecycle, new Composition API, works like a new Vue
  • React hooks & CM React 18 will be released soon, so don’t use class to define components.
  • Svelte isn’t the only two JS frameworks in the world, but for small and medium sized applications, Svelte can take you through the roof.

In addition, there are serverless WASM PWA and other early emergence, but not fire issues, interested friends can also do the appropriate understanding.

If you want to systematically learn the front end

Computer network

  • The network layer
  • TCP/IP
  • DNS
  • HTTP
  • HTTPS
  • HTTP2.0

Read What happens when you type google.com into your browser and press Enter? You can get a holistic understanding of the concepts involved.

The editor

  • VS Code

Version management

Git

Github

HTML

No one is using HTML by hand these days, most user interfaces are rendered dynamically by THE JS framework. But you still need to master the markup language that forms the backbone of the Web interface.

CSS

The market is full of a large number of senior JS engineers, but it is rare to see senior CSS engineers, after all, JS is only a language, and CSS is a world.

  • MDN
  • Google Web developer

JavaScript

basis

Before learning any programming language, you should first have a basic understanding of the concepts related to computer programs: CS50

  • algorithm
  • The data structure
  • Design patterns
  • Object-oriented programming
  • Functional programming

You can find exercises on JavaScript Algorithms and Data Structures on freeCodeCamp

You can also refine your algorithmic knowledge in LeetCode.

The advanced

grammar

  • TypeScript

The framework

  • React
  • Vue
  • Angular

data

  • GraphQL
  • Redux
  • Vuex

The back-end

  • Node.js
  • Express

test

  • Jest
  • Cypress

Build tools

  • Webpack
  • Vite

cross-platform

  • React Native
  • Electron

Continuous integration/deployment

  • Github Action

Study Tips

  • It is completely unrealistic to become a XX engineer in 3 months
  • Before you can become a programmer in any direction, you need to understand the basics of computer science
  • Learn the basics before you use any framework
  • Don’t watch the video if you can read the book
  • Delete Tiktok and Honor of Kings from your phone

Website recommends

  • freeCodeCamp
  • roadmap.sh