为什么快递商qwintry选择Vue.js而不是React

海购快递商Qwintry团队最近开始积极地迁移到前端框架Vue.js,有关所有的旧项目和新项目情况如下:

1.qwintry.com使用传统的Drupal系统
2.qwintry.com新的分支完全重写
3.logistics.qwintry.com时由Yii2支持b2b系统
4.在所有较小的内部和外部项目(大多使用PHP和Node.js后端)

在项目规模方面,速递商Qwintry被全球五十万客户使用,软件运行在美国和德国两个仓库 warehouse,而我们是在美国最大的船运和邮件分发商,专注于东欧和中东。 基本上,我们帮助在美国网上商店购买商品的人们运输商品,能节省相当多运输成本,通过利用我们的IT系统和物流链来获得最优质的送货服务和最优惠的价格。


我们决定使用Vue.js是在完成了现代化框架评估后作出的,我们已经基于React, Vue.js and Angular2建立了客户的计算器上。

对React.js的想法
React在JS世界非常流行,它现在可能是前端视图框架JS开发者的默认选择。我已经在React上构建了一些SPA和动态小部件,我已经玩过React Native(在iOS下)和Redux。 我认为这是React在JS世界的状态感知方面迈出了一大步,而事实证明,很多人能够以之实现真正的函数式编程。 我认为React Native是巨大的进步 - 它改变了原生开发的疆土。

对我来说,缺点是:

1,纯洁,不变性和思想,但不能很好完成工作
不要误会我。 我欣赏纯函数和简单的render()方法 -毫无疑问,这是一个伟大的想法,在现实生活中能完成伟大的工作。 我在这里谈论其他事情。
我在想严格和纯度这个层面的事情,当你有1000的开发者可能是有用的-那个时候你决定要开发自己的语法,比如使用静态类型编写所有PHP代码 ;或者,当你是一个Haskell开发者来到JS世界时。但是大多数公司的开发团队和其目标都比Facebook小得多。

我将在下面详细说明。

2.JSX糟糕
我知道这“仅仅是具有特殊语法一个普通的JavaScript”。我们那些设计&html的家伙,需要专注于包装它的元素在各种数量的div上 - 将设计应用于React组件仍然很费时间,因为JSX缺乏可读性。 不能把一些旧的IF条件放在某些HTML代码块中,请不要相信React的粉丝们告诉你在有三元ternary运算符的时候不需要它。 我向你保证 - 当你编辑它读取它时,仍然有HTML和JS的混乱,即使它被编译为纯JS。


<ul>
{items.map(item =>
<li key={item.id}>{item.name}</li>
)}
</ul>

很多开发人员(曾经包括我在内-但现在不了)相信这一特定语法限制将令你更强大,将帮助你写出更模块化的代码,因为你必须把你的代码块放入更小的辅助函数,在render()函数内部使用它们,这些家伙建议:
http://stackoverflow.com/a/38231866/1132016

JSX会让你将15行HTML代码组件拆分为3个组件,每个组件5行代码。

不要认为这是一个伟大的解决方法,会让你成为一个更好的开发人员。
..
因为,在并不真正需要的地方,过度和过早强制使用(潜在)模块化组件,会降低编写代码的速度。在我看来,过早的模块化非常类似于过早优化。

对我和我的团队来说代码的可读性很重要,但是有乐趣地编写代码仍然更重要。当你实现真正简单的计算器小部件时,创建6个组件是不有趣的。当对其维护,修改时,你需要跳过多个文件/函数并分别检查每个小块的HTML。 再次声明,我不建议编写铁板一块的单片整体代码 - 我是建议使用组件,但不是日常开发的组件不能过于微型, 这只是常识。

3.在React中使用表单和Redux会让你整天输入
React是关于纯洁和干净的单向流,现在你必须创建10种函数以获取10路输入。这些函数中的80%将包含带有this.setState()调用或redux动作调用的单行(然后你可能需要创建另外10个常量 - 每个输入一个)。 如果你可以想办法自动生成所有这些代码,我想这是可以接受的,但我不知道有任何IDE可以明显地做到。

你为什么要输入这么多? 因为在大企业应用程序中双向绑定被认为是危险的。 我可以确认双向数据流代码有时不是那么干净阅读,但大多数这些恐惧并混合了痛苦是来源于Angular 1不好的整体双向绑定,当然有可能这不是其最大的失败之处。

让我向你展示我最近用Vue.js(可见原文动画图片),为我们的Drupal网站建立的快速编辑器组件(我请求你原谅我的设计 - 它是我们的操作员的后端UI,我们的设计师忙于为我们的客户创建前端接口,因此这件作品正在等待真正设计时修正):

编写Vue是真正的乐趣,且代码是非常可读。

我确信在React中为每个输入创建一个单独的函数来处理一个widget的方式肯定不会让我高兴。


4.工具过多
React创建时需要考虑Babel。如果没有一堆npm包,你不能在真实世界中使用React,首先编译器ES5。 基于简单的应用程序的官方React包在node_modules下大约有75M的JS代码。 这不是关键,它更多的关系依赖到整个JS世界,它们整体加起来让你使用React时感到沮丧。

