两届双十一间手机淘宝基础业务前端技术的演进

工程化

我们在13年底完成了开发模式上的前后端分离, 从那时起前端项目就不再仅作为Web项目的一部分进行管理. 独立于服务端的开发和发布过程也催生出了我们的前端项目工程化之路.

14~15年两届双十一之间,在构建技术上,我们在新项目中逐步使用Gulp替代了Grunt, 并且引入了commonJS/NPM机制配合 browserify /webpack 来管理代码依赖.

我们发布到阿里NPM平台的一个业务组件

在代码发布方式上,由于支撑平台和工具的完善, 我们除了能做到在命令行中直接发布构建好的JS/CSS静态资源外,在今天我们能根据业务类型在发布平台上选择引用或内联某个资源,甚至通过一个命令把全部资源内联后发布页面到预发环境.

在前端测试技术上, 我们在这两届双十一期间把之前散落各处并难于部署的casperJS ,mocha,chai汇聚到了云端,现在只要一个命令上传测试用例,就能在终端或浏览器里看到项目的单元测试执行情况.

截图为我们自研的云端测试平台

React

选择React有推动团队框架技术升级的内部动力也有和兄弟团队合作共建的外部原因. 到目前,除了在新项目上全面采用React外,我们正逐步把一些类似H5收藏夹,H5购物车,H5地址薄等生命周期过长的项目更换为一致的React代码基础, 以提高基础业务的稳定性和长期可维护性.

这个过程中我们的主要挑战是如何进行组件管理和关联数据源, 在经历了几次选型和尝试后,我们最终基于flux思想自己实现了一套组件管理方案.

目前,我们正在尝试基于React Component建设适用于手淘基础业务的组件库, 希望在保持高度易用性的同时能和集团甚至业界其他React组件库实现复用.

截图为正在兴建中的手淘React组件库 Valkyrie

CSS/Flex

如果说要从这两年前端技术领域百花齐放般出现的新技术中选择最接近银弹的一种, 我的答案是flex布局技术.

在15年内随着市场的自然更新和手淘支持基线的上移, 我们开始大规模的在业务中使用flex进行布局. 这种布局方法对我们实践界面自适应提供了强大的支持,且特别适用于电商业务中大量出现的商品展示类页面.

通过flex我们可以看到Web平台从文档展示往APP界面迈进的坚实一步. 值得一提的是在这个时间段内 Apple 在自家生态圈引入了新一代 AutoLayout 布局技术. 尝试从AutoLayout中进行借鉴或许是未来Web布局再进化的一种方向.

我们团队著名前端布道师 @大漠 关于Flex技术的实践文章 
使用Flexible实现手淘H5页面的终端适配

Javascript/ES6

跟随HTML5 和 CSS3 , ES6也在这一年来到了我们的开发实践中.

这一年里,我们通过启用Promise改进了对异步流程和异常状态的处理, 通过新的类和函数语法(Class / Arrow Function)把代码重构得更便于阅读和维护. 通过虚拟属性(property set/get)让项目中的数据抽象变得更加自然. 同时这个过程和React一起让JS代码预编译( Babel based )从一年前少数几个尝试CoffeeScript的项目延伸到接近覆盖我们的整条业务链. 这种趋势发展之下,我想未来的前端程序员或许会觉得直接写JavaScript是一种复古行为艺术.

标准化

自从手机淘宝兴起, 很长一段时间内,开发同学们手头的测试机无论机型怎么变, 支持的系统一直只有IOS和Android两大平台. 从今年的双十一开始, 手机淘宝的业务终于扩张到了新的平台 WindowsPhone之上, 由于WindowsPhone 10 版手机淘宝今年双十一前才新近发布,大量的业务需要通过降级到H5页面来进行支持, 基础业务范围这样的情况尤其多.但这没有对我们的双十一开发带来太多的挑战,原因是我们的大量业务在年中就进行了Web标准改造.

由于webkit内核长期领先于标准实现新特性,很长一段时间内前端同学都习惯了在代码中仅仅使用webkit前缀来进行属性声明. 这种情况是移动端页面标准化改造过程中最多的问题点, 解决方法也很简单: 使用sass 函数进行属性声明 + 使用 Firefox / IE 进行回归测试.

在交付真机测试前我们会在Microsoft Edge , Firefox , Chrome 上调试我们的页面.

HTTPS

在往年的双十一中, 精心制作的页面内容在传输过程中被劫持篡改是每一个阿里前端同学的痛苦,同时这也给公司带来了商业上巨大的风险. 为了避免这种情况再次出现, 我们在今年花了很大的精力进行了全业务范围的HTTPS升级改造,同时为了进一步提高性能,我们还要在这个过程中对引用的资源进行域名收敛改造.

对于基础业务线庞杂的项目来说,这项变更最为繁复. 这种情况下,我们开发了自动化的脚本工具来进行辅助,同时充分实践了CodeReview机制. 并和后端，测试，CDN等多部门的同学一起艰难的把默认环境更换为HTTPS才最终在双十一前建立起手淘前端页面的安全访问环境.

我们通过Git Merge Request流程进行CodeReview

其他

在上面提到的技术点之外, 手机淘宝前端团队在最近两届双十一之间还在性能优化,Hybrid/Native领域做出了尝试并积累了丰富的经验和成果, 由于会有专文介绍,我在这里就不进行赘述了.

笔者就职于阿里手机淘宝团队,负责手机淘宝基础业务的前端开发支持.