一次中大型产品web前端的技术选型过程

yellowrabbit 发布于1年前 阅读26582次
0 条评论

背景:老产品的基于ExtJS的前端需要配合server端微服务改造重新实现。

先说个人观点,非常喜欢 Vue ,也想在这次技术选型中选择它,然而发现要说服各种技术人员,从一线开发到架构师组,到管理层,都有不小的阻力。对于大型产品开发来说——上百人月的开发周期——管理层还是以规避风险为优先,Google和Facebook的背景对于这些久不在开发一线的决策者们还是有很大影响的。

开发人员的观点,

1.  不大愿意学习新的框架,并不是排斥,只是热情不高,这部分人一般比较资深,然后在传统前端开发领域积累了非常多的经验,这些人其实已经认识到,框架本身并不能让真正难的事情变得简单,也不能帮助做出漂亮的UI和交互体验,他们也不会迷信Google和Facebook的背景,有些人才刚刚爬出GWT的大坑。对于这些开发者来说,在选用新技术决策中是中立的,vuejs,Angular 2,React,无论选哪个他们都不会太反对,vuejs对于这批人是有着很大吸引力的,因为vuejs本身渐进式改造的理念对于他们来说是很容易上手的,不需要构建工具链虽说不算什么优势,但是对于传统的开发者来说,习惯过渡得非常自然,引入vue.min.js 即可以开始尝试开发,老开发者是比较拥护的,作为比较,如果使用Angular 2,在没有angular-cli或者其他skeleton的情况下,“Hello Angular”要比“Hello Vue”要来的难得多!这不仅仅是步骤的繁琐,甚至,他必须先去学习一门新的语言Typescript,去配置好几个文件。

2.   赞成Angular 2的,这部分人中,大部分是在另一个产品开发的时候,在Angular 1上积累了经验,这部分人里面对于Angular 2的学习曲线和Typescript也是颇有微词的。一部分是原来server端的人员,他们对于前端开发没有太多的经验,他们非常喜欢Typescript的类型特性,这部分开发者其实对前端热情不高,也不会去研究框架的实现,也不会研究ES5,ES6究竟是如何一回事,他们喜欢的是读完Hero tutorial然后按照套路,能够比较快而迅速的完成任务。

3.  赞成React的,这部分人其实有很多是开源社区的强烈拥护者,他们热爱开源,喜欢学习新东西,喜欢整合各种开源的好的实践到开发中来,他们很多时候喜欢稍微激进的技术架构选型,我看到一个方案是React + GraphQL + nodejs + RethinkDB的全栈javascript实现。

管理层的观点,

1.  vuejs不能选,尽管vuejs在开源社区已经有着不算小的影响力,但相比较于React和Angular来说,背景和影响力现在还是不能比的,管理层们不愿担当这种决策风险。

2. 不反对React,因为React的影响无论在社区还是实践中实在是太好了,国内国外,随处可见褒扬的评论文章。然后很多人就忽略了React实际上只是负责了展示层,React一般需要比较多的整合努力,需要资深人员来挑选其他的库来配合使用。

3. 倾向于Angular 2,是因为它是大而全的一站式框架,对于整体代码质量控制和团队协作开发过程非常有帮助。

我在技术选型初期,做原型的过程中发现这么几个Angular的问题,

1. Angular 2 deprecated了replace的选项,导致angular组件的Host元素始终显示在dom树上,绝大多数情况问题不大,但有时候会造成布局的破坏,比如有时候通过height/min-height:100%来控制高度,因为中间selector的存在导致布局的破坏,虽然可以添加@HostBinding去设置host元素的CSS属性,但这无疑是额外的负担。而且在开发工具上看DOM树总是有点奇怪的,中间插入了层层的各种selector元素。在开发中不得已开发了removeHost的attribute directive。

2. Angular 2如何方便与传统的js库一起合作,因为Angular 2从设计上就是排他的,对于企图渐进的逐步改造老系统的开发,有着比较大的影响。实际开发中有一点比较奇怪,我们的module bootstrap component是MainLayoutComponent,它有着下面的template,

<main-layout>
    <app-header></app-header>
    <app-navigator></app-navigator>
    <route-outlet></route-outlet>
    <app-sidebar></app-sidebar>
    <app-footer></app-footer>
</main-layout>

这些组件模板的定义,我是从adminlte中抽取出来的。对于vuejs,我像传统的使用一样直接在页面引入adminlte.css和adminlte.js,没有任何问题,但是对于angular2来说我还必须把布局的初始化过程从adminlte.js里面抽取出来,写在MainLayoutComponent组件的onViewInited回调方法里,因为如果直接在页面引入,当初始化执行的时候component的template并没有开始编译和mount到dom树上,adminlte的初始化的代码是无效的,Angular 2和vuejs的模板绑定到dom的时机应该是不同的。这应该会影响到一些前端库的使用。

3. 如何方便的从UI定义的元数据中compose组件的template,这一点vuejs同样也不能解决,因为他们都不是基于string template的,Angular 4的 NgComponentOutlet有可能帮助一点点。

4. 前几天演示研究原型的时候,好几个开发问我关于Angular 2的组件定义,在export class … 前面加个@Component(…)的函数调用是什么意思。

@Component(...) export class XxxComponent

想讲清楚这个,又牵涉到ES6的 DecoratorDecorator Factory ,感觉Angualr 2使用的语法比较的超前,大家过渡得很不适应。当然如果是照着Hero的tutorial大家一般都没有问题,然而如果是规划一个产品的road map,那么必须要有人对其研究的非常透彻来应对未来可能出现的各种技术难题。

目前看来,基本决定使用Angular 2了, 对于大型产品的跨团队开发来说, 有巨头背书的一站式的解决方案是有决定性影响的 ,有点遗憾,这次没有说服其他人来选择Vue,还是自己的影响力不够。

查看原文:一次中大型产品web前端的技术选型过程

需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。