为何会有这个Roadmap

自学也需要有章可寻，早上整理了一下这段时间学的内容东西比较多，接下来的一段时间都会围绕这个Roadmap展开学习，当然这张前端自学图谱并不是一成不变的，随着时间的推移我会调整这张Roadmap里的内容，总的目标只有一个系统化的学好前端的技术，我会随时调整完善这张图谱。

开发通用技能

GIT版本控制

Terminal终端技能

数据结构和算法

软件设计原则

• SOLID (SRP、OCP、LSP、ISP、DIP)Wiki
• KISS （Keep It Simple,Stupid）Wiki
• DRY （Don't rePEat yourself）Wiki
• The Rule Of ThreeWiki)
• YAGNI (You aren't gonna need it)Wiki

GitHub

Licenses

• GNU AGPL Lincense
• GNU GPL Lincense
• GNU LGPL Lincense
• Mozilla Public License
• apache License
• MIT Lincense
• Unlincense

推荐阅读

SSH

HTTP/HTTPS 和 API设计

设计模式 Design Patterns

• 工厂模式
• 适配器模式
• 迭代器模式
• ...

字符编码

Wiki
Wiki中文

前端开发技能

HTML

• HTML基础
• HTML语义
• SEO基础
• 可访问性 (Accessibility) Wiki中文

CSS

• CSS基础

• 常见布局

  • 浮动布局 Floats
  • 定位布局 Positioning
  • 显示 Display
  • 盒子模型 Box Model
  • 网格布局 Grid
  • Flex布局 Flex Box
• 媒体查询 Media Queries
• CSS3

JavaScript 语言

• JavaScript基础语法
• DOM操作

• 通讯

  • Fetch API
  • Ajax(XHR)
• ES6+

• 重点理解

  • Hosting
  • Event Bubbing
  • Scope
  • PRototype
  • Shadow DOM
  • strict
  • DNS
  • HTTP

包管理

• npm
• yarn

CSS 预编译

• SASS
• PostCSS
• Less

CSS Framework （CSS框架）

• Bootstrap
• MATErialize CSS
• Bulma
• SEMantic UI

CSS 结构化

• BEM
• OOCSS (了解)
• SMACSS (了解)

构建工具

编辑器检查和构建检查(代码格式规范)

• Prettier
• ESLint
• JSHint
• JSLint
• JSCS

Task Runner任务管理工具

• npm scripts
• gulp

模块打包工具

• Webpack
• Parcel
• Rollup

前端框架（建议初学选一种）

• React.js

  • 路由 React Router

  • 状态管理

    • redux
    • MobX

• Vue.js

  • Vue Router（路由）
  • Vuex（状态管理）
  • vue cli（脚手架）

• Angular

  • RxJS
  • ngrx

CSS in JS

• Styled components
• CSS Modules
• Emotion
• Radium
• Glamorous

测试

测试框架

• Jest
• Enzyme
• CyPress

• 其他

  • Mocha
  • Chai
  • Ava
  • Karma
  • Jasmine
  • Protractor

测试类型

• Unit 单元测试
• Integration 集成测试
• Functional 功能测试

PWA（Progressive Web App）渐进式Web应用

• 什么是PWA

• 基础技术

  • Storage 存储
  • Web Sockets
  • Service Workers
  • Location 定位
  • Notifications 通知
  • Device orientation
  • Payments
  • Credentials

• 性能测试

  • PPPL Pattern
  • RAIL性能评估模型参考谷歌开发者文档
  • Performance Metrics 性能测试Wiki
  • Light House 测试工具
  • DevTool Chrome开发工具

类型检测

• TypeScript

SSR（Server Side Rendering）服务端渲染

React.js

• Next.js
• After.js

Angular

• Universal

Vue.js

• Nuxt.js

静态站点生成

• GatsbyJS

桌面应用

• Electron
• Proton Native
• Carlo

移动应用

• Flutter
• React Native
• NativeScript

服务端

NodeJS系列

• Node.js
• Koa
• Egg
• Nest.js

如果你和我一样，也都一直在自学前端，如果自学的过程中遇到了坎，不管是学习过程中遇到什么问题，或者有什么好的意见和建议想和我交流，欢迎你在文章底部留言、加我微信或者加入我们的微信前端自学交流组，期待在自学小组与你相遇！

这里我为你准备了微信——前端自学交流群，欢迎你加入我们一起学习。（一群快满，想入群的小伙伴可以加我微信:colin3dmax）

山地人微信:colin3dmax（ 请备注：你来自思否 | 是否要加入前端自学交流群 ）

相关文章

• 2019年山地人的前端完整自学计划——讲一个B站UP主山地人的40天前端自学故事

点击阅读

• 想学前端，JavaScript基础不好，学习又无从下手，山地人用权威的MDN手把手带你夯实JS基础 点击阅读
• B站Up主-山地人-这位老哥2019年的前端自学计划进展如何？——讲一个B站Up主自学前端85天的故事
  点击阅读