[译] State of Vue.js report 2017 中文版

• 原文连接：https://www.monterail.com/state-of-vuejs-report
• 译文出自：掘金翻译计划
• Event Organizer：leviding
• Translaters：sasa-m、altairlu、ParadeTo、ly525、zwwill、html5challenge、vxqqb
• Reviewers：leviding、ParadeTo、PCAaron、vxqqb、zwwill、caoyi0905、JohnJiangLA、html5challenge、iFwu
• 本文永久连接：github.com/xitu/gold-m…

序

几年前，Monterail 因其在 Ruby 和 Rail上 的专业建树，仍是一家享有盛誉的软件开发商。不过如今看来，Monterail 和她的产品彷佛有点过期了。当咱们用 Ruby开发传统多页面应用程序时，很快意识到，随着技术的进步和发展，许多好的开发实践和规范已经发生了变化。因循守旧是没法知足市场需求的，在2011年，咱们选择了 Backbone.js 做为咱们涉足的第一个 js 框架。咱们一直都积极地关注这个快速变化的世界，较早地采用了 Angular JS， 并且对其很是精通。现在，新一代的基于组件的开发框架里，咱们团队已经研究了 React ( 包括 React Native ), Angula r( angular2 及以上)和使用最普遍的 Vue.js！

熟悉的不必定是好的

那些要求用 Vue 开发应用程序的客户在此以前，都没有据说过 Vue。可当他们使用后，都对 Vue 的扩展性和能力留下深入印象，并但愿在他们技术栈中包含 Vue。 咱们认为，不少公司之因此使用那些选择有名的框架，并不是是由于全面考虑相关信息作出的决定，而只是由于那些框架比较出名和耳熟而已。他们并无意识到，名不见经传的 Vue 结合了 Angular，React 的先进的部分，而且更加友好。

为何要作这份调查

当使用 Vue 后，咱们可以更有效率地交付更好的产品，更好地推进咱们的业务，使客户更加满意，咱们相信，Vue 值得关注并受到你们的喜好。正因如此，咱们决心开始向发者们和企业布道，把 Vue 传播到全世界；同时，咱们策划了每周的 Vue-newsletter,组织了第一个 Vue.js 的国际性大会 VueConf，建立了 Vuelidate 和 Vue-mulitselect 等 Vue 库。

你即将阅读的这份报告咱们是布道与宣传 Vue 的另外一个里程碑。报告有三个主要目的。1.提供可信赖的 Vue 商业使用案例，让任何人都可以一窥其它公司是如何使用 Vue；2.让那些没有据说 Vue 的人了解 Vue，并让他们有足够的理由来更加仔细了解这个框架；3.让咱们再也不费力地说服客户相信 Vue.js 已是一个成熟的解决方案，能够帮咱们构建各种应用。

报告的内容

享受阅读吧！

报告展现了从企业主和开发者的角度去看待 Vue。咱们调查了来自88个国家的1100多名行业专家，了解他们对于 Vue 的使用体验，他们喜欢的特性和那些不喜欢的特性；咱们深刻采访了6家公司，询问他们想用 Vue.js 解决哪些问题；另外，为了让读者对 Vue 近几年的发展有一个全面的了解，咱们讲述了 Vue.js 的历史，以及框架的建立者尤雨溪对 Vue.js 将来的想法。

报告的顺利完成获得了许多人的支持。他们分享他们的知识和经验，给予了咱们莫大的帮助，仅仅由于他们想为社区贡献一份属于本身的力量。

感谢 Evan You（尤雨溪）。他从一开始就对这篇报告抱以热情，并在建立报告过程的各个阶段支持咱们。同时，Evan You（尤雨溪）还分享了对 Vue.js 将来和后期规划相关的宝贵见解，并对个人的努力表示支持。

感谢Vue.js的核心成员 Chris Fritz 和 Evan ，对咱们分析调查结果给予了很大的帮助。真的很荣幸！由于有了这样的合做，咱们对最终的报告质量很是满意。

很是感谢 Jacob Schatz, Sylvain Simao, Roman Kuba, Gilles Bertaux, Scott O’Brien, Erin Depew, Matt O’Connell 和 Yuriy Nemtsov。没有大家花费间分享们们的故事，报告中的学习案例就不会存在。

主要贡献者

Vue.js 的演变

你知道 Vue 第一次发布是在何时吗? 最初它甚至并不叫「Vue」。做者的首次提交是在 2013 年 06 月 27 日，那时项目叫「Seed」，转瞬间，Vue.js 已经四岁了。「Seed」这个名字用了六个月，在 2013 年 12 月初，做者把它正式改名为「Vue」。可是，Vue 的第一个对外的版本（0.8.0）在 2014 年 2 月 才发布，在那时候，Vue.js 还只关注 MVC 架构中视图（View）部分。

Vue 具备几方面重要的特性，使得它很容易被开发人员接受。 Vue 的模板语法风格很像 AngularJS，也有被 React 引入的基于组件的架构 这样，开发者能够从两者平滑地过渡到 Vue。我会把 Vue 想象为一个继承了父母（AngularJS，React）优秀基因的孩子，它本身也不断地提高开发者的使用体验。

也就在一年后，当时 Laravel 社区（一款流行的 PHP 框架的社区）首次使用 Vue，JS 社区才对 Vue 愈来愈感兴趣，也才真正的流行起来。几个月以后，期盼已久的 1.0 版本终于发布了，对于 Vue 来讲，这是具备里程碑意义的一次版本发布。

与此同时，vue-router（2015-08-18）、vuex（2015-11-28）、vue-cli（2015-12-27）相继发布，这意味着 Vue.js 从一个视图层库发展为咱们如今所说的渐进式框架。

去年，备受期待的 2.0-alpha 版本发布，它被完全重写了，同时引入了一些新的概念，好比: Virtual DOM 和服务端渲染。可是，API 基本没有变化，所以从 1.0 到 2.0 版本能够平滑迁移。使用官方出品的迁移工具会帮助你完成迁移过程。

社区

在接近一年的时间里，至今依然活跃的社区促使 Vue.js 成为了 JavaScript 三大顶级框架之一，并且看起来并不会止步不前。

人们很是喜好 Vue。不要相信咱们带有情感色彩的评估，看看这个数字：Vue 是 2016 年 GitHub 上 star 数最多的框架。

社区的兴趣是很是浓厚的，当咱们启动 Vue Newsletter 项目时，在几分钟内，便有数百人订阅了。一直没间断的邮件通知，让咱们感受本身就像 Instagram 的明星同样（备受关注）。Newsletter 的第一期有 759 人订阅，而到了 63 期，咱们的订阅人数已差很少达 6000 人。每一期都是很难准备的，由于每周都产生不少和 Vue 相关的内容。天天都有高质量的教程、看法深入的文章以及我能想到的库翻陈出新。有点疯狂。这还不是所有，Vue 社区有一个活跃的论坛和一个聊天频道，天天都有成百上千的开发者活跃在上面。

此外，咱们能够发现，随着开发者对 Vue 的兴趣逐渐浓厚，全球不少公司开始关注 Vue。点击 Vue.js Jobs，看看他们发布的的职位吧。

生态

值得一提的是，除了社区项目以外，Vue 核心开发团队也维护了一些官方库，好比 vue-router、vue-loader、vuex（状态管理库）、vue-rx 以及针对 RxJS 开发的 vuex-observable。还有一些工具库，好比 vue-cli、vue-server-renderer、vue-loader、vetur、vue-migration-helper。它们为何重要? 由于这样，你就能够渐进式地使用其余核心库，这些库能够完美配合，使得 Vue 转变为一个像 Angular、Ember 同样完善的框架。固然，若是你的项目须要，你能够随时将其中的一部分切换为其它非官方的解决方案。官方库的另一个好处是它们每每表明着高质量、长期支持以及与 Vue 良好的兼容性。

正如你们所料，像 Vue 社区这种大型并且参与感高的社区，会出现大量社区项目 不只仅是小型项目、解决单一问题的库，咱们如今来谈谈大型项目 举个例子，Nuxtjs 是一个颇有想法的基于 Vue 的框架，它采用了一些小工具库以及设计模式，这使得开发须要服务端渲染的应用变得极其简单。

Quasar 框架能够帮助开发复杂的移动和桌面应用。还有其余流行的UI框架，好比：Element-UI 和 Vuetify，这些框架提供了几十个风格统一的 UI 组件来帮助你开发 Vue。在移动端开发方面，获得了 OnsenUI （由Monaca开发） 和 NativeScript 的大力支持。

从我做为一个 Web 开发者的角度来看，我能够向你保证 Vue 已经有你开发应用所需的一切了。每周，我都见证愈来愈多的库发布，以致于没有办法追踪全部的库。你能够在 awesome-vue 找到这些库。此外，Vue 核心开发团队在 Vue Curated 管理了一些推荐的库，这些库主要用于表单验证、国际化、AJAX 等常见的任务，避免开发者在选择合适的库出现选择恐惧症。

支持

