前端手艺演进（七）：前端跨栈手艺

2019年8月20日 202次阅读 来源: 姜小抖

这个来自之前做的培训，删减了一些营业相干的，参考了许多材料（
参考材料列表），感谢先辈们，么么哒 😘

跟着互联网架构的不停演进，前端手艺框架从背景输出页面到背景MVC，再到前端MVC、MVP、MVVM，以及到Virtual DOM和MNV*的完成，已发作了庞大的变化。团体上来看，前端也正在朝着模块化、组件化和高机能Web开辟情势化的方向疾速生长。除了传统桌面浏览器端Web上的运用，前端手艺栈在效劳端或挪动端上的尝试和生长也从来没有住手过，而且构成了一系列成熟的处置惩罚计划。前端的手艺栈能处置惩罚的不只是页面上的题目，前端工程师的寻求也毫不只是页面上的手艺。

跨后端手艺

这几年全栈工程师已成为一个很热点的关键词，从最早的MEAN手艺栈到后端直出，再到如今的前后端同构，前端经由历程与Node连系的开辟情势愈来愈被开辟者认同并在愈来愈多的项目中取得实践。前端开辟者都热衷于在Node上开辟有以下几个缘由：

  • Node是一个基于事宜驱动和无壅塞的效劳器，异常合适处置惩罚并发要求，因而构建在Node上的运用效劳比拟其他手艺完成的效劳机能表现要好。
  • Node端运转的是JavaScript，关于前端开辟者来讲进修本钱较低，要关注的题目相对来讲比前端更地道些。
  • 作为一位前端工程师确切须要控制一门背景言语来辅佐本身的手艺进修。
  • Node端处置惩罚数据衬着的体式格局能够处置惩罚前端没法处置惩罚的题目，这在大型Web运用场景下的上风就表现出来了，这也是现在Node后端直出或同构的完成体式格局被开辟者普遍运用的一个重要缘由。

Node后端开辟

Node.js 是一个基于 Chrome V8 引擎 的 JavaScript 运转时。

有个叫Ryan Dahl的歪果仁，他的事变是用C/C写高机能Web效劳。关于高机能，异步IO、事宜驱动是基础准绳，然则用C/C写就太痛苦了。因而这位仁兄最先设想用高等言语开辟Web效劳。他评价了许多种高等言语，发明许多言语虽然同时供应了同步IO和异步IO，然则开辟人员一旦用了同步IO，他们就再也懒得写异步IO了，所以，终究，Ryan瞄向了JavaScript。在2009年，Ryan正式推出了基于JavaScript言语和V8引擎的开源Web效劳器项目，命名为Node.js。

Node第一次把JavaScript带入到后端效劳器开辟，加上世界上已有无数的JavaScript开辟人员，所以Node一会儿就火了起来。Node最大的上风是借助JavaScript天生的事宜驱动机制加V8高机能引擎，使编写高机能Web效劳易如反掌。

壅塞和非壅塞

壅塞 是说 Node.js 中别的的 JavaScript 敕令必需比及一个非 JavaScript 操纵完成以后才够实行。这是因为当 壅塞 发作时，事宜机制没法继承运转JavaScript。

在 Node.js 中，JavaScript因为 CPU 麋集操纵而表现不佳。而不是守候非 JavaScript操纵 （比方I/O）。这被称为  壅塞。

壅塞 要领实行起来是 同步地 ，然则  非壅塞 要领实行起来是 异步地 。 运用文件体系模块读取一个文件，同步要领看上去以下：

const fs = require('fs');
const data = fs.readFileSync('/file.md'); // 这里会壅塞

与之功用同等的  异步 版本：

const fs = require('fs');
fs.readFile('/file.md', (err, data) => {
  if (err) throw err;
});

在第二个例子中，  fs.readFile() 因为是 非壅塞 的，所以 JavaScript 会继承实行，不会发作壅塞， 这关于高效吞吐来讲是绝佳的设想。

在 Node.js 中 JavaScript 的实行是单线程的，所以并行与事宜轮询才（即在完成别的使命以后处置惩罚 JavaScript 回调函数的才）有关。任何一个希图以并行的体式格局运转的代码必需让事宜轮询机制以非 JavaScript 操纵来运转，像 I/O 操纵。

比方 每一个对效劳器的要求斲丧 50 毫秒完成，个中的 45 毫秒又是能够经由历程异步操纵而完成的数据库操纵。挑选  非壅塞 操纵能够开释那 45 毫秒用以处置惩罚别的的要求操纵。这是在挑选 壅塞 和 非壅塞 要领上的严重辨别。

