智库

01.前端概览 ​

该笔记学习自书籍《微前端设计与实现》--卢卡.梅扎利拉

关于前端的发展可以查看笔者之前写的这篇文章--聊聊前后端分离(历史、职责划分、未来发展)，和本章节应该差不多，所以本章节也没有详细记录。

微前端应用 ​

理解微服务架构的复杂性 ​

  • 它虽然带来涉及不同领域的高度的灵活性和良好的封装，但也增加了系统在可跟踪、自动化以及发现缺陷方面的复杂性。
  • 使用微服务可以简化业务逻辑，但我们还是要应对各种固有的复杂性，比如网络、持久层、通信协议、安全性等。如果想大幅降低业务逻辑和代码的复杂度，就必须考虑自动化、治理、可跟踪和通信的开销，这对于微前端也是一样的。

与后端结合的方式 ​

因为可以对模块进行分治，所以微前端更适合和微服务一起使用，但这不妨碍微前端和其他后端架构组合使用，比如单体（monolith）架构和面向服务的架构（service-oriented architecture，SOA）。

单页面应用 ​

单页面应用的特点 ​

  • 单页应用（single-page application，SPA）由覆盖了整个前端应用功能的一个或几个 JavaScript 文件组成，这些文件通常会被预先下载。Web 服务器或内容分发网络（content delivery network，CDN）返回 HTML 入口页后，单页应用会加载 JavaScript、CSS 和其他资源。
  • 使用单页应用有很多好处，比如客户端只需在应用的生命周期开始时下载一次代码，此后用户会话中的全部应用逻辑就都处于可用状态。
  • 单页应用通常通过 API 来与后端（也叫服务器端）的持久层交换数据。此外，单页应用避免了客户端和服务器之间为了加载附加逻辑而导致的频繁通信，做到在应用的生命周期内可以立刻渲染所有视图。
  • 另外，单页应用中的路由机制完全由客户端维护。这意味着每次更改视图时，应用都会更改 URL（uniform resource locator），以便用户分享页面链接或把 URL 加入书签后仍可以直接访问指定的页面。
  • 单页应用也让我们可以自由地决定如何在服务器端和客户端之间划分应用逻辑。比如，我们可以打造一个“胖客户端”和一个“瘦服务器端”，客户端用来存储逻辑，服务器端则用作持久层；或者打造一个“瘦客户端”和一个“胖服务器端”，逻辑主要交给服务器端，而客户端不执行任何智能逻辑，只是响应 API 返回的状态。

缺点相关 ​

  • 单页应用的首次加载时间可能比其他架构长，所以最好使用缓存技术，比如 Service Worker
  • 单页应用的另一个缺点与 SEO（search engine optimization）有关
  • 一口气下载应用的所有逻辑也会成为单页应用的一个缺点，因为如果代码实现有问题或者没有正确处理不再使用的对象，那么当用户从一个视图跳转到另一个视图时，可能会导致潜在的内存泄漏
  • 单页应用的最后一个缺点是在团队组织方面。

同构应用 ​

同构应用或通用应用是指代码在服务器端和客户端之间共享并且在两者中都可以运行的 Web 应用。这种技术在可交互时间、A/B 测试和 SEO 这些方面尤其有效。

同构应用与单页面应用的不同之处 ​

  1. 同构应用在服务器端和客户端都有一定程序的渲染和处理能力。同构应用在服务器端生成初始 HTML，并在客户端上进行进一步的页面渲染和交互，从而实现更好多的页面加载速度和用户体验
  2. 可以将同构应用看作是一种扩展了单页面应用的概念，通过在服务器端进行页面渲染，以及利用服务器端和客户端的能力，提供更优化的用户体验.
  3. 在同构应用种，服务器端渲染的初始 HTML 向客户端提供了一个快速的页面展示方式，用户可以在页面加载和 JavaScript 加载的过程种直接查看和操作内容。然后，客户端上的 JavaScript 继续接管页面的渲染和交互，提供更丰富的用户体验。这种混合的方式，既能保留单页面的动态交互性，又能提供更好的首次加载速度和搜索引擎优化。

同构应用的优势总结 ​

  1. 页面已在后端预渲染，并且完成了部分或全部解析，所以页面的可交互时间会被提前。这避免了前端的大量请求
  2. 页面已在后端预渲染，并且完成了部分或全部解析，所以页面的可交互时间会被提前。这避免了前端的大量请求
  3. 实际上共享多少代码取决于对服务器端和客户端的设计。例如，我们可以混合使用不同技术，在服务器端渲染页面的一部分以使可交互时间提前，然后懒加载其他的 JavaScript 文件，这样做结合了同构应用和单页应用的优势。在 HTML 页面中加载的文件会为页面添加复杂的行为逻辑，从而把页面转变为单页应用。
  4. 路由是同构应用的另一个有趣的部分。我们可以在服务器端管理路由，当用户在客户端点击链接时，就提供一个静态页面。我们也可以采用混合的方式，只对第一个视图使用服务器端渲染，接着加载单页应用，而服务器会做一个全局路由，服务于多个单页应用。每个单页应用都有自己的路由系统，以便在视图之间导航。如果采用这种方式，我们就可以不受模板库的限制
  5. 我们可以不费吹灰之力就很好地集成 A/B 测试平台。A/B 测试是用一个页面的两个或多个版本同时进行实验，看哪个版本的效果最好。
  6. 我们可以不费吹灰之力就很好地集成 A/B 测试平台。A/B 测试是用一个页面的两个或多个版本同时进行实验，看哪个版本的效果最好。

静态页面网站与 JAMStack ​

可以参考这篇文章-Web 架构 JAMStack“以动制静”