作者:云白先生
公众号: 前端微服务
GitHub:https://github.com/yongbolu

概述

前端相比其它行业是一个特殊的行业,技术迭代速度之快，知识零散繁杂，由于东西多，它成了一个入门容易精通难的岗位，是其它行业所不能比拟，尤其在近几年以Node.js为核心的前端工程化、自动化发展过程中，前端发展更为迅猛，也正应为如此，前端的竞争变得越来越激烈，相同岗位的门槛也变得越来越高，岗位也显得重要起来，这也使得前端成为研发体系中的重要岗位之一，知识的零散，迭代速度的提升，这无论对于刚入门的新手还是有经验的工程师们来说对重点都不好把控，有时候甚至感到迷茫！对此，小编总结出前端2020你需要学习和掌握的前端知识库，让你从前端生态系统的发展模式，把握自己的未来，如果这篇文章对你有帮助，不要忘记点赞!

目录

第〇部分前端基础
第一部分 JavaScript深度剖析
第二部分前端工程化
第三部分核心框架原理进阶
第四部分 Node.js全栈开发
第五部分客户端开发
第六部分商业级技术解决方案
第七部分进阶技术专题
第八部分前端性能优化
第九部分前端项目部署
第十部分前端面试技巧
第十一部分工具拓展
第十二部分未来展望

第〇部分前端基础

前端开发的历史演变
前端MVC框架的兴起
前后端分离
全栈工程师
前端开发的未来
HTML5语义化
CSS3 动画及新属性
flex 弹性布局
grid布局
盒子模型
兼容性
DOM操作技术
JavaScript编程技术
HTML&CSS
静态资源分析与编译
浏览器运行时
移动端
服务端
客户端
嵌入式
区块链
人工智能

第一部分 JavaScript深度剖析

第1章 ECMAScript新特性

JavaScript与ECMAScript的区别和新特性
块级作用域、模板字符串、const、let
对象与数组的结构，rest操作符
函数(箭头函数、默认参数)
对象和数组的扩展用法
Proxy、Reflect、Map、Set、Symbol概念及用法
for...of、迭代器模式、生成器函数
ES Modules模块化
ES6-ES10……新特性
AMD、CMD、ES6区别
Promise、await、async
class 类
新特性编译工具babel的使用与配置
新特性的Polyfill:CoreJS标准库

第2章 JavaScript异步编程

JavaScript单线程设计
同步模块和异步模块的调用差异
回调函数的执行原理
Promise异步方案的使用
处理异步任务的任务队列和事件循环
javaScript内部的宏任务和微任务
ES6 Generator迭代器的异步应用
使用Async/Await的异步代码

第3章 TypeScript高级编程

编程语言的数据类型
JavaScript的自有类型
Flow静态类型检查方案
Flow静态工具配置及相关插件使用
TypeScript基本语法
TypeScript高级特性(泛型、接口)
TypeScript内置对象标准库
TypeScript类型申明

第4章函数式编程范式

函数式编程的本质及应用场景
如何以函数式编程风格创建应用程序
用码构建功能复杂的程序
纯函数的定义及为什么要用纯函数
消除和副作用的意义
柯里化、compose、高阶函数的优点
不可变的数据结构
常见库(Lodash、Ramda.js)

第5章 JavaScript性能优化

JavaScript中的垃圾收集
JavaScript内存管理
V8垃圾回收机制分类
引用计数、标记清除、标记整理和增量标记
Preformance工具使用及注意事项
20个代码优化层面细节

第二部分前端工程化

第6章前端工程简介

什么是工程化
工程化组成
工程化在项目中的表现
工程化与工具之间的关系
babel编译工具的安装与配置
持续集成
静态代码检查
单元测试
功能测试
持续集成服务 Travis CI

第7章脚手架工具和工程化

脚手架设计思想与目标
脚手架工具的本质作用
常用的脚手架工具
Yeoman的使用及自定义Generator
Yeoman Sub Generator 特性
用Yeoman创建自己的脚手架
Plop生成器的基本使用
使用 Plop提高项目创建同类文件的效率
脚手架工作原理剖析
搭建自己的脚手架
搭建自己的组件库
封装公用的插件
发布到npm

第8章自动化构建

如何使用自动化构建提高开发效率
自动化构建工具有哪些
npm scripts vs scrpits hooks
Grunt工具的配置使用及扩展开发
Gulp工具的配置使用及扩展开发
基于Gulp创建自动化构建流程
封装独立的自动化构建工具
FIS3的使用及常用的插件和扩展

第9章自动化测试

自动化测试的主要分类: 单元测试、集成测试、E2E测试
性能测试与压力测试
常见的自动化测试框架与实现原理
Mocha、Jest、Enzyme、Cypress、Nightmare、Puppeteer
前端项目自动化测试的最佳实践（基础设施、公共组件测试

第10章自动化部署（CI / CD）

持续集成与持续部署
基于 GitHub / GitLab自动化工作流搭建
常见的CI实践:Jenkins、GitLab CI、Travis CI、Circle CI
开源项目: GitHub Actions
基于常用CI系统实现静态部署/Node类项目的自动部署