Node.js 中的事宜轮询机制和别的言语比拟而言有辨别，别的言语平常须要建立线程来处置惩罚并行使命。

MEAN

Node出现的初期还不像如今一样具有很庞杂的观点，相干手艺和言语的规范还不成熟，Node开辟平常用的比较多的计划就是运用Express作为Web框架举行小型的Web站点建立，与之连系的主流手艺则以M(Mysql)、E(Express)、 A(Angular)、 N(Node)最为典范，以至到了本日MEAN手艺组合的体式格局仍在相沿。

《前端手艺演进（七）：前端跨栈手艺》

前端平常运用Angular来治理完成页面运用，效劳端Web框架以Express为主，同时运用免费开源的MongoDB数据库，如许就能够很快地构建一个Web运用了。

本日能够不一定再去挑选运用它，因为能够替换完成的成熟计划已许多了，各种其他前后端框架都能够用来天真组合作为MEAN的替换选型计划，比方 Vue、React能够替换 Angular，Koa 能够替换 Express，数据库的挑选也有许多。

Node后端数据衬着

关于前端开辟者来讲，在大型Web运用开辟中，许多时刻并不须要完全从新设想全部运用背景的架构，更多的状况下须要连系Node的才协助我们处置惩罚前后端星散开辟情势下没法处置惩罚的题目。我们先来看下一般前后端星散的开辟情势下有哪些题目，应用Node 端的效劳又是怎样协助我们处置惩罚这些题目的：

SPA场景下SEO的题目

一般状况下，SPA运用或前后端星散的开辟情势下页面加载的基础流程是：

  1. 浏览器端先加载一个空页面和JavaScript 剧本。
  2. 然后异步要求接口猎取数据。
  3. 衬着页面数据内容后展现给用户。

那末题目来了，搜索引擎抓取页面剖析该页面HTML中关键字、形貌或其他内容时，JavaScript还没有挪用实行，搜索引擎猎取到的仅仅是一个空页面，所以没法猎取页面上<body>中的具体内容，这就比较影响搜索引擎收录页面的内容排行了。只管我们会在空页面的<meta>内里增加keyword和description的内容，但这肯定是不够的，因为页面关键性的正文内容形貌并没有被搜索引擎猎取到。

假如运用Node后端数据衬着（有人称之为直出或效劳端衬着 SSR），在页面要求时将内容衬着到页面上输出，那末搜索引擎猎取到的HTML就已包含页面完全的内容，页面也就更轻易被检索到了。

前端页面衬着展现迟缓的题目

除了SEO题目，在前后端星散的开辟情势下页面在JavaScript实行衬着之前是空缺的（或提醒用户加载中）。用户在看到数据时已消费的收集守候时候包含：

DOM下载时候 + DOM剖析时候 + JavaScript 文件要求时候 + JavaScript部份实行时候 + 接口要求时候 + DOM衬着时候。

这时候用户看到页面数据时已是三次串行收集资源要求以后的事变了。假如运用后端直出来举行数据衬着，起首SEO的题目不复存在，用户浏览器加载完DOM的内容剖析后即可马上展现，收集加载的题目也取得处置惩罚。其他的逻辑操纵（如事宜绑定和转动加载的内容）则可按需、按异步加载，从而大幅度削减展现页面内容消费的时候。

平常背景页面数据直出的通用架构设想以下：

《前端手艺演进（七）：前端跨栈手艺》

直出层接收前端的路由要求，并在Node端的Controller层异步要求效劳接入层接口，取得Model数据并举行组装拼接，然后提取相对应的Node端View模板衬着出HTML输出给用户浏览器，而不必经由历程前端JavaScript要求动态数据后衬着。

不仅如此，直出层依据差别的浏览器userAgent，也能够提取差别的模板衬着页面返回给差别的用户浏览器，所以这类完成体式格局不仅异常合适大型运用效劳的完成场景，而且能够方便地完成网站的相应式内容直出。

前后端同构

在前后端星散的开辟情势上加入直出层，处置惩罚了SEO和数据加载显现迟缓的题目。可是有两个新的题目：

  • 前端的开辟完成向直出层偏移，不能不在本来的开辟情势上做出修正来 顺应直出层内容的开辟，比方修正后端模板来顺应现有的开辟情势，效果我们不能不保护两套差别的前背景模板或手艺完成——前端衬着完成逻辑和后端直出完成逻辑，只管能够都是用JavaScript写的。
  • 假如是在挪动端Hybrid运用上，离线包机制完成能够就会出现题目。因为每次都是从后端直出HTML构造给前端，如许就难做到将HTML文件举行离线缓存，而只能举行其他静态文件的缓存。在Hybrid App的运用场景下，实在我们更愿望做到的是挪动端初次翻开页面时运用后端直出内容来处置惩罚加载慢和SEO题目，而在有离线缓存的状况下则运用客户端当地缓存的静态文件拉取数据返回衬着的体式格局来完成，或许将来在高版本的浏览器支撑HTTP2的条件下运用前端衬着，低端浏览器不支撑HTTP2的状况下则运用直出的体式格局完成。

