Web 开发学习规划

决定走 Web 开发方向，需要自己规划一个学习路线，文中还会包括一些公司对于应届生的技术要求。

一些招聘要求

工作职责

• 根据 UI 图和交互设计稿完成移动端开发工作；
• 研究并改善产品，优化用户体验，兼容各类浏览器及性能优化；
• HTML5、CSS3 移动端新技术的研究及应用；
• 负责或协助相关开发文档的撰写；
• 根据产品需求，分析并给出合理的页面前端结构解决方案；
• 负责前端框架设计、前端开发工作统筹；
• 与产品、后端沟通，协同进行前后端分离的开发模式；
• …

技术要求

• 熟知 W3C 标准，精通 HTML、CSS、JavaScript 等 Web 前端开发技术，熟悉前端开发流程；
• 熟悉 Vue、React、Angular 等 MVVM 前端开发框架语法和编程思想；
• 有实际的 Vue / React / 小程序 等项目开发经验；
• 熟悉 TypeScript, 了解 Express / Koa 等中间层框架；
• 熟悉 Node.js ，有开发经验，并有实际产出；
• 熟练掌握工程化工具的使用，如 Webpack、Gulp 等，并对其原理有所了解，有相关实践经历者优先；
• 熟练运用 Sass、Less、Stylus 等任意一种预编译工具；
• 熟练掌握 Git 等版本管理工具的使用；
• …

加分项

• 有前端架构经验；
• 熟练使用图片处理工具如：PS 等，会设计优先考虑；
• 有技术博客或 GitHub 账号并持续更新；
• 有编写过开源项目，提供 GitHub 地址优先；
• 对于不同浏览器的兼容以及移动端兼容有自己的见解；
• …

Web 开发学习路线

2019 年成为 Web 开发人员的路线图

• 介绍

• 前端路线图

• 后端路线图

• 运维路线图

图片来源：goodjack 的译版 developer-roadmap-chinese，译自 developer-roadmap 。

另外可以参考对 developer-roadmap 的 部分解读 。

学习路线规划与选择

Part 01 Basics

•  HTML
•  CSS
•  JavaScript

关于 Web 前端怎样入门可以参考 知乎问答 ，指南与资料见 思否 （2016 年底更新）。准备 2019-2020 上学期进行此部分的学习，兼顾算法与数据结构。目前参加了中国大学 MOOC 上北京林业大学开设的课程 Web 前端开发 。 — 2019.09

Part 02 Package Managers

•  NPM
•  Yarn

此部分与网站构建关系不是很大，现在就开始学习。 — 2019.09

Part 03 CSS Pre-processors（CSS 预处理器）

•  Sass

Part 04 CSS Frameworks（CSS 框架）

•  BootScrap

Part 05 CSS Architecture（CSS 架构规范）

•  BEM

Part 06 Build Tools（构建工具）

• Linters and Formatters
  •  ESLint
  •  Prettier
• Task Runners
  •  NPM Scripts
• Module Bundlers（模组打包工具）
  •  Webpack

Part 07 Pick a Framework

    What is SPA ?

•  Vue.js
  •  Vuex

Part 08 CSS in JS *

•  Styled Componments
•  CSS Modules

Part 09 Testing Apps

•  Jest
•  Cypress

Part 10 Progressive Web Apps（渐进式网页应用程序）*

•  Storage
•  Web Sockets
•  Service Workers

Part 11 TypeCheckers

•  TypeScript

Part 12 Server Side Rendering（伺服务端渲染）*

•  Nuxt.js

Part 13 Static Site Generators（静态网站生成器）*

•  Gatsby.js

Part 14 Desktop Applications *

•  Electron

Part 15 Mobile Applications *

•  NativeScript

Part 16 Web Assembly *

Part 01 Pick a Language

•  Java
•  Node.js
•  Go

Part 02 Practice

Part 03 Package Manager

•  NPM
•  Yarn

Part 04 Standard and Best Practices

Part 05 Make and Distribute Some Package/Library

•  Contribute to Some Opensource Projects

Part 06 Learn about Testing

•  Unit tests
•  Integration tests

Part 07 Write Tests for the practical steps above（为实际步骤撰写测试）

Part 08 Learn Relational Datebase

•  MySQL

Part 09 Practical Time

Part 10 Learn a Framework

Part 11 Practical Time

Part 12 Learn a NoSQL

Part 13 Caching

Part 14 Creating RESTful APIs

Part 15 Authentication/Authorization Methodologies

Part 16 Message Brokers

Part 17 Learn a Search Engine

Part 18 Learn How to Use Docker

Part 19 Knowledge of Web Servers

Part 20 Learn How to Use Web Sockets

Part 21 Learn GraphQL

Part 22 Look into Graph Datebase

Part 23 All the things that weren’t mentioned above

•  Profiling（效能分析）
•  Static Analysis（静能分析）
•  DDD（领域驱动设计）
•  SOAP（简单物件存取协定）

参考文档

前端框架

• Vue.js
• React.js
• Angular.js

中间层框架

• Express
• Koa

其他框架

• BootScrap

工程化工具

• Webpack
• Gulp

预编译工具

• Sass
• Less
• Stylus

Package Manager

• NPM
• Yarn

类型检查工具

• TypeScript

版本控制

• Git