首页 > web前端 > js教程 > 如何为公司选择右前端框架

如何为公司选择右前端框架

Joseph Gordon-Levitt
发布: 2025-02-16 09:35:37
原创
857 人浏览过

How to Choose the Right Front-end Framework for Your Company

前端框架选择关键点

选择合适的企业级前端框架,需考量框架的规模、灵活性、离线支持、服务器端渲染以及成熟度等因素。 实践经验至关重要,作者团队曾使用Aurelia和React构建身份验证页面进行评估。

最终选择React,主要基于其成熟度、社区支持和易于招聘。Angular 2因未能满足大部分选择标准而被淘汰。Vue和Aurelia表现出色,也符合要求,但招聘经验丰富的开发者成为最终决定性因素。

How to Choose the Right Front-end Framework for Your Company 在评估新加坡员工福利初创公司CXA集团的核心网络平台时,我们决定放弃老化的现有架构,从头重建前端。平台面临的挑战之一是创建一个在CXA集团遍布亚洲的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应用程序无需实时或稳定的互联网连接即可运行成为可能。在我们的团队中,我们在这方面还没有太多经验,除了确认所有评估的框架都提供某种形式的离线支持外,我们没有深入研究。

轻量级

发送到客户端的代码字节大小对浏览器性能有很大影响,这既包括带宽也包括处理器时间。随着自定义代码和第三方库的添加,字节大小只会越来越大,因此从小处着手至关重要。CXA集团的目标市场延伸到带宽非常宝贵的国家,因此向客户交付尽可能少的代码至关重要。

由于缺乏反映生产配置的硬数据,我们查看了核心库的大小,以至少对我们将面临的情况有所了解。实际的生产大小比这里显示的要大。

Vue的开发人员已经尽最大努力将他们的核心库缩小到令人印象深刻的23 KB。React和Aurelia位于中间位置(大约分别为42 KB和64 KB),而Angular 2仍然是一个重量级选手,超过143 KB(包括用于状态管理的RxJS)。

实际上,Vue、Aurelia和React的生产版本彼此之间非常接近,可以考虑在内。Angular 2再次以错误的方式脱颖而出。

服务器端渲染

早期的单页应用程序(SPA)框架遵循将所有代码发送到客户端的模型。这意味着页面的初始渲染留给客户端,并且直接导致初始页面加载速度缓慢。SPA中服务器端渲染的概念将初始渲染的负担放在服务器上,允许在该渲染之后延迟加载所有其他内容。

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

成熟度

在为企业级网站选择框架时,广泛的社区支持、稳定性和招聘能力非常重要的因素。很难推测任何框架在三年后是否仍然受支持,但我们决定查看每个框架的当前健康状况以做出决定。

查看框架的初始公开发布日期让我们了解每个框架的稳健性。至少在理论上,较旧的库应该具有更好的功能范围和更少的重大错误。

React轻松获胜,其首次公开发布是在2013年3月。尽管Vue最初于2015年10月发布,但直到2016年9月发布版本2才达到顶峰。Aurelia是一个新手,于2016年8月达到1.0版。

Angular 2很有趣:它与版本1有很大不同,实际上,它于2016年9月首次发布。

这项评估的一部分包括深入研究每个库的开发历史,而不仅仅是发布日期本身。漫长而稳定的开发历史——即使是在测试版中——当然也增强了信心。

各种团队成员一直在关注候选框架的开发,这让我们至少对每个框架的整体稳定性有所了解。在我们审查的所有框架中,Angular 2 问题重重的开发历史脱颖而出,存在重大的重大更改和不明确的发布日期。该框架最终发布了最终版本,但在过程中确实很混乱。

成熟度的最终关键方面(如上所述)是招聘经验丰富的员工的能力。鉴于我们的团队在评估的框架方面的经验有限以及我们面临的激进时间表,我们希望招聘经验丰富的开发人员。

然而,招聘具有特定经验的人员可能会受到限制,但在像我们这样的较大项目中确实会产生影响。我们在此阶段淘汰了Angular 2,因为它未能满足我们之前的许多要求。

对于剩余的框架,我们首先搜索了不同的求职网站,并为每个框架发布了单独的招聘广告。我们没有找到Aurelia或Vue的招聘广告,也没有收到任何申请。相比之下,我们发现有几份React工作机会,并且我们收到了许多高质量的申请。

其他功能

我们列表中的其余功能——开发人员工具和单元测试支持——在我们查看的所有框架中都提供。如果没有可靠的开发人员工具,调试几乎是不可能的,而单元测试对于像我们这样的企业级应用程序来说几乎是必不可少的。

实践经验

任何理论都无法与实践经验相提并论。考虑到这一点,我们选择了满足大多数要求的两个框架——Aurelia和React——并开始并行编码。在此阶段省略Vue没有充分的理由;我们只是没有足够的时间来评估。

给定的任务是构建身份验证屏幕,使其与我们现有应用程序的基本功能匹配:登录、调用API和建立会话。两位团队成员分别分配了一个框架,并被给予一个日历周的时间来查看他们可以构建的内容。