许多人指出，和 Angular 或 React 不一样的是，Vue 背后没有大公司的支持，并且看起来这也不太乐观 我毫不赞成。Vue 和 jQuery、Babel、webpack 以及 JS 世界中其它可被信赖的工具同样体现了真正的开源精神。 这样有一个明显的优点：这些项目不用去知足这些公司的特定需求，取而代之的是更专一社区的需求。

Vue 实现了不少社区最须要的功能 提及 code spliting，webpack 核心开发团队成员 Sean Larkin，这样评价 Vue：

首个使用 webpack 来提升开发者体验的框架。

但在开发体验上已经远远超越 webpack，并且体验在各个方面: 易用性、无缝集成、优秀的文档、总体的可扩展性。

显而易见，Vue.js 和不少其它开源项目同样，刚开始是一个我的做品。 慢慢地，它拥有了一个全职核心团队，专门负责维护它的各个方面和生态系统。

基金会呢? 近两年，经过在 Patreon 和 Open Collective 上的成功运做，全球的不少我的和公司决定每月固定赞助尤雨溪（Vue 做者）和核心团队超过 10000 美圆。这样，尤雨溪就能够全职从事 Vue 的开发了。

赞助者包括许多公司和几百位我的赞助者。在这里能够看到这些赞助者们。

成长

让咱们经过一组数字来更直观地感觉到 Vue 生态的快速成长。

以 GitHub 的 star 数为例，尽管它不是衡量一个项目知名度的完美指标。但开发者们很兴奋，并且这份兴奋使得 Vue 成为 2016 年 Github 上得到 star 数最多的项目。不限于 JavaScript 或者前端分类，在2016年，它是得到star数最多的项目。过了一段时间，到如今为止，它已是 star 数第二多的前端框架了，仅次于 React。同时，它也是 GitHub 上 star 数第六多的项目，已经超过了 jQuery 和 Angular。

2016 年前端调查显示: Vue 是用户满意度最高的语言之一，89% 使用过 Vue 的开发者表示会再次使用 Vue。

固然，还有其余指标来衡量 诸如 npm 上每月的下载量（大约 800k），开发者工具每周活跃用户数达到 270k。npm 上的下载量相比 React 的下载量相差很小。但值得一提的是：在过去的十二月，Vue 的下载量增加了 5 倍。以 Vue 如今的增幅，我相信在将来几年，这个数字将会以更快的速度增加。

事实上很大一部分的增加是由于愈来愈多的公司选择 Vue 做为主要的前端框架。除此以外，开发者们很欣赏 Vue 平滑的学习曲线、集成到现有的技术栈的便捷，以及顶尖的性能。也许最重要的因素是提高开发效率和减小维护成本。换句话说，选择 Vue，省钱。

但不要只信个人一家之言。为此，咱们对来自 88 个国家的 1126 位开发者作了调研，并收集了一系列来自不一样行业的采用 Vue 的案例。

使用 Vue.js 的开发者调研报告

咱们很好奇软件开发者以及技术主管们都是如何看待并使用 Vue.js 的，所以咱们分发了一份网上问卷给他们，其中列举了如下这些问题：

• 为什么要将 Vue 加入大家的技术栈？
• 使用该框架能带来哪些好处？
• 若是考虑在项目中使用 Vue 的话，大家会主要担忧哪些问题？
• 大家使用哪些资源以便熟练地使用 Vue.js？
• 大家的同事中有多少也在用 Vue？大家以为在将来一年里这我的数会上升吗？
• 大家和大家的团队分别使用 Vue.js 多久了？
• 大家公司还使用过哪些其它的先后端技术？

报告的数听说明

该报告中的全部数据来源于咱们在 2017 年的八月至九月进行的一次为期四周的调研。咱们总共收到了 1,126 份问卷回复，大多来自于使用 Vue 的组织中的技术主管及软件开发者们（94.1% 的问卷回复者都承担相关的技术工做）。这些回复者们来自世界各大洲（除了南极洲），总共 88 个国家。

咱们在撰写该报告的同时还针对一些调研结果咨询了 Vue 的创始人尤雨溪以及 Vue 的核心成员 Chris Fritz，他们为咱们提供了一些独到的观点并分享了更深远的洞见。

主要观点

• 96% 的调研回复者表示会在他们的下一个项目中继续使用 Vue.js。
• 94% 的回复者使用官方 Vue 文档做为他们了解该框架的主要资源。
• 81% 的回复者说 Vue 的集成很方便，这是他们在本身组织中的技术栈里推行它的一个主要好处。
• 54% 的回复者相信在将来 12 个月里，Vue.js 会在本身的组织中变得愈发流行。

调研问卷中的问题

将 Vue.js 加入技术栈中的最主要缘由是？

无论开发者们新建仍是接手已有的项目，他们基本一致地认为：Vue.js 很容易上手，哪怕是对于一个很是复杂的应用而言。他们评论说集成 Vue.js 很容易，缘由在于它使用简单、架构优雅、同时设计精巧。不只如此，他们还在将其与其它主流框架对比后声称 Vue 更轻量、性能更优，是毋庸置疑的胜者。总的来讲，超过半数的问卷回复者都认为 Vue.js 是个对入门者至关友好的框架。

将 Vue.js 加入技术栈中的最主要缘由

• Vue.js 上手很容易 59%
• 技术栈须要更新了 22%
• 团队想尝试下这个框架 10%
• 其它缘由 9%

很适合用于现有的或者新项目，并且用起来很容易！

—— 技术主管，大企业，法国

集成进现有应用中，或者实现个纯单页应用都很方便。

—— 软件开发，中型企业，澳洲

你和你的团队考虑将 Vue.js 加入技术栈的时候会有哪些顾虑？

对于这个提问，回复者们提到了两个主要担忧的问题。首先的一点是关系到本身团队成员的，45% 的回复者都表示，这些成员们 缺少 Vue 的相关经验 ，而这会是他们在考虑将 Vue.js 加入技术栈的时候可能面临的问题。

考虑将 Vue.js 加入技术栈时的顾虑 该题为多项选择，于是结果总和超过 100%

• 同事们缺乏 Vue.js 相关经验 45%
• 不肯定该框架的将来趋势 45%
• 缺乏成熟的相关原生应用开发平台 23%
• 对该框架的扩展性有所顾虑 15%
• 其它顾虑 12%

Vue 在手机上的支持是在持续提升的。如今 Vue 已经提供了对 Progressive Web Apps 的强大支持，这其中包括了咱们提供的可靠模板。社区项目中像是 Onsen UI 就简化了构建类 native 的 hybrid UI 的过程。

—— Chris Fritz，Vue.js 的核心开发

咱们如今就有 Weex 和 NativeScript（译者补充：来支持开发原生应用）, 但咱们也认可这二者都有不少改善空间。Weex 其实被阿里巴巴用以线上开发已经很长一段时间了，也是其在手机开发领域上的主要选择。但 Weex 欠缺了一些英文文档和学习资料。为了弥补这一点，咱们也已准备在接下来一年内提供官方指南，帮助你们使用 Vue 来开发 Weex。（译者补充：现已有官网教程）

NativeScript 也是个很成熟的技术了，虽然它和 Vue 的集成还相对年轻，但天天进展飞速，使人印象深入。因此若是你对使用 Vue 来开发原生应用有兴趣的话请必定要关注下。

—— 尤雨溪，Vue.js 创始人

缺乏成熟的原生应用开发平台 也被相近比例的回复者提到，这也是他们在将 Vue.js 加入技术栈前的顾虑。

有 172 个被调研者勾选了对 Vue.js 扩展性的顾虑，这使得该选项成为五个阻碍着开发者们拥抱 Vue.js 的主要缘由之一。

Vue 的开发是基于组件化模型的，这也是如今全部主流框架中共享的一种适用于 UI 开发的设计模式。对于单页应用，Vue 提供了官方支持的路由库，也支持大规模状态管理。Vue 的设计初衷是轻量级易上手，但支持规模化也被咱们设计在案。

现已有不少成功的大规模项目是使用 Vue 打造的，有些甚至由几百个组件构成还照样运转得很顺利。另外值得一提的是，一些现有的大规模应用都在用 Vue 重写，咱们收到了来自这些应用开发者们很是确定的反馈，好比 Adobe Portfolio 和 JSFiddle。

—— 尤雨溪

使用 Vue.js 给你的组织带来的最大好处是哪些?

81% 的开发者都强调了 Vue.js 的易于集成，这个比例很惊人。大多数回复者都谈到要想熟练掌握 Vue 很容易，并且比起其它主流框架来讲更容易。他们还称赞其与后端框架集成也不复杂。

60% 的开发者还提到 Vue 的文档是其亮点。差很少比例的回复者（56%）认为该框架的性能优异是其最大的优点。

Vue 最大的优点 多项选择，结果总和超过 100%

• 易于集成 81%
• 文档详尽 60%
• 性能优异 56%
• 与时俱进 49%
• 社区活跃 29%
• 其它优点 4%

Vue.js 的学习曲线很平缓，不少人所以产生兴趣。

—— 高级开发，中型企业，新西兰

