前端框架无法正确引用_如何为您的公司选择正确的前端框架

前端框架无法正确引用

在总部位于新加坡的员工福利初创公司CXA Group对我们的核心Web平台进行评估的过程中，我们决定将方向从陈旧的现有体系结构转向，从头开始重建前端。 该平台面临的挑战之一是创建一个可在CXA Group遍布亚洲的12个目标国家/地区正常运行的Web应用程序。

考虑到我们为交付项目设定的艰巨期限，我领导了对一系列前端JavaScript框架的评估。 进行此类更改的机会通常不会出现在大型公司项目中，因此我们尝试在评估过程中尽可能做到透彻。

决定中有很多内容：随着我们业务的指数级增长，我们一路走不下去。 我们还必须考虑到以下事实，即团队中没有人在我们正在研究的任何框架中都有任何重要经验。

缩小领域

新的前端框架似乎每天都在发布，因此我们进行了荟萃分析，以减少我们考虑的框架范围。 包括我们听说过或已向我们推荐的框架，剩下的就是Angular 2（听说），Aurelia（听说），Vue.js（推荐）和React（推荐）。

我们根据关键要求列表对每个入围的框架进行了衡量，以了解它们的排名。 一些需求是基于我们知道的项目需求，而其他需求则是我们希望做的事情。

灵活性

我们选择的框架将需要提供一系列配置选项，并且相对容易定制。 其中的大部分似乎来自于建筑哲学：代表您做出建筑决策或让它们完全开放。

Angular 2存在于此的整体末尾，为您提供了各种选择（状态服务器，路由器，处理程序）。 这样做的好处是，它很容易快速启动和运行，而潜在的成本是模块无法按您需要的方式工作并且无处可去。

React，Vue和Aurelia处于规模的另一端，可以根据需要交换组件。 在其初始设置中，Aurelia和Vue相对于React具有可配置样板的关键优势。

像Vue一样，React本身仅提供构建内容所需的一小部分。 从那里开始，必须做出许多决定，这无疑是艰巨的。 自从React首次发布以来，已经创建了各种样板（包括React Boilerplate和Create React App ）来简化引入。

对于我们的测试React项目，我们决定放弃任何特定的样板并直接深入其中。 即使仅作为参考代码，我们仍然安装了一些。 这种方法固然很困难，但是我们对React堆栈中的每个组件都学到了很多东西，并对最终结果更有信心。

Vue和Aurelia凭借其减少的学习曲线和模块化结构赢得了本轮比赛。 即使最初的安装非常困难，React的灵活性也获得了部分赞誉。

离线支援

使用诸如Service Workers之类的API，就可以使Web应用程序在没有实时或稳定的Internet连接的情况下运行。 在我们团队中，我们在这一领域还没有太多经验，除了确认所评估的所有框架都提供了各种离线支持外，没有深入研究。

重量轻

发送给客户端的代码字节大小在带宽和处理器时间方面都对浏览器性能产生很大影响。 随着自定义代码和第三方库的添加，字节大小只会变得更糟，因此从小处开始至关重要。 CXA Group的目标市场扩展到带宽非常宝贵的国家，因此至关重要的是，我们要尽可能少地向客户提供代码。

代替反映生产配置的硬数据，我们查看了核心库的大小，至少可以提供一些说明。 实际生产尺寸大于此处显示的尺寸。

Vue的开发人员竭尽全力将其核心库缩减到令人印象深刻的23 KB。 React和Aurelia位于中间的某个位置（分别约为42 KB和64 KB），而Angular 2仍然是重量级的143 KB（包括用于状态管理的RxJS）。

实际上，Vue，Aurelia和React的生产版本彼此接近，可以考虑在内。 角度2再次以错误的方式伸出。

服务器渲染

早期的单页应用程序（SPA）框架遵循将所有代码发送到客户端的模型。 这意味着页面的初始呈现留给客户端使用，直接的结果是，初始页面加载将变慢。 SPA中服务器渲染页面的概念使服务器承担了初始渲染的负担，从而允许其他所有内容在该渲染之后被延迟加载。

Vue和React使用插件添加服务器渲染。 Angular 2目前正在将其Universal功能合并到核心中，尽管该功能与Vue或React提供的功能不匹配。 Aurelia将服务器渲染标记为开发中的一项功能，但缺乏实施的时间表，即使它还有其他性能窍门 。

