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

lvscar commented 9 years ago

自从11.11这个曾经普通的日子被阿里塑造成一年一度的消费者和商家的节日, 阿里的技术小二们就多了一个每年练兵的好机会. 在经历了峰值流量的考验后, 双十一对于阿里更成为一个打破部门间隔阂,推动业务和技术更新的绝好机会. 且日期恰逢年关将近, 我想这也是总结团队一年来技术演进的好机会.

工程化

我们在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 进行回归测试.