现代前端技术解析-第6章 前端跨栈技术

《现代前端技术解析》第6章阅读笔记

---

• 笔记章节目录

• 第1章 Web前端技术基础
• 第2章 前端与协议
• 第3章 前端三层结构与应用
• 第4章 现代前端交互框架
• 第5章 前端项目与技术实践
  • 一（5.1 前端开发规范）
  • 二（5.2 前端组件规范 & 5.3 自动化构建）
  • 三（5.3 自动化构建）
  • 四（5.5 前端用户数据分析 & 5.6 前端搜索引擎优化基础 & 5.7 前端协作）
• 第6章 前端跨栈技术
• 第7章 未来前端时代

---

• 2020/02/25

6.1 JS跨后端实现技术

（p284 - 297）

• Node后端开发基础知识和技术： （p285 - 288）

  • 服务器基础知识；
  • 简单的数据库设计能力；
  • 后端MVC设计理念；
  • 后端异步；
  • 模块化思想；
  • 中间件技术；
  • 接口设计规范；
  • 后端部署技术和基本运维能力。

• 早期MEAN： 使用Node的Express作为框架进行小型的web站点建设方案。M(Mysql), E(Express), A(Angular), N(Node)最为典型。

• Node后端数据渲染： （p289 - 290）

  后端数据渲染流程：p290

  可以解决：

  • SPA场景下的SEO问题：p289；

  • 前端页面渲染展示缓慢问题：前后端分离的SPA开发模式下，页面在JS执行渲染之前是空白的（或提示用户加载中）。用户在看到数据时已经花费的网络等待时间：

    DOM下载时间 + DOM解析时间 + JS文件请求时间 + JS部分执行时间 + 接口请求时间 + DOM渲染时间

• 前后端同构： （p290 - 297）

  • 问题： 在前后端分离的开发模式上加入直出层，使得不得不维护2套不同的前后台模板或技术实现——前端渲染实现逻辑和后端直出实现逻辑。

  • 目标： 需要一套完整的开发方式，和原有开发模式保持一致，且能够同时用于前后端分离的开发模式和后端数据渲染模板开发方式中。这就是所谓的前后端同构。

  • 实现同构的的核心： 只开发一套项目代码，即可以用来实现前端的JS加载渲染，也可以用于后台的直出渲染。

  • 优势： ①可以根据用户的需求方便的选择使用前端渲染数据还是后台直出页面数据； ②开发者只需要维护一套前端代码，而且可以沿用前端原有的项目组件化管理、打包构建方式，根据不同的构建指令生成类似的前后端数据模版或组件在前后端执行解析，所以这对于DOM结构层上的开发方式应该是一致的。

  • 实现原理、方案： p292 - 297

    基于数据模板的前后端同构方案、基于MVVM的前后端同构、基于Virtual DOM的前后端同构

---

6.2 跨终端设计与实现

• Native、Web、Hybrid优缺点对比： （p297 - 299）

  Native应用优点：

  1. 原生系统级Native API的支持，如访问本地资源、相机API等；
  2. 资源在打包安装时生成，节省用户使用时流量；
  3. 可针对不同平台特性进行用户体验优化；
  4. 运行速度快、性能好，可使用原生Native动画库。

  Native应用缺点：

  1. 开发成本高，兼容性差。尤其是对于Android机型；
  2. 维护成本高，用户必须手动下载更新，历史版本也需要维护；
  3. 上线时间不确定，一般需要通过应用商店的审核；
  4. 版本更新慢，更新时需要用户重新下载安装包；
  5. 应用界面的内容不可被搜索引擎检索。

  ---

  Web应用的优点：

  1. 开发成本低，使用前端开发技术即可；
  2. 跨平台和终端，基于浏览器或WebView运行；
  3. 部署方式简单、快捷，无需用户安装；
  4. 用户总能访问到最新版本，迭代速度快；
  5. 内容可被搜索引擎检索。

  Web应用的缺点：

  1. 浏览体验无法超越Native应用；
  2. 消息推送、动画等实现方式相对Native实现方式较差；
  3. 不能调用设备的原生特性，如无法访问本地资源、相机API等。

  ---

  Hybrid应用的优点：

  1. 开发成本较低，可以使用前端开发技术，甚至可以自动添加Native外壳来实现独立移动端应用；
  2. 跨平台和终端，内容网页可基于浏览器或WebView运行；
  3. 拥有与Web应用相同的快速迭代特性；
  4. 部署方式简单、快捷，只更新Web资源即可；
  5. 可支持离线应用；
  6. 可通过JSBridge调用设备的系统级API，如访问本地资源、相机API等；
  7. 原生应用版本的迭代和Web功能的迭代相互独立也可相互结合；
  8. 不同性能需求的功能可以选择性使用Native或Web实现；
  9. 内容可被搜索引擎检索；
  10. 借助于MNV*的开发模式可以更接近Native应用的用户体验。

  Hybrid应用的缺点：

  • 部分机型兼容性相对于Native较差，但比Web应用体验好的多。

• Hybrid实现方式： p299 - 231

• Hybrid应用的资源离线和更新技术： 在Hybrid应用开发时，常常需要在离线的情况下打开页面或者为了让应用加载启动更快，避免长时间等待资源造成空白页面的情况，就需要考虑使用离线缓存技术来加快页面速度。常用方案有：

  • ServiceWorker的资源离线与更新： p302

  • localStoreage资源离线缓存与更新： p302 - 304

  • 基于增量文件的更新方式： p304 - 306

  • 基于文件代码分块的增量更新机制： p306 - 307

  • 基于编辑距离的增量更新机制： p307 - 308

  • 基于Native与Web结合的资源离线与更新 p308 - 312