咱们以前在 React 和 Vue 之间进行过抉择，最后咱们选择了 Vue，至今咱们都很庆幸咱们的选择。

—— 软件开发，中型企业，美国

Vue.js 使得前端开发容易管理也易扩展。它的学习成本也不高，这使得后端开发们也不须要太多指导就能清楚前端这边的工做。由于如今已经有不少好用的 webpack 相关配置，使用 Vue 如今有点像是装个插件同样。最后说一点，运行时和编译时咱们都能使用 Vue.js，它真的是个很棒的工具，不管是对于小型的应用来讲仍是大型应用而言，想要扩展都不太难。

—— 软件开发，小公司，菲律宾

有哪些建议是你想对 Vue.js 提的吗？

对于这个开放式问题，咱们收到了 481 份有效回答。因为有些建议被 20 多人提到了，所以咱们决定列举几项比较共性的建议，再开放个单选题。

缺少 Vue 相关的原生开发解决方案是几个最大的问题之一，24% 的回复者都同时提到了这点。毫无疑问地，Vue.js 须要更先进完善的移动端解决方案。

15% 回答这个问题的都指出 Vue 还有个不足是其生态环境相对较小。若是其生态环境能更强大的话，它必定能孕育出更为优秀的组件库。

除此以外,

随着下一版 CLI 的更新，Vue 的工具也会获得改善，尤雨溪如此保证。

在这些回复中，还有人提到说 Vue 缺乏一些官方教程（一个回复者称为《 Vue 圣经 》），或者一份能提供更多现实案例，特别是针对复杂应用的指导手册。Christ Fritz 指出，

如今已经发布的官方风格指南某种程度上来讲可做为 Vue 圣经，但在开展调研那时还没提供。

同时还有个建议是， 该框架须要一份更完善的文档。有 53 个回复者提到了和该建议直接相关的一些问题（好比建议多提供些用 Vue 构建一个大型应用的架构设计文档），以及和该建议并不直接相关的问题，好比一些他们错误地认为不能用 Vue 解决的问题。有两个问题被 20 多个回复者都指出了，一个是须要增强测试工具，另外一个是须要优化核心库。

对 Vue.js 的建议

• 须要更先进完善的 Vue 原生应用客户端解决方案 116票
• 须要更强大的生态环境，能提供更优秀的组件库和工具组 74票
• 须要官方教程以及其它相关学习资源，以期提供更多现实案例和最佳实践（特别是复杂应用相关的） 67票
• 须要更完善的文档，以便更顺利地开发应用 53票
• 须要更棒的测试工具和库 37票
• 优化核心库 21票

咱们将在十一月起认真撰写使用手册，以便为构建大型应用、通用集成方案、架构设计探索等问题提供示例。

—— Chris Fritz

开发下一个项目时，你有多大可能会再次使用 Vue？

超过 95% 的回复者声称他们在下一个项目中还会使用 Vue。许多开发者明确表示他们使用过该框架后，以前的顾虑都再也不是问题。即便他们仍是指出了它的一些不足和值得改进之处，但几乎全部人在用过该框架后都对其称赞有加。同时绝大多数回复者选择在下一个项目中依然使用 Vue。

在下一个项目中会使用 Vue 的可能性

• 5（很是高）82.9%
• 4 12.5%
• 3 3.5%
• 2 1%
• 1（很是低）0.1%

你所在的组织机构使用 Vue.js 有多久？

随着 Vue 社区的逐步壮大，精心打造的相关项目在世界各地层出不穷，同时它也跻身于 GitHub 上星数排名前十的仓库列表，Vue 越来越受到广泛认同。超过 3/4 的回复者在近一年内将 Vue.js 加入了他们的技术栈中。

咱们能够预见在将来几年内使用 Vue 的开发者数量会飞速上涨，同时该框架自身也在不断变得成熟，其生态环境将不断强大，也会有愈来愈多的使用案例。

你所在的组织机构使用 Vue.js 有多久？

• 少于 6 个月 45%
• 6–12 个月 34%
• 1–2 年 19%
• 超过 2 年 2%

学习 Vue.js 时你会使用哪些资源？

官方 Vue 文档是最广泛使用的参考资源。 94% 的软件开发者都勾选了它，这也说明了，一份深思熟虑后发布的文档是学习任何框架的主要资源。另外，70% 受调研的软件开发者还选择了线上文献、技术博客、一些社区像是 StackOverflow 或者官方 Vue 论坛等做为知识来源。线上课程受到了 41% 开发者的青睐，而选择了在职培训、相关书籍的只占 1/4 不到。

Vue.js 的学习资源 多项选择，结果总和超过 100%

• 官方文档 94%
• 线上文献及博客 78%
• 线上社区（好比 StackOverflow、Vue 官方论坛） 72%
• 线上课程 41%
• 在职培训 22%
• 书籍 12%
• 其它 5%

你以为你所在的组织机构中使用 Vue.js 的员工比例会在一年内增加吗？

54% 的回复者相信 Vue.js 在将来一年中，将在其组织里变得愈发流行。 然而那些在大型企业（超过 1,000 员工）工做的开发人员更确信 Vue 在其公司会被普遍接受：76% 的受调研者勾选了赞同。

使用 Vue.js 的员工比例会上升吗

• 5（绝对会）33%
• 4 21%
• 3 24%
• 2 11%
• 1（绝对不会）11%

公司的其它项目都打算使用 Vue（甚至已经开始用了）。

—— 软件开发，大型企业，法国

咱们在疯狂扩招，有很是多的项目将要涌现。这些项目都会使用 Vue.js 来开发。

—— 技术总监，大型企业，德国

你主要使用的前端技术和框架是哪些？

主要使用的前端框架 多项选择，结果总和超过 100%

• Vue.js 33%
• Angular 21%
• ReactJS 24%
• 其它 11%
• Backbone 6%

你主要使用的后端技术与框架是？

主要使用的后端语言与框架 多项选择，结果总和超过 100%

• PHP 53%
• Node.js 45%
• Java 18%
• C#/.Net 17%
• Python (Django、Flask等框架) 17%
• Ruby (Rails等框架) 10%
• 其它 8%

受调研人员数据

咱们对来自 88 个国家的 1,126 名熟悉 Vue 的软件开发者、CTO、以及其余相关技术人员进行了调研。

公司规模（员工数量）

• 小型企业（少于 100 人）77%
• 中型企业（100-999 人）15%
• 大企业（超过 1000 人）8%

团队规模（组员数量）

• 小团队（2-10 人）73%
• 个企 17%
• 中型团队（11-25 人）8%
• 大型团队（超过 25 人）2%

在组织中担任的职能

• 软件开发 66%
• 技术主管 20%
• 其余技术人员 8.5%
• 项目经理 4%
• 其余 1.5%

案例研究

起草这份关于 Vue.js 现状的报告，是想经过大量的数据来证实，Vue 已被不一样种类、不一样规模的公司采用，已然成为了一门成熟的技术。每个研究案例都证实了 Vue 是足以应对商业用途的。咱们采访了六家公司，他们都曾面临着选择一套合适框架的挑战，即便他们处在不一样的发展阶段，也有着不一样的目标，可是他们最终都选择了 Vue。

在 Codeship 和 Vue 结合以前，他们的用户忍受着卡顿甚至是浏览器崩溃。太多的用户对他们的应用程序心有不满。他们的故事很好地证明了，Vue 能够有效地帮助构建安全、可靠、易维护且具备防护性的应用程序。

若是你正在寻找 Vue.js 的优秀企业级案例，那么 Behance 和 Adobe Portfolio 的案例就能够派上用场。他们的团队使用 Vue 零基础地创建了两个独立的产品，并且不会止步于此。

在 Livestorm 案例中，Livestorm 联合创始人兼 CEO Gilles Bertaux 描述了他们如何从零开始创造一个可盈利的产品。得益于 Vue 及其可复用的组件，他们的开发速度更快也更容易。

GitLab 的前端 Leader Jacob Schatz 解释了为何他们决定从 jQuery 技术转移到 Vue.js，同时分享了他们遇到的主要挑战。他们专一于更好的 UX （用户体验），这使得他们的产品更为理想，销量也所以提高了。

Chess.com 则不得不处理 Angular 1 项目中难以维护的遗留代码。他们发现，Vue.js使得 15 位远程开发人员的团队协做更容易。Chess.com 是一个服务全球 1900 万用户且拥有大规模基础设施的平台。在他们的案例中，你将了解 Vue.js 是如何化解了他们的难题。

最后一个案例与其余案例大有不一样。墨尔本 Clemenger BBDO 的技术主管 Sylvain Simao 介绍了如何用 Vue.js 开发 4 到 12 周的短时间项目。应对紧张的交付周期、大量的动画和特效须要实现、活动页面的高性能要求是他们面临的最大挑战。

Behance 和 Adobe Portfolio

Behance 是展现和发现创意做品类在线平台中的引导者。 Adobe Portfolio 可让（用户）打造本身专属创意做品展现网站的定制平台。

咱们曾由于当时并无太多大公司使用 Vue 而犹豫。可是，每当我遇问题（一般都是由于个人多虑），Vue均可以很容易的解决，这让我感到惊喜。