所以须要一套完美的开辟体式格局，和原有开辟体式格局保持一致，且能够同时用于前后端星散的开辟情势和后端数据衬着模板开辟体式格局中。这类开辟情势就是我们所说的前后端同构。

完成同构的中心

前后端同构的主旨是，只开辟一套项目代码，既能够用来完成前端的JavaScript 加载衬着，也能够用于背景的直出衬着。

为何能够如许做呢？和前端衬着数据内容的体式格局雷同，页面直出层内容也是经由历程数据加上模板编译的体式格局天生的，前端衬着和背景直出的情势天生DOM构造的辨别只在于 数据和模板的衬着发作在什么时刻。假如运用一套能在前端和后端都编译数据的模板体系，就能够做到运用一致套开辟代码在前后端离别举行数据衬着剖析。因而前后端同构的中心题目是完成前背景数据衬着的一致性。

同构的上风

除了处置惩罚前后端开辟体式格局的题目，前后端同构的网站具有一些显著的上风：

  • 能够依据用户的需求方便地挑选运用前端衬着数据照样背景直出页面数据；
  • 开辟者只需保护一套前端代码，而且能够相沿前端原有的项目组件化治理、打包构建体式格局，依据差别的构建指令天生相似的前后端数据模板或组件在前后端实行剖析，所以这关于DOM构造层上的开辟体式格局应该是一致的。

前后端同构的完成道理

基于数据模板的前后端同构计划

早在前端MVC开辟的时期，前端模板的运用就异常普遍，比方Mustache、Handlebar 等，基础道理是将模板形貌语法与数据举行拼接天生HTML代码字符串插进去到页面特定的元素中来完成数据的衬着。同理，后端直出层也能够经由历程该要领来完成数据的衬着发生HTML字符串输出到页面上。

假如前后端运用一致个模板剖析引擎，那末我们只须要编写一致段模板形貌语法构造就能够在前端和后端离开举行衬着了。比方一样的模板：

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

前端，后端拿到数据后剖析保持一致：

{
  "title": "Hello",
  "body": "World"
}
<div class="entry">
  <h1>Hello</h1>
  <div class="body">
    World
  </div>
</div>

关于前端开辟的一致段模板语法构造，我们既能够挑选在浏览器端衬着天生HTML字符串输出，也能够挑选在后端衬着天生HTML字符串输出。假如挑选在前端衬着，则能够将模板举行打包编译，在数据要求胜利后举行DOM衬着；假如挑选后端衬着，就能够将模板数据直接发送到直出层的View视图举行衬着，完成一致个模板语法构造在前后端衬着出雷同的内容。这里的条件是要保证前后端运用的模板衬着引擎或许模板剖析的语法是一致的。

基于MVVM的前后端同构

MVVM框架页面上的JavaScript逻辑主如果经由历程Directive（不只是Directive，另有filter、 表达式等，以Directive为主）来完成的，平常前端页面加载完成后会最先扫描DOM构造中的Directive指令并举行DOM操纵衬着或事宜绑定，所以数据的显现依旧须要页面实行Directive后才完成。那末假如将Directive的操纵在直出层完成，浏览器直接输出的页面就是衬着后的内容数据了。

<div class="entry">
  <h1 x-html="title"></h1>
  <div class="body" x-html="body"></div>
</div>

前端编写的一致段MVVM的语法构造，经由历程前端MVVM框架剖析或后端Directive 运转剖析终究都能够天生雷同的HTML构造，差别的是前端实行剖析后天生的是ViewModel对象并经由历程浏览器表现，后端衬着则天生HTML标签的文本字符串输出给浏览器。这里一样须要做一件事，即在背景完成一个与前端剖析Directive雷同的模块，以至还包含filter、语法表达式等的完成。如许就能够在前后端完成一致段语法构造的剖析了。

基于VirtualDOM的前后端同构

之前说过，VirtualDOM作为一种新的编程观点被普遍运用在现实项目开辟中，其中心是运用JavaScript 对象来形貌DOM构造。那末既然Virtual DOM是一个JavaScript对象，就示意其能够同时存在于前后端，经由历程差别的处置惩罚体式格局来完成同构。

