从modern.js到摩登前端

概要

近期看到一篇文章《Modern.js: Hello, World!》，介绍了一个全新的框架modern.js，这个框架野心极大，从名字就可以看出这个框架想将现代前端的方方面面都包含在内。涵盖了响应式页面、微前端、桌面应用、低代码等等技术。

本文不包含对modern.js的分析，仅以此为脉络，粗浅的罗列出所涉及到的技术与简短的介绍。

技术划分

modern.js认为未来前端开发划分为三个模块，前端PasS、Low Code、元框架，而modern.js就属于元框架这个方向。元框架中的代表还有：Gatsby、Docusaurus、Next.js等。

元框架的功能包括了：

视图层的框架，即大家熟悉的三大框架：angular、react、vue。
打包工具，如：webpack、vite等。
而node.js框架则代表传统观念中的后台或者中间层服务。

前端技术划分

元框架

首先我们介绍一下，被modern.js认为是同属元框架的几个项目：

Gatsby

Gatsby是一个预渲染加客户端渲染的框架。意思是Gatsby在项目构建时会直接构建出多个HTML页面，客户访问时先返回已经预渲染的HTML页面，再加载所需的js与其他文件，在之后的页面跳转则是通过前端路由的形式。这样即兼顾了首屏渲染的速度又无需等待服务器进行构建，减少了服务响应的时间。

Docusaurus

与Gatsby类似，但只是针对于构建文档站点，底层使用react框架。如果使用vue框架，可以选择vuepress。

Next.js

服务端渲染的react框架，相较Gatsby，Gatsby通常用于构建静态页面，而Next.js用途更加广泛，可以在服务器接受到请求时再进行渲染HTML，多用于动态的网站。

以上三种框架都有一些共同之处，都涉及到了服务端渲染，需要使用node收集数据，生成页面。都封装了脚手架，使用方便。都基于视图层的框架React。

有趣的是尤雨溪（vue作者）近期在Twitter上发表言论：react现在也是一个元框架了吗？

evan.jpg

视图层框架

视图层的框架基本上指代了社区熟知的三大框架angular、react、vue。这些框架提供了一种新的编写页面方式：使用声明式语法，描述组件对象的嵌套关系，并自动生成与dom对象的对应关系，将dom对象与状态结合起来。

Angular

AngularJS使用脏检测机制将页面展示与数据绑定。脏检测机制指的是封装DOM、Timer等事件，在触发事件时一一排查页面对应数据是否更新，更新就切换DOM元素。在angular2以后使用zone.js对事件进行检测。

通过template书写HTML标签编写组件。

使用依赖注入解耦逻辑。

React

react使用setState或useStatue显性地调用状态的更新。

react的语法在16.8的版本中有了巨大的改动，原本使用class封装组件，为了抽象组件逻辑，官方提出了hook的方式编写组件。通过hook，可以将耦合在生命周期里的逻辑、状态抽离并复用。

React通过fiber实现了时间切片的功能，即切分js逻辑，防止js处理时间过长导致页面丢帧。

Vue.js

vue通过Objec.defineProperty或Proxy监听数据变化，利用观察者模式，在每次改动时触发观察者的方法。

通过template书写HTML标签或render函数编写组件。

但由于vue的历史包裹问题，即使是vue3尽力支持了typescript，但对于一些地方还是做不到尽善尽美。

构建工具

webpack

webpack是一个静态模块打包工具，它会从一个或多个入口开始构建一个依赖图，然后沿着依赖图将模块打包起来。

通过loader可以对模块的源代码进行转换，使得webpack能打包非js代码。

plugin可以执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

Rollup

Rollup与webpack类似，也是一个模块打包工具。

但Rollup配置与功能相较简单，Rollup大多在库中使用，而webpack更适合大型的应用。

ESBuild

使用Go编写的构建工具，所以解析速度快，且执行并行任务简单。

但没有插件，拓展性比较差。

其他基于ESM的构建工具

ESModule是指ECMAScript推出的模块机制，使用import和export进行模块的导入导出。

由于使用浏览器原生支持的ESModule，热更新可以不经过构建直接替换对应内容，速度非常快。

还有许多基于此机制的构建工具如：Snowpack、WMR、Vite。

Node.js框架

这里的node.js框架专指用于支持前端web项目的node.js框架。

Express

Express是一个小而且灵活的web框架，应用广泛。

由于它在社区中非常流行，有很多的插件支持各种场景。但它自身提供的功能比较基础，很多功能需要自己实现。

Koa

Koa是由Express的团队开发，它的体积更小。

它支持async语法与异常处理。但生态相较较小。

Egg