—— Erin Depew， Behance 软件工程师 Yuriy Nemtsov， Behance 软件工程师兼经理 Matt O'Connell， Adob​​e Portfolio 软件工程师

挑战

从自产解决方案转移到开源技术。 保持良好的用户体验和高性能。 可以在其余团队和项目之间共享组件。

解决方案

将 Behance 和 Adobe 前端团队转型到 Vue.js。 使用 Vue.js 来迁移现有的代码库。

成果

能够不紧不慢地迁移网站，而无需从头开始。 轻松整合现有代码库。 高性能，低成本。

挑战

Behance 是 Adobe 旗下的一家子公司，多年来他们一直在利用最新的技术和设计思想创造可以联结并壮大创意世界的革命性的产品。

该团队已决定使用开源框架，由于他们开始受限于目前已经使用的自产技术。

Yuriy 解释说，在 Vue 以前，咱们一直在使用自主研发的一个 MVC 框架，它依赖于 Hogan.js（mustache）和 jQuery。咱们的框架没法以声明方式渲染 DOM，这迫使咱们只能手动同步数据到 DOM 上。它也没法将功能抽离成组件，控制单向数据流，也没有全面的文档。因此尽管已经使用了几年，咱们仍是决定转向一个可让咱们可以快速构建，减小出错，下降成本，快速上手的技术方案。

Mustache 对咱们特别重要，由于当时咱们在先后端使用了相同的模板（如今多数 behance.net 的项目中依然如此）。利用 Mustache 将首屏快速提供给浏览器对于咱们和用户都是很是重要的。若是咱们等待浏览器下载 JS，解析，编译和执行它，而后才将页面显示给用户，要想达到与使用 Mustache 时一样的速度是很是困难的。咱们也特地寻找过具备服务器端渲染功能的框架。

对于 Behance 团队，首要目标是构建一个易用的代码库，并为从此添加的新功能打下坚实的基础。

我认为咱们面临的最大挑战就是，因为咱们决定不拆分咱们的代码库并从一个新平台开始，咱们不得不花费大量的时间抽离旧的代码来造成新的组件。Erin 补充说，既要用 Vue 重构旧代码并保证网站其他功能正常运行，又要实现新功能，如何权衡这两件事确实是个挑战。

咱们很是重视 Behance 的性能，因此咱们很是当心，以确保在迁移代码库的同时保持性能指标。

对于 Matt 和他的团队来讲，用户体验也是很重要的一点，而且有很大的改进空间。

关于 Adobe Portfolio，咱们一开始使用 nbd.js，这是一个从本来咱们已经再也不维护的产品中提取出的 Backbone 自定义版本，称为“在线操做”，咱们用它来构建 Behance 网络的模块。Matt 补充说，它对反应式系统有限制，所以咱们使用 Ractive 构建了“反应性”部分。

就 Behance 的状况来讲，迄今为止最大的挑战就是，在复杂的用户数据状态管理下保持快速的用户体验，同时保证站点的内容和样式的即时反馈。

解决方案

Adobe Portfolio 和 Behance 从新培训其现有的团队使他们能够在平常工做中使用 Vue.js，而不是从新组建一个只关注于 Vue.js 的新团队。

在咱们切换到 Vue 以前，绝大多数的团队都在这里。一旦咱们决定采用 Vue，咱们须要一些小项目来练手。对咱们来讲，只须要很是小，只有前端功能且不公开访问的站点便可，就像咱们的样式指南。这样，咱们能够学习如何使用 Vue，如何编写测试，并相对安全地对组件进行风格化。只有这样，咱们才能安心投入更大的项目。咱们因而就用 Vue 开始打造 Behance Live，Yuriy 回忆说。

在 Portfolio 项目中，咱们 9 人的前端团队都开始使用 Vue。咱们的一些后端开发人员也开始学习 Vue。 Matt 解释说，Behance 产品中约有8位前端开发人员在使用 Vue 进行开发。

两个团队确实有一些功能上的重叠（Adobe Portfolio 和 Behance）。Erin 补充说，咱们在代码库之间共享了许多库和 API，并且一些功能的展示一般须要两个站点一块儿合做。

Behance 团队在定义如何构建应用程序的通常方法以及如何定义不一样组件的角色方面遇到了许多挑战。

对于比较大的应用程序，vuex 存储区也很难构造。咱们决定使用命名空间模块。一开始咱们不清楚每一个路由/页面或数据类型（例如用户或项目）是否应该存在单个存储模块。建立特定的路由存储意味着跨路由的操做将不可重用。对咱们来讲，使它们具备数据特性是最好的解决方案，其中包含一个顶级路由存储模块，它结合了路由所需的模块。可是，这个解决方案还不够完美。Yuriy如有所思地说。

为了定义各类组件的角色，咱们区分“页面”组件（路由器指向的第一个组件，也是与 vuex 交互的组件）和木偶组件（仅将属性发送到子组件，将事件传输给父组件）。

使用 Vue.js 将近 1 年后，Matt 和他的团队终于构建和重构了一堆功能。

在 Adobe Portfolio 中，咱们从内容管理功能入手。内容管理容许用户能够在本身的 portfolio 网站上进行从新排序，添加，删除等操做。根据需求，咱们构建了可复用的 UI 组件，如选择下拉列表，浮窗，切换控件和拖放列表，Matt 说。

成果

据 Erin 介绍，因为 Vue 具备先进性和灵活性，Vue 易于和 Behance 现有的代码库集成。

我老是说，每一个框架仅仅是另外一个工具而已。然而，除了更新快和易阅读的文档以外，使用 Vue 的最大好处就是能够将其集成到现有的代码库中。与其余基于组件的框架不一样，Vue 给予咱们在现有的页面嵌入组件的能力，使咱们可以以本身节奏更新站点，而不是所有替换。

我会说 Vue 超出了咱们的指望。咱们曾由于并无太多大公司使用 Vue 而犹豫。可是，每当我遇到问题（一般都是由于个人多虑），Vue 均可以很容易地解决，这让我感到惊喜。她笑着说。

目前，咱们正在计划将咱们的整个 Behance 代码转换为 Vue，固然，也在推荐 Adobe 的其余团队使用 Vue。

Yuriy 认为，Vue.js 提供给开发人员的可能性与其余框架同样多。然而，与一些框架相比，它使开发更容易...也更便宜。

我不敢说 Vue 能帮你作一些其余的框架作不到事情。可是，使用 React 的话，提高 SSR 的性能确实事件很难的事。在使用 Fiber 重写（React v16）以前，一个具备巨大组件树的页面将阻塞主线程，反过来讲，这就意味着若是须要 100ms 来渲染一个页面，那么 Node 服务器的全部其余客户端就只能等待。所以，咱们须要增长单个服务器的进程数量或增长服务器数量来提升吞吐量。这很难维持，并且很是昂贵。Vue 的 SSR 状况就强大不少。Vue 有内置缓存和流式传输，所以即便不作大量优化，Behance Live 的性能也很好。

使用 Vue.js 绝对与使用其余框架不一样。不知何故，你会爱上他的。

Chess.com

Chess.com 是排名第一的在线国际象棋网站。来自全世界各个地方各个段位的棋手天天要对弈超过 100 万局。Chess.com 是由 100 位成员组成的彻底远程工做的团队。

这是我第一次一口气阅读完整的文档。如今是凌晨 1:30。当我看完时，我知道了 Vue.js 是个特别的东西。它有一些独特之处。一些我历来没有见过的东西。

Scott O’Brien，Chess.com 首席用户体验工程师

挑战

处理难以维护的 Angular 1 遗留代码。

引入新特性以增长用户参与度。

在一个彻底分布式的开发团队中管理变动。

解决办法

对全部可用的框架进行基准测试。

从 Angular 1 迁移到 Vue.js。

构建日益增加的组件库（连同它的模块化 CSS）。

成果

使得全远程的团队合做更加愉悦。

app 内编写 CSS 更加高效。

与其余框架相比，在速度、能力和抽象方面更有效地进行扩展。

挑战

Chess.com 是国际象棋领域中访问频率最高的网站，拥有多达 1900 万成员庞大的社交网络。它有新闻，博客，社区，教程，谜局，固然也包括实时对弈。网站门户的复杂性是巨大的。

遗留代码是用 PHP 和 Angular 1 编写的。任什么时候刻，Chess.com 都承载着网页上或手机上成千上万的实时对战游戏。对于这样一个网站来讲，性能是第一位的。

咱们已经知道使用 Angular 1 是一个巨大的性能瓶颈。这个问题会变得愈来愈大。从性能角度来看，咱们网站的有些部分在一些传统的硬件设备上已经变得没法使用。它是没法维护的，Scott 回忆说。

Chess.com 面临的挑战不只是处理现有的功能，也包括对新功能的规划

大部分讨论都是关于架构，由于咱们知道须要加入不少新的功能以保证用户下更多的棋并尝试各类不一样的下棋方式，Scott 解释说。

我不是说用 Angular 就作不了，只是用这些过期的 javascript 框架很难作到。

