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

山地人發表於2019-03-03
前端

為何會有這個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
  • 效能測試

型別檢測

  • 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（ 請備註：你來自掘金 | 是否要加入前端自學交流群 ）

微信:colin3dmax

相關文章

  • 2019年山地人的前端完整自學計劃——講一個B站UP主山地人的40天前端自學故事 點選閱讀
  • 想學前端，JavaScript基礎不好，學習又無從下手，山地人用權威的MDN手把手帶你夯實JS基礎 點選閱讀
  • B站Up主-山地人-這位老哥2019年的前端自學計劃進展如何？——講一個B站Up主自學前端85天的故事 點選閱讀

相關文章