在前端开辟的组件中声明某段VirtualDOM形貌语法，然后经由历程VirtualDOM框架剖析天生VirtualDOM，这里的VirtualDOM既能够用于在浏览器端天生前端的DOM构造，也能够在直出层直接转换成HTML标记的文本字符串输出，背面这类状况就能够在效劳端上完成Virtual DOM到HTML文本字符串的转换。如许，经由历程对Virtual DOM的差别操纵处置惩罚，就能够一致前后端衬着机制，完成组件的前后端对一致段形貌语法举行衬着。

这里VirtualDOM上的逻辑完成依旧须要在浏览器端举行事宜绑定来完成，最好能让同构框架协助我们自动完成，依据HTML的构造举行特定的事宜绑定处置惩罚，保证末了展现给用户的页面是完全且带有交互逻辑的。

不管哪种体式格局，中心都体如今HTML的构造情势变化上，页面内容的形貌体式格局有许多，而且能够经由历程特定的处置惩罚历程完成转化，如许就供应了更多的能够性。

《前端手艺演进（七）：前端跨栈手艺》

Egg.js

《前端手艺演进（七）：前端跨栈手艺》

Node虽然生态比较炽热，然则至今还没有一款公认的成熟的企业级框架，主如果因为运用Node来开辟大型后端运用的企业还很少。如今重要有两款：Sails 和 Egg.js。

设想准绳

一个插件只做一件事：Egg 没有内置许多分外的功用，而是经由历程插件的体式格局来完成，Egg 经由历程框架聚合这些插件，并依据本身的营业场景定制设置，如许运用的开辟本钱就变得很低。

商定优于设置：根据一套一致的商定举行运用开辟，团队内部采纳这类体式格局能够削减开辟人员的进修本钱，这也是许多框架的思绪。

特性

  • 供应基于 Egg 定制上层框架的才：能够基于 Egg 去封装合适团队的上层框架。
  • 高度可扩大的插件机制：能够增进营业逻辑的复用，生态圈的构成。
  • 内置多历程治理。
  • 基于 Koa 开辟，机能优秀：支撑一切的Koa中间件。
  • 框架稳固，测试覆蓋率高。
  • 渐进式开辟：能够流通的完成编码 –> 编码笼统胜利用 –> 功用笼统成插件 –> 插件封装到框架 的渐进历程。

https://eggjs.org/zh-cn

如今我们部门的Node项目基础上是 Koa，Egg流。其他部门也有 Express 流。

跨终端手艺

挪动端

挪动互联网鼓起后，智能挪动装备出现，大批运用市场的Native运用也最先出现。跟着第一波挪动端互联网开辟海潮逐渐镇静，各种Native运用最先进入有序更新迭代的阶段。人们对挪动互联网需求急剧增进，Native 运用疾速迭代开辟的需求也愈来愈多，然则现有Native运用的开辟迭代速率依旧没法满足市场疾速变化的须要。随之而来的是HTML5的出现，它许可开辟者在挪动装备上疾速开辟网页端运用，并让挪动互联网运用开辟很快进入了Native运用、Web运用、Hybrid 运用并存的时期。

《前端手艺演进（七）：前端跨栈手艺》

在生长历程当中，最大限制的应用原生才成为了一大趋向。出现了 React Native、Weex 等框架，能够直接运用 Javascript 来编写原生运用。比方React Native，产出的并非“网页运用”， 或许说“HTML5运用”，又或许“夹杂运用”。 终究产物是一个真正的挪动运用，从运用感觉上和用Objective-C或Java编写的运用比拟几乎是没法辨别的。

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          假如你喜好在Web上运用React，那你也肯定会喜好React Native.
        </Text>
        <Text>
          基础上就是用原生组件比方'View'和'Text'
          来替换web组件'div'和'span'。
        </Text>
      </View>
    );
  }
}

《前端手艺演进（七）：前端跨栈手艺》

也就是说纵然不懂原生运用的开辟，也能够用 Javascript 来编写原生运用了。

桌面端

如今，也能够运用 JavaScript, HTML 和 CSS 构建跨平台的桌面运用。经由历程 Electron 之类的运用，能够直接把 Web 项目打包成桌面运用，运转在各个操纵体系中。

有名的 Atom IDE 就是经由历程 Electron 构建的，其他的包含 VS Code、Skype、Github Desktop 之类的 App 也都是经由历程 Electron 构建的。

《前端手艺演进（七）：前端跨栈手艺》

    原文作者：姜小抖
    原文地址: https://segmentfault.com/a/1190000017381935
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