为了提升用户体验， Chess.com 须要作一些真正的改变。

我知道咱们须要一个质的飞跃。从 Angular 1 迁移到哪一个框架让咱们深思熟虑。固然，咱们有考虑过两位大佬：Angular 2 和 React。

庞大的基础设施和持续的产品开发须要一个组织良好且规模庞大的团队。

在咱们的开发团队中，有各类各样的技术栈。此外，咱们的团队是彻底分布式和国际化的。任何像技术迁移同样重要的决定都会引发不少人的关注。

解决办法

选择一个由 Facebook 或 Google 支持的框架，如 React 或 Angular，相对来讲，貌似是一个比较安全的选择。可是，Vue.js 社区证实这个新来者无疑是一个强力的竞争者。

咱们是如此的关心性能以致于咱们可能会选择对开发者不那么友好但基准测试看上去不错的框架。看到 Vue.js 赢得了渲染和性能的基准测试是振奋人心的，Scott 解释到。

咱们担忧的是整个 Vue.js 是创建在 Evan 的想法上的，这个框架的生死都由他主导。咱们决定只要社区发展迅速而且咱们相信他们在作一些革命性的事情，咱们就会带头并确信其余人在未来会看到它的价值，正如咱们如今看到的同样。因此最大的问题是，它是否会继续发展，我认为这已经被证明了。

Chess.com 团队首先要作的事情之一就是将不一样的页面从 AngularJS 重写为 Vue。

重写工做如今仍在进行，目前已经持续了数月。咱们的另外一个任务是构建咱们内部的可重用组件集，Scott 指出。

我认为用 Vue 构建一个不断增加的组件库是一件很是酷的事情，每一个组件都有本身的模块化 CSS，这些组件最终会构成咱们网站上的所有用户界面元素。一个团队一直在用 Vue 来实现特定产品领域的 components、routes 和 stores，而另外一个团队一直致力于构建全站共享的组件库，几乎不用担忧产生冲突。此外，它还使咱们的产品讨论更加抽象和复用。

成果

对于一个像 Chess.com 这么大的应用来讲，Vue 带来的好处远远超过其余。

单个文件组件绝对是构建和维护咱们库的不二法则，这样使得团队可以仅仅在有官方的状态管理系统的框架部分中进行投入。咱们相信这些事情会一块儿工做——这都是集体愿景的一部分。

有了 Vue.js，Scott 发现与远程团队合做起来更加容易了。

他指出，咱们对Vue的热爱在于，它具备难以置信的易用性和低的入门门槛，同时具有拓展能力，与其余组件库相比，有至关的(若是不是更好)能力、速度和抽象性。

咱们是一个彻底由15个开发人员组成的远程团队，咱们很是依赖 Slack, Jira 和 GitHub。然而，在 Vue 中更容易进行协做，由于它与咱们的遗留代码没有太大的区别——仍然有声明式模板以及咱们习惯的全部内容。

其次，编写 CSS 的便捷性使人惊叹。它给咱们带来了巨大的利益。咱们有许多开发人员说着不一样的语言使用不一样的编程风格，他们只需针对特定文件中的标记来命名，而不须要担忧全局名称空间的名称冲突。使用方便的感受是如此美妙。

介于 Vue 给 Chess.com 团队提供了巨大的支持，将来他们无疑将会继续使用它。

咱们如今都在用 Vue.js！正如我说的，咱们的工做分两部分：重构咱们的组件，从 Angular 1 迁移。所以，咱们同时用两种彻底不一样的方式实现，这是值得骄傲的。

Clemenger BBDO

Clemenger BBDO 是一个全方位的服务机构，提供包括品牌战略、综合创意开发、CX、数字服务、CRM、PR、设计、顾客和激活的全套功能

在过去的12个月里，在戛纳广告奖和创意奖上，它被评为世界上最具创意的机构。

咱们决定选择 Vue.js 由于它知足了咱们的项目提出的全部需求，同时为咱们的团队提供了一个温馨的开发环境。它很是接近于原生 JavaScript，所以很容易上手。

Sylvain Simao, Clemenger BBDO 技术总监，墨尔本

挑战

项目周期短（4 到 12 周），由多人完成开发。

使用动画和过渡效果。

移动设备上加载和运行速度要快。

解决方案

对静态页面使用 Vue.js 的预加载方案

构建ES6模块而不是框架特定的代码。

成果

按时交付多个成功的互动活动。

高流量的数字项目。

快捷的入职培训和项目初始化。

挑战

Clemenger BBDO 大多数项目是活动网站。他们大部分是前端的（包含小部分后端），大多数项目使用的是无服务器的方式、API、AWS 服务等。

因为同时须要开展多个有着严格工期的项目，Clemenger BBDO 必须设计出一套标准的能够显著提升开发速度，且要有足够的灵活性，能够用于不一样的项目之中的方案。

做为技术领导，我须要记住的一件事情是个人团队在短期内交付高端的高质量项目的能力。咱们是一家广告公司，这意味着一个为期3个月的项目真的很长，Sylvain 解释道。

快节奏的环境意味着咱们须要人们可以快速地投入到新的工具。有时咱们也须要与外部承包商合做，因此对于咱们最完美的方案是那些很容易学习和用于工做的东西。Vue在工做流程方面给了咱们很大的灵活性——例如，可以与已经知道的 HTML 和 CSS 的预处理器一块儿工做是一个很大的优点。

在客户端项目上，Sylvain 和他的团队使用了不一样的 JavaScript 框架。

我以为咱们都试过了! Sylvain 笑道。

咱们尝试了一些框架，好比 Angular，React，和 Riot.js。可是 Vue 最终获得了咱们的青睐。Vue 即简单又不失健壮。对咱们来讲，这是一缕新鲜的空气。它有一个丰富的生态系统，并且它是一个渐进的可采用的工具，使它成为咱们所要交付的工做类型的完美工具。

交互式活动网站处处是挑战。

您必须处理 SEO、可访问性和浏览器兼容性，但同时也要实现通常的动画、过渡和不少交互界面。这些无疑是咱们工做中最具挑战性的方面。

解决方案

因为其流畅的学习曲线，Vue.js 能够很容易让新开发人员或外部承包商使用。

咱们注意到 Vue.js 在培训新手方面表现很不错。为何？由于学习曲线很是平滑，很是接近原生 JavaScript，Sylvain 说。

对咱们企业来讲，它真的很棒。人们能够很快得到最新的速度，咱们能够更有效率地交付。另外一个值得注意的一点是，Vue 的官方文档和资源的质量使人难以置信。它可能应该获得一个最容易理解的框架文档奖!

对于每个 Clemenger 服务的网站来讲，重要的是 SEO。

对于这个特定的问题，咱们为咱们的全部页面作预渲染。大多数时候，当咱们有一个新的项目须要 Vue.js 的时候，咱们从基于官方 Vue webpack 模板构建的样板开始。而后，咱们使用像 PhantomJS 或 Prep 这样的库来呈现页面的静态快照。最后，经过使用 Nginx 或 Lambda@Edge 等用户代理工具，很容易将这些页面提供给爬虫。

Sylvain 使用 Vue.js 来处理动画和过渡效果。

如今咱们正在改变咱们实现动画的方式。自从 Vue 的最新版本发布以来，如今的过渡效果有了更多的灵活性。咱们如今有了一个更细粒度的转换钩子，这使得能够触发第三方库并实现复杂的动画，同时核心仍使用 Vue。我正努力推进个人团队走向那种模式。

对于 Airbnb 的活动设计--“Until we all belong”，技术选型是 Vue.js。

该项目最初设计为一个单页面应用，基于 Vue 和 webpack。为了提升效率，web 页面托管在 Amazon S3 bucket 中，这意味着咱们不能使用任何服务器端渲染。UI 的每一个部分和每一个页面都是使用 Vue 单个文件组件构建的。在这样一个预期会有大流量的网站上，性能是关键，这就是为何全部东西都按需加载。咱们的一个项目记录到了每分钟 6000 个的访问量——是很是大的。咱们须要作好准备，Sylvain 解释道。

在这种状况下，Vue.js 是救星。对于 Airbnb 项目，背景中有很大的图片资源须要加载以及应用动画。为此，咱们使用 Vue-router 来声明须要预加载的资源或数据，而 VueX 则负责跟踪每一页上的内容。这个项目在交互方面也颇有挑战性，但咱们在6周内就成功发布了这个网站。

成果

使用 Vue.js 来按时交付项目要容易得多。

若是不是 Vue，咱们就不会那么快了。主要是由于 API 的简单性。咱们最近开发了一个基于 Angular 2 的混合应用程序的原型，语法很优雅，但学习曲线很陡峭，简单的事情也须要时间。有了 Vue，你能够快速地实现原型，这多是它最大的优点。

有了 Vue，Clemenger 团队可以处理各类不一样的项目。