Aurelia演示更完整,部分原因在于更简单的设置过程。在选择每个部分所做的工作之后,我们确实感觉我们对React堆栈内部的内容有了更好的理解。Aurelia在初始设置的简易性方面仍然轻松获胜。

我们无法仅根据实践编码得出任何重要的结论。也许唯一令人惊讶的是代码有多么相似:这很大程度上要归功于ECMAScript 6中引入的结构更改,这两个框架都使用了ECMAScript 6。

结果

最终,我们的选择是React;最重要的是,它选择了其成熟度、社区支持和易于招聘。虽然React是我们标准的明显赢家,但很高兴看到我们所查看的竞争框架中存在如此高质量的框架。

Vue和Aurelia被证明是紧随其后的竞争对手。Vue凭借更完整的功能列表略微领先,但鉴于我们的要求,任何一个都可能很好地服务。如果我们没有时间压力,招聘就不那么重要了,我们会将我们的实践工作扩展到包括Vue。

Angular 2未能满足我们的大部分选择标准而令人失望。尽管它有很多优点,但它显然不适合我们。

在选择React并开始构建我们的项目后,我们不太可能很快再次进行这样的评估。至于你,你会在我们的列表中添加哪些标准?我们错过了什么,我们本可以做得更好?我期待您的评论和建议。

本文由Stuart Mitchell、Ralph Mason和Vildan Softic同行评审。感谢所有SitePoint的同行评审员,使SitePoint的内容达到最佳状态!

选择适合您公司的正确前端框架的常见问题

选择适合我公司的前端框架时,需要考虑哪些关键因素?

为您的公司选择前端框架时,您应该考虑几个关键因素。首先,考虑项目需求。不同的框架具有不同的优缺点,因此选择一个与您的项目需求相符的框架非常重要。其次,考虑学习曲线。有些框架比其他框架更容易学习,这会影响开发速度。第三,考虑社区和支持。强大的社区可以在您遇到问题时提供宝贵的资源和帮助。最后,考虑框架的性能和大小。轻量级、高性能的框架可以带来更好的用户体验。

前端框架的大小如何影响其性能?

前端框架的大小会严重影响其性能。较大的框架通常带有更多功能和功能,但加载和运行速度也可能较慢。这可能会导致较差的用户体验,尤其是在较慢的互联网连接或功能较弱的设备上。另一方面,较小的框架通常更快、更高效,但它们可能缺乏某些功能或功能。因此,根据您的项目需求平衡框架的大小和性能非常重要。

一些流行的前端框架及其优势是什么?

有许多流行的前端框架,每个框架都有其自身的优势。例如,React以其虚拟DOM和高性能而闻名,使其成为复杂动态Web应用程序的良好选择。另一方面,Angular是一个功能齐全的框架,其中包含构建Web应用程序所需的一切,使其成为大型项目的良好选择。Vue.js以其简单易用而闻名,使其成为小型项目或前端框架新手开发人员的良好选择。

选择前端框架时,社区支持有多重要?

选择前端框架时,社区支持非常重要。强大的社区可以提供丰富的资源,包括教程、文档和论坛,您可以在其中提问并获得帮助。此外,大型社区通常表明该框架很流行且被广泛使用,这可能导致更频繁的更新和改进。

我可以在单个项目中使用多个前端框架吗?

虽然从技术上讲可以在单个项目中使用多个前端框架,但这通常不建议这样做。每个框架都有自己的做事方式,混合它们会导致混乱和复杂性。相反,通常最好选择最适合您的项目需求的框架并坚持使用它。

前端框架的学习曲线如何影响项目开发?

前端框架的学习曲线会严重影响项目开发。学习曲线陡峭的框架可能需要更长的时间才能掌握,这可能会延迟开发的开始。另一方面,学习曲线平缓的框架可以让您更快地开始开发。但是,易于学习不应该是选择框架的唯一因素。还必须考虑框架的功能以及它与项目需求的匹配程度。

前端框架在Web开发中的作用是什么?

前端框架在Web开发中起着至关重要的作用。它为代码提供了结构,使其更易于维护和扩展。它还为常见任务提供预先编写的代码,从而加快开发过程。此外,前端框架通常包括用于测试和调试的工具,从而更容易确保代码的质量。

我应该多久更新一次我使用的前端框架?

保持前端框架最新非常重要。更新通常包括错误修复、性能改进和新功能。但是,更新框架也可能会引入破坏现有代码的更改,因此在更新后彻底测试您的应用程序非常重要。一般来说,您应该在发布新的稳定版本后立即更新您的框架。

如何在整体式和微型前端框架之间做出决定?

整体式和微型前端框架之间的决定取决于您的项目需求。整体式框架在一个包中提供您需要的一切,这可以简化开发,但也可能包含不必要的功能。另一方面,微型框架只提供基础知识,允许您只添加所需的功能。这可能导致更轻量、更高效的应用程序,但它也可能需要更多工作来设置和维护。

有哪些资源可以了解更多关于前端框架的信息?

有许多资源可用于了解更多关于前端框架的信息。在线教程、文档和课程是一个很好的起点。Stack Overflow和GitHub等网站也可以提供宝贵的见解和示例。此外,许多框架都有自己的社区,您可以在其中提问并向其他开发人员学习。

以上是如何为公司选择右前端框架的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板