从 AJAX(Asynchronous JavaScript + XML,异步JavaScript和XML)开始应用,
尤其是 AngularJS 推出之后 SPA(Single Page App,单页应用)已经成为前端 App 的必选方案。
SPA 可以在客户端提供完整的路由、页面渲染、甚至一部分数据处理;
这往往需要一个比 jQuery 时代更重的 JavaScript 框架,来实现这些原本发生在后端的逻辑。
多数框架如 React、Vue 还会内置组件化机制来帮助开发者组织代码,
它们甚至进化到专门负责视图组件的程度,路由和数据交由各种插件来处理,
比如 vuex、Redux、Vue Router 等等。
这些工具已经相当先进和完整,提供了路由方案、服务器端渲染方案、前端状态管理方案。
但 SPA 的本质还是浏览器端 App,底层技术仍然依赖
history API、defineProperty、AJAX。
这些 API 的能力和完备性,决定了 SPA 能达到的用户体验和上层架构设计。
也正是这些底层 API 的不足和缺陷使得 SPA 很难企及原始 Web 的架构优势。
比如在内容可访问性(Accessibility)、服务的独立部署和演化(Independent Deployment)
等方面远不及十年前搭建的同类站点。同时还在不同程度上破坏了 HTTP、URL、HTML 的语义,
这些缺陷使我们需要花费大量精力去修复日志统计、性能优化、首屏渲染、静态分析和测试等环节。
而陷阱在于决策使用 SPA 方案时不一定能有足够的远见看到这些问题对架构带来的深远影响。
与此同时 Web 标准也在持续迭代,诸如 Web Bluetooth、Push API、Web of Things、Service Worker
的标准已经在主流浏览器(尤其考虑国内 webkit 内核的普及程度)有不同程度的支持。
尤其是 PWA(Progressive Web App,渐进式 Web 应用)概念的提出,
给出了一种在不破坏 Web 架构的前提下实现流畅用户体验的方式。
本文就 SPA 架构的一些不足展开讨论,
并探讨 PWA 方案(这里说是方案,其实更是一种技术方向的选择)的价值和私有平台的最佳演化方式。