咱们如今有至关多的项目创建在 Vue.js 之上。“Airbnb’s Until we all belong”，一个澳大利亚的婚姻平等活动，已经得到了一些行业奖项，包括 AWWWARDS 和 CSSDA。另外一个项目--Meet Graham which introduce the only person designed to survive on our roads, Graham。在第一周内，该项目记录了超过 1000 万的页面浏览量，并得到了身临其境的公认和媒体报道。它备受好评，并得到了众多奖项，包括 2017 年戛纳国际电影节大奖。咱们最近的一个项目是 Snickers Hungerithm，此次咱们决定用 Vue 重写活动应用用于全球推广。Hungerithm 是饥饿识别算法，能够经过推文来监控在线情绪。当饥饿度上升时，士力架的价格就会实时降低。

Codeship

Codeship 是一个持续集成平台，它可让你在云端放心地发布你的应用。在 Codeship 上的开源项目老是免费的。

Vue 给了咱们作任何想作的事情所需的灵活性。它打下了坚实的基础，所以咱们能够用任何咱们喜欢的方式去扩展它，它不只仅是咱们用来完成目标的工具。这是咱们很是喜欢它的理由。

来自 Roman Kuba ，Codeship 前端 Leader。

挑战

应用内的冻结和崩溃。 使用 Angular 进行单元测试很是困难。 雄心勃勃的新功能计划以及构建新的，复杂的东西。

解决方案

构建一个概念验证( Proof of concept )，并以此说服其余开发人员去尝试一下 Vue.js。 只接受验收测试。 重构以及重写页面。

产出

自从 Vue.js 实施以来，没有发生任何应用程序崩溃的现象。 牢固（Bulletproof），可靠，易于维护的代码。 获得客户满意当前用户体验的正面反馈。

挑战

Codeship 是 2010 年推出的一款 CI 平台，被 CNN，Red Bull 和 Procuct Hunt 等公司使用。 他们的技术栈中包含了 jQuery 和 CoffeeScript，他们为全球开发者创建了一个成功的平台。

但随着时间的流逝，这个团队意识到是时候该去找一个新的技术去支撑更久远的发展以及促进更复杂东西的建设。

给你一些观点 —— 大量的客户在他们的平常操做中依赖着 Codeship。当咱们正在开发一个新功能时，一般可能须要四个月的时间，不知为什么，这样总感受不太好，就好像咱们正在从顾客那里拿回什么东西。但若是咱们花两个月的时间去开发功能, 就反过来了，这每每意味着两个月的痛苦而且对客户不负责。快速而可靠的提供产品对咱们来讲相当重要。Roman 这么说。

咱们拥有可以完整接收终端输出的页面做为咱们用户的可读日志,这样他们就能够看到什么样的测试经过了以及测试的信息。像咱们以前的产品使用 jQuery，由于一些变得愈来愈复杂的缘由，不得不将它砍掉,对比很明显。Roman 反映道。

接下来的六个月里面咱们使用了 Angular 1。 仅仅是由于咱们对它比较熟悉。

公司切换到了 Angular 并且适应的很好。然而随着服务的增加，咱们发现坚持使用它从长远的角度来说是不太可能的。

咱们一直试图去改善的一个东西是性能。这是 Angular 里面的一个超级大问题。咱们在构建的页面上须要展现的数据量远远超过了 Angular 的能力上限。客户们纷纷报告严重的问题 —— 页面无响应，有些人甚至遭遇了冻结和浏览器崩溃的现象。

即便如此，Roman 仍是不想立刻放弃 Angular。

固然，咱们已经尽力去优化了。我甚至尝试将一部分的渲染工做移出 Angular 的默认渲染列表并用原生的 JavaScript 代替，可是并无什么用。Roman 叹了口气。

在某一时刻， Angular 试图经过跟踪页面的范围并运行相关的 digest cycles 来把握页面上的变化。。。 这很影响性能，咱们尝试去消除这一影响，但没什么用，它没有办法顺利地运行。

Codeship 面临的另外一个重大挑战是改进测试过程并使应用程序变得更加可靠。

咱们在使用 Angular 的时候仍是会尽量地利用验收测试。咱们基本上会把整个应用里的用户故事都给测试一遍。使用 Angular 自己进行单元测试以及单独测试组件，模块或控制器是很是痛苦的。它几乎给不了咱们所需的所有画像。Roman解释说。

解决方案

获得工做人员的承认以及 VPE 的批准是从 Angular 转型的第一步。

起初，让全部人都赞成去使用 Vue 是一场艰苦的斗争。这个团队以前历来都没有听过它，他们只知道 Angular 2 以及 Google 正在抛弃它，还有 React 和它背后的 Factbook。Roman 说。

在团队会议中，第一个问题一般是关于 Vue.js 社区的规模，你们想知道若是在开发过程当中遇到问题，他们是否可以获得来自社区的帮助，由于咱们的大部分员工都是作后端的，他们更想要坚持选择他们所能听到的可信赖的名字。

Roman 决定用他的知识和调查结果来讲服他们转移到 Vue.js。

“我作了一些样例和一个内部演示，至少要让他们相信这个决定以及决定背后的理由” 他说 “若是你简单地阅读过 Vue 的源码，你会发现独立去扩展这些代码并不困难。它不像 Angular 或者其余相似的沉重的框架。”

在 Codeship 直接投入开发以前，他们须要一个概念验证。

当时我对 Vue也没有太多的经验，我对框架中涉及到的技术了解十分有限。可是，从 Vue 开始彷佛毫无费力，我很快就意识到这是一个针对困扰咱们大多数问题的解决方案。只用了一个晚上左右，我就用 Vue 重构了一个关键部分并试图使用大量的 Loglines 做为概念验证。

而后我对全部的代码作了CPU性能分析，这件事当即向个人团队证实了 Vue.js 已经给咱们带来了巨大的性能提高。咱们将渲染时间从30秒缩短到了7秒左右。Roman 回忆到。

概念验证在手，Roman 和它的员工终于能够开始向 Vue 过渡了。

咱们试图移走概念验证并用 Vue 代替咱们现有的系统。这里头的实际风险很是小。咱们有一个对用户来讲正处于崩溃的系统，因此，还会有什么更糟糕的事情会发生？Roman 笑道。

我经过花了一个礼拜的时间重构并重写页面，而后将它发给用户来获取反馈来快速验证工做的可行性。只过了一天的时间，咱们就发现过去困扰咱们的问题所有都消失不见了，甚至是在有 15 Mb 日志呈现的状况下。在渲染时间在 30 到 40 秒之间（咱们正在努力进一步减少这个数字），应用在全部的浏览器上都可以出色的运行而且没有被咱们记录到任何一次崩溃。

抛弃验收测试使整个测试部分变得更加愉快和可靠。

咱们抛弃了验收测试，开始考虑咱们能够获得什么，并使用 Jest 和 Vue 来测试。咱们在 Vue 中使用多个组件，甚至是复杂的页面，可是只能经过 Jest 进行测试，由于咱们有快照并验证渲染 HTML 是不是咱们想要的。Roman 解释道。

产出

一些不多作前端的工程师如今感受有能力去接触一些代码片断了。

Angular 和它的结构、模块、模型和控制器，以及几十个其余东西。。引入了没必要要的高度复杂性。对于这些工程师来讲，大部分名词听起来就像是奇怪的魔法同样。可是当他们真正地看到 Vue.js 的时候，他们能感受到本身有能力去立刻深刻研究它。这对于咱们公司来说是一个很是大的胜利，Roman反映道。

Vue.js 帮助 Codeship 组织他们的代码并优化用户体验。

它能够帮助咱们更快的交付所需功能，用户不须要为了他们须要的或者指望的东西来等待数个月的时间，他们很是喜欢这一点。咱们的页面中有一个是基于 jQuery 运行的，它的结构很是奇怪。咱们将它基于 Vue 重构了。如今，它提供了更加细化的体验和更友好的 UI 交互效果，所以，它显著地改善了用户体验。人们老是这样告诉咱们。

使用 jQuery 的时候，代码很是混乱，难以和维护。而使用 Vue 的时候就不同了，你能够利用它组件的强大功能和它的生态系统，好比 Vuex。咱们如今正在作的是页面状态管理，这是咱们之前历来没有完成过的，至少没有以这样一种干净的方式完成。

对于 Codeship 来讲， Angular 测试是一个很是痛苦的过程。而用了 Vue.js，他们知道他们的代码是牢固的。

Vue.js 确实提高了咱们的测试协议。Jest对咱们来讲是一个比较聪明的测试工具。可是有了 Vue 以后，咱们以为咱们又更多的方法来控制应用的各个方面，Roman 阐述道。

我能够运行 15 个执行特定操做的测试。这样的方式可让我轻松地识别代码中的断点。在之前的验收测试中，我没办法这样作，由于这须要消耗很长的时间。获得的结果不值得咱们付出那么多的精力。单元测试在这方面反而更好。在代码方面，我知道它是牢固的，由于咱们以全新的方式对它进行测试，结果使人难以置信。

GitLab

GitLab 是一个集代码托管,测试,部署于一体的开源git仓库管理软件。

每个框架都有本身的适用领域，使用 Vue 的时候，每一次斗争都是你本身的，而不是 Vue 的。它只是一个完美的框架。

