Finally, you’ve come to a marvelous idea for a JavaScript-based application or a website. Choosing the right framework may have a considerable effect on the success of your project. It can influence your ability to complete the project on time and maintain your code in the future. JavaScript frameworks, like Angular.js, Ember.js, or React.js, bring structure to your code and keep it organized, thus making your app more flexible and scalable, and the development process – easier.
最后，您对基于JavaScript的应用程序或网站有了一个奇妙的想法。 选择正确的框架可能会对您的项目成功产生重大影响。 它会影响您按时完成项目并在将来维护代码的能力。 JavaScript框架（例如Angular.js，Ember.js或React.js）将结构带入代码中并使其保持井井有条，从而使您的应用程序更加灵活，可扩展，并且开发过程更加轻松。
JavaScript场景的波动性 (Volatility of JavaScript Scene)
The web development has been changing very quickly. Almost every month a new JavaScript framework is being introduced, and existing frameworks are being updated very often. As these frameworks are of an open source kind, large communities around the world can constantly enrich them. And as the result, understanding the benefits of each framework and the difference between them is not an easy task.
Web开发的变化非常快。 几乎每个月都会引入一个新JavaScript框架，并且现有框架会经常更新。 由于这些框架属于开源框架，因此世界各地的大型社区可以不断丰富它们。 结果，了解每个框架的好处以及它们之间的区别并不是一件容易的事。
AngularJS。 框架空间冠军 (AngularJS. Champion of the Framework Space)
Angular.js is an open-source web application framework with Model-View-Controller (MVC) architecture (Angular 1) and Model-View-ViewModel (MVVM) architecture (Angular 2), powered by Google. It is the oldest of the three frameworks named above. As the result, it has the largest community. Angular.js solves the problem of developing SPA’s (single page applications) by extending the functionality of HTML with directives. The framework places an emphasis on getting your app up and running quickly.
Angular.js是一个开放源代码Web应用程序框架，由Google支持，具有Model-View-Controller（MVC）架构（Angular 1）和Model-View-ViewModel（MVVM）架构（Angular 2）。 它是上面命名的三个框架中最古老的。 结果，它拥有最大的社区。 Angular.js通过使用指令扩展HTML的功能来解决开发SPA（单页应用程序）的问题。 该框架着重于使您的应用程序快速启动和运行。
AngularJS的优缺点 (Pros and Cons of AngularJS)
Benefits:
优点：
- Creation of customized Document Object Model (DOM) elements. 创建定制的文档对象模型（DOM）元素。
- Straightforward UI design and alteration. 简单明了的UI设计和更改。
- When creating input fields in an HTML document, a separate data binding is created for each rendered field. Angular tends to check every single bound field on the page for any changes before re-rendering. 在HTML文档中创建输入字段时， 将为每个呈现的字段创建一个单独的数据绑定 。 Angular倾向于在重新渲染之前检查页面上的每个绑定字段是否有任何更改。
- Dependency injection. 依赖注入。
- Simple routing. 简单的路由。
- Easy-to-test code. 易于测试的代码。
- The framework facilitates extension of HTML syntax and creates reusable components by directives. 该框架有助于扩展HTML语法，并通过指令创建可重用的组件。
- Robust template-building solutions. Uses binding expressions in HTML attributes to drive the templating functionality. Angular’s templating engine has a deep understanding of the DOM, and its well-structured templates reduce the overall amount of code required to create the resulting page. 鲁棒的模板构建解决方案 。 在HTML属性中使用绑定表达式来驱动模板功能。 Angular的模板引擎对DOM有深刻的了解，其结构合理的模板减少了创建结果页面所需的代码总量。
- Data modeling is limited to the use of small data models in order to make the code simple and easy to test. 数据建模仅限于使用小型数据模型 ，以使代码简单易测。
- Fast when rendering static lists. 呈现静态列表时快速。
- Great with code reuse (Angular libraries). 伟大的代码重用 （角度库）。
Pain points:
痛点：
- Complexity of the directives API. 指令API的复杂性。
- For pages with many interactive elements, Angular becomes slow. 对于具有许多交互元素的页面，Angular会变慢。
- Original design tends to be slow. 原始设计往往很慢。
- Concerns with performance because of many DOM elements. 由于存在许多DOM元素，因此对性能存在担忧。
- Complex third-party integration. 复杂的第三方集成。
- Steep learning curve. 陡峭的学习曲线。
- Scopes are easy to use, but hard to debug. 范围易于使用，但难以调试。
- Router is limited. 路由器是有限的。
Note. The functionalities of Angular 2 differ from the above described. Angular 2 was not redesigned from Angular 1, it was completely rewritten. The drastic changes between two versions of the framework created considerable controversy among developers.
注意 。 Angular 2的功能与上述功能有所不同。 Angular 2并未从Angular 1进行重新设计，而是被完全重写。 两种版本的框架之间的巨大变化在开发人员之间引起了很大的争议。
ReactJS。 块上的新孩子 (ReactJS. New Kid on the Block)
ReactJS is an open-source JavaScript library for building performant user interfaces with focus on amazing rendering performance, introduced and powered by Facebook. React is focused on “V” in Model View Controller architecture. After React was first announced, it quickly achieved critical mass. It was built in order to solve the common problem with other JavaScript frameworks – efficient rendering of large data sets.
ReactJS是一个开源JavaScript库，由Facebook引入并提供支持，用于构建性能卓越的用户界面，专注于出色的渲染性能。 React专注于Model View Controller体系结构中的“ V”。 React首次发布后，很快就达到了临界质量。 构建它是为了解决其他JavaScript框架的常见问题-大型数据集的有效呈现。
ReactJS的优缺点 (Pros and Cons of ReactJS)
Benefits:
优点：
- Easy interface design and learning API. 简单的界面设计和学习API。
- Significant performance gains over other JavaScript frameworks. 与其他JavaScript框架相比， 性能显着提高 。
- Faster updates. React creates a new virtual DOM and a patching mechanism with the most recent data and efficiently compares it against the previous version, creating a minimal list of update portions to be made to the real DOM to bring it in sync, rather than having to re-render the entire site on each change. 更新速度更快 。 React使用最新的数据创建了一个新的虚拟DOM和修补机制，并将其与以前的版本进行了有效比较，从而创建了一个对真实DOM进行更新的最小清单，以使其同步，而不必重新进行在每次更改时呈现整个网站。
- Server-side rendering allows creating isomorphic/universal web apps. 服务器端渲染允许创建同构/通用Web应用程序。
- Easy import of components although having very little dependencies. 尽管几乎没有依赖关系，但组件易于导入 。
- Good code reuse. 良好的代码重用。
- Great for JavaScript debugging. 非常适合JavaScript调试。
- It is entirely possible to augment Angular with React to enhance performance of troublesome components. 完全有可能用React扩展Angular来增强麻烦组件的性能。
- Fully component based architecture. 完全基于组件的体系结构。
- JSX, a JavaScript extension syntax allowing quoting of HTML and using HTML tag syntax to render subcomponents. JSX是一种JavaScript扩展语法，它允许引用HTML并使用HTML标记语法来呈现子组件。
- React Native Library. React本机库。
Pain points:
痛点：
- It’s not a full framework, it’s a library. 它不是一个完整的框架，而是一个库。
- Very sophisticated view layer. 非常复杂的视图层。
- Flux architectures are a different paradigm that what developers are used to. Flux体系结构是开发人员所习惯的另一范式。
- Lots of people dislike JSX. 许多人不喜欢JSX。
- Steep learning curve. 陡峭的学习曲线。
- Integrating React into a traditional MVC framework such as Rails would require some configurations. 将React集成到Rails之类的传统MVC框架中将需要一些配置。
EmberJS。 所有繁重的举重 (EmberJS. All the Heavy Lifting)
EmberJS is an open-source JavaScript application framework for creating single-page client-side web applications, which uses Model-View-Controller (MVC) pattern. The framework provides universal data binding together and URL-driven approach for structuring different applications with the focus on scalability.
EmberJS是一个开放源代码JavaScript应用程序框架，用于创建使用Model-View-Controller（MVC）模式的单页客户端Web应用程序 。 该框架提供了通用的数据绑定和URL驱动的方法，用于以可伸缩性为重点来构建不同的应用程序。
Ember was originated as SproutCore in 2007. In 2011 it was acquired by Facebook and renamed to Ember. It combines proven concepts from native frameworks like Apple’s Cocoa with the lightweight sensibilities.
Ember于2007年最初名为SproutCore。2011年，它被Facebook收购，并更名为Ember。 它结合了诸如Apple Cocoa之类的本地框架中经过验证的概念以及轻巧的灵敏度。
EmbersJS的优缺点 (Pros and Cons of EmbersJS)
Benefits:
优点：
- Convention over configuration. Instead of providing detailed configuration for the various routes in your application, Ember.js favors following naming conventions and automatically generating the resulting code, earmarking configurations only for cases where convention is not followed. 约定优于配置 。 Ember.js与其为应用程序中的各种路由提供详细的配置，不如遵循命名约定并自动生成结果代码，仅在不遵循约定的情况下指定配置。
- Client-side rendering and structure to scalable web applications beyond the view layer. 客户端渲染和结构，以扩展视图层以外的可伸缩Web应用程序。
- URL-support. 网址支持。
- Ember’s object model facilitates Key-Value Observation. Ember的对象模型有助于键值观察。
- Nested UIs. 嵌套的UI。
- Minimizes DOM. 最小化DOM。
- Works well with large application ecosystems. 与大型应用程序生态系统配合良好。
- Strong data layer integrates well with Java. 强大的数据层与 Java 很好地集成在一起 。
- Fully-fledged templating mechanism (Handlebars templating engine built upon the popular Mustache templating engine) reduces the overall amount of code written. It knows nothing about DOM and relies instead upon straight text manipulation, building the HTML document dynamically. 完善的模板机制 （基于流行的Mustache模板引擎构建的车把模板引擎）减少了编写的代码总量。 它对DOM一无所知，而是依靠直接的文本操作来动态构建HTML文档。
- Uses observers to change values, which results in only rendering the values being changed. 使用观察者更改值 ，这仅导致呈现更改的值。
- Avoids “dirty checking” by using accessories. 避免使用附件进行“脏污检查” 。
- Faster boot times and inherent stability. 更快的启动时间和固有的稳定性。
- Performance focus. 性能重点。
- Friendly docs and API. 友好的文档和API。
Pain points:
痛点：
- Ember.js lacks the reuse of components at Controller level. Ember.js在控制器级别缺少组件的重用。
- There is a lot of outdated content and examples that no longer work. 有许多过时的内容和示例不再起作用。
- Steep learning curve. 陡峭的学习曲线。
- Handlebars.js pollutes the DOM with many <script> tags, which it uses as markers to keep the templates up to date with your model. Handlebars.js使用许多<script>标签污染DOM，它用作标记以使模板与模型保持最新。
- Cumbersome when going outside its typical uses. 超出其典型用途时会很麻烦。
- Ember’s object model implementation bloats Ember’s overall size and call stack while debugging. Ember的对象模型实现在调试时使Ember的整体大小和调用堆栈膨胀。
- The most opinionated and heaviest of the frameworks. 最自以为是和最沉重的框架。
- Overblown for small projects. 对于小型项目而言过于夸张。
- Testing story seems vague/incomplete. 测试故事似乎模糊/不完整。
定义您的需求并选择合适的框架，使其焕然一新 (Define Your Needs and Make a Chosen Framework Shine It’s Brightest)
Determining which framework is right for you is simply a matter of evaluating your application’s needs versus the strengths of each framework. It requires an in-depth knowledge of advantages and disadvantages of each framework under consideration, and how they compete for different use cases. All the frameworks have a lot in common: they are open-sourced, released under the permissive license, and create SPAs with MVC design pattern. They all have views, events, data modules and routing. However, different JavaScript frameworks are better suitable for different types of applications.
确定适合您的框架仅是评估应用程序需求和每个框架的优势的问题。 它需要深入了解所考虑的每个框架的优缺点，以及它们如何竞争不同的用例。 所有框架都有很多共同点：它们是开源的，在许可的许可下发布，并使用MVC设计模式创建SPA。 它们都具有视图，事件，数据模块和路由。 但是，不同JavaScript框架更适合于不同类型的应用程序。
If you are making a decision on creating a web app, Angular, React, and Ember are a safest bet for a long-term support and active communities. Moreover, currently Angular is the most popular of these three. You can use it as one-stop-shop. It’s a framework of choice for large enterprises. Ember is the best solution for those who seek for all-tools-included framework approach. Ember makes many decisions instead of you, so you don’t have to spend your time on researching and gluing together libraries. As Ember takes long to learn, it would suit well for long-term project. React is the lightest weight of the named above. It does one thing great: renders UI components. Many even pair it with the above-mentioned frameworks. It’s an appropriate choice if you need to gradually modernize an existing code base.
如果您决定创建一个Web应用程序，那么Angular，React和Ember是长期支持和活跃社区的最安全选择。 而且，目前Angular是这三个中最受欢迎的。 您可以将其用作一站式商店。 这是大型企业的首选框架。 对于那些寻求包含所有工具的框架方法的人来说，Ember是最好的解决方案。 Ember代替您做出许多决定，因此您不必花时间研究和粘贴库。 由于Ember需要花费很长时间来学习，因此非常适合长期项目。 React是上面提到的最轻的东西。 它做的一件很棒的事：呈现UI组件。 许多人甚至将其与上述框架配对。 如果您需要逐步更新现有代码库，这是一个适当的选择。
As you see, there is no clear winner. Some frameworks fit specific projects better than the others do. Examine your project from several different perspectives including maturity, size, dependencies, interoperability, features, etc., and contact professional front-end web development company to build immaculate website architecture and website design that suit your business needs the best.
如您所见，没有明显的赢家。 一些框架比其他框架更适合特定项目。 从成熟度，大小，依赖项，互操作性，功能等多个不同角度检查您的项目，并与专业的前端Web开发公司联系，以构建最适合您业务需求的完美网站体系结构和网站设计。
If you'll have any comments, I would be glad to hear them.
如果您有任何意见，我很乐意听到。
Originally my article was published on Romexsoft blog. There you can also find the comparison tables.
最初，我的文章发表在Romexsoft博客上。 您还可以在那里找到比较表。
翻译自: https://www.experts-exchange.com/articles/28853/Comparison-of-JS-Frameworks-Angular-js-vs-React-js-vs-Ember-js.html
转播
