From 1e5ce5a28bf34959bc2408252a2bb2c4850f340d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zz=E6=8B=9B=E9=94=A6?= <71975958+zenblo@users.noreply.github.com> Date: Mon, 15 Mar 2021 22:57:58 +0800 Subject: [PATCH 1/9] =?UTF-8?q?translation=20by=20Zz=E6=8B=9B=E9=94=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...-vs-Vue-Which-Framework-is-Best-in-2021.md | 86 +++++++++---------- 1 file changed, 43 insertions(+), 43 deletions(-) mode change 100644 => 100755 article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md diff --git a/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md b/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md old mode 100644 new mode 100755 index b340dfeb079..06bfeaf36b2 --- a/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md +++ b/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md @@ -2,61 +2,61 @@ > * 原文作者:[Sourabh Nagar](https://dzone.com/users/3456681/chapter247.html) > * 译文出自:[掘金翻译计划](https://github.com/xitu/gold-miner) > * 本文永久链接:[https://github.com/xitu/gold-miner/blob/master/article/2021/Angular-vs-React-vs-Vue:-Which-Framework-is-Best-in-2021.md](https://github.com/xitu/gold-miner/blob/master/article/2021/Angular-vs-React-vs-Vue:-Which-Framework-is-Best-in-2021.md) -> * 译者: +> * 译者:[zenblo](https://github.com/zenblo) > * 校对者: -# Angular vs. React vs. Vue: Which Framework is Best in 2021? -> One is a UI library (React), another is a seasoned front-end framework (Angular), and the youngest among them (Vue) may be termed as a progressive framework. +# Angular vs. React vs. Vue:2021 年哪个框架最好? +> 一个是 UI 库(React),另一个是成熟的前端框架(Angular),而其中最年轻的(Vue)则可以称之为渐进式框架。 -You may be a **React developer,** a Vue developer, or an Angular developer specializing only in these technologies. Still, you cannot ignore the constant comparison that the development community keeps making. And for good reason. One is a UI library (React), another is a seasoned full-fledged front-end framework (Angular), and the youngest among them (Vue) may be termed as a progressive framework. Each of these possesses some unique benefits and performance metrics that compel people to analyze the three. +你可能是一个 React 开发者,一个 Vue 开发者,或者是一个只专注于技术的 Angular 开发者。不过,你还是不能忽视开发社区不断进行的框架比较。有充分的理由认为:一个是 UI 库(React),另一个是成熟的前端框架(Angular),而其中最年轻的(Vue)则可以称之为渐进式框架。每一个框架都拥有一些独特的优势和性能指标,让人们不得不对这三种框架进行对比分析。 -Each of these frameworks is component-based and facilitates the rapid creation of UI features. They can be used interchangeably, well, almost for building front-end applications. However, they are not 100% the same. +这几个框架都是基于组件的,有利于快速创建 UI 功能。它们可以替代使用,都可以用于构建前端应用。然而,它们并非 100% 相同。 -This is why we decided to create a short guide for you but, most importantly, a structure for you to help decide on technologies in the future as well. +这就是为什么我们决定为你创建一个简短的指南,但最重要的是,为你提供一个参考,帮助你在未来进行技术选择。 -Let’s dig in. +让我们开始吧! -# **License** +## **许可证** -As obvious as it may sound, make sure to thoroughly check its license before using an open-source framework or library. Luckily, React, Angular, and Vue all use the [MIT license](https://opensource.org/licenses/MIT), which is bliss because it provides limited restrictions on reuse, even in proprietary software. However, always go the extra mile and understand the implications of the license before using any framework or software. +当然,在使用一个开源框架或库之前,一定要彻底检查许可证。幸运的是,React、Angular 和 Vue 都使用 [MIT 许可证](https://opensource.org/licenses/MIT)。它提供了有限的重用限制,甚至可以在专有软件中使用。在使用任何框架或软件之前,一定要留心,注意了解许可证的内容。 -# ***Architecture*** +## **架构设计** -# **Angular** +### **Angular** -Angular framework belongs to the MEAN stack, which is today the hottest technology stack for startups. Angular is a complete framework for web application development based on TypeScript and is mainly used for building single-page web applications (SPAs). +Angular 框架属于 MEAN 框架,是如今创业公司最热门的技术栈。Angular 是一个完整的基于 TypeScript 的 Web 应用开发框架,主要用于构建单页 Web 应用(SPA)。 -Unlike AngularJS — the original framework, Angular 2 doesn’t have a strict association with MV*-patterns because it is component-based. The way Angular is structured, there are Modules, Components, and Services. +与AngularJS —— 早期的框架不同,Angular2 是基于组件的,与 MV* 模式没有什么关联。Angular 的结构方式包括模块、组件和服务。 -In the Angular framework, each component has a Class or a Template that defines the application logic and MetaData (Decorators). This metadata of the component provides guidance about where the building blocks needed to create and present its view are. +在 Angular 框架中,每个组件都有一个类或模板,定义了应用逻辑和 MetaData(装饰器)。组件的这些元数据为创建和呈现其视图所需的构件在哪里提供了指引。 -Another important factor in the Angular architecture is that the templates are written in HTML. They may also include Angular template syntax with special directives to output reactive data and may render multiple elements. +Angular 架构的另一个重要因素是,模板是用 HTML 编写的。它们还可能包含 Angular 模板语法,并带有特殊指令以输出响应式数据,并且可能渲染多个元素。 -Services — a distinct element of Angular applications — are used by Components for delegating business-logic tasks such as fetching data or validating input. While using Services is not strictly enforced, it is always wiser to structure apps as a set of disparate services that are reusable. +服务 —— Angular 应用中的一个独特元素 —— 被 Components 用于委托业务逻辑任务,如获取数据或验证输入。虽然使用服务并没有严格执行,但是将应用程序结构作为一组可重用的不同服务则是比较明智的。 -# **React** +### **React** -React is an open-source, front-end library primarily used for developing user interfaces. This flexible front-end solution doesn’t enforce a specific project structure. A React developer may start using it with just a few lines of code. +React 是一个开源的前端库,主要用于开发用户界面。这种灵活的前端解决方案并不强制执行特定的项目结构。一个 React 开发者可能只需要几行代码就可以开始使用它。 -React is based on JavaScript, but for the most part, it is combined with JSX (JavaScript XML), which is a syntax extension that allows a developer to create elements containing HTML and JavaScript at the same time. Effectively, anything that a developer can create with JSX can also be created with the React JavaScript API. React Elements are more powerful than DOM elements and are the smallest building blocks of React apps. +React 是基于 JavaScript 的,但在大多数情况下,它与 JSX(JavaScript XML)相结合。JSX 是一种语法扩展,允许开发人员同时创建包含 HTML 和 JavaScript 的元素。实际上,开发者可以用 JSX 创建的任何东西也可以用 `React JavaScript API` 创建。React 元素比 DOM 元素更强大,是 React 应用的最小组件。 -React components are building blocks that determine independent and reusable pieces to be used throughout the web application. +React 组件是一种构建模块,它决定了在整个 Web 应用中使用独立和可重用的组件。 -# **Vue** +### **Vue** -Used for developing user interfaces and SPAs, Vue is an open-source Model-View-View-Model front-end JS library. Called a progressive framework, it is used with other tools for front-end development. Vue’s popularity is owing to its versatility, high performance, and its optimal user experience on a web application. +用于开发用户界面和单页 Web 应用,Vue 是一个开源的 `Model-View-View-Model` 前端 JavaScript 库,被称为渐进式框架。Vue 与其它工具一起用于前端开发。Vue 的通用性、高性能和它在 Web 应用程序上的最佳用户体验成就了它的流行。 -With Vue, a developer mostly works on the ViewModel layer to make sure that the application data is processed in a manner that allows the framework to render an up-to-date view. +使用 Vue 时,开发者主要在 ViewModel 层上工作,以确保应用数据的处理方式能让框架呈现最新的视图。 -Vue’s templating syntax combines recognizable HTML with special directives and features. The syntax lets a developer create View components. +Vue 的模板语法将可识别的 HTML 与特殊的指令和功能相结合。该语法允许开发人员创建 View 组件。 -Now Components in Vue are reusable, self-contained, and small. The SFCs or Single File Components with the extension .vue have HTML, JavaScript, and CSS so that all the relevant codes stay in one file. +现在 Vue 中的组件是小巧、自成一体和可重用的。系统文件检查器(SFC)或扩展名为 .vue 的单文件组件包含 HTML、JavaScript 和 CSS,因此所有相关代码都留在一个文件中。 -In larger Vue.js projects, SFCs are usually recommended to organize code. To transpile SFCs into working JavaScript code, you need tools like Webpack or Browserify. +在大型的 Vue.js 项目中,通常推荐使用 SFC 来组织代码。要将 SFC 移植到工作的 JavaScript 代码中,你需要 Webpack 或 Browserify 这样的构建工具。 -# ***Purpose and Scope*** +## **目标和范围** -# **Angular** +### **Angular** Angular is best suitable for large-scale and advanced projects. These may include but not be limited to: @@ -65,7 +65,7 @@ Angular is best suitable for large-scale and advanced projects. These may includ - Building dynamic content-based web designs. - Creating large enterprise application that needs complex infrastructure. -# **React** +### **React** React comes from the family of the MERN stack — a technology stack known for building sophisticated business applications. React becomes a powerful tool when used along with Redux or MobX, or any flux patterned library. React is best suited for the following projects: @@ -73,7 +73,7 @@ React comes from the family of the MERN stack — a technology stack known for b - For projects that have scope for scale and growth because React components have declarative nature that makes way for easy handling around such complex structures. - When UI is the center of the web app. -# **Vue** +### **Vue** Vue is best suited for solving short-term problems because Vue has an affordable and quick learning curve. It can integrate with existing code blocks easily.  Vue may be required when: @@ -82,9 +82,9 @@ Vue is best suited for solving short-term problems because Vue has an affordable - Applications requiring seamless integration with multiple other apps. - Faster launch of MVP. -# ***Performance and Development*** +## **表现和发展** -# **Angular** +### **Angular** Some highlights in Angular’s performance are: @@ -97,7 +97,7 @@ Some highlights in Angular’s performance are: - Fully customizable designs. - Facilitates the compiling of HTML and TypeScript into JavaScript — leading to the faster compilation of the code much before the browser starts to load the web app. -# **React** +### **React** React is comparable to Vue when it comes to performance because both have the same architecture, i.e., interaction with DOM. The performance of React web development can be assessed as follows: @@ -106,7 +106,7 @@ React is comparable to Vue when it comes to performance because both have the sa - It can be easily tested and monitored. - Best for complex applications that require frequent changes. -# **Vue** +### **Vue** Incredibly fast is the phrase that’s most attached with Vue. Some of its performance metrics are: @@ -114,9 +114,9 @@ Incredibly fast is the phrase that’s most attached with Vue. Some of its perfo - Efficient and sophisticated single-page application. - Versatility due to high-end features. -# ***Benefits of Angular, React, Vue*** +## **各自的优点** -# **Angular** +### **Angular** Well-documented understanding of templates, forms, bootstrapping or details about architecture, components, and interaction between components: @@ -125,22 +125,22 @@ Well-documented understanding of templates, forms, bootstrapping or details abou - Built-in module system. - Significant reduction of the initial load time of a webpage. -**Popular applications built using Angular:** +**使用 Angular 构建的流行应用程序:** Youtube TV | PayPal | Gmail | Forbes | Google Cloud -# **React** +### **React** - Flexible code due to its modular structure. Saves time and cost. - Facilitates high performance of complex apps. - Easier to maintain code during React front-end development. - Supports mobile native applications for both Android and iOS platforms. -**Popular applications built with React:** +**使用 React 构建的流行应用程序:** Tesla | AirBnB | CNN | Nike | Udemy | Linked-in -# **Vue** +### **Vue** - Small size facilitates easy installation and download. - When properly harnessed, Vue can be reused. @@ -150,15 +150,15 @@ Tesla | AirBnB | CNN | Nike | Udemy | Linked-in - Proven compatibility and flexibility. - The codebase remains light regardless of the scaling of the application. -**Popular applications built with Vue:** +**使用 Vue 构建的流行应用程序:** Gitlab | Spendesk | Behance | 9Gag | Wizzair | Nintendo -# **Community Support and Learning Curve** +### **社区支持与学习曲线** React JS library is created by Facebook that enjoys a large community of coders and developers offering solutions to the biggest problems. Angular has a large community of developers who have answers to the most challenging and weirdest cases. Vue has a decent ecosystem and enjoys all the right characteristics of React library and Angular framework. When it comes to the learning curve, React is the quickest to learn and adapt, followed by Vue and Angular. -# **Final Thoughts** +## **本文总结** From the point of view of front-end development, React will be the quickest to learn in 2021. Both Vue and React are lightweight, intuitive, and perform flawlessly. From 0301455477b0946d74a388483f9b11ef8e23fda8 Mon Sep 17 00:00:00 2001 From: Hoarfroster Bot Date: Mon, 15 Mar 2021 23:04:57 +0800 Subject: [PATCH 2/9] fix format --- ...ngular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md b/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md index 06bfeaf36b2..b7dd1fba76a 100755 --- a/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md +++ b/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md @@ -6,6 +6,7 @@ > * 校对者: # Angular vs. React vs. Vue:2021 年哪个框架最好? + > 一个是 UI 库(React),另一个是成熟的前端框架(Angular),而其中最年轻的(Vue)则可以称之为渐进式框架。 你可能是一个 React 开发者,一个 Vue 开发者,或者是一个只专注于技术的 Angular 开发者。不过,你还是不能忽视开发社区不断进行的框架比较。有充分的理由认为:一个是 UI 库(React),另一个是成熟的前端框架(Angular),而其中最年轻的(Vue)则可以称之为渐进式框架。每一个框架都拥有一些独特的优势和性能指标,让人们不得不对这三种框架进行对比分析。 @@ -75,7 +76,7 @@ React comes from the family of the MERN stack — a technology stack known for b ### **Vue** -Vue is best suited for solving short-term problems because Vue has an affordable and quick learning curve. It can integrate with existing code blocks easily.  Vue may be required when: +Vue is best suited for solving short-term problems because Vue has an affordable and quick learning curve. It can integrate with existing code blocks easily. Vue may be required when: - You need development projects of web apps with animations or interactive elements. - Prototyping without the need for advanced skills. @@ -166,4 +167,4 @@ From the point of view of front-end development, React will be the quickest to l --- -> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区,文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[区块链](https://github.com/xitu/gold-miner#区块链)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计)、[人工智能](https://github.com/xitu/gold-miner#人工智能)等领域,想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)、[官方微博](http://weibo.com/juejinfanyi)、[知乎专栏](https://zhuanlan.zhihu.com/juejinfanyi)。 \ No newline at end of file +> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区,文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[区块链](https://github.com/xitu/gold-miner#区块链)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计)、[人工智能](https://github.com/xitu/gold-miner#人工智能)等领域,想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)、[官方微博](http://weibo.com/juejinfanyi)、[知乎专栏](https://zhuanlan.zhihu.com/juejinfanyi)。 From 8f7123fbb6dc6b0c857873cbd0c29e6beb333a86 Mon Sep 17 00:00:00 2001 From: Hoarfroster Bot Date: Mon, 15 Mar 2021 23:26:54 +0800 Subject: [PATCH 3/9] update translation --- ...-vs-Vue-Which-Framework-is-Best-in-2021.md | 104 +++++++++--------- 1 file changed, 52 insertions(+), 52 deletions(-) diff --git a/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md b/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md index b7dd1fba76a..51bb3fe22a2 100755 --- a/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md +++ b/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md @@ -2,8 +2,8 @@ > * 原文作者:[Sourabh Nagar](https://dzone.com/users/3456681/chapter247.html) > * 译文出自:[掘金翻译计划](https://github.com/xitu/gold-miner) > * 本文永久链接:[https://github.com/xitu/gold-miner/blob/master/article/2021/Angular-vs-React-vs-Vue:-Which-Framework-is-Best-in-2021.md](https://github.com/xitu/gold-miner/blob/master/article/2021/Angular-vs-React-vs-Vue:-Which-Framework-is-Best-in-2021.md) -> * 译者:[zenblo](https://github.com/zenblo) -> * 校对者: +> * 译者:[zenblo](https://github.com/zenblo)、[霜羽 Hoarfroster](https://github.com/PassionPenguin) +> * 校对者:[霜羽 Hoarfroster](https://github.com/PassionPenguin) # Angular vs. React vs. Vue:2021 年哪个框架最好? @@ -59,72 +59,72 @@ Vue 的模板语法将可识别的 HTML 与特殊的指令和功能相结合。 ### **Angular** -Angular is best suitable for large-scale and advanced projects. These may include but not be limited to: +Angular 最适合大型和高级项目。这些可能包括但不限于: -- Developing Progressive Web App (PWA). -- Redesigning of a website application. -- Building dynamic content-based web designs. -- Creating large enterprise application that needs complex infrastructure. +* 开发渐进式 Web 应用程序(PWA)。 +* 重新设计网站应用程序。 +* 建立基于内容的动态网页设计。 +* 创建需要复杂基础架构的大型企业应用程序。 ### **React** -React comes from the family of the MERN stack — a technology stack known for building sophisticated business applications. React becomes a powerful tool when used along with Redux or MobX, or any flux patterned library. React is best suited for the following projects: +React 来自 MERN 堆栈家族 —— 一种以构建复杂的业务应用程序而闻名的技术堆栈。当与 Redux 或 MobX 或任何流量模式库一起使用时,React 能够成为强大的工具。React 最适合以下项目: -- For applications that involve many components with navigation items, collapsed/expanded accordion sections, active/inactive states, dynamic inputs, active/inactive buttons, user login, user access permissions, etc. -- For projects that have scope for scale and growth because React components have declarative nature that makes way for easy handling around such complex structures. -- When UI is the center of the web app. +* 对于涉及包含导航项目,折叠或展开的手风琴分节,活动或非活动状态,动态输入,活动或非活动按钮,用户登录,用户访问权限等的许多组件的应用程序。 +* 对于具有规模和增长范围的项目,因为 React 组件具有声明性,因此可以轻松处理此类复杂结构。 +* 当 UI 是网络应用程序的中心时。 ### **Vue** -Vue is best suited for solving short-term problems because Vue has an affordable and quick learning curve. It can integrate with existing code blocks easily. Vue may be required when: +Vue 最适合解决短期问题,因为 Vue 具有可负担且快速的学习曲线。它可以轻松地与现有代码块集成。在以下情况下可能需要 Vue: -- You need development projects of web apps with animations or interactive elements. -- Prototyping without the need for advanced skills. -- Applications requiring seamless integration with multiple other apps. -- Faster launch of MVP. +* 您需要带有动画或交互式元素的 Web 应用程序的开发项目。 +* 无需高级技能即可进行原型制作。 +* 需要与多个其他应用程序无缝集成的应用程序。 +* 更早推出 MVP。 ## **表现和发展** ### **Angular** -Some highlights in Angular’s performance are: +Angular 性能方面的一些亮点包括: -- Has seamless third-party integrations for enhancing the functionality of the product/application. -- Provides a robust collection of components leading to simplified art of writing, altering, and using the code. -- Its 'ahead-of-time-compiler' bestows faster load times and security strength. -- The MVC model helps in curtailing queries in the background by allowing separation of views. -- Facilitates the use of dependency injection as external elements for decoupling components that make way for reusability and ease of management and testing. -- Reduces the initial load time of a webpage by splitting the tasks into logical chunks. -- Fully customizable designs. -- Facilitates the compiling of HTML and TypeScript into JavaScript — leading to the faster compilation of the code much before the browser starts to load the web app. +* 具有无缝的第三方集成,以增强产品或应用程序的功能。 +* 提供强大的组件集合,从而简化了编写,更改和使用代码的过程。 +* 它的“提前编译器”赋予了更快的加载时间和安全性。 +* MVC 模型通过允许视图分离来帮助减少后台查询。 +* 促进将依赖项注入用作将组件解耦的外部元素,从而为可重用性以及简化管理和测试铺平了道路。 +* 通过将任务分成逻辑块来减少网页的初始加载时间。 +* 完全可定制的设计。 +* 便于将 HTML 和 TypeScript 编译为 JavaScript —— 大大加快了代码的编译速度,并将编译提早到远早于浏览器开始加载 Web 应用程序之前。 ### **React** -React is comparable to Vue when it comes to performance because both have the same architecture, i.e., interaction with DOM. The performance of React web development can be assessed as follows: +在性能方面,React 与 Vue 相当,因为两者具有相同的架构,即与 DOM 交互。React Web 开发的性能可以评估如下: -- Supports bundling and tree-shaking — a feature crucial for reducing the end users’ resource loads. -- Offers better control over the project due to one-way data-binding support. -- It can be easily tested and monitored. -- Best for complex applications that require frequent changes. +* 支持捆绑和 Tree-shaking —— 这对于减少最终用户的资源负载至关重要。 +* 由于提供了单向数据绑定支持,因此可以更好地控制项目。 +* 可以轻松测试和监视。 +* 最适合需要频繁更改的复杂应用程序。 ### **Vue** -Incredibly fast is the phrase that’s most attached with Vue. Some of its performance metrics are: +形容 Vue 的最贴切的词组是令人难以置信的快速。它的一些性能指标是: -- Faster learning curve. -- Efficient and sophisticated single-page application. -- Versatility due to high-end features. +* 更快的学习曲线。 +* 单页应用程序高效精密。 +* 具有高端功能,因而它有多功能性。 ## **各自的优点** ### **Angular** -Well-documented understanding of templates, forms, bootstrapping or details about architecture, components, and interaction between components: +有对模板、表单、引导程序或架构、组件以及组件之间交互的完整的文档: -- Smooth two-way data binding. -- MVC architecture. -- Built-in module system. -- Significant reduction of the initial load time of a webpage. +* 平滑的双向数据绑定。 +* MVC 架构。 +* 内置模块系统。 +* 大大减少了网页的初始加载时间。 **使用 Angular 构建的流行应用程序:** @@ -132,10 +132,10 @@ Youtube TV | PayPal | Gmail | Forbes | Google Cloud ### **React** -- Flexible code due to its modular structure. Saves time and cost. -- Facilitates high performance of complex apps. -- Easier to maintain code during React front-end development. -- Supports mobile native applications for both Android and iOS platforms. +* 出于其模块化的结构而使其拥有灵活的代码。节省时间和成本。 +* 助力复杂应用程序的高性能的实现。 +* 使用 React 前端开发能够更容易去做代码维护。 +* 支持适用于 Android 和 iOS 平台的移动端原生应用程序。 **使用 React 构建的流行应用程序:** @@ -143,13 +143,13 @@ Tesla | AirBnB | CNN | Nike | Udemy | Linked-in ### **Vue** -- Small size facilitates easy installation and download. -- When properly harnessed, Vue can be reused. -- Vue.js allows updating of elements in a web page without rendering the whole DOM since it is virtual. -- Requires less optimization. -- Stimulates web application development and allows the experts to separate template-to-virtual DOM from the compiler. -- Proven compatibility and flexibility. -- The codebase remains light regardless of the scaling of the application. +* 体积小巧,便于安装和下载。 +* 倘若我们可以正确利用,我们就可以在多处重用 Vue。 +* Vue.js 允许我们更新网页中的元素,而无需渲染整个 DOM,因为它是虚拟的 DOM。 +* 需要较少的优化。 +* 促进 Web 应用程序的开发,并允许大佬将模板到虚拟 DOM 与编译器分开。 +* 经过验证的兼容性和灵活性。 +* 不管应用程序的规模如何,代码库都不会变。 **使用 Vue 构建的流行应用程序:** @@ -157,11 +157,11 @@ Gitlab | Spendesk | Behance | 9Gag | Wizzair | Nintendo ### **社区支持与学习曲线** -React JS library is created by Facebook that enjoys a large community of coders and developers offering solutions to the biggest problems. Angular has a large community of developers who have answers to the most challenging and weirdest cases. Vue has a decent ecosystem and enjoys all the right characteristics of React library and Angular framework. When it comes to the learning curve, React is the quickest to learn and adapt, followed by Vue and Angular. +React JS 库是由 Facebook 创建的,拥有大量的贡献人员和一个庞大的开发者社区,为最大的问题贡献者他们的方案。Angular 有一个宏大的开发者社区,对最具挑战性和最怪异的案例都有答案。Vue 具有良好的生态系统,并具有 React 库和 Angular 框架的所有正确的特性。说到学习曲线,React 无疑是能够最快学习和适应的,其次是 Vue 和 Angular。 ## **本文总结** -From the point of view of front-end development, React will be the quickest to learn in 2021. Both Vue and React are lightweight, intuitive, and perform flawlessly. +从前端开发的角度来看,React 将是 2021 年能够学得最快的框架,Vue 和 React 都是轻量级且直观的,并且性能完美无缺。 > 如果发现译文存在错误或其他需要改进的地方,欢迎到 [掘金翻译计划](https://github.com/xitu/gold-miner) 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 **本文永久链接** 即为本文在 GitHub 上的 MarkDown 链接。 From 1717b3d375d7ec9d09419cc409edb270e7bd6597 Mon Sep 17 00:00:00 2001 From: Hoarfroster Bot Date: Mon, 15 Mar 2021 23:31:48 +0800 Subject: [PATCH 4/9] for github code review --- .../Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md | 1 - 1 file changed, 1 deletion(-) diff --git a/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md b/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md index 51bb3fe22a2..7f6cc820efd 100755 --- a/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md +++ b/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md @@ -6,7 +6,6 @@ > * 校对者:[霜羽 Hoarfroster](https://github.com/PassionPenguin) # Angular vs. React vs. Vue:2021 年哪个框架最好? - > 一个是 UI 库(React),另一个是成熟的前端框架(Angular),而其中最年轻的(Vue)则可以称之为渐进式框架。 你可能是一个 React 开发者,一个 Vue 开发者,或者是一个只专注于技术的 Angular 开发者。不过,你还是不能忽视开发社区不断进行的框架比较。有充分的理由认为:一个是 UI 库(React),另一个是成熟的前端框架(Angular),而其中最年轻的(Vue)则可以称之为渐进式框架。每一个框架都拥有一些独特的优势和性能指标,让人们不得不对这三种框架进行对比分析。 From 0f4fba4f88163f2785e78cda19e132191b03222d Mon Sep 17 00:00:00 2001 From: Hoarfroster Bot Date: Mon, 15 Mar 2021 23:33:52 +0800 Subject: [PATCH 5/9] update markdown format --- ...-vs-Vue-Which-Framework-is-Best-in-2021.md | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md b/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md index 7f6cc820efd..c5e8f898515 100755 --- a/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md +++ b/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md @@ -16,13 +16,13 @@ 让我们开始吧! -## **许可证** +## 许可证 当然,在使用一个开源框架或库之前,一定要彻底检查许可证。幸运的是,React、Angular 和 Vue 都使用 [MIT 许可证](https://opensource.org/licenses/MIT)。它提供了有限的重用限制,甚至可以在专有软件中使用。在使用任何框架或软件之前,一定要留心,注意了解许可证的内容。 -## **架构设计** +## 架构设计 -### **Angular** +### Angular Angular 框架属于 MEAN 框架,是如今创业公司最热门的技术栈。Angular 是一个完整的基于 TypeScript 的 Web 应用开发框架,主要用于构建单页 Web 应用(SPA)。 @@ -34,7 +34,7 @@ Angular 架构的另一个重要因素是,模板是用 HTML 编写的。它们 服务 —— Angular 应用中的一个独特元素 —— 被 Components 用于委托业务逻辑任务,如获取数据或验证输入。虽然使用服务并没有严格执行,但是将应用程序结构作为一组可重用的不同服务则是比较明智的。 -### **React** +### React React 是一个开源的前端库,主要用于开发用户界面。这种灵活的前端解决方案并不强制执行特定的项目结构。一个 React 开发者可能只需要几行代码就可以开始使用它。 @@ -42,7 +42,7 @@ React 是基于 JavaScript 的,但在大多数情况下,它与 JSX(JavaScr React 组件是一种构建模块,它决定了在整个 Web 应用中使用独立和可重用的组件。 -### **Vue** +### Vue 用于开发用户界面和单页 Web 应用,Vue 是一个开源的 `Model-View-View-Model` 前端 JavaScript 库,被称为渐进式框架。Vue 与其它工具一起用于前端开发。Vue 的通用性、高性能和它在 Web 应用程序上的最佳用户体验成就了它的流行。 @@ -54,9 +54,9 @@ Vue 的模板语法将可识别的 HTML 与特殊的指令和功能相结合。 在大型的 Vue.js 项目中,通常推荐使用 SFC 来组织代码。要将 SFC 移植到工作的 JavaScript 代码中,你需要 Webpack 或 Browserify 这样的构建工具。 -## **目标和范围** +## 目标和范围 -### **Angular** +### Angular Angular 最适合大型和高级项目。这些可能包括但不限于: @@ -65,7 +65,7 @@ Angular 最适合大型和高级项目。这些可能包括但不限于: * 建立基于内容的动态网页设计。 * 创建需要复杂基础架构的大型企业应用程序。 -### **React** +### React React 来自 MERN 堆栈家族 —— 一种以构建复杂的业务应用程序而闻名的技术堆栈。当与 Redux 或 MobX 或任何流量模式库一起使用时,React 能够成为强大的工具。React 最适合以下项目: @@ -73,7 +73,7 @@ React 来自 MERN 堆栈家族 —— 一种以构建复杂的业务应用程序 * 对于具有规模和增长范围的项目,因为 React 组件具有声明性,因此可以轻松处理此类复杂结构。 * 当 UI 是网络应用程序的中心时。 -### **Vue** +### Vue Vue 最适合解决短期问题,因为 Vue 具有可负担且快速的学习曲线。它可以轻松地与现有代码块集成。在以下情况下可能需要 Vue: @@ -82,9 +82,9 @@ Vue 最适合解决短期问题,因为 Vue 具有可负担且快速的学习 * 需要与多个其他应用程序无缝集成的应用程序。 * 更早推出 MVP。 -## **表现和发展** +## 表现和发展 -### **Angular** +### Angular Angular 性能方面的一些亮点包括: @@ -97,7 +97,7 @@ Angular 性能方面的一些亮点包括: * 完全可定制的设计。 * 便于将 HTML 和 TypeScript 编译为 JavaScript —— 大大加快了代码的编译速度,并将编译提早到远早于浏览器开始加载 Web 应用程序之前。 -### **React** +### React 在性能方面,React 与 Vue 相当,因为两者具有相同的架构,即与 DOM 交互。React Web 开发的性能可以评估如下: @@ -106,7 +106,7 @@ Angular 性能方面的一些亮点包括: * 可以轻松测试和监视。 * 最适合需要频繁更改的复杂应用程序。 -### **Vue** +### Vue 形容 Vue 的最贴切的词组是令人难以置信的快速。它的一些性能指标是: @@ -114,9 +114,9 @@ Angular 性能方面的一些亮点包括: * 单页应用程序高效精密。 * 具有高端功能,因而它有多功能性。 -## **各自的优点** +## 各自的优点 -### **Angular** +### Angular 有对模板、表单、引导程序或架构、组件以及组件之间交互的完整的文档: @@ -129,7 +129,7 @@ Angular 性能方面的一些亮点包括: Youtube TV | PayPal | Gmail | Forbes | Google Cloud -### **React** +### React * 出于其模块化的结构而使其拥有灵活的代码。节省时间和成本。 * 助力复杂应用程序的高性能的实现。 @@ -140,7 +140,7 @@ Youtube TV | PayPal | Gmail | Forbes | Google Cloud Tesla | AirBnB | CNN | Nike | Udemy | Linked-in -### **Vue** +### Vue * 体积小巧,便于安装和下载。 * 倘若我们可以正确利用,我们就可以在多处重用 Vue。 @@ -154,11 +154,11 @@ Tesla | AirBnB | CNN | Nike | Udemy | Linked-in Gitlab | Spendesk | Behance | 9Gag | Wizzair | Nintendo -### **社区支持与学习曲线** +### 社区支持与学习曲线 React JS 库是由 Facebook 创建的,拥有大量的贡献人员和一个庞大的开发者社区,为最大的问题贡献者他们的方案。Angular 有一个宏大的开发者社区,对最具挑战性和最怪异的案例都有答案。Vue 具有良好的生态系统,并具有 React 库和 Angular 框架的所有正确的特性。说到学习曲线,React 无疑是能够最快学习和适应的,其次是 Vue 和 Angular。 -## **本文总结** +## 本文总结 从前端开发的角度来看,React 将是 2021 年能够学得最快的框架,Vue 和 React 都是轻量级且直观的,并且性能完美无缺。 From b7c230b72397deb7efbdc1fe5f9e42234371d4ef Mon Sep 17 00:00:00 2001 From: Hoarfroster Bot Date: Mon, 15 Mar 2021 23:41:50 +0800 Subject: [PATCH 6/9] update translation --- ...-vs-Vue-Which-Framework-is-Best-in-2021.md | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md b/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md index c5e8f898515..9782cc1533b 100755 --- a/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md +++ b/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md @@ -8,17 +8,17 @@ # Angular vs. React vs. Vue:2021 年哪个框架最好? > 一个是 UI 库(React),另一个是成熟的前端框架(Angular),而其中最年轻的(Vue)则可以称之为渐进式框架。 -你可能是一个 React 开发者,一个 Vue 开发者,或者是一个只专注于技术的 Angular 开发者。不过,你还是不能忽视开发社区不断进行的框架比较。有充分的理由认为:一个是 UI 库(React),另一个是成熟的前端框架(Angular),而其中最年轻的(Vue)则可以称之为渐进式框架。每一个框架都拥有一些独特的优势和性能指标,让人们不得不对这三种框架进行对比分析。 +你可能是一个 React 开发者,可能是一个 Vue 开发者,也可能是一个只专注于技术的 Angular 开发者。不过,你还是不能忽视开发社区不断进行的框架比较。有充分的理由认为:他们三个框架,一个是 UI 库(React),另一个是成熟的前端框架(Angular),而其中最年轻的(Vue)则可以称之为渐进式框架。每一个框架都拥有一些独特的优势和性能指标。正是这些不可忽略的优势和指标,我们不能不对这三种框架进行对比分析。 -这几个框架都是基于组件的,有利于快速创建 UI 功能。它们可以替代使用,都可以用于构建前端应用。然而,它们并非 100% 相同。 +这几个框架都是基于组件的框架,都有快速创建 UI 的功能。它们之间可以替代使用,也都可以用于构建前端应用。然而它们并非 100% 相同。 -这就是为什么我们决定为你创建一个简短的指南,但最重要的是,为你提供一个参考,帮助你在未来进行技术选择。 +这就是为什么我们决定为你创建一个简短的指南,但最重要的是,为你提供一个参考帮助你在未来进行技术选择。 让我们开始吧! ## 许可证 -当然,在使用一个开源框架或库之前,一定要彻底检查许可证。幸运的是,React、Angular 和 Vue 都使用 [MIT 许可证](https://opensource.org/licenses/MIT)。它提供了有限的重用限制,甚至可以在专有软件中使用。在使用任何框架或软件之前,一定要留心,注意了解许可证的内容。 +当然,在使用一个开源框架或库之前,一定要彻底检查许可证。幸运的是,React、Angular 和 Vue 都使用 [MIT 许可证](https://opensource.org/licenses/MIT)。它提供了有限的重用限制,而且我们甚至还可以在专有软件中使用。在使用任何框架或软件之前,一定要留心,注意了解许可证的内容。 ## 架构设计 @@ -26,56 +26,56 @@ Angular 框架属于 MEAN 框架,是如今创业公司最热门的技术栈。Angular 是一个完整的基于 TypeScript 的 Web 应用开发框架,主要用于构建单页 Web 应用(SPA)。 -与AngularJS —— 早期的框架不同,Angular2 是基于组件的,与 MV* 模式没有什么关联。Angular 的结构方式包括模块、组件和服务。 +与 AngularJS 这一早期的框架不同,Angular2 是基于组件的,与 MV* 模式没有什么关联。Angular 的结构方式包括模块、组件和服务。 在 Angular 框架中,每个组件都有一个类或模板,定义了应用逻辑和 MetaData(装饰器)。组件的这些元数据为创建和呈现其视图所需的构件在哪里提供了指引。 Angular 架构的另一个重要因素是,模板是用 HTML 编写的。它们还可能包含 Angular 模板语法,并带有特殊指令以输出响应式数据,并且可能渲染多个元素。 -服务 —— Angular 应用中的一个独特元素 —— 被 Components 用于委托业务逻辑任务,如获取数据或验证输入。虽然使用服务并没有严格执行,但是将应用程序结构作为一组可重用的不同服务则是比较明智的。 +服务 —— Angular 应用中的一个独特元素,被 Components 用于委托业务逻辑任务,如获取数据或验证输入。虽然使用服务并没有严格执行,但是将应用程序结构作为一组可重用的不同服务则是比较明智的。 ### React React 是一个开源的前端库,主要用于开发用户界面。这种灵活的前端解决方案并不强制执行特定的项目结构。一个 React 开发者可能只需要几行代码就可以开始使用它。 -React 是基于 JavaScript 的,但在大多数情况下,它与 JSX(JavaScript XML)相结合。JSX 是一种语法扩展,允许开发人员同时创建包含 HTML 和 JavaScript 的元素。实际上,开发者可以用 JSX 创建的任何东西也可以用 `React JavaScript API` 创建。React 元素比 DOM 元素更强大,是 React 应用的最小组件。 +React 是基于 JavaScript 的,但在大多数情况下,它与 JSX(JavaScript XML)相结合。JSX 是一种语法扩展,允许开发人员同时创建包含 HTML 和 JavaScript 的元素。实际上,开发者可以用 JSX 创建的任何东西也可以用 `React JavaScript API` 创建。React 元素比 DOM 元素更强大,它们是 React 应用的最小组成部分,即组件。 React 组件是一种构建模块,它决定了在整个 Web 应用中使用独立和可重用的组件。 ### Vue -用于开发用户界面和单页 Web 应用,Vue 是一个开源的 `Model-View-View-Model` 前端 JavaScript 库,被称为渐进式框架。Vue 与其它工具一起用于前端开发。Vue 的通用性、高性能和它在 Web 应用程序上的最佳用户体验成就了它的流行。 +用于开发用户界面和单页 Web 应用,Vue 是一个开源的 `Model-View-View-Model` MVVM 前端 JavaScript 库,被称为渐进式框架。Vue 与其它工具一起用于前端开发。Vue 的通用性、高性能和它在 Web 应用程序上的最佳用户体验成就了它的流行。 使用 Vue 时,开发者主要在 ViewModel 层上工作,以确保应用数据的处理方式能让框架呈现最新的视图。 Vue 的模板语法将可识别的 HTML 与特殊的指令和功能相结合。该语法允许开发人员创建 View 组件。 -现在 Vue 中的组件是小巧、自成一体和可重用的。系统文件检查器(SFC)或扩展名为 .vue 的单文件组件包含 HTML、JavaScript 和 CSS,因此所有相关代码都留在一个文件中。 +现在 Vue 中的组件是小巧、自成一体和可重用的。系统文件检查器(SFC)或扩展名为 `.vue` 的单文件组件包含 HTML、JavaScript 和 CSS,因此所有相关代码都存放在同一个文件中。 -在大型的 Vue.js 项目中,通常推荐使用 SFC 来组织代码。要将 SFC 移植到工作的 JavaScript 代码中,你需要 Webpack 或 Browserify 这样的构建工具。 +在大型的 Vue.js 项目中,我们通常推荐使用 SFC 来组织代码。要将 SFC 移植到工作的 JavaScript 代码中,你需要 Webpack 或 Browserify 这样的构建工具。 -## 目标和范围 +## 适用目标和范围 ### Angular Angular 最适合大型和高级项目。这些可能包括但不限于: -* 开发渐进式 Web 应用程序(PWA)。 -* 重新设计网站应用程序。 -* 建立基于内容的动态网页设计。 -* 创建需要复杂基础架构的大型企业应用程序。 +* 用于开发渐进式 Web 应用程序(PWA)。 +* 用于重新设计网站应用程序。 +* 用于建立基于内容的动态网页设计。 +* 用于创建有着复杂基础架构的大型企业应用程序。 ### React -React 来自 MERN 堆栈家族 —— 一种以构建复杂的业务应用程序而闻名的技术堆栈。当与 Redux 或 MobX 或任何流量模式库一起使用时,React 能够成为强大的工具。React 最适合以下项目: +React 来自 MERN 堆栈家族,一种以构建复杂的业务应用程序而闻名的技术堆栈。当将它与 Redux 或 MobX 或任何流量模式库一起使用时,React 就能够成为强大的工具。React 最适合以下项目: * 对于涉及包含导航项目,折叠或展开的手风琴分节,活动或非活动状态,动态输入,活动或非活动按钮,用户登录,用户访问权限等的许多组件的应用程序。 -* 对于具有规模和增长范围的项目,因为 React 组件具有声明性,因此可以轻松处理此类复杂结构。 +* 对于具有规模和增长范围的项目,因为 React 组件具有声明性,因此它可以轻松处理此类复杂结构。 * 当 UI 是网络应用程序的中心时。 ### Vue -Vue 最适合解决短期问题,因为 Vue 具有可负担且快速的学习曲线。它可以轻松地与现有代码块集成。在以下情况下可能需要 Vue: +因为 Vue 具有可接受且快速的学习曲线,Vue 最适合解决短期的小型的问题。它可以轻松地与现有代码块集成。在以下情况下可能需要 Vue: * 您需要带有动画或交互式元素的 Web 应用程序的开发项目。 * 无需高级技能即可进行原型制作。 @@ -88,13 +88,13 @@ Vue 最适合解决短期问题,因为 Vue 具有可负担且快速的学习 Angular 性能方面的一些亮点包括: -* 具有无缝的第三方集成,以增强产品或应用程序的功能。 +* 有无缝的第三方集成,以增强产品或应用程序的功能。 * 提供强大的组件集合,从而简化了编写,更改和使用代码的过程。 -* 它的“提前编译器”赋予了更快的加载时间和安全性。 +* 它的“提前编译器”赋予了应用程序更快的加载时间和安全性。 * MVC 模型通过允许视图分离来帮助减少后台查询。 * 促进将依赖项注入用作将组件解耦的外部元素,从而为可重用性以及简化管理和测试铺平了道路。 * 通过将任务分成逻辑块来减少网页的初始加载时间。 -* 完全可定制的设计。 +* 可以完全自定义的设计。 * 便于将 HTML 和 TypeScript 编译为 JavaScript —— 大大加快了代码的编译速度,并将编译提早到远早于浏览器开始加载 Web 应用程序之前。 ### React @@ -108,7 +108,7 @@ Angular 性能方面的一些亮点包括: ### Vue -形容 Vue 的最贴切的词组是令人难以置信的快速。它的一些性能指标是: +形容 Vue 的最贴切的词组是 `令人难以置信的快速`。它的一些性能指标是: * 更快的学习曲线。 * 单页应用程序高效精密。 @@ -142,8 +142,8 @@ Tesla | AirBnB | CNN | Nike | Udemy | Linked-in ### Vue -* 体积小巧,便于安装和下载。 -* 倘若我们可以正确利用,我们就可以在多处重用 Vue。 +* 它的体积小巧,便于安装和下载。 +* 倘若我们正确利用,我们就可以在多处重用 Vue。 * Vue.js 允许我们更新网页中的元素,而无需渲染整个 DOM,因为它是虚拟的 DOM。 * 需要较少的优化。 * 促进 Web 应用程序的开发,并允许大佬将模板到虚拟 DOM 与编译器分开。 From 7182a1551b0ea0507c83e44b20c1c40e68011c24 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Tue, 16 Mar 2021 00:13:33 +0800 Subject: [PATCH 7/9] Apply suggestions from code review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Zz招锦 <71975958+zenblo@users.noreply.github.com> --- ...t-vs-Vue-Which-Framework-is-Best-in-2021.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md b/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md index 9782cc1533b..3d7a7f16b0e 100755 --- a/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md +++ b/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md @@ -3,9 +3,9 @@ > * 译文出自:[掘金翻译计划](https://github.com/xitu/gold-miner) > * 本文永久链接:[https://github.com/xitu/gold-miner/blob/master/article/2021/Angular-vs-React-vs-Vue:-Which-Framework-is-Best-in-2021.md](https://github.com/xitu/gold-miner/blob/master/article/2021/Angular-vs-React-vs-Vue:-Which-Framework-is-Best-in-2021.md) > * 译者:[zenblo](https://github.com/zenblo)、[霜羽 Hoarfroster](https://github.com/PassionPenguin) -> * 校对者:[霜羽 Hoarfroster](https://github.com/PassionPenguin) +> * 校对者:[zenblo](https://github.com/zenblo)、[霜羽 Hoarfroster](https://github.com/PassionPenguin) -# Angular vs. React vs. Vue:2021 年哪个框架最好? +# 2021 年 Angular vs. React vs. Vue 前端框架对比 > 一个是 UI 库(React),另一个是成熟的前端框架(Angular),而其中最年轻的(Vue)则可以称之为渐进式框架。 你可能是一个 React 开发者,可能是一个 Vue 开发者,也可能是一个只专注于技术的 Angular 开发者。不过,你还是不能忽视开发社区不断进行的框架比较。有充分的理由认为:他们三个框架,一个是 UI 库(React),另一个是成熟的前端框架(Angular),而其中最年轻的(Vue)则可以称之为渐进式框架。每一个框架都拥有一些独特的优势和性能指标。正是这些不可忽略的优势和指标,我们不能不对这三种框架进行对比分析。 @@ -67,7 +67,7 @@ Angular 最适合大型和高级项目。这些可能包括但不限于: ### React -React 来自 MERN 堆栈家族,一种以构建复杂的业务应用程序而闻名的技术堆栈。当将它与 Redux 或 MobX 或任何流量模式库一起使用时,React 就能够成为强大的工具。React 最适合以下项目: +React 来自 MERN 架构,一种以构建复杂的业务应用程序而闻名的技术架构。当将它与 Redux 或 MobX 或其它状态管理库一起使用时,React 就能够成为强大的工具。React 最适合以下项目: * 对于涉及包含导航项目,折叠或展开的手风琴分节,活动或非活动状态,动态输入,活动或非活动按钮,用户登录,用户访问权限等的许多组件的应用程序。 * 对于具有规模和增长范围的项目,因为 React 组件具有声明性,因此它可以轻松处理此类复杂结构。 @@ -99,16 +99,16 @@ Angular 性能方面的一些亮点包括: ### React -在性能方面,React 与 Vue 相当,因为两者具有相同的架构,即与 DOM 交互。React Web 开发的性能可以评估如下: +在性能方面 React 与 Vue 不相上下,因为两者具有相同的架构,例如与 DOM 交互。React 开发 Web 的性能可以评估如下: * 支持捆绑和 Tree-shaking —— 这对于减少最终用户的资源负载至关重要。 * 由于提供了单向数据绑定支持,因此可以更好地控制项目。 -* 可以轻松测试和监视。 +* 便于进行测试和监控管理。 * 最适合需要频繁更改的复杂应用程序。 ### Vue -形容 Vue 的最贴切的词组是 `令人难以置信的快速`。它的一些性能指标是: +最贴切的形容 Vue 的词组是“令人难以置信的快速”。它的一些性能指标是: * 更快的学习曲线。 * 单页应用程序高效精密。 @@ -131,7 +131,7 @@ Youtube TV | PayPal | Gmail | Forbes | Google Cloud ### React -* 出于其模块化的结构而使其拥有灵活的代码。节省时间和成本。 +* 通过模块化的结构使其拥有灵活的代码,节省时间和成本。 * 助力复杂应用程序的高性能的实现。 * 使用 React 前端开发能够更容易去做代码维护。 * 支持适用于 Android 和 iOS 平台的移动端原生应用程序。 @@ -156,11 +156,11 @@ Gitlab | Spendesk | Behance | 9Gag | Wizzair | Nintendo ### 社区支持与学习曲线 -React JS 库是由 Facebook 创建的,拥有大量的贡献人员和一个庞大的开发者社区,为最大的问题贡献者他们的方案。Angular 有一个宏大的开发者社区,对最具挑战性和最怪异的案例都有答案。Vue 具有良好的生态系统,并具有 React 库和 Angular 框架的所有正确的特性。说到学习曲线,React 无疑是能够最快学习和适应的,其次是 Vue 和 Angular。 +React JS 库是由 Facebook 创建的,拥有大量的贡献者以及一个庞大的开发者社区,为各种问题贡献他们的解决方案。Angular 也有一个庞大的开发者社区,对最具挑战性和最怪异的案例都有解决方案。Vue 具有良好的生态系统,并具有 React 和 Angular 框架的所有特性。说到学习曲线,React 无疑是开发者能够最快学习和适应的,其次是 Vue 和 Angular。 ## 本文总结 -从前端开发的角度来看,React 将是 2021 年能够学得最快的框架,Vue 和 React 都是轻量级且直观的,并且性能完美无缺。 +从前端开发者的角度来看,React 将是 2021 年最快学会使用的框架,Vue 和 React 都是轻量级、直观的并且性能完美良好的框架。 > 如果发现译文存在错误或其他需要改进的地方,欢迎到 [掘金翻译计划](https://github.com/xitu/gold-miner) 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 **本文永久链接** 即为本文在 GitHub 上的 MarkDown 链接。 From 0ccaa077fcbea8b596f55768fdbdf99803019c20 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Tue, 16 Mar 2021 19:41:32 +0800 Subject: [PATCH 8/9] Apply suggestions from code review Co-authored-by: Xiaofei Liao --- ...-vs-Vue-Which-Framework-is-Best-in-2021.md | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md b/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md index 3d7a7f16b0e..6bb8c0a85b8 100755 --- a/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md +++ b/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md @@ -10,7 +10,7 @@ 你可能是一个 React 开发者,可能是一个 Vue 开发者,也可能是一个只专注于技术的 Angular 开发者。不过,你还是不能忽视开发社区不断进行的框架比较。有充分的理由认为:他们三个框架,一个是 UI 库(React),另一个是成熟的前端框架(Angular),而其中最年轻的(Vue)则可以称之为渐进式框架。每一个框架都拥有一些独特的优势和性能指标。正是这些不可忽略的优势和指标,我们不能不对这三种框架进行对比分析。 -这几个框架都是基于组件的框架,都有快速创建 UI 的功能。它们之间可以替代使用,也都可以用于构建前端应用。然而它们并非 100% 相同。 +这几个框架都是基于组件的框架,都有快速创建 UI 的功能。大部分时间,它们可以相互替代来用于构建前端应用。然而它们并非 100% 相同。 这就是为什么我们决定为你创建一个简短的指南,但最重要的是,为你提供一个参考帮助你在未来进行技术选择。 @@ -18,7 +18,7 @@ ## 许可证 -当然,在使用一个开源框架或库之前,一定要彻底检查许可证。幸运的是,React、Angular 和 Vue 都使用 [MIT 许可证](https://opensource.org/licenses/MIT)。它提供了有限的重用限制,而且我们甚至还可以在专有软件中使用。在使用任何框架或软件之前,一定要留心,注意了解许可证的内容。 +当然,在使用一个开源框架或库之前,一定要彻底检查许可证。幸运的是,React、Angular 和 Vue 都使用 [MIT 许可证](https://opensource.org/licenses/MIT)。它提供了有限的复用限制,而且我们甚至还可以在专有软件中使用。在使用任何框架或软件之前,一定要留心,注意了解许可证的内容。 ## 架构设计 @@ -30,9 +30,9 @@ Angular 框架属于 MEAN 框架,是如今创业公司最热门的技术栈。 在 Angular 框架中,每个组件都有一个类或模板,定义了应用逻辑和 MetaData(装饰器)。组件的这些元数据为创建和呈现其视图所需的构件在哪里提供了指引。 -Angular 架构的另一个重要因素是,模板是用 HTML 编写的。它们还可能包含 Angular 模板语法,并带有特殊指令以输出响应式数据,并且可能渲染多个元素。 +Angular 架构的另一个重要因素是,模板是用 HTML 编写的。它们还可以包含 Angular 模板语法,并带有特殊指令以输出响应式数据,并且可以渲染多个元素。 -服务 —— Angular 应用中的一个独特元素,被 Components 用于委托业务逻辑任务,如获取数据或验证输入。虽然使用服务并没有严格执行,但是将应用程序结构作为一组可重用的不同服务则是比较明智的。 +服务 —— Angular 应用中的一个独特元素,被 Components 用于委托业务逻辑任务,如获取数据或验证输入。虽然使用服务并没有严格执行,但是将应用程序结构作为一组可复用的不同服务则是比较明智的。 ### React @@ -44,13 +44,13 @@ React 组件是一种构建模块,它决定了在整个 Web 应用中使用独 ### Vue -用于开发用户界面和单页 Web 应用,Vue 是一个开源的 `Model-View-View-Model` MVVM 前端 JavaScript 库,被称为渐进式框架。Vue 与其它工具一起用于前端开发。Vue 的通用性、高性能和它在 Web 应用程序上的最佳用户体验成就了它的流行。 +用于开发用户界面和单页 Web 应用,Vue 是一个开源的 `Model-View-View-Model` (MVVM) 前端 JavaScript 库。它被称为渐进式框架,与其它工具一起被用于前端开发。Vue 的多用途、高性能和它在 Web 应用程序上的最佳用户体验成就了它的流行。 使用 Vue 时,开发者主要在 ViewModel 层上工作,以确保应用数据的处理方式能让框架呈现最新的视图。 Vue 的模板语法将可识别的 HTML 与特殊的指令和功能相结合。该语法允许开发人员创建 View 组件。 -现在 Vue 中的组件是小巧、自成一体和可重用的。系统文件检查器(SFC)或扩展名为 `.vue` 的单文件组件包含 HTML、JavaScript 和 CSS,因此所有相关代码都存放在同一个文件中。 +现在 Vue 中的组件是小巧、自成一体和可复用的。单文件组件(SFC)使用扩展名 `.vue` ,包含 HTML、JavaScript 和 CSS,因此所有相关代码都存放在同一个文件中。 在大型的 Vue.js 项目中,我们通常推荐使用 SFC 来组织代码。要将 SFC 移植到工作的 JavaScript 代码中,你需要 Webpack 或 Browserify 这样的构建工具。 @@ -67,22 +67,22 @@ Angular 最适合大型和高级项目。这些可能包括但不限于: ### React -React 来自 MERN 架构,一种以构建复杂的业务应用程序而闻名的技术架构。当将它与 Redux 或 MobX 或其它状态管理库一起使用时,React 就能够成为强大的工具。React 最适合以下项目: +React 来自 MERN 架构,一种以构建复杂的业务应用程序而闻名的技术架构。当将它与 Redux、MobX 或其它 flux 模式的状态管理库一起使用时,React 就能够成为强大的工具。React 最适合以下项目: -* 对于涉及包含导航项目,折叠或展开的手风琴分节,活动或非活动状态,动态输入,活动或非活动按钮,用户登录,用户访问权限等的许多组件的应用程序。 -* 对于具有规模和增长范围的项目,因为 React 组件具有声明性,因此它可以轻松处理此类复杂结构。 +* 对于涉及包含导航项,折叠或展开的手风琴分节,可用或不可用状态,动态输入,可用或不可用按钮,用户登录,用户访问权限等的许多组件的应用程序。 +* 对于具有扩展和增长可能的项目,因为 React 组件具有声明性,因此它可以轻松处理此类复杂结构。 * 当 UI 是网络应用程序的中心时。 ### Vue 因为 Vue 具有可接受且快速的学习曲线,Vue 最适合解决短期的小型的问题。它可以轻松地与现有代码块集成。在以下情况下可能需要 Vue: -* 您需要带有动画或交互式元素的 Web 应用程序的开发项目。 +* 你需要带有动画或交互式元素的 Web 应用程序的开发项目。 * 无需高级技能即可进行原型制作。 * 需要与多个其他应用程序无缝集成的应用程序。 * 更早推出 MVP。 -## 表现和发展 +## 性能和开发 ### Angular @@ -92,16 +92,16 @@ Angular 性能方面的一些亮点包括: * 提供强大的组件集合,从而简化了编写,更改和使用代码的过程。 * 它的“提前编译器”赋予了应用程序更快的加载时间和安全性。 * MVC 模型通过允许视图分离来帮助减少后台查询。 -* 促进将依赖项注入用作将组件解耦的外部元素,从而为可重用性以及简化管理和测试铺平了道路。 +* 促进使用将依赖项注入的外部元素来让组件解耦,从而为可复用性以及简化管理和测试铺平了道路。 * 通过将任务分成逻辑块来减少网页的初始加载时间。 * 可以完全自定义的设计。 * 便于将 HTML 和 TypeScript 编译为 JavaScript —— 大大加快了代码的编译速度,并将编译提早到远早于浏览器开始加载 Web 应用程序之前。 ### React -在性能方面 React 与 Vue 不相上下,因为两者具有相同的架构,例如与 DOM 交互。React 开发 Web 的性能可以评估如下: +在性能方面 React 与 Vue 不相上下,因为两者具有相同的架构,即与 DOM 的交互。React 开发 Web 的性能可以评估如下: -* 支持捆绑和 Tree-shaking —— 这对于减少最终用户的资源负载至关重要。 +* 支持打包和 tree-shaking —— 这对于减少最终用户的资源负载至关重要。 * 由于提供了单向数据绑定支持,因此可以更好地控制项目。 * 便于进行测试和监控管理。 * 最适合需要频繁更改的复杂应用程序。 @@ -112,7 +112,7 @@ Angular 性能方面的一些亮点包括: * 更快的学习曲线。 * 单页应用程序高效精密。 -* 具有高端功能,因而它有多功能性。 +* 高级功能使它具有多功能性。 ## 各自的优点 @@ -146,7 +146,7 @@ Tesla | AirBnB | CNN | Nike | Udemy | Linked-in * 倘若我们正确利用,我们就可以在多处重用 Vue。 * Vue.js 允许我们更新网页中的元素,而无需渲染整个 DOM,因为它是虚拟的 DOM。 * 需要较少的优化。 -* 促进 Web 应用程序的开发,并允许大佬将模板到虚拟 DOM 与编译器分开。 +* 加速 Web 应用程序的开发,并允许大佬将模板到虚拟 DOM 与编译器分开。 * 经过验证的兼容性和灵活性。 * 不管应用程序的规模如何,代码库都不会变。 From 4c0e884a1de8047674738831d7046cbd35d7c425 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Wed, 17 Mar 2021 02:22:55 +0800 Subject: [PATCH 9/9] Update proofreader's information --- .../Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md b/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md index 6bb8c0a85b8..8bf634315e4 100755 --- a/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md +++ b/article/2021/Angular-vs-React-vs-Vue-Which-Framework-is-Best-in-2021.md @@ -3,7 +3,7 @@ > * 译文出自:[掘金翻译计划](https://github.com/xitu/gold-miner) > * 本文永久链接:[https://github.com/xitu/gold-miner/blob/master/article/2021/Angular-vs-React-vs-Vue:-Which-Framework-is-Best-in-2021.md](https://github.com/xitu/gold-miner/blob/master/article/2021/Angular-vs-React-vs-Vue:-Which-Framework-is-Best-in-2021.md) > * 译者:[zenblo](https://github.com/zenblo)、[霜羽 Hoarfroster](https://github.com/PassionPenguin) -> * 校对者:[zenblo](https://github.com/zenblo)、[霜羽 Hoarfroster](https://github.com/PassionPenguin) +> * 校对者:[zenblo](https://github.com/zenblo)、[霜羽 Hoarfroster](https://github.com/PassionPenguin)、[felixliao](https://github.com/felixliao) # 2021 年 Angular vs. React vs. Vue 前端框架对比 > 一个是 UI 库(React),另一个是成熟的前端框架(Angular),而其中最年轻的(Vue)则可以称之为渐进式框架。