React/Redux打造的同构Web应用

大家好,我是原一成(@herablog),目前在CyberAgent主要担任前端开发。

Ameblo(注: Ameba博客,Ameba Blog,简称Ameblo)于2016年9月,将前端部分由原来的Java架构的应用,重构成为以node.js、React为基础的Web应用。这篇文章介绍了本次重构的起因、目标、系统设计以及最终达成的结果。

新系统发布后,立即就有人注意到了这个变化。

 
twitter_msg.png

系统重构的起因

2004年起,Ameblo成为了日本国内最大规模的博客服务。然而随着系统规模的增长,以及很多相关人员不断追加各种模块、页面引导链接等,最终使得页面展现缓慢、对网页浏览量(PV)造成了非常严重的影响。并且页面展现速度方面,绝大多数是前端的问题,并非是后端的问题。

基于以上这些问题,我们决定以提高页面展现速度为主要目标,对系统进行彻底重构。与此同时后端系统也在进行重构,将以往的数据部分进行API化改造。此时正是一个将All-in-one的巨型Java应用进行适当分割的绝佳良机。

目标

本次系统重构确立了以下几个目标。

页面展现速度的改善(总之越快越好)

用于测定用户体验的指标有很多,我们认为其中对用户最重要的指标就是页面展现速度。页面展现速度越快,目标内容就能越快到达,让任务在短时间内完成。这次重构的目标是尽可能的保持博客文章、以及在Ameblo内所呈现的繁多的内容的固有形式,在不破坏现有价值、体验的基础上,提高展现和页面行为的速度。

系统的现代化(搭乘生态系统)

从前的Web应用是将数据以HTML的形式返回,那个时候并没有什么问题。然而,随着内容的增加,体验的丰富化,以及设备的多样化,使得前端所占的比重越来越大。此前要开发一个好的Web应用,如果要高性能,就一定不要将前后端分隔开。当年以这个要求开发的系统,在经历了10年之后,已经远远无法适应当前的生态系统。

「跟上当前生态系统」,以此来构建系统会带来许许多多的好处。因为作为核心的生态系统,其开发非常活跃,每天都会有许许多多新的idea。因而最新的技术和功能更容易被吸纳,同时实现高性能也更加容易。同时,这个「新」对于年轻的技术新人也尤为重要。仅懂得旧规格旧技术的大叔对于一个优秀的团队来说是没有未来的(自觉本人膝盖也中了一箭)。

升级界面设计、用户体验(2016年版Ameblo)

Ameblo的手机版在2010年经历了一次改版之后,就基本上没有太大的变化。这其间很多用户都已经习惯了原生应用的设计和体验。这个项目也是为了不让人觉得很土很难用,达到顺应时代的2016年版界面设计和用户体验。

OK,接下来让我具体详细聊聊。

页面加载速度的改善

改善点

系统重构前,通过 SpeedCurve 进行分析,得出了下面结论:

  • 服务器响应速度很快
  • HTML文档较大(页面所有要素都包含其中)
  • 阻塞页面渲染的资源(JavaScript、Stylesheet)较多
  • 资源读取的次数过多,体积过大

依据这些确定了下面这几项基本方针:

  • 为了不致于降低服务器响应速度,对代码进行优化,缓存等
  • 尽可能减少HTML文档大小
  • JavaScript异步地加载与执行
  • 最初呈现页面时,仅仅加载所需的必要资源

SS