参考技术栈与学习路线
原视频：
https://www.bilibili.com/video/av82744403
1.1 现有的常用工具：
- 系统： macOS
- 文本编辑器/IDE： VSCode， Sublime Text
- 浏览器： Chrome， Firefox
- 终端： Bash，Zsh
- 页面设计（可选）： XD， PS，Sketch
1.2 构筑基元：
- HTML5 (Semantic elements, attributes, doctype, etc)
- CSS Fundamental (Colors, fonts, positioning, box model)
- CSS Grid & Flexbox
- CSS Custom Properties
- CSS Transitions
1.3 响应式设计：
适应于所有的平台：显示和可用性
- Viewport
- Media Queries
- Fluid Widths
- rem units over px
- Mobile First
1.4 自定义可复用 CSS 组件：
设计自定义的 CSS 组件，框架的流行性在下降。
Sass 可以使得传统的 CSS 效率更高，功能更多
- Variables
- Nesting
- Conditionals
1.5 CSS 框架：
虽然没有过去几年那么流行，但是还是很有用、对于原型设计和设计上并不擅长的开发者依旧很有用
- Bootstrap
- Tailwind CSS
- Materialize
- Bulma
1.6 Vanilla JS：
- Fundamentals (Variables, data types, functions, conditionals, etc)
- DOM (Document Object Model)
- JSON (JavaScript Object Notation)
- Fetch API (Request/Response/Ajax)
- Modern JS (ES6)
1.7 其他工具：
- Git (Version Control) & Github
- Browser Dev Tools
- VSCode Extensions
- Emmet
- NPM or Yarn (Package Manager)
- Axios
- Webpack or Parcel (JS Module Bundlers)
1.8 基础开发：
将软件、网站托管到网络服务器中
- Domain Registration
- Managed Hosting
- Static Hosting
- SSL Certificate
- FTP, SFTP
- SSH
- CLI & Git
1.x 基础前端开发：
- 为个人或小型公司建立网站
- 创建适合移动端查看的界面
- 创建 CSS 动画和特效
- 使用 CSS 框架
- 增加动态页面效果
- 使用 JS 创建小的客户端ing用
- 使用浏览器开发工具
- 使用 Git 进行版本控制
- 建立和维护小的工程
2.1 选择语言或框架
- 前端框架（React，Vue，Angular）
- 服务器端语言（PHP，Python，C#，Go，etc）
2.2 前端框架选择：
框架用于创建具有组织化、交互 UI 的单页面应用。也适合团队使用。
- React 最受欢迎的，相对中等难度
- Vue 受到广泛关注的，较为简单难度
- Angular 在企业中应用更广泛的，难度较高
2.3 Svelte：
JS编译器，辅助编写用户界面
- 代码量更少
- 不需要实质上的 DOM
- 速度很快
2.4 项目管理 State Management：
对于较大的应用使用第三方管理器，但是有逐渐减少的趋势
- React – Redux，Context API with Hooks
- Vue – Vuex
- Angular – NGRX，Services
- Apollo Client
2.5 服务器端渲染 Server SIde Rendering：
在服务器端使用NEXT（React），NUXT（Vue） 进行渲染
- 更好的 SEO
- File System Routing
- Automatic Code Splitting
- Static Exporting
- CSS-in-JS
2.6 静态网站生成器
Gatsby（React），Gridsome（Vue）
- 更好的SEO
- File System Routing
- Data fetching from local files, during build time
- Plugin system
- GraphQI For Data
2.7 TypeScript:
JS的超集，支支持静态类型指定和 ES2015
- Static Typing (vars, functions, etc)
- Tooling Support with IntelliSense
- Modules, Decorators, Classes
- Compiles Into Clean JS Code
2.x 前端工程师的技能 Front-End Wizard：
- 熟悉流行的前端框架
- 创建负责的前端应用或界面
- 优化的前端工作流程
- 和后端 API 与数据进行交互
- 管理应用和组件的层级关系
- 加分项：服务器端渲染，静态网站生成
向前端开发者或全栈发展
3.1 服务器端语言
想要成为全栈或后端工程师，需要学习一门服务器端编程语言或技术
- Node.js
- Python
- PHP
- C#
- Ruby
- GoLang
- Java
- Rust
3.2 服务器端框架
- Node.JS – Express, Koa, Adonis, Feathers.js, Nest.js
- PHP – Laravel, Symfony, Slim
- Python – Django, Flask
- C# – ASP.NET MVC
- Java – Spring MVC, Grails
- Ruby – Ruby on Rails, Sinatra
- Go – Revel
3.3 数据库
- 关系型数据库 – PostgreSQL，MySQL，MS SQL
- NoSQL – MongoDB，RethinkDB，CouchDB
- 云数据库 – Firebase，Azure Cloud DB，AWS
- 轻量级、缓存 – Redis，SQLLite，NeDB
学习：SQL，ORM，ODM 等等
3.4 GraphQL
API 的请求语言
- Single endpoint to ask for only what you want
- Simple syntax, similar to JSON
- Fairly easy to implement
- Apollo is a client to interact with the GraphQL server
3.5 内容管理
CMS 用于向软件或应用中添加内容。在客户端中可以对内容进行更新
- 传统的 CMS – WordPress，Drupal，Keystone，Enduro
- Headless CMS – Contentful，Prismic.io, Sanity, Strapi
3.6 Depolyment & DevOps
懂得如何创建】管理环境和配置到网络上
- SSH
- Web Server Environment – Nginx, Apache
- App Hosting
- Virtualization – Docker, VAgrant
- Testing – Unit, Functional, Intergration, etc
- Load Balancing, Monitoring, Security, etc
3.x 全栈开发者
可以创建强大的，数据库驱动的 Web 应用
- 使用任意一种前端技术创建用户界面
- 流畅的使用服务器端应用和框架
- 设置开发环境和工作流程
- 创建后端应用，APIs， 微服务
- 和数据库（SQL，ORMs）打交道
- 生产配置（SSH，Git，云等）
4.1 移动端开发
- Flutter – 来自谷歌原生移动应用构筑 SDK，使用 Dart
- React Native – 使用 React Framework 构筑原生移动应用
- NativeScript – 使用 JS， TS，Angular 或 VUE 构筑原省移动应用
- Ionic – 使用JS 构筑混合移动应用
- Xamarin – 使用 C# 构筑原生移动应用
4.2 Progressive Web Apps 渐进式 Web 应用：
具有原生的体验、外观和功能的普通 Web App （HTML、CSS、JS）
- 在所有屏幕尺寸中都很美观；
- 使用 service workers 在离线时展示内容
- 不需要安装
- 具有启动界面
- 必须使用 HTTPS 协议
- 可靠、快速、有吸引力
4.3 Electron
使用 JS 构建跨平台应用
- 使用 Node.JS & Chromium
- 高数据安全性
- 效率高
- 容易使用
- 例子：VSCode，Atom，Postman，Discord
4.4 JAMstack
JS，APIs & Markup
- 对于框架和库没有限制要求
- 网站由源文件生成的静态 html 文件构成，如使用 markdown 构筑静态网站的 Gatsby
- 高效，在开发时就已经编译完成
- 便宜，易于