Egg是基于Koa开发的web框架。egg意图为开发者提供一个用于封装统一的web框架的上层框架。

增强了Koa的拓展和插件功能。

HTML

对于HTML这部分，主要介绍下目前的HTML模版的方式。

underscore.js

underscore.js是一个工具库。提供了包括模版字符串等功能。Backbone.js这个元老级的MVC库便是依赖于此库。

underscore.js的模版字符串功能是通过正则解析输入html后，插入对应JavaScript代码。在执行完js代码，最终生成的HTML字符串将代替页面中对应的HTML代码。

var compiled = _.template("hello: <%= name %>");
var html = compiled({name: 'moe'}); // hello: moe

vue的HTML模版

vue的HTML模版与underscore.js不同的是，vue使用了虚拟DOM进行更新HTML。

在解析完模版字符串，模版被编译成渲染函数，函数会返回一个对象，再使用这个对象与上次渲染的虚拟DOM树进行对比，只更新有变化的地方，优化性能。

JSX

jsx是facebook团队提出的一种模版语法规范，由于React的使用而广泛传播。

jsx同样需要解析为渲染函数并返回虚拟DOM。jsx的优势在于它嵌入js代码中，所以在jsx中使用JavaScript十分自然，而TypeScript的类型推断也可以轻松完成。

web components

Web components是现代浏览器原生支持的一种编写组件的方式。web components使用window.customElements.define()定义组件，在定义后便可以在html中使用对应的标签。

由于web componets与框架无关，所以很适合用于跨框架的复用组件，但React自己实现了一套事件机制，所以在React中使用时会比较麻烦。

CSS

对于CSS这部分，主要介绍下目前的CSS处理器的方式。CSS预处理器给CSS带来了变量、嵌套等逻辑。

Less

Less在CSS预处理器中相对比较保守，语法偏向CSS。但简单也就代表了在一些情况下，Less会比较麻烦，比如判断与循环比较复杂。

Sass

Sass是基于Ruby的CSS预处理器，功能比较完善。与Less有部分语法不同。

PostCSS

一些人PostCSS称为CSS后处理器，表示它是在预处理器将代码转化为CSS后再进行处理，比如自动增加浏览器前缀、导入背景图等。但PostCSS也有预处理器的功能，如代码格式检测等。

CSS in JS

CSS in JS代表的是将css混入到js中，这种方式对于css中的逻辑非常好处理，对于无用的css也可以迅速辨别出来。大部分CSS in JS库是在运行时生成css，所以可能会对性能有所影响。CSS in JS目前没有明确的规范，所以不同库之间的差距较大。

JavaScript

JavaScript这部分，简单地介绍下几个基于JavaScript的拓展。

CoffeeScript

CoffeeScript的目的是编写更清晰简单的代码，再转化为JavaScript。语法接近Python和Ruby。

TypeScript

为JavaScript引入强类型。便于规范代码，优化代码质量。

Vanilla JS

最轻量级、最快的JS框架，适配所有浏览器。

JavaScript库

再额外的介绍一些JS技术与基础库，这些基础库同样是现代前端的基石。

状态机

状态机是用于管理代码之间共享状态的集中式管理模式，在使用之前最好先确认你的项目是否真的需要这样的状态管理，因为盲目地使用状态机只会给项目增加复杂度。

You'll know when you need Flux. If you aren't sure if you need it, you don't need it.

--- Pete Hunt

目前React项目中普遍使用Redux，而vue则官方配置了Vuex。

路由

前端路由表示由前端处理路由跳转、页面展示的逻辑。前端路由页面切换速度快，跳转页面不会刷新整个页面。但初次加载时时间较长。

web前端路由有两种常用方式，一种是使用Hash，一种是使用HTML5自带的History对象操作历史记录。

但在桌面应用中无法使用history对象时，vue-router提供了abstract的路由类型，直接使用一个数组代替路由的变化。而react-router则提供了与实现类似的功能。

测试

前端的测试包括单元测试、UI测试、性能测试、跨浏览器兼容性测试等。目前Jest是最流行的测试框架。

既见未来

最后，再列举下前端近年比较流行的解决方案。

微前端

https://micro-frontends.org/

你可能不需要微前端

monorepo

wiki

SSO

wiki

WebAssembly

https://webassembly.org/

PWA

web.dev

MDN

JS Application

Electron

React Native

参考链接

Modern.js: Hello, World!

前端为什么使用框架？解决了哪些问题？

为什么vue不需要时间切片

Underscore _.template 方法使用详解

vue3模版编译

CSS in JS的好与坏

vue-router的abstract文件源码

react-router的MemoryRouter部分源码

Front-End Developer RoadMap for 2021

从modern.js到摩登前端