到期

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

在选择企业级站点的框架时，广泛的社区支持，稳定性和雇用能力是非常重要的因素。 很难推测三年内是否还会支持任何框架，但是我们决定考虑每个框架的当前健康状况或其他因素来做出决定。

通过查看框架的首次公开发布日期，我们可以了解每个框架的健壮性。 从理论上讲，至少较旧的库应该具有更好的功能范围和更少的重大错误。

React在这里轻松获胜，于2013年3月首次公开发布。尽管Vue最初于2015年10月发布，但直到2016年9月发布版本2才大步向前。Aurelia是2016年8月发行1.0版本的新人。

Angular 2很有趣：它与版本1明显不同，出于实用目的，它于2016年9月首次发布。

评估的这一方面的一部分涉及在发布日期本身之后深入了解每个库的开发历史。 漫长而稳定的开发历史-即使在beta中-无疑也给人以信心。

各个团队成员一直在关注候选框架的开发，这使我们至少对每个框架的整体稳定性有所了解。 在我们审查的所有框架中，Angular 2陷入困境的开发历史都非常突出，发生了重大的重大变化，发布日期不清楚。 该框架最终将其发布到最终版本，但是在此过程中肯定是一团糟。

如上反映的那样，成熟度的最后一个关键方面是聘用经验丰富的员工的能力。 鉴于我们的团队在评估框架方面的经验有限，以及我们所面临的时间紧迫，我们想聘请经验丰富的开发人员。

具有特定经验的招聘可能会受到限制，但是，这对于像我们这样的大型项目肯定会有所作为。 我们现在取消了Angular 2，因为它无法满足我们以前的太多要求。

对于其余框架，我们首先搜索了不同的工作地点，并为每个框架分别投放了招聘广告。 我们没有找到Aurelia或Vue的招聘广告，也没有收到任何申请。 相比之下，我们发现了一些React工作，并且收到了许多高质量的应用程序。

其他特性

我们列出的所有其余功能（开发人员工具和单元测试支持）都在我们研究的所有框架中提供。 没有可靠的开发人员工具，调试几乎是不可能的，单元测试对于像我们这样的企业级应用程序几乎是必不可少的。

动手

没有多少理论等于动手实践。 考虑到这一点，我们选择了满足大多数要求的两个框架-Aurelia和React-并开始并行编码。 在此阶段，没有充分的理由省略Vue。 我们根本没有足够的时间进行评估。

给出的任务是构建与我们现有应用程序的基本功能匹配的身份验证屏幕：登录，对API的调用和会话的建立。 分别为两个团队成员分配了一个框架，并给了他们一个日历周的时间，以了解他们可以建立什么。

Aurelia演示更加完整，部分原因在于更简单的设置过程。 在选择每个部分的工作之后，我们确实感到我们对React堆栈中的内容有了更好的了解。 Aurelia仍然为简化初始设置赢得了支持。

我们无法仅凭动手编码就得出任何重要结论。 也许唯一令人惊讶的是代码是如此相似：这在很大程度上要归功于两个框架使用的ECMAScript 6中引入的结构更改。

结果

最后，我们的选择是React； 之所以选择它，是因为它具有成熟度，社区支持和易于雇用等所有其他功能。 尽管React是我们标准的明确赢家，但很高兴看到我们所研究的竞争框架中的这种质量。

Vue和Aurelia被证明是下一个产品线的紧密竞争对手。 Vue的功能列表比较完整，但排名略微领先，但考虑到我们的要求，两者都可能效果很好。 如果没有时间上的压力，招聘的重要性将降低，而我们的动手工作将扩展到Vue。

Angular 2未能通过我们的大多数选择标准而感到失望。 尽管具有所有优点，但显然不适合我们。

选择了React并开始构建我们的项目后，我们不太可能很快再次进行这样的评估。 至于您，您将把什么标准添加到我们的列表中？ 我们错过了什么可以做得更好的呢？ 我期待着您的意见和建议。

这篇文章由Stuart Mitchell ， Ralph Mason和Vildan Softic进行了同行评审。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态！

翻译自: https://www.sitepoint.com/choose-the-right-front-end-framework-for-your-company/

前端框架无法正确引用