干货 | 携程国际BU酒店团队的大前端之路

作者简介

 

王辛佳，携程IBU酒店技术负责人，从事前端工作10年。

当今互联网+高速崛起，大前端这个概念已经成为前端技术老生常谈的话题，但去做好“大前端”，并不容易。

一、什么是大前端

学术上目前没有明确的领域划分，在我看来，大致可以分为横向和纵向2个维度。

从纵向上来看，可以理解为浏览器端和Node服务端的。在过去的几年里，Node.js 的兴起，让前端不再局限于浏览器端，给前端人员一种从前端到后端包打天下之喜悦。

细细分析下来，由于受限于本身特性，无法得到大范围运行。不过Node确实为前后端分离指向明确的方向。

从横向上来看，可以理解为泛UI，比如PC、移动H5、ReactNative、Weex、hybrid、小程序等等，凡是由JavaScript 构成的视图层都可以理解为泛UI。当然更广义的可以算上iOS 与 Android，包括Flash、Silverlight等等。

无论是横向理解还是纵向认知，随着互联网的发展，大前端势必会越来越受到关注。

二、为什么要做大前端

在这个话题之前，需要明确：大前端为我们带来了什么？最为关键的，我觉得是降低成本。

1、降低沟通成本。产品一个需求，在H5上做要讲一遍，在其他平台上做也要讲一遍，而测试也需要在多个平台去测试一遍业务逻辑（这里讲的不是兼容性问题）。

2、降低研发成本。目前前端资源稀缺，成本高，如果我们可以用统一技术去实现“write once run anywhere”，那么就可以最大程度上降低研发成本。

从这个角度，我们做大前端是为了提高工作效率，解决产品、测试痛点，更好为用户服务，以提升用户体验为核心导向。

三、如何去做大前端

1、技术选型

前端技术很多，市面上前端框架少说也有几十种了。比较主流的MVVM架构就有Vue、React、Angular 三大体系。除MVVM思想以外，Jquery等也经久不衰。

到底使用哪个最为合适？

不少人会选择最为主流，使用最多的一个。当然，这没错，用的人多了，框架出错情况越少，而且错误的解决方案也越多。但是，往往今天的主流未必明天仍旧主流。就好比曾经AMD与CMD之争，sea.js弃用是一回事。

我们怎么考虑呢？当前产线最大痛点是什么，需求是什么，要解决什么样的问题，从这个角度出发，去定型技术框架。

1）我们需要使用MVVM架构，这样不仅提高开发效率，而且能吸引人才加盟。

2）我们需要在Online上支持MVVM架构，哪怕是在IE7上，而且不需要太大成本去支持。

有人会问，现在PC端浏览器的占比不是很少了么，为什么还要考虑PC端，甚至要考虑低版本浏览器呢？因为我们在做海外产品，不少国家仍旧在使用低版本浏览器。为了不抛弃哪怕百分之一的用户，在技术上我们尽量去满足，去Support。

3）我们需要SEO，也就需要考虑到服务端渲染。

4）我们需要SPA（单页设计）。

5）我们需要Size压缩到最小。

按照这个标准，三大主流框架全部淘汰。有的无法满足这个，有的无法满足那个，最后选择来选择去，我们定型于React。

有的人看到这里，会觉得你不是前言不搭后语么。这里指的React并非标准React，而是React语法。

在PC端采用ReactIE，在H5采用Preact，在 iOS 或 Android 中用 ReactNative。同时搭配Node+Koa2做SSR服务端渲染，满足上述提出的所有要求。

2、架构设计

首先，前端职责是什么？

前端需要考虑用户交互行为，浏览器兼容性，代码扩展性，而不是大批量数据运算与转换。对于前端而言，最好能做到“所见即所得”。所以我们的目的是要把前端做轻做薄，把复杂业务逻辑，数据转换逻辑推向后处理。

其次，结构上剥离，让业务层和框架结构更加清晰。

再次，前端监控，最好能把所有错误都统计起来。包括而不限于前端window.onerror。此外我们最好能把前端用户轨迹能记录下来，以方便数据分析及排障。

最后，Node层如何来处理爬虫。

带着以上几个点简单，分享下我们设计的架构图。

1）代码仓库划分

采用4git仓库，分别存放Online、H5独有代码，Ares DB存放前端共用业务组件和框架组件，Node+Koa存放共用Node框架。这样好处在于通过npm包的方式共享代码，让业务和框架代码分离，职责更加明确。

2） Node架构设计

大致可以分为从服务启动注册、用户访问流程管控、React服务端渲染HTML三大模块。 很显然，哪怕在Node层也不会去做运算逻辑。除了监控日志外，就是做好服务端渲染。这里每一步流程，就不一一展开了。

3）前端组件架构设计

3、收益和效果

目前我们在Online和H5上共享组件，带来开发成本减少，改动一处逻辑两端收益效果。

拿已经上线的订单完成页来举例，与之前Size和请求数相比，少了将近50%左右。domready速度快了1倍多。同时采用服务端渲染，也减少白屏时间。

老版本

新版本

四、总结

大前端目前比较火，但还是有很多路需要去走，去探索。我们应该多思考，从痛点出发，来解决问题，而不是人云亦云。这里浅谈一下我们的大前端之路，欢迎各位给出不同意见和见解。

【推荐阅读】