Treebo是在印度名列前茅的连锁经济酒店，在200亿美元规模的旅游产业中占据了重要位置。他们最近发布了全新的、先后基于React和Preact构建的PWA（Progressive Web App，渐进式网页应用），为其客户提供移动端体验。
相比他们的上一代移动端网站，新PWA的白屏（First Paint）时间缩短了70%，可交互时间（Time-to-Interactive）缩短了31%，3G网络下加载时间短于4秒。在WebPageTest中模拟印度3G网络测试（译者按：在本文“由React切换至Preact”章节末尾介绍了测试详情），页面5秒内即可交互。
单从React更换为Preact这一项就为可交互时间贡献了15%的提升。你可以访问Treebo.com体验这一PWA，本文将着重介绍其技术演进的过程。
SparkUI是一套完整且灵活的前端开发解决方案。该方案基于React，由Modula应用状态管理框架、一系列可重用的前端组件、以及构建SPA所需的各类支持库组成。该方案重视可重用性、灵活性、可测试性以及开发效率，解决了前端社区常见的一些针对商业前端应用开发的痛点，如复杂状态、Side Effect，组件拆分等，更在工程实践、文档化、本身代码质量等方面达到较高标准，为前后端分离架构下的商业前端应用开发提供了坚实的基础。目前SparkUI已成功应用在FreeWheel的前端项目中。
在现代前端应用的工程实践中，前后端分离的架构会为两端带来更多的灵活性，已成为主流趋势。与之相对的，传统的单体Web应用（Monolithic Web Application）则将前后端代码放在一起，虽然耦合性较强，但在产品研发的特定阶段仍具有较强的优势，早期的ASP.NET、Java Spring MVC，以及Ruby On Rails都是单体应用的代表性框架。
本文将以FreeWheel从单体应用改造为前后端分离的实践为例，着重介绍其间前端所遇到的挑战和解决方案。
相较消费者，商业用户对前端应用的需求更具复杂性，且更强调质量。FreeWheel深耕企业级的视频广告领域10年，其基于Ruby On Rails框架为广告主打造的Web管理应用已经历多轮迭代和演进，目前已达到20多个产品模块，1200+页面，代码量已达到143.5万行代码，其中包含39万行基于jQuery的传统JS代码。为保证其质量，其中包含了20.2万行单元测试代码，除此以外，还有独立的近2万个自动化测试脚本。在两年前，我们感受到了单体应用的局限性，并决定将其改造成为前后端分离的架构。
