山地人的2019年前端自學路徑Roadmap——v0.0.1

爲什麼會有這個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天的故事 點擊閱讀