2020前端新技术学习指南（持续更新）

css模块化设计

1. 设计原则

a、可复用能继承要完整
b、周期性迭代

2. 设计方法

a、先整体后部分再颗粒化
b、先抽象再具体

代码规范——ESLint

ESLint 是一个代码规范和错误检查工具，有以下几个特性：

• 所有东西都是可以插拔的。你可以调用任意的rule api或者formatter api 去打包或者定义rule or formatter。
• 任意的rule 都是独立的
• 没有特定的coding style，你可以自己配置

TypeScript

TypeScript 扩展了JavaScript语法，任何已经存在的JavaScript程序，可以不加任何改动，在TypeScript环境下运行。TypeScript只是向JavaScript添加了一些新的遵循ES6规范的语法，以及基于类的面向对象编程的这种特性。

新的布局模式 CSS Grid 和 Flexbox

CSS Grid 和 Flexbox 已经得到广泛支持。然而，在面试的时候，仍然在讨论 CSS 中如何使浮动实现多列布局和行内块级元素居中。
资料：

node.js

通过各种调查，nodejs也已经作为一个必备技能，而不是拔高技能了。

• koa
• egg
• expres

框架

vue、react、angular至少要会一个，可以先从vue入门，然后学习react

web组件化

web 组件，江湖人称web components.

PWA

进式网络应用程序（简称PWA）是一种带有一些额外功能的Web应用程序，是一种编写Web应用程序的新方式。Progressive Web Apps是一个web app但是在功能和样式上给用户带来原生应用使用体验的一项技术.

• 响应式
• 在离线环境下也能够提供服务
• 类似App的交互
• HTTPS
• 可靠, 迅速, 更好

GraphQL

1. GraphQL 是 REST API 的替代品，搞数据接口用的
2. 如果你是创业公司或者小公司，没有以前的技术负担，用GraphQL爽歪歪
3. 如果你想成为全栈，GraphQL是你工资突破50K+的绝佳机会

Serverless Services（无服务器服务）

用了它，你们公司再也不用自己去买服务器做负载均衡各种恶心事儿了。目前典型的应用就是图床，你上传一堆图片，根据你的需求，别人家的服务器把各种尺寸给你做好，而且还做好防盗链和负载均衡。性能安全没的说。

网站静态化

技术栈JAMStack https://jamstack.org/
JAMstack是指使用JavaScript、API和Markup构建的技术堆栈，JAM是JavaScript、API和Markup的简称，前面第一个字母缩写，JAMstack一种基于客户端JavaScript，可重用API和预构建Markup的现代Web开发架构.

javascript AI

了解JavaScript 构建的各种AI模型和机器学习模型。

javascript 物联网（lot）

nodejs将 javascript推进了服务器端，而不是桎梏与浏览器。同理lot,将js推进到了更广泛的设备。

知识挖掘技术

学会找资源，提高知识面，真的很重要

区块链技术

现在许多公司使用区块链技术进行数字交易, 因为它们更安全和有效率.

• Solidity(一门智能合约的编程语言)
• Mist(以太坊开发的浏览器, 用于发送交易和合约)
• 比特币API(可以构建app和整和比特币的区块链开发)

RN 及 Flutter

使用什么跨平台框架来看，区别并不是太大。目前主流的方案，仍然是原生（含跨平台框架） + HTML5 应用。从业务的角度上来看待这个问题，那么还是希望，可以用 HTML 5 的地方多——更新功能方便。

vue后台管理框架

https://github.com/herozhou/vue-framework-wz

Nignx

Nginx是一个轻量级、高性能、稳定性高、并发性好的HTTP和反向代理服务器。也是由于其的特性，其应用非常广。

CSS Grid 布局

CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素（成为 Grid Items 网格项），你就可以轻松使用 Grid(网格) 布局。
学习地址一：

Stylus基本使用

基于Node.js的css的预处理框架，其本质上做的事情与 Sass/LESS 等类似， 可以以近似脚本的方式去写CSS代码，创建健壮的、动态的、富有表现力的CSS，默认使用 .styl 的作为文件扩展名，支持多样性的CSS语法。Stylus比LESS更强大，而且基于nodejs比Sass更符合我们的思路。

UI框架

• uni-app uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

数据可视化

• echarts
• D3.js

react

• davJS https://dvajs.com/