来自 Jacob Schatz, GitLab 前端 Leader

挑战

实现复杂的功能以及维护现有的功能会有困难。 大型的 Rails + jQuery 应用难以扩展。 应用速度不足。

解决办法

逐渐将 Vue.js 引入到 GitLab 中，以便与 jQuery 一块儿使用。 把 Vue.js 用在合适的新的功能上以及迁移旧的功能。如无必要，不作完整的重写或者重构。 使用 webpack 建立优化后的代码包。

产出

整个代码库和代码结构体系中的统一的样式指南变得更加容易维护。 极大改善了时间消耗以及编码效率。 由于可以实现更复杂的功能，改善了用户体验，从而致使了更好的销售业绩。 经过减小包的体积使页面的加载时间获得改善。

挑战

通过六年的市场推广，GitLab 已经成为上千家公司开发人员心目中知名的解决方案提供商。可是在两年前，公司内部的大部分代码仍然是用 Rails 和 jQuery 编写的。

直到 2015 年，公司尚未专职前端的开发人员，并且整个体系运转得十分良好。Rails 开发人员兼职写前端代码并且作的很棒。然而，公司将来的计划须要一个新的解决方案。

当我刚进公司的时候，我看到咱们有一些比较简单的项目是只用 jQuery 实现的。但若是咱们想要作一些更复杂的东西，或者说咱们想要实现一些比较大的点子，咱们须要一些别的东西。Jacob 解释道，

jQuery 很棒，可是由于你要负责代码内的每个状态的变化，这样容易致使它形成更多的 bug。

为了达成目标，GitLab 开始寻找一个新的解决方案。

由于我以前有使用 Backbone 的经验，因此咱们考虑过它。咱们也仔细考虑过 React，可是也淘汰了。还有 Embar 和其余的不一样的框架。我甚至想过用每一个框架都作一个小项目出来，那时候咱们甚至还没想过 Vue.js！Jacob 回忆道。

测试全部的这些框架帮助 Jacob 认识到了它们的优缺点。

Backbone 有很好的结构，它有不少小工具能够完成任务。可是你用起来其实和 jQuery 没什么太大区别。而我对使用 React 这种依赖大公司的框架有些恐惧，所以它彷佛也不适合我。我很是喜欢 Mithril！惟一的问题是它写起来很是困难。若是他们能加入一些友好性， 我相信人们会开始适应它。

另一个大的挑战就是为切换新技术作个成熟的方案。这么作有很大的风险，所以必须良好地切换它。

在 GitLab，咱们有成吨的代码。当我加入的时候，咱们的代码库已经有 8000 行的 JavaScript代码了。很明显，我彻底不想去完全重写这玩意。实际上咱们的代码库中仍是有些地方是用 jQuery 写的。

解决方案

测试了一些框架以后，Jacob 在他手头的框架里仍是找不到一个完美匹配的。只有在他用 Vue.js 的早期版本写了一个很大的项目以后，他才意识到本身可能找到黄金了。

当我把这个项目放在一块儿的时候，我就知道咱们能够用这个框架写不少代码。这不只仅是写一个简单的 todo 应用。全部问题都会在你开始处理这个大型的应用的时候真正开始，Jacob 解释道。

在 GitLab 开始切换到 Vue.js 以前，他们须要作一次概念验证。

Phil Hughes [Sr. GitLab 前端工程师],建立一个概念验证，咱们在那里采起了一个咱们正在作的主要功能 —— issue boards 。Phil 用 Vue.js 写这个，显而易见，咱们在很短的时间内完成了大量的工做！没有以前 jQuery 带来的各类 bug。Jacob 说道。

Vue.js 支持 Jacob 在他的团队中推广本身的方法--小范围迭代，并创建概念验证。

他说，咱们老是有四到五个概念验证。

经过这种方法, GitLab 引入了 webpack ，它可以将资源拆分红更小的块供浏览器下载，从而缩短了应用的加载时间。

咱们建立了一个小的概念验证来判断 webpack 是否可行，当咱们发现这是可行的时候，咱们走完了整个流程并结束了 Vue 和整个 trello 应用的开发。并在一个月内取代了数十亿美圆的产业，干得好，Phil！Jacob 笑了。

响应式模板（reactive templates）这个功能是 Vue.js 中最有用的。

这是 Vue 所作的很是很是简单的一件事情。 我在 GitLab 中编程的第一件事就是进入 issue 页面，在以前，当你点击 close 的时候，你必须刷新页面。 而现再，它改变了合并按钮（merge button）的状态，它会自动改变下面全部按钮的状态。在 jQuery 中，咱们须要写至少三四十行的代码来保证这个按钮的状态是正确的。在 Vue.js 中只须要一行代码。视图老是会反映出当前的状况， Jacob 解释道。

并且如今咱们使用 Vuex，它比以前作的更好。状态管理工做有了很大的不一样

虽然 Vue 有不少优势，可是它也有一个缺点。

目前 GitLab 有 15 名开发者。像 Angular 这样的框架，你们能够在一块儿用一样的方式工做。而 Vue 比它开放不少，因此咱们须要创建文档来告诉你们在 Vue.js 中写代码时该遵循什么样的模式。不过这是咱们已经解决了的问题，Vue的开放性也是它的魅力所在，可是你须要保证全部人都在同一个层面上。

**VUE.JS STYLE GUIDE BY GITLAB

产出

使用 jQuery 来扩展应用和引入新功能实际上是能够的，不过维护起来就要困难的多。

咱们如今正在作的事情须要很是大的代码量以及不少的组织。针对这些问题 Vue 解决了不少。Jacob 说。

像 Vue.js 中的响应式这种, 你给它一个变量，它会直接绑定到 DOM 上并处理好全部其余的事情，尤为是 2.0 版本中的虚拟 DOM，它提供给咱们一个简化工做流程的办法去改善性能。

GitLab 之因此能够快速迭代并提升代码的可用性，这都要归功于 Vue.js。

在以前咱们须要专一一些小的细节和代码，如今咱们终于能够专一于代码可用性以及用户体验。咱们能够思考更大的图景。

Vue.js 是如此的开放和易上手，GitLab 的前端开发人员天天都可以处理它。

和其余工具相比，Vue 不用遵循任何严格的知道规则。它是开放的，这点实在太赞了。我喜欢它如今作的一切。固然它有着你能想象到的最神奇的文档。它对于新人很是直观和友好。

Vue.js 帮助 GitLab 改善了时间和成本效益

你们知道事实上咱们的发展速度更快了。这很容易看出来。从销售角度来看，咱们正在创造的更良好的用户体验功能吸引人们使用 GitLab ，并使它成为更加使人期待的产品。人们喜欢咱们用 Vue.js 开发的新功能。由于咱们改善了用户体验，也间接增长了销售量。

Jacob 认为他们未来确定会再使用 Vue.js。

咱们都准备好了！如今咱们还有其余的挑战。目前咱们正在努力改进咱们的流程并加快测试的速度。 Vue.js 为咱们解决了如此多的问题以致于咱们确定在未来持续地使用它。

Livestorm

Livestorm 是一种基于网络的、集成一体的在线会议解决方案。它帮助像 Workable, Pipedrive 或者 Instapage 等公司进行现场销售演示或者客户培训。

咱们不须要花一个月时间用 React 来把全部事都安排好，Vue 让咱们在一周内就能够办到。我彻底确信若是没有 Vue ，就不会有今天的咱们。

来自 Livestorm 的联合创始人兼首席执行官 Gilles Bertaux.

挑战

从零开始创建可靠的实时网络软件，并使其在竞争激烈的市场中产生影响。 在巴黎，只有极少数的 Vue.js 专家。 吸引初始用户并验证产品的理念。

解决方案

创建一个快速的最优秀应用。 使用 Vue.js 和 Ruby 建立一个高性能的应用。 在 Vue.js 社区上为团队寻找潜在的员工。

成果

当即获得用户的积极反馈。 可重用的组件以及快速开发。 快速成长的业务量以及每个月 20-30% 的收入增加。

挑战

与其余网络平台不一样，Livestorm 渲染了浏览器中的一切。该服务经过分析、与流行的客户关系管理系统集成、以及营销自动化软件提供可实施的办法。

对于这样的应用，Gilles 和他的团队必须选择一个高性能的技术栈。他们打算从零开始验证他们的想法并创建一个稳定可靠的产品。

Livestorm 的主干是一个 Rails 应用程序——后端全部东西都是用 Ruby 作的。 Gilles 解释道：对于咱们全部的前端组件，咱们选择了 Vue.js。

咱们从 2016 年 1 月开始开发咱们的项目，从第一天开始，咱们就知道咱们会使用 Vue。咱们须要一些彻底开源的、高性能的、有特定逻辑的组件。Vue 是惟一能知足咱们全部需求的框架。

Livestorm 由四位联合创始人建立，力图从公司的最初阶段组建一支强大的员工队伍。

