企业如何挑选一款适合的前端框架？

Posted 2021-04-05 IT168企业级

前端语言和框架发展迅速，每年都有很多的库和框架产生和消亡，企业如何才能在高产且良莠不齐的框架中保持理性，选择出正确的前端框架呢?

新加坡CXA Group在对其核心网络平台进行评估时，决定将其老化的现有架构全部转移出去，并从头开始构建前端，使得其在全球12个国家和地区的Web应用程序都能够运行良好。在交付项目前期，他们组织了一系列对javascript前端框架的评估，这些评估比较全面，现在和大家分享出来，希望能够对其它企业能有所帮助。

缩小范围

前端框架几乎每天都会有新的发布，所以要先进行分析以减少框架范围。通过收集信息和业界推荐，CXA锁定了Angular 2、Aurelia、Vue.js(推荐)和React(推荐)这四款框架。

然后CXA根据自己的要求简单列了一些标准来评估这些框架，并查看排名。这些标准有一些是可以在网络上查询到的，而有一些则需要去验证。

灵活性

CXA选择的框架需要提供一系列配置选项，并且要进行相对简单的定制，所以要不就是他们做出完整的架构，要不就是这样框架要完全开放。

Angular 2无论是从状态服务器还是路由器或者是处理程序来看，都是不错的选择。Angular 2的好处是可以快速轻松的启动和运行，但是不好的地方是它的模块无法满足CXA的全部需求。

而React，Vue和Aurelia就不同了，它们都提供了交换组件的能力。另外， Aurelia和Vue还有React没有的优势，就是在其初始设置中具有可配置模板文件的优势。

与Vue一样，React本身只构建了需求的一小部分，但是React自推出以来就已经创建了各种目标，如React Boilerplate和Create React App。

CXA在对React项目进行测试时，没有使用特定的模板，而是直接进入，而且这些只是参考代码，所以还多安装了几个。虽然方法有些困难，但是通过这次测试，他们从React堆栈中学到了很多关于组件的信息，并且对于测试结果也具有绝对的信息。

最终，Vue和Aurelia凭借其平缓的学习曲线和模块化结构在这一轮获得了胜利。

离线支持

对于很多工作人员来说，Web应用程序在没有实时或稳定的Internet连接的情况下运行的能力已成为刚需。而CXA由于在这方面缺乏经验，所以就只是确认了所有参与评估的框架是否提供离线支持，并没有做其他深入研究。

轻量

发送到客户端的代码字节大小对于带宽和处理器时间在浏览器性能上有很大的不同。随着自定义代码和第三方库的添加，字节大小对于项目的影响只会更多。CXA集团的目标市场扩展到带宽非常高的国家，所以他们至关重要的一点是向客户提供尽可能少的代码。

为了代替反映生产配置的硬数据，他们研究了核心库的大小，希望能得到一些启示。

Vue的开发人员已经将其核心库缩减到23 KB，React和Aurelia位于中间，分别为大约42 KB和64 KB，而Angular 2则为最重，143 KB(包括RxJS)。

所以，Vue，Aurelia和React都在考虑范围之内，而Angular 2则有些过重。

服务器渲染

早期的单页应用(SPA)框架遵循向客户端发送所有代码的模型。这意味着页面的初始渲染会全部发送给客户端，这样导致直接的结果是初始页面加载会变慢。服务器呈现页面表明在服务器端负担初始渲染，允许其他任何东西在该渲染之后被延迟加载。

Vue和React使用插件添加服务器渲染。 Angular 2正在将这一功能合并到核心中，而Aurelia则将服务器渲染标记为开发中的一个功能，即使它具有其他性能技巧，也缺少实施的时间表。

成熟度

在选择企业级网站的框架时，广泛的社区支持、稳定性和招聘能力是非常重要的因素。因为很难猜测三年内这些框架是否会仍然被支持，所以他们主要着眼于目前的健康状况或其他方式来作出决定。

实现就是查看框架的初始公开发布日期，让我们了解每个框架的健壮性。在理论上，发布时间越早的框架，性能越好，错误越少。

React发布时间最早，于2012年3月发布。Vue虽然是2015年10月发布的，但直到2016年9月第2版才发布。Aurelia是一款新发布的框架，于2016年8月才发布。Angular 2最是有趣，它与Angular 1有着显着不同，于2016年9月发布第一个版本。

CXA团队中有成员一直在关注着这些候选框架，这让他们在判断这些框架是否稳定有了一些整体的感觉，Angular 2的发展历史看起来较为艰难，突破性变化也不明确，再加上这个框架最终想要什么也比较模糊。

成熟度评定中还有很关键的一环，那就是是否能够雇佣到有经验的员工。虽然有特殊经验和要求的招聘本身限制性就很大，但是他们考虑到自己的框架经验和项目周期，所以更倾向于聘请员工。从这个角度，他们排除了Angular 2。

剩余的其它框架，他们搜索不同的招聘网站，并且为每个框架都单独写了招聘启事。最后他们没有搜索到Aurelia或Vue的应征简历，也没有收到任何面试申请，但是却收到了好几份比较有质量的React工作申请。

其他特性

除了以上几项，CXA在进行前端框架调研还进行其它功能测试，如开发工具和单元测试。如果没有固定的开发工具，那么就不可能进行调试，而单元测试对于企业级应用程序(如我们的)来说至关重要。

实践

理论推理并不能代表实践经验，所以我们选择了满足大多数要求的两个框架进行了运行和编码，分别是Aurelia和React。

实践项目是是构建符合我们现有应用程序的基本功能的验证屏幕：登录，调用API和建立会话。两个团队成员都被分配了一个框架，并给出了一个日历周，看看他们可以建立什么。

Aurelia演示更完整，部分原因是安装程序更简单。但他们也确实感觉到了，通过前期的工作，他们更好地了解了React堆栈内部的内容。Aurelia在配置方面赢得了胜利。

我们根据实践编码，无法得出任何重要的结论。 也许唯一的惊喜是它们的代码是如何相似：其中更多的是由于两个框架使用ECMAScript 6引入的结构变化。

最终结果

CXA最终的选是React，主要原因是其成熟度、社区支持和易于招聘高。 虽然React是更符合CXA的标准，但是我们也看到其它的竞争框架的竞争力也是非常强的。CXA表示：Vue的功能其实要更为完整，如果要是项目周期不是那么短，招聘也不是那么重要，他们会考虑将项目扩展到Vue。