这是一份 2021 年前端开发手册,列举前端开发相关技术,提供相关技术的学习资源。下面的项目不用全部学习,可以选其中一些学习。
欢迎补充!项目地址:2021-frontend-handbook
- HTML
- CSS
- JavaScript
- 前端框架
- 前端工程化
- 服务端渲染 SSR
- 静态站点生成器 SSG
- TypeScript
- 用 JS 去做服务器端
- 桌面应用程序 Electron
- 移动端混合开发
- 前端架构 JAMStack
- WebAssembly
- DOCTYPE
- HTML, XHTML, XML 差异性
- HTML5 新特性 及 语义化标签
- meta, img, script 等标签及其标签属性
- 有兴趣可以了解 W3C 和 WHATWG HTML5 差异
- CSS 基础
- CSS 布局
- CSS 动画
- CSS 预处理器(sass, less, stylus)
- JavaScript 基础
- ES6
- 面向对象编程 和 函数式编程
- Vue
- 路由(Vue-Router)
- 状态管理(Vuex)
- React
- JSX
- Class Component, Hooks
- 路由(React-Router, React-Router-Dom)
- 状态管理(Redux, Mobx, Context API)
- Angular
- 状态管理(Service, NgRx, RxJS)
- Svelte
- 路由(svelte-spa-router)
- 状态管理(Context API)
- 📖 vue.js官网
- 📖 介绍 | Vue Router
- 📖 Vuex 是什么? | Vuex
- 📖 React 官方中文文档 – 用于构建用户界面的 JavaScript 库
- 📖 React Router 中文文档
- 📖 Redux 中文文档
- 📖 MobX 中文文档
- 📖 Angular 中文网
- 📖 NgRx Docs
- 📖 RxJS 中文文档
- 📖 Svelte 中文文档
- 包管理工具(npm, yarn)
- JavaScript 编译器(babel)
- 代码检测工具(ESlint)
- 自动化打包工具(webpack, rollup, parcel, gulp)
- 📖 npm 中文文档 | npm 中文网
- 📖 Yarn 中文文档
- 📖 Babel - 下一代 JavaScript 语法的编译器
- 📖 ESLint - 插件化的 JavaScript 代码检测工具
- 📖 webpack 中文文档 | webpack 中文网
- 📖 rollup.js 中文文档 | rollup.js 中文网
- 📖 gulp 中文文档 - gulp.js 中文文档 | gulp.js 中文网
- 📖 Parcel 中文网
- Nuxt(Vue)
- Next(React)
- Sapper(Svelte)
- Gridsome(Vue)
- Gatsby(React)
- 和 JavaScript 的差异
- 基础类型
- OOP(模块,类,接口,继承,泛型等)
-
Node.js
- 单线程、事件驱动、非阻塞I/O
- 框架(Express, Koa,Nest)
-
Deno
- 📖 node.js官网
- 📖 Express - 基于 Node.js 平台的 web 应用开发框架
- 📖 Koa (koajs) -- 基于 Node.js 平台的下一代 web 开发框架
- 📖 Nestjs中文网
- 📖 Deno 中文手册
Electron.js是可以通过HTML,CSS,JavaScript开发跨平台的桌面应用程序。
- 基础语法,API
- 编译
- 性能优化
- 调试
- 部署
- React Native
- Flutter
- Ionic
JAMStack(JAM 代表 JavaScript,API 和 Markup)
是一种使用 Static Site Generators (SSG) 技术、不依赖 Web Server 的前端架构。
WebAssembly 是一种新的编码方式,可以在现代的网络浏览器中运行底层字节码。