用技术实力玩转数字经营，818苏宁前端研发有话说

　　今年的苏宁818注定与以往不同。

　　不久前的苏宁818发布会上,苏宁宣布由“零售商”升级为“零售服务商”,并全新升级了“专注好服务”的品牌主张。同时,家乐福1小时达等业务与全新升级的视频、直播等平台的接入,在今年的818共同为消费者打造更全面、更立体的服务。

　　当下,消费的持续升级与市场的快速复苏,将流量推向了更高层级。“专注好服务”,也对前端技术提出了更高的要求。经过多年的积累,苏宁已构建出较为完备的前端技术体系,全力支撑覆盖浏览器、APP、小程序矩阵等技术场景的“线上平台+线下门店”各节点大促。在经济复苏按下快进键的2020“818”,苏宁“大前端”将会打出怎样漂亮的组合拳?

　　业务、技术团队的“发布之争”

　　在电商大促中,一直存在着这样一个矛盾:一方面,业务团队希望促销活动更灵活,适应市场的快速变化,希望大促期间的活动页面、场景玩法都能多发、快发;另一方面,技术团队则希望避免频繁发布带来的质量风险,所以倾向于在大促期间封板、禁发。

　　那么,苏宁是如何应对这个矛盾呢?

　　第一,前端基于Node.js对大量的系统进行改造,彻底实现前后端分离。在系统分层上,将展示层放在Node.js系统上,由前端同学维护,而对数据的处理,保留在服务端,由服务端同学处理。

　　第二,服务端提供微服务,前端使用Node.js将服务组装后,渲染为页面,成为新的常态开发模式。通过这一方式,前端的多项操作就可以脱离服务端来做单独发布,解决了绝大部分大促相关业务的快速发布和系统稳定性的矛盾。涉及到数据操作相关的可以及早封板,保持稳定。而大促相关的紧急需求可以通过Node.js来做快速发布,甚至一直持续到817-818当天的爆发节点。

　　(图 苏宁广泛的Node.js应用,支持WAP/PC页面快速发布)

　　快速搭建促销会场的“泰坦”奇兵

　　苏宁使用weex始于2017年,彼时被广泛使用于APP的大促会场页面上。得益于Weex的使用,苏宁易购大促会场的渲染帧率从平均30FPS提升到平均55FPS,极大提升了用户体验。同时,weex页面的转化率也远高于H5,可以说获得了体验和效益的双丰收。

　　据了解,今年苏宁818会场也同样使用weex技术,除定制化的大促主会场外,大部分的分会场及专用促销页,都可以通过苏宁泰坦这一no code平台搭建。

　　(图 苏宁泰坦平台)

　　苏宁泰坦平台,支持了上百个H5/WEEX组件,支持“所见即所得”方式编辑会场、促销页。通过no code平台,大促会场的开发量降低了60%,运营同学也可以在仅仅几分钟内完成会场页的配置。

　　一次开发、多端部署、流量共享的苏宁小程序平台

　　苏宁小程序平台,是苏宁独立实现的一个小程序架构,支持业务以小程序的方式运行在苏宁系APP上,如苏宁易购、苏宁小店、苏宁金融、PP视频、PP体育等,做到了一次开发,多端部署。

　　通过小程序平台,苏宁得以实现多业态的流量共享和流转,用户可以在苏宁易购APP上看中超比赛,也可以在苏宁体育APP上边看边购买商品,而同一个促销玩法,可以同一时间部署到多个APP上,让用户一起来玩。

　　截止2020年818前,苏宁已接入了包括微信、百度、头条、支付宝等多个小程序平台。大促的一次上线,往往要同时将代码提交到3-4个小程序,开发成本很高,通过人工方式添加代码确实难以为继,于是SNT-小程序转换器孕育而生。

　　SNT基于Babel,将微信小程序代码转化为百度、头条、支付宝小程序代码,转化率超过80%,极大的降低了小程序的开发成本,前端工程师仅需开发微信小程序代码,再通过SNT转换器,就可以生成其他小程序的代码。通过SNT,前端团队仅花费微信小程序一半的人力成本,就支撑了百度、头条、支付宝等小程序的迭代需求。

　　游戏玩法引擎化,大幅提升用户体验

　　随着技术的进步和业务的发展,电商大促游戏玩法已经不仅限于直接发红包而是变得更具备互动性、传播性、长期性。

　　经过几年的探索,苏宁前端在2020大促玩法上,将渲染方案统一为pixi.js,并围绕pixi.js开发了“鲸喜”和818晚会玩法,在新浏览器中开启WebGL后,渲染性能有了一定幅度的提高,在pixi.js基础上,通过骨骼动画、粒子系统等插件,解决了以往开发中资源加载过多,核心库过大等问题。

　　苏宁818已迎来爆发,但前端的技术之路没有终点。

　　据悉,818后,苏宁小程序平台将进一步开放,提供开发套件给苏宁体系外的技术开发者, 818后,XNPP也将面向广大的Node.js开发者开源。未来,高复杂度的业务场景与大流量的访问,将持续推动苏宁前端技术朝着更高点前行,为苏宁全场景智慧零售服务商升级提供更稳健的技术驱动力。