【51CTO.com快译】 当企业管理者要求将数据导入一套拥有海量访问者的网站时,我们可以从数十种选项中挑选相关解决方案,从而快速完成任务并实现业务交付。过去,大多数处理任务都需要在服务器端完成,但时至今日相当一部分繁重的工作开始由客户端负责执行。凭借着充裕的施展空间,如今我们已经能够在客户端上实现更为紧凑且交互性更高的使用体验。
目前市面上存在众多用于客户端代码的工具,负责实现数据部署以及与用户之间的交互机制。Angular与React无疑在交付复杂的、数据驱动型Web应用与网站领域扮演着核心角色。然而,由于二者实际提供的方法有所区别,因此程序员之间也针对这种差异爆发了旷日持久的争论与派系划分。
那么Angular是否正是您所在团队的***选项?或者说React才更适合您的下一个项目?要正确回答这个问题,我们当从细处着眼加以考量并最终作出决断。
定位
Angular的优势所在:作为一套完整框架
在利用Angular启动项目时,我们的大部分CRUD工作实际已经得以完成,这是因为此套框架内置有大量数据对象的创建、更新与删除机制。大家需要的只是提供对象以及对应字段专有名称; 接下来使用CSS规则对其加以显示。这套框架本身会处理对字段中数据的创建与操作。换句话来说,Angular是一套完整框架,类似于一辆只待您直接驾驶的汽车。
React的优势所在:“仅仅”只是一套资源库
React项目的支持者们普遍强调其只是一套资源库——即多项例程的一套集合,负责将数据显示在屏幕之上。然而,每一个JavaScript文件不都在浏览器上扮演着同样的角色吗?事实上,所谓只是一套资源库所代表的真正含义,在于React仅代表一套工具,而不会对您构建页面的意图作出过多假设。React不会提供完整的视图,但会为大家提供快速有效建立预期视图的手段。对于那些不需要预先包装好的视图模板的用户而言,他们只需要一点点帮助——即拥有一套资源库,在这方面React的表现堪称伟大。
Angular的优势所在:其架构可自上而下实现定制
二者之间另一项需要掌握的显著差异在于,Angular已经内置有大量现成的架构选项。大家的工作只是发现这些架构并对其加以定制。Angular程序员从宏观角度出发,向自己的设计模板中添加大量细节。如果各位希望使用标准的Angular结构,则可直接享受由这套框架提供的各种便利。
React的优势所在:具备良好的灵活性以从零开始完成构建
React程序员通常认为自己是在利用React对自身开发工作加以支持。这一比喻也许有点冒犯之意,毕竟编码工作领域不应存在孰高孰低的观念,不过这也在一定程度上表达了Angular与React之间的差异。React程序员会不断向其中添加元素,直到完成自己的应用成果。而如果想来点特别的设计,利用React则可直接进行构建,而无需打破Angular之类框架中的预设结构。
支持的语言
Angular的优势所在:TypeScript
Angular采用一款JavaScript的变体方案,即TypeScript,之所以得名是因为其能够将强大的类型检查机制与JS的通用结构及方法加以结合。这类似于为我们的裤子加上吊带。当TypeScript代码被编译为JS形式以进行部署时,其中的全部变量类型定义都会被清除。这意味着投入运行之前,所有错误都会被发现并予以标记。当然,大家并不一定非要使用TypeScript,但大多数开发者仍然对其赞扬有加,甚至将其视为一种传统而非硬性要求。当然,TypeScript的介入也让我们的代码变得更加简洁与安全。
React的优势所在:标准 JavaScript
React立足于标准Javascript构建完成,因此大家可以利用其实现标准JavaScript。不过如果愿意,用户也完全能够在其中掺杂TypeScript。由于TypeScript代码随后会被编译为JS形式,因此整个过程并不会出现问题。选择权在您。
Angular的优势所在:HTML,混合一部分JavaScript
Angular开发人员首先创建的往往是HTML。大家页面中的多个部分利用标签进行拼写,而后再通过Angular代码实现构建。开发人员多数认为Angular的主要载体为HTML,并在必要时混合一部分JavaScript。这通常使得设计师及其他使用者能够更轻松地访问HTML标签,而在非必要时不涉及复杂的JavaScript。用户可以以HTML的方式进行思考,并仅有需要时稍稍触及一点JavaScript代码。如果大家是一位倾向于优先考虑HTML的Web开发人员,则Angular能够让页面成为一套易于上手的HTML标签集合,并引入一点点JavaScript作为处理杂务的工作小精灵。
React的优势所在:JavaScript,混合一部分HTML
React应用的内核实际上属于一款JavaScript程序,并有能力显示负责定义显示效果的HTML。如果大家需要指定任何HTML,则可将其提交至JS代码当中,并在一切准备就绪之后由JS负责发布这些HTML剪贴元素。这意味着热爱JS的开发人员能够更为轻松地完成相关工作。具体来讲,React的使用感受更像是一种自然的应用程序开发过程,而非单纯使用标记语言。如果大家拥有程序员型思维,则React的预设使用方式肯定更合您的胃口。在这里,我们编写函数并传递数据结构,而神奇的HTML则会由后端流向浏览器。总而言之,这就是那种最典型的程序编写机制。
编程方式
Angular的优势所在:声明式编程
一部分编程语言专家认为,“声明性”语言使得程序员能够表达其所需要实现的效果,而其余工作则由语言本身负责完成。在HTML情况之下,这意味着程序员能够使用各类标签(例如<h1>, <ul>, <p>)指定文档中的各个部分(例如标题、列表、段落),并由浏览器计算并得出最终结果,从而在屏幕上给出正确的显示内容。
React的优势所在:命令式编程
以C、Java以及JS为代表的各类经典语言被统称为命令式语言。具体来讲,我们需要告知计算机应执行哪些基本指令,并以怎样的顺序加以执行。虽然在定义层面仍有一定争议,但可以肯定的是命令式编程的定位较声明式编程更低。凭借着JS作为基础,任何了解经典编码传统的开发者都能够在React当中找到熟悉的感常见。
Angular的优势所在:更多附加HTML元素
HTML本身就是一种良好的标准,类似于本田旗下的思域制造车间。但如果大家希望能够别出心裁得多来点花样,则Angular也提供更多附加HTML元素以供选择——类似于汽车发烧友会在自己的思域上增加氮气加速系统或者加装宽胎以增加肌肉感。Angular包含多项面向HTML标签的附加属性,其可最终由Angular解析并用以定义您的应用。大家并不需要实际编写循环:您可以向标记当中添加ng-repeat指令,其它的工作则由Angular负责执行。即然决定创造一些新的成果,为什么不引入点更激动人心的附加元素?
React的优势所在:纯粹的JavaScript
React程序员喜欢强调他们所编写的是纯粹的JS代码,其中不存在任何可能令其他人感到费解的关键字或者特殊功能。这意味着即使是编程新手,也仅仅需要学习JS的标准函数名及数据结构即可了解React代码的内容。另外,由于不存在任何新型功能(及混淆),我们亦能够更轻松地剥离其中部分代码并将其复用于其它项目。
实现方式
Angular的优势所在:新的实现途径
学习Angular的过程往往会给人一种重生或者全新开始的感觉。Angular框架提供一个全新的世界,允许大家在这里创建各类精彩的应用程序。即使大家已经了解了HTML与JS,也必须学习如何使用Angular指令以正确完成预期的操作。虽然这种新的学习要求对部分人来讲是种负担,但大多数开发者仍然乐于稍微锻炼自己的大脑以保持新鲜的工作心态。
React的优势所在:更加传统
React更像是一种对旧有道路的延续,而非对新途径的开辟。如果大家了解JS,即可轻松利用其编写更多JS代码并顺利实现预期功能。诚然,我们同样需要了解React API及其数据的正确传递方式,但这一切对于熟知JS的程序员朋友而言绝不是什么问题——换言之,我们只需要适应略有不同的外观、新的函数调用与API。
宏观视角:为何不二者兼有?
Angular与React都是极好的方案选项——那么我们还为何非要进行选择?二者只是在以不同的方式进行网页组建,而绝不像物质与反物质那样水火不容。举例来说,ng-React就完全能够在Angular当中使用React组件。按照这样的思路作为指导,我们大可能针对应用程序中的各类需求做出更为具体的选择。
***需要强调的是,Angular与React之间其实并没有那么严重的分歧。真正的挑战在于如何设计您的Web应用程序、规划布局并决定每一次点击所触发的结果。真正复杂的是如何构思您的应用程序,并找到良好的用户交互方式。因此,虽然Angular与React承担起了在屏幕上显示组件内容、收集输入结果并将其发送回服务器等任务,但开发成果的最终效果仍然取决于您自己。
原文标题:Angular vs. React: An epic battle for developer mind share
原文作者:Peter Wayner
【51CTO译稿,合作站点转载请注明原文译者和出处为51CTO.com】