From Beginner to Senior: A Structured Front‑End Learning Roadmap

2020 marks a new decade for web development, prompting a reflection on how to effectively learn front‑end technologies.

0x00 先说结论 – Learning Roadmap

Bronze – Start from zero, learn HTML, CSS, JavaScript via free resources, and build a simple page.

Silver – Master basic page development, choose a project (blog, accounting, editor), and learn a framework (React or Vue).

Gold – Implement the project with the chosen framework, learn state management (Redux, Vuex, MobX) and understand its benefits.

Platinum V – Use scaffolding, adopt modular code structure, and learn TypeScript.

Platinum I – Dive into Node.js, build a more complex CMS (e.g., library or warehouse management).

Diamond V – Abstract reusable logic, improve code quality, and introduce unit testing with 80%+ coverage.

Diamond I – Explore different programming paradigms (OO, FP) and architectural patterns (MVC, MVVM).

0x01 我的从 0 开始 – My Journey from Zero

I began with a free .tk domain and WordPress theme development, learning PHP, HTML, CSS, and jQuery. This led to discovering Node.js, which allowed JavaScript to run outside the browser.

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World
');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

Compiling Node.js from source required commands like ./configure, make, and make install, after which running the above script displayed "Hello World" in the browser.

0x02 接触 Node.js – Node.js Impact

Node.js evolved from server‑side scripts to tooling, FaaS, desktop apps (Electron), and mobile apps (React Native), making it essential for modern front‑end engineers.

0x03 框架时代 – Framework Era

From jQuery to Backbone, AngularJS, React, and Vue, each framework introduced new paradigms: DOM manipulation, MVC, MVVM, functional programming, and progressive development.

Technology's ultimate goal is to make people unaware of technology.

React brings functional programming concepts, while Vue offers an easy‑to‑learn progressive framework with Composition API.

0x04 工程之路 – Engineering Practices

Version control: Git (GitHub, GitLab, Coding), SVN.

Code style checks: ESLint.

Testing tools: Karma, Jest, Mocha.

CI/CD pipelines.

Package managers: npm, yarn.

Bundlers: webpack, rollup.

Scaffolding: create‑react‑app, etc.

These tools reflect the evolution of front‑end engineering over the past decade.

0x05 逻辑抽象能力 – Logic Abstraction

Redundant buff‑calculation code can be abstracted. Original code:

export default {
  beastBuff: (state) => {
    let arr = [];
    if (state.raceCount[0]['beast'] == 2 || state.raceCount[0]['beast'] == 3) {
      console.log(`you got 2 beast`);
      arr.push(state.racebuffdata[8]);
    } else if (state.raceCount[0]['beast'] == 4 || state.raceCount[0]['beast'] == 5) {
      console.log(`you got 4 beast`);
      arr.pop();
      arr.push(state.racebuffdata[9]);
    } // ...
    return arr;
  },
  // similar functions for other races
};

Refactored abstraction:

const generateBuff = (race, configArr) => {
  return state => {
    const arr = [];
    for (const [output, conditions, index] of configArr) {
      if (conditions && index) {
        const isHit = conditions.some(c => state.raceCount[0][race] == c);
        if (isHit) {
          console.log(`you got ${output} ${race}`);
          arr.pop();
          arr.push(state.racebuffdata[index]);
          break;
        }
      } else if (state.raceCount[0][race] < output && arr.length === 1) {
        arr.pop();
      }
    }
    return arr;
  };
};
export default {
  beastBuff: generateBuff('beast', [
    [2, [2, 3], 8],
    [4, [4, 5], 9],
    [6, [6], 10],
    [2]
  ]),
  // ...
};

This demonstrates the DRY principle and higher‑level thinking.

Higher‑Level Thinking

Understanding APIs, system architecture, and different code philosophies enables developers to adapt to various business scenarios and stay ahead of rapid framework changes.

In summary, continuous learning, embracing new tools, and abstracting repetitive logic are key to becoming a proficient front‑end engineer.