咱们考虑了不少招聘问题。在咱们工做的巴黎地区只有不多的 Vue.js 开发人员。咱们也考虑招聘精通相似于 Vue 的其余框架的开发人员，可是这种状况下，新员工培训过程可能花更长时间，这对咱们来讲是有问题的。

为了创建一个成功的流媒体产品，团队必须关注可靠性。

可靠性对咱们来讲是头等大事。Gilles 说：若是你失去了直播流，网络研讨会和演示会崩溃而且流媒体丢失，咱们的业务就会变得毫无心义。

若是应用程序挂了，或者有一个 bug 让它没法使用，咱们会失去用户。咱们须要一种技术来保证最高的代码质量，而且运行得很快。咱们仍然在执行端到端单元测试。有些事情咱们尚未用 Vue 实现，这对咱们来讲是全新的。

解决方案

大多数开发人员仍然选择 React 和其余流行的框架，可是 Gilles 相信这将会有所改变。

为了给咱们的员工招聘专家，咱们参加了在巴黎的 Vue.js 聚会，在那里咱们遇到了颇有经验的人。咱们也试了在招聘网站上发布招聘，有趣的是，约谈的大多数程序员说他们在本身的项目上用 Vue.js，可是他们平日工做用的基本是 Angular、React，和其余框架。Gilles 指出，他们大多数来自大公司。

然而，我注意到一件事，那些常用这些技术的公司，是由于代码遗留所迫，或者是由于他们想尝试一下其余人也在尝试的技术新热点。在创业社区，在我参加的多个轻松的渠道和会面中，与我交谈的首席技术官和联合创始人对迁移到 Vue.js 很感兴趣，他们对咱们在 Livestorm 里用了 Vue 很兴奋而且问了不少问题。坦率地说，我相信会有一个重大的转变——人们会对迁移到可靠、高效的东西更感兴趣，像 Vue.js。Gilles 补充说：而像 React 这类炒做的技术会逐步减小流行，直到他们最后被淘汰。

Gilles 想把他的产品尽快发布，他的团队建立了一个快速的 MVP 来得到外部世界的最初反馈。

咱们花了不到一个月的时间建立了第一个 MVP。这足以展现产品和基本理念。他回忆说：最后，咱们获得了不少积极的反馈，从而确保了咱们是符合市场需求的。

咱们花了 5 个月的时间卖出了第一份订阅。这是至关长的一段时间，可是咱们须要首先完成一些与技术没有必然联系的东西。

Gilles 的团队在他们的平台上建立的一系列功能使其成为一个有竞争力的解决方案，真是使人惊叹。

直播会议、网络摄像头和屏幕共享中的 WebRTC 实时流、全高清流媒体直播是主要的视频相关的功能。咱们也提供了一个运行于 Vue.js 的聚焦于分析的部分，而且与流行的销售和营销工具，例如 Salesforce 集成。咱们也开发了其余基于浏览器的网络会议软件所没有的独一无二的功能，让用户能够在飞机上从 WebRTC 切换到 HLS，使媒体流能够与 IE 浏览器用户以及一部分移动设备匹配。

成果

投入市场一年后，Livestorm 拥有来自世界各地的用户，而且有了一个已经盈利的产品。

咱们已经有大约 150 名付费用户，他们都对 Livestorm 的速度之快印象深入，他们也喜欢界面和交互。从商业上来讲，咱们有一个不受咱们干扰能独立运行的应用程序，因此说——咱们没有一个销售团队。咱们有 7 名员工，包括产品专家、工程师，以及一名营销人员。那我的是我，Gilles 解释道：可是只是由于产品很是好并且可靠，咱们每月有 20%-30% 的增加。

借助 Vue.js ，Livestorm 能够更快地发布新功能，以知足客户的需求。

固然，咱们试图尽快地上新功能。如今咱们在一个为期两个月的开发阶段，该阶段将以一个大型功能的发布而结束，可是咱们一般在一两周内发布功能，Gilles 解释道。

有了 Vue.js 咱们没必要每次都去造轮子。

咱们能够重用全部已有的组件来加快开发。如今，咱们代码库的 39.5% 是用 Vue 建立的。

Gilles 声称选择 Vue.js 而不是其余框架让他的公司成功得更快。

只有基准说明了真相，而如今基准清楚地证实了 Vue.js 绝对是新产品和现有产品的选择。他说：因此若是任何人在不久的未来必须作出技术选择，他们应该依靠具体事实、数据和基准，而不是观点。

若是你有不少开发人员，他们已经习惯了使用 Angular 或者是更加经典的框架，让他们迁移到 React 会使整个团队感到痛苦。另外一方面，过渡到 Vue，更加顺畅，反过来只要更低的成本。 咱们不须要像 React 花一个月的时间来把全部事都创建好。Vue 让咱们在一周内开始运做。若是不是 Vue，我 100% 地确定咱们永远不会达到如今这样的成就。

Vue.js 的特色

来自 Vue.js 的做者 Evan You

可持续性

做为一个项目，Vue.js 已经走了很长的路才能成为今天的样子。它已经从一个小的实验成长为一个成熟的框架，而且被全世界成千上万的开发者使用。它已经从一个“项目”发展成一个生态系统，在 vuejs 组织中有超过 300 个贡献者，并由来自全球的超过 20 个活跃成员组成的核心团队维护。核心团队成员承担了核心库的维护、文档、社区参与以及主要的新特性例如类型声明的改进和测试功能。说 Vue 是“一我的的项目”再也不准确，也是对团队和社区的全部惊人贡献的不尊重。

从财政上来讲，从 2016 年 2 月来，Patreon 活动已经收到了稳定的有保障的收入，这让我能够在过去一年半时间里全职工做在这个项目里。另外，最近开始的 OpenCollective 活动，旨在为社区举措提供财政支持，在短短两周里已经收到超过 11000 美圆的年预算，并且还在持续增加。更重要的是，这些开放的财政贡献渠道意味着你的公司能够经过成为赞助商积极帮助确保项目的可持续性。

今天我有信心地说做为一个开源项目，Vue.js 已经超越了这一临界点，即项目的生存对任何考虑是否采用该项目的人来讲再也不是一个问题。

稳定性

前端的设计变化很快，咱们知道不断改变有多么使人沮丧。这是为何咱们这么重视稳定性。在 GitHub 上查看项目的历史，你会看到一系列新特性和改进的版本的坚实记录，及时的 bug 修复，以及对代码一丝不苟的标准（是的，咱们保证 100% 测试覆盖率）。

全部 Vue.js 包的发布遵循了语义版本控制，咱们尽最大努力经过交流提早知道任何潜在的须要的操做。2015 年 10 月，1.0 版本发布了，并无在公共接口中有所突破，直到一年后 2.0 版本的发布。在 2.0 发布以前，咱们进行了公开设计讨论，并发布了多个 alpha/beta/RC 版原本确保最终版本的稳定性。咱们尽力保持接口与 1.0 类似，并提供全面的指导和升级工具。今天，2.0 已经发布了一年多了，在全球的产品内获得普遍应用，咱们不认为在可预见的未来须要对主要的接口作修改。咱们致力于在对用户最小影响下改进框架。

连续改进

固然，咱们不会只知足于当前咱们已经作的事情。 咱们在将来几年的探索和实施的计划中有不少想法，我会将它们分为三类：

近期的改进

这些新特性/改进将会持续发布于 2.x 小版本中，它们能够来自特性需求、来自更广网络开发社区的灵感，以及咱们在实际开发中遇到的用例。

中期的改进

有新的 JavaScript 语言特性（好比 ES2015 代理，Promises）能够简化或改进当前的接口，可是由于必需要支持 IE9，如今还不适合放在主分支上，咱们计划在并行分支中开始利用这些特性，而这须要最新的主流浏览器支持。

长期的改进

咱们还关注新兴的标准，好比 ES 类语法改进（类变量和装饰器），网络组件（自定义元素和 HTML 模块）以及 WebAssembly。咱们已经开始了其中一些实验，而且必定会利用它们来进一步改进 Vue 的开发经验和性能，由于它们在浏览器适应方面已经成熟。

长期愿景

不少人问我为何开始使用 vue.js。老实说，一开始目的是为了“给本身挠痒痒”，建立一个我本身喜欢用的前端库。在这个过程当中，随着 Vue 被愈来愈多的用户接受，我收到了不少来自用户的消息说 Vue 使他们的工做变得愈来愈使人愉快，所以看上去个人偏好与不少网络开发者朋友们不谋而合。今天，我设想 Vue 的目的变为用来帮助更多开发人员喜欢在网络上建立应用程序。我相信更快乐的开发人员会更加高产，而且最终为每一个人创造不少价值。目标须要提供一个可得到的、直观的、同时可靠、强大而且可扩展的框架。我相信咱们正处于正轨上，但咱们也能够作更多的事情，特别是经过 Web 平台获得比以往更快的发展。

咱们为即将到来的事情感到兴奋。

© Monterail, October 2017

Monterail 是一个由 80 多个专家组成的紧密团队 为创业公司和企业提供网络和移动开发。 而且咱们喜欢 Vue。

www.monterail.com hello@monterail.com

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、React、前端、后端、产品、设计 等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。