第11章模块开发与Webpack

模块化标准与规范
ES Modules标准的支持情况
Webpack打包工具的基本使用
Webpack的配置详解
Webpack打包过程和打包结果分析
Webpack资源模块的加载(Loader)
Webpack的插件机制
开发Webpack插件
开发Webpack Loader
Webpack周边生态(Dev Server、HMR、Rroxy)
Webpack高级特性(Tree-shaking、sideEffects)
Webpack打包过程及打包结果优化
深度剖析Webpack实现原理(AST语法树）
其他常见工具(Rollup、Parcel)
Webpack、Rollup、Parcel的区别与特点

第12 章规范与标准化

常见的代码Lint工具(ESLint、Stylelint)
创建项目团队的专属Lint规则
通用代码格式化工具Prettier
将工具集成到Webpack使用
配合Git Hook保证代码仓库中代码质量
结合脚手架、自动化、模块化、规范化搭建现代化前端工程

第三部分核心框架原理进阶

第13章 Vue.js原理深度剖析

Vue.js基础框架学习
Vue CLI基础剖析
数据响应式实现原理
虚拟DOM和diff算法
模板编译实现原理
Vue Router源码分析

第14章 Vue高级进阶

封装自己的Vue组件库
Vue项目性能优化
Vuex数据流管理方案
使用Typescript开发Vue.js应用
服务端渲染(SSR)的实现、同构开发
Nuxt.js集成SSR框架
静态站点生成(SSG)方案及Gridssome
Vue.js3.0 Composition APIs
Vue.js+Vue Router+vuex+Typescript实战项目开发

第15章 React设计原理理解

React的基本用法
React框架基础、JSX语法
分析Virtual-DOM项目的实现原理
React核心算法: Fiber
React框架设计哲学
React框架核心源码解读

第16章 React进阶与实战

React的应用架构
封装React自定义组件
React组件的性能优化
受控制和非受控制组件的选用标准
React组件的自动化测试
React 16.8Hooks特性的使用及方案实现原理分析
CSS-in-JS方案及emotion库
React应用的UI框架及Chakra-UI
使用Typescript开发React应用
React数据流方案:Redux、Mobx
Redux常用中间件以及中间件开发
原生服务端渲染(SSR)的实现、同构开发
Next.js集成式SSR框架
静态站点生成(SSG方案及Gatsby框架
React+React Router+Redux+Ant Design+Typescript实战

第17章 Angular企业实战开发

Angular9基础
Angular数据绑定及实现原理
Angular组件封装及父子组件通信
Angular幅度模块及服务注入
Angular路由模块
RxJS响应式编程库
NgRx状态管理工具

第四部分 Node.js全栈开发

第18章 Node.js高级编程

Node的基本用法
非阻塞IO、EventLoop、事件队列
CommonJS原理解析
核心模块、自定义模块、第三方模块
文件系统、Buffer对象、字符编码
压缩、解压缩、加密和签名算法
网络编程、TCP/IP、HTTP服务
cookie和session原理
Restful API
Express 框架搭建Web应用
Koa2 框架搭建Web应用
多进程和集群搭建
搭建反向代理服务器

第19章 NoSQL数据库

NoSQL数据库特性及优势介绍
MongoDB的安装、连接、操作
mongoose模块以及常用的操作API
Redis快速上手及它所适合的场景
使用Node.js操作Redis

第20章 Web开发框架

Express完成基本的服务端应用开发
Express路由、模板引擎、错误处理
Express中间件机制的设计思想
Express中间件使用以及自定义中间件
Express应用程序的进程管理器
Express安全与性能的最佳实践
Express+Handlebars+Mongoose实战
Koa应用与实践、AOP面向切面编程
Koa中间件实现、源码深度剖析
Koa中间件模型与Express差异
PM2部署Node.js应用

第21章 GraphQL API开发

基于Koa开发 RESTful API
应用最佳接口实践:GraphQL
GraphQL规格标准与设计优势
GraphQL快速开发库:Apollo
API鉴权标准、jsonwebtoken及相关API
Docker Compose + GitLab CI自动化部署Node.js应用

第22章企业级框架

Egg.js 项目架构与脚手架工具
Egg.js 中间件机制、洋葱圈模型
Egg.js 路由、控制器、服务
Egg.js 插件机制以及插件开发
Egg.js 定时任务调度
Egg.js + Mongoose + Nunjucks + TypeScrip项目实战
Nest.js 基本概念和内部组成
使用Nest.js 框架构建高效且可伸缩的服务端应用
Nest.js 面向切面编程，依赖注入的实践
Adonis.js框架介绍

第五部分客户端开发

第23章小程序与快应用

原生小程序MINA框架回顾
基于mpvue开发的小程序应用
基于mpvue框架打包快应用和H5
京东Taro 多端统一解决方案
uni-app多端统一解决方案

第24章 Hybrid App 开发

基于 WebView UI 的基础方案
Cordova / Ionic 通用混合App开发框架
Cordova实现原理分析以及它的常用插件
H5配合原生的WebView开发混合式App
通过 JSBridge 完成H5与原生Native的双向通讯
原生App开发相关知识

第25章 React Native

React Native 开发环境搭建
初始环节搭建以及相关配置
热更新的开发体验
使用 Flexbox实现界面布局
常用的界面布局和长列表实现
接入第三方Naive组件(Objective-C / Swift / Java
React Native架构实现原理

第26章 Flutter 原生App开发

Flutter概述以及 Windows / macOS 环境搭建
Dart 语言快速上手、包管理工具
Flutter 快速上手、开发体验、路由和导航
UI开发: 内置Material Design 和 Cupertino（iOS风格）Widget
常用的Widget、表单组件、布局方式
数据响应:界面状态管理
网络编程以及第三方包
Native 功能和SDK的调用
Flutter项目实战

第27章 Electron桌面应用开发

Electron运行时基本结构分析
快速上手、常用API、基础案例
主进程与渲染进程之间的差异以及互相通信
常见桌面应用程序的功能实现
Electron结合 React / Vue.js 之类的前端框架
Electron应用的调试(主进程与渲染进程)以及相关工具Spectron / Devtron
集成打包工具:electron-builder / electron-packager / electron-forge
实战案例:模仿 Microsoft To Do

第六部分商业级技术解决方案

第28章 Serverless无服务端方案

BaaS / FaaS / PaaS 服务
Serverless架构与实现原理
Serverless应用场景与局限性
国外常见的Serverless服务ZEIT NowNetlify
国内常见的Serverless服务(阿里云、腾讯云)

第29章中途岛、中间层方案

BFF架构的优势及常见方式
基于 Node.js中间层架构
实现更合理的前后端分离架构
中间层的目标与职责
后端细粒度接口聚合
服务端模板渲染
前端路由设计

第30章首屏提升性能方案

白屏加载和首屏加载时间的区别
骨架屏:渲染一些简单元素进行占位
使用PWA开发可离线化应用
客户端缓存策略
利用script的async和defer异步加载
前端资源分块、按需加载

第31章数据埋点方案

数据埋点的原理分析
页面访问量统计
功能点击量统计
埋点系统的实现

第32章长列表无线滚动方案

触底加载更多的实现
长列表渲染卡顿问题的原因
高性能长列表渲染思路:虚拟列表
不同框架长列表无线滚动的实现
高性能滚动及页面渲染优化

第33章 API接口鉴权方案

JSON Web Token方案介绍
jsonwebtoken 模块及相关API
JWT创建与签发、解码与验证
Node.js鉴权中间件实现
Axios统一鉴权模块
React / Vue.js框架下客户端路由鉴权

第34章更过常见方案

渐进式加载方案
RBAC权限管理解决方案
接口Mock方案
OSS云存储方案
H5直播方案
多语言化方案
防盗链方案
CDN加速方案
加密方案
日志方案等

第七部分进阶技术专题

第35章微前端架构与实践

微前端诞生的背景和解决的问题
微前端下的工程化实践
微前端如何同时支持 React / Vue.js / Angular等不同框架
如何开发一个简单的微服务架构
常用的微服务架构使用及配置

第36章 PWA渐进式Web应用

PWA使用场景分析
服务端/客户端离线缓存技术
浏览器多线程环境
通过 Service workers 让PWA离线工作
ServiceWorkers 的生命周期
基于PWA的消息推送、应用更新
渐进式加载

第37章数据可视化

相关知识储备:CanvasȄSVG
数据可视化的目标
数据可视化的常用方式
相关库:D3.js、AntV、Charts.js

第38章现代化架构剖析

Web应用主流框架概览
域名、DNS、负责均衡等相关概念
Web应用服务端、数据库服务器
缓存服务、任务队列服务
云存储、CDN

第39章 Web Components

Custom Elements
Shadow DOM
HTML Templates
Web Components案例
Vue组件转化成原生组件

第40章前端扩展

CSS预处理(less、scss、styles、sass)
CSS架构(BEM、CSS-in-JS、emotion、styled-components)
移动端真机调试
Web安全专题(HTTPS、XSS / CSRF、CSP)
前端应用性能
Web Assembly

第八部分前端性能优化

第41章浏览器端优化

Webpack分模块优化
CND优化
代码压缩优化

第42章服务器端优化

开启服务端压缩
Nginx集群
服务端缓存

第九部分前端项目部署

第43章单页面应用部署

Nginx部署
Tomact部署
自动化部署

第44章服务端渲染项目部署

pm2部署

第十部分前端面试技巧

第45章面试必备的技能

HTML
CSS
Javascript/ECMASCRIPT
TYPESCRIPT
Webpack

第46章如何下好一份简历

基本信息
项目经验
个人特长
发展规划

第十一部分工具拓展

第47章常用版本管理工具

Git
SVN

第48章包安装工具

npm
cnpm
yarn

第十二部分未来展望

第49章前端未来展望

Python
go
算法
数据结构
面经
面试题
沟通技巧
各种不断变化技术框架和工具以及相关原来
读源码技巧

关注我们

点击下方关注我👇👇👇