山地人的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天的故事
    点击阅读

你可能感兴趣的:(sass,node.js,html5,html,css)