Angular1:太多的自由有时是坏的
Angular1是一个伟大的前端框架,位于相反角度(从React角度看,从纯洁和代码库的可读性的看) - 但它允许你快速开始,它给你一些真正的乐趣,可以编写第一个1K代码行,然后它实际上迫使你写低劣的代码。 你可能会迷失在指令,作用域和双向的数据流中,你刚刚雇佣的开发人员甚至不想触摸它,因为它不可管理。

为什么这样?
Angular.js在2009年创建,那时前端世界看起来很简单,没有人甚至考虑状态卫生处理(可变性状态对于洁癖的函数式编程来说类似一坨屎)。 你不能怪这些家伙 - 他们只是创建了基于竞争对手Backbone的一些新的概念,他们想减少打字。

Angular2
只是建立hello world这样简单的应用程序,看看你的repo文件的数量。必须使用Typescript和编译器才能开始工作。这让我受够了。对我来说,在开始真正的工作之前还是打字太多了。 Angular 2这些家伙正在努力构建完美的框架,目标是击败React,而不是构建一个解决一般用户的业务任务的框架。 可能是我错了,我的想法可能会改变 - 我没有很多建立Angular2应用程序经验,我们刚刚构建了演示客户计算器的应用程序,作为我们的内部评估。

Vue.js
对我来说,Vue.js优点体现在优雅和简洁的方面,并且专注于完成事情,Vue.这是我在2007年被jQuery糊弄了以后,JS的最大变化。
如果你看看Vue.js普及图,你会发现它不只是我吹捧它: http://www.timqian.com/star-history/vuejs/vue&facebook/react
Vue.js是2016年增长最快的JS框架之一,我认为这不只是基于粉丝每3个月切换到新的JS框架,或者一个大公司的权威(和金钱)的另一个炒作。

Laravel将Vue.js添加到核心,这是一件大事。

1.Vue.js的优点
Vue.js在可读性和可维护性和乐趣之间达到了一个最佳点。 React和Angular 1只是其中一个点,如果你看看Vue指南,你会立即注意到它从这些框架学习了多少好东西。
从React那里它获得了基于组件的方法,props,组件层次结构的单向数据流,性能,虚拟渲染能力和对应用程序的正确状态管理重要性的理解。 从Angular那里,它获取了有类似良好语法的的模板和双向绑定,当你需要它时(在单个组件内)。

Vue.js很容易开始 - 我们的团队已经看到了这一点。 默认情况下它不强制执行任何编译器,所以很容易将Vue放入到你的旧代码库,并开始改进你的jQuery乱糟糕的JS代码。

2.适量的魔法
Vue.js非常容易使用,包括HTML和JS - 你可以做相当复杂的模板,而不会失去你的业务任务的重点,模板通常保持很好的可读性,即使它变得非常大 - 在这一刻,你通常在解决业务任务方面取得了良好的进展,您可能希望重构模板并将其拆分为更小的组件 - 此时您会看到应用程序的整体“图景”比您开始时更好。

从我的经验来看,这与我以前在React中的方法有很大的不同:我在这里节省了很多时间。 在React,你必须在编写代码的初始版本时就分割成组件成微型元件和微函数。 在React中,你会花费很多时间来抛光道具和重构你的超小组件(以后也许永远不会重复使用),因为你不清楚你是否必须在代码编写过程的中间的某个地方改变你的应用逻辑的流程。

使用html表单在Vue中变得很轻松。 这是双向绑定发光的地方。即使在复杂的情况下,它不会给我带来任何问题,当您执行组件拆分时,具有回调传递的单向流始终为您提供服务。

如果你想要一些编译器魔法,linting,PostCSS和ES6 。 Vue开箱即用的理念看起来真的很好,可以减少需要在相应CSS层次命名和技术如BEM 。

Vue.js核心有很简单和有用的状态和props管理,通过data()和props()方法 - 他们在现实生活中工作得很好。 提供更好的关注分离。


3.缺点VueJS
(1)最大的一个:在模板中没有运行时的描述性错误。 这与Angular 1非常相似。Vue.js设法为你的JS代码提供了很多有用的警告。 但是模板中的运行时错误仍然是Vue的弱点 - 异常堆栈跟踪在很多时候是没有用的,并且会导向Vue.js内部方法。

(2)框架是年轻的。 没有稳定的社区组件 - 其中许多是为Vue.js 1构建的,有时候新手不容易从github repo查看是为哪个版本的Vue库构建的。

(3)中文注解遍布大多数社区库包 - 这并不奇怪,Vue.js在中国越来越流行(作者说中文)。

(4)单人项目? 不完全是一个真正的问题,但需要考虑的事情。 建立Vue的Evan You是在谷歌和Meteor工作之后。Laravel也曾经是一个单人项目,它仍然是一个巨大的成功,但你永远不知道..


结论
我们每天在各种项目中编写Vue.js代码约3个月,结果令人印象深刻。3个月没有后端世界,但而是在JS世界:)让我们看看它走得有多远。

我期望Vue在16-24个月成为一个主要的JS框架,如果Evan采取正确的步骤,至少围绕后端和前端更小的团队为目标打造它。 我仍然认为React栈是2017年的主要JS框架,特别是如果React Native以相同的速度成熟和提高自身。

Why we chose Vue.js over React | Drupal and Symfon