document/TranslateProject
2
0
Fork 0
mirror of https://github.com/LCTT/TranslateProject.git synced 2025-01-25 23:11:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #22576 from stevending1st/master

Browse Source 
translated
This commit is contained in:
Xingyu.Wang 2021-07-16 14:24:36 +08:00 committed by GitHub
commit cd4596b2bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 277 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

295
sources/tech/20200528 9 open source JavaScript frameworks for front-end web development.md
View File

@ -1,295 +0,0 @@
stevending is translating
[#]: collector: (lujun9972)
[#]: translator: ( )
[#]: reviewer: ( )
[#]: publisher: ( )
[#]: url: ( )
[#]: subject: (9 open source JavaScript frameworks for front-end web development)
[#]: via: (https://opensource.com/article/20/5/open-source-javascript-frameworks)
[#]: author: (Bryant Son https://opensource.com/users/brson)
9 open source JavaScript frameworks for front-end web development
======
A breakdown of many JavaScript options for frameworks—their strengths
and key features.
![Computer screen with files or windows open][1]
About a decade ago, the JavaScript developer community began to witness fierce battles emerging among JavaScript frameworks. In this article, I will introduce some of the most well-known of these frameworks. And it's important to note that these are all open source JavaScript projects, meaning that you can freely utilize them under an [open source license][2] and even contribute to the source code and communities.
If you prefer to follow along as I explore these frameworks, you can watch my video.
Before getting started, though, it will be useful to learn some of the terminology JavaScript developers commonly use when discussing frameworks.
Term | What It Is
---|---
[Document Object Model (DOM)][3] | A tree-structure representation of a website where each node is an object representing part of the webpage. The World Wide Web Consortium (W3C), the international standards organization for the World Wide Web, maintains the definition of the DOM.
[Virtual DOM][4] | A "virtual" or "ideal" representation of a user interface (UI) is kept in memory and synced with the "real" DOM by a library such as [ReactDOM][5]. To explore further, please read ReactJS's virtual DOM and internals documentation.
[Data Binding][6] | A programming concept to provide a consistent interface for accessing data on websites. Web elements are associated with a property or attribute of an element maintained by the DOM. For example, when you need to fill out a password in a webpage form, the data binding mechanism can check with the password validation logic to ensure that the password is in a valid format.
Now that we are clear about common terms, let's explore what open source JavaScript frameworks are out there.
Framework | About | License | Release Date
---|---|---|---
[ReactJS][7] | Created by Facebook, currently the most popular JavaScript framework | MIT License | May 24, 2013
[Angular][8] | Popular JavaScript framework created by Google | MIT License | Jan 5, 2010
[VueJS][9] | Rapidly growing JavaScript framework | MIT License | Jul 28, 2013
[MeteorJS][10] | Powerful framework that is more than a JavaScript framework | MIT License | Jan 18, 2012
[KnockoutJS][11] | Open source Model-View-ViewModel (MVVM) framework | MIT License | Jul 5, 2010
[EmberJS][12] | Another open source Model-View-ViewModel framework | MIT License | Dec 8, 2011
[BackboneJS][13] | JavaScript framework with RESTful JSON and Model-View-Presenter pattern | MIT License | Sep 30, 2010
[Svelte][14] | Open source JavaScript framework not using virtual DOM | MIT License | Nov 20, 2016
[AureliaJS][15] | A collection of Modern JavaScript modules | MIT License | Feb 14, 2018
For context, here is the publicly available data on popularity based on NPM package downloads per framework, thanks to [npm trends][16].
![Framework downloads graph][17]
### ReactJS
![React page][18]
[ReactJS][19] was invented by Facebook, and it is the clear leader among JavaScript frameworks today, though it was invented well after Angular. React introduces a concept called a virtual DOM, an abstract copy where developers can utilize only the ReactJS features that they want, without having to rewrite the entire project to work within the framework. In addition, the active open source community with the React project has definitely been the workhorse behind the growth. Here are some of React's key strengths:
* Reasonable learning curve—React developers can easily create the React components without rewriting the entire code in JavaScript. See the benefits of ReactJS and how it makes it the programming easier on ReactJS's [front page][20].
* Highly optimized for performance—React's virtual DOM implementation and other features boost app rendering performance. See ReactJS's [description][21] of how its performance can be benchmarked and measured in terms of how the app performs.
* Excellent supporting tools—[Redux][22], [Thunk][23], and [Reselect][24] are some of the best tools for building well-structured, debuggable code.
* One way data binding—The model used in Reach flows from owner to child only making it simpler to trace cause and effect in code. Read more about it on ReactJS's [page on data binding][25].
Who is using ReactJS? Since Facebook invented it, the company itself heavily uses React for its frontpage, and [Instagram][26] is said to be completely based on the ReactJS library. You might be surprised to know that other well-known companies like [New York Times][27], [Netflix][28], and [Khan Academy][29] also implement ReactJS in their technology stacks.
What may be even more surprising is the availability of jobs for ReactJS developers, as you can see below from research done by Stackoverflow. Hey, you can work on an open source project and get paid to do it. That is pretty cool!
![React jobs page][30]
Stackoverflow shows the huge demand for ReactJS developers—[Source: Developer Hiring Trends in 2017—Stackoverflow Blog][31]
 
[ReactJS's GitHub][7] currently shows over 13K commits and 1,377 contributors to the open source project. And it is an open source project under MIT License.
![React GitHub page][32]
### Angular
![Angular homepage][33]
React may now be the leading JavaScript framework in terms of the number of developers, but [Angular][34] is close behind. In fact, while React is the more popular choice among open source developers and startup companies, larger corporations tend to prefer Angular (a few are listed below). The main reason is that, while Angular might be more complicated, its uniformity and consistency works well for larger projects. For example, I have worked on both Angular and React throughout my career, and I observed that the larger companies generally consider Angular's strict structure a strength. Here are some other key strengths of Angular:
* Well-designed Command Line Interface: Angular has an excellent Command Line Interface (CLI) tool to easily bootstrap and to develop with Angular. ReactJS also offers the Command Line Interface as well as other tools, but Angular has extensive support and excellent documentation, as you can see on [this page][35].
* One way data binding—Similarly to React, the one-way data binding model makes the framework less susceptible to unwanted side effects.
* Great support for TypeScript—Angular has excellent alignment with [TypeScript][36], which is effectively JavaScript more type enforcement. It also transcompiling to JavaScript, making it a great option to enforce types for less buggy code.
Well-known websites like YouTube, [Netflix][37], [IBM][38], and [Walmart][39] all have implemented Angular into their applications. I personally started front-end JavaScript development with Angular by educating myself on the subject. I have worked on quite a few personal and professional projects involving Angular, but that was Angular 1.x, which was called by AngularJS at the time. When Google decided to upgrade the version to 2.0, they completely revamped the framework, and then it became Angular. The new Angular was a complete transformation of the previous AngularJS, which drove off some existing developers while bringing new developers.
[Angular's][8] [GitHub][8] page shows 17,781 commits and 1,133 contributors at the time of this writing. It is also an open source project with an MIT License, so you can feel free to use it for your project or to contribute.
 
![Angular GitHub page][40]
### VueJS
![Vue JS page][41]
[VueJS][42] is a very interesting framework. It is a newcomer to the JavaScript framework scene, but its popularity has increased significantly over the course of a few years. VueJS was created by [Evan Yu][43], a former Google engineer who had worked on the Angular project. The framework got so popular that many front-end engineers now prefer VueJS over other JavaScript frameworks. The chart below depicts how fast the framework gained traction over time.
![Vue JS popularity graph][44]
Here are some of the key strengths of VueJS:
* Easier learning curve—Even compared to Angular or React, many front-end developers feel that VueJS has the lowest learning curve.
* Small size—VueJS is relatively lightweight compared to Angular or React. In its [official documentation][45], its size is stated to be only about 30 KB, while the project generated by Angular, for example, is over 65 KB.
* Concise documentation—Vue has thorough but concise and clear documentation. See [its official documentation][46] for yourself.
[VueJS's GitHub][9] shows 3,099 commits and 239 contributors.
![Vue JS GitHub page][47]
### MeteorJS
![Meteor page][48]
[MeteorJS][49] is a free and open source [isomorphic framework][50], which means, just like NodeJS, it runs both client and server-side JavaScript. Meteor can be used in conjunction with any other popular front-end framework like Angular, React, Vue, Svelte, etc.
Meteor is used by several corporations such as Qualcomm, Mazda, and Ikea, and many applications like Dispatch and Rocket.Chat. [See the case studies on its official website.][51]
![Meteor case study][52]
Some of the key features of Meteor include:
* Data on the wire—The server sends the data, not HTML, and the client renders it. Data on the wire refers mostly to the way that Meteor forms a WebSocket connection to the server on page load, and then transfers the data needed over that connection.
* Develop everything in JavaScript—Client-side, application server, webpage, and mobile interface can be all designed with JavaScript.
* Supports most major frameworks—Angular, React, and Vue can be all combined and used in conjunction with Meteor. Thus, you can still use your favorite framework, like React or Angular, but still leverage some of the great features that Meteor offers.
As of now, [Meteor's][10] [GitHub][10] shows 22,804 commits and 428 contributors. That is quite a lot for open source activities!
![Meteor GitHub page][53]
### EmberJS
![EmberJS page][54]
[EmberJS][55] is an open source JavaScript framework based on the [Model-view-viewModel(MVVM)][56] pattern. If you've never heard about EmberJS, you'll definitely be surprised how many companies are using it. Apple Music, Square, Discourse, Groupon, LinkedIn, Twitch, Nordstorm, and Chipotle all leverage EmberJS as one of their technology stacks. Check [EmberJS's official page][57] to discover all applications and customers that use EmberJS.
Although Ember has similar benefits to the other frameworks we've discussed, here are some of its unique differentiators:
* Convention over configuration—Ember standardizes naming conventions and automatically generates the result code. This approach has a little more of a learning curve but ensures that programmers follow best-recommended practices.
* Fully-fledged templating mechanism—Ember relies on straight text manipulation, building the HTML document dynamically while knowing nothing about DOM.
As one might expect from a framework used by many applications, [Ember's GitHub][58] page shows 19,808 commits and 785 contributors. That is huge!
![EmberJS GitHub page][59]
### KnockoutJS
![KnockoutJS page][60]
[KnockoutJS][61] is a standalone open source JavaScript framework adopting a [Model-View-ViewModel (MVVM)][56] pattern with templates. Although fewer people may have heard about this framework compared to Angular, React, or Vue, the project is still quite active among the development community and leverages features such as:
* Declarative binding—Knockout's declarative binding system provides a concise and powerful way to link data to the UI. It's generally easy to bind to simple data properties or to use a single binding. Read more about it [here at KnockoutJS's official documentation page][62].
* Automatic UI refresh
* Dependency tracking templating
[Knockout's GitHub][11] page shows about 1,766 commits and 81 contributors. Those numbers are not as significant compared to the other frameworks, but the project is still actively maintained.
![Knockout GitHub page][63]
### BackboneJS
![BackboneJS page][64]
[BackboneJS][65] is a lightweight JavaScript framework with a RESTful JSON interface and is based on Model-View-Presenter (MVP) design paradigm.
The framework is said to be used by [Airbnb][66], Hulu, SoundCloud, and Trello. You can find all of these case studies on [Backbone's page][67].
The [BackboneJS GitHub][13] page shows 3,386 commits and 289 contributors.
![BackboneJS GitHub page][68]
### Svelte
![Svelte page][69]
[Svelte][70] is an open source JavaScript framework that generates the code to manipulate DOM instead of including framework references. This process of converting an app into JavaScript at build time rather than run time might offer a slight boost in performance in some scenarios.
[Svelte's][14] [GitHub][14] page shows 5,729 commits and 296 contributors as of this writing.
![Svelte GitHub page][71]
### AureliaJS
![Aurelia page][72]
Last on the list is [Aurelia][73]. Aurelia is a front-end JavaScript framework that is a collection of modern JavaScript modules. Aurelia has the following interesting features:
* Fast rendering—Aurelia claims that its framework can render faster than any other framework today.
* Uni-directional data flow—Aurelia uses an observable-based binding system that pushes the data from the model to the view.
* Build with vanilla JavaScript—You can build all of the website's components with plain JavaScript.
[Aurelia's][15] [GitHub][15] page shows 788 commits and 96 contributors as of this writing.
![Aurelia GitHub page][74]
So that is what I found when looking at what is new in the JavaScript framework world. Did I miss any interesting frameworks? Feel free to share your ideas in the comment section!
--------------------------------------------------------------------------------
via: https://opensource.com/article/20/5/open-source-javascript-frameworks
作者：[Bryant Son][a]
选题：[lujun9972][b]
译者：[译者ID](https://github.com/译者ID)
校对：[校对者ID](https://github.com/校对者ID)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
[a]: https://opensource.com/users/brson
[b]: https://github.com/lujun9972
[1]: https://opensource.com/sites/default/files/styles/image-full-size/public/lead-images/browser_screen_windows_files.png?itok=kLTeQUbY (Computer screen with files or windows open)
[2]: https://opensource.com/article/17/9/open-source-licensing
[3]: https://www.w3schools.com/js/js_htmldom.asp
[4]: https://reactjs.org/docs/faq-internals.html
[5]: https://reactjs.org/docs/react-dom.html
[6]: https://en.wikipedia.org/wiki/Data_binding
[7]: https://github.com/facebook/react
[8]: https://github.com/angular/angular
[9]: https://github.com/vuejs/vue
[10]: https://github.com/meteor/meteor
[11]: https://github.com/knockout/knockout
[12]: https://github.com/emberjs/ember.js
[13]: https://github.com/jashkenas/backbone
[14]: https://github.com/sveltejs/svelte
[15]: https://github.com/aurelia/framework
[16]: https://www.npmtrends.com/angular-vs-react-vs-vue-vs-meteor-vs-backbone
[17]: https://opensource.com/sites/default/files/uploads/open-source-javascript-framework-downloads-opensourcedotcom_0.png (Framework downloads graph)
[18]: https://opensource.com/sites/default/files/uploads/3_react.jpg (React page)
[19]: https://reactjs.org
[20]: https://reactjs.org/
[21]: https://reactjs.org/docs/perf.html
[22]: https://redux.js.org/
[23]: https://github.com/reduxjs/redux-thunk
[24]: https://github.com/reduxjs/reselect
[25]: https://reactjs.org/docs/two-way-binding-helpers.html
[26]: https://instagram-engineering.com/react-native-at-instagram-dd828a9a90c7
[27]: https://open.nytimes.com/introducing-react-tracking-declarative-tracking-for-react-apps-2c76706bb79a
[28]: https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9
[29]: https://khan.github.io/react-components/
[30]: https://opensource.com/sites/default/files/uploads/4_reactjobs_0.jpg (React jobs page)
[31]: https://stackoverflow.blog/2017/03/09/developer-hiring-trends-2017
[32]: https://opensource.com/sites/default/files/uploads/5_reactgithub.jpg (React GitHub page)
[33]: https://opensource.com/sites/default/files/uploads/6_angular.jpg (Angular homepage)
[34]: https://angular.io
[35]: https://cli.angular.io/
[36]: https://www.typescriptlang.org/
[37]: https://netflixtechblog.com/netflix-likes-react-509675426db
[38]: https://developer.ibm.com/technologies/javascript/tutorials/wa-react-intro/
[39]: https://medium.com/walmartlabs/tagged/react
[40]: https://opensource.com/sites/default/files/uploads/7_angulargithub.jpg (Angular GitHub page)
[41]: https://opensource.com/sites/default/files/uploads/8_vuejs.jpg (Vue JS page)
[42]: https://vuejs.org
[43]: https://www.freecodecamp.org/news/between-the-wires-an-interview-with-vue-js-creator-evan-you-e383cbf57cc4/
[44]: https://opensource.com/sites/default/files/uploads/9_vuejspopularity.jpg (Vue JS popularity graph)
[45]: https://vuejs.org/v2/guide/comparison.html#Size
[46]: https://vuejs.org/v2/guide/
[47]: https://opensource.com/sites/default/files/uploads/10_vuejsgithub.jpg (Vue JS GitHub page)
[48]: https://opensource.com/sites/default/files/uploads/11_meteor_0.jpg (Meteor Page)
[49]: https://www.meteor.com
[50]: https://en.wikipedia.org/wiki/Isomorphic_JavaScript
[51]: https://www.meteor.com/showcase
[52]: https://opensource.com/sites/default/files/uploads/casestudy1_meteor.jpg (Meteor case study)
[53]: https://opensource.com/sites/default/files/uploads/12_meteorgithub.jpg (Meteor GitHub page)
[54]: https://opensource.com/sites/default/files/uploads/13_emberjs.jpg (EmberJS page)
[55]: https://emberjs.com
[56]: https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel
[57]: https://emberjs.com/ember-users
[58]: https://github.com/emberjs
[59]: https://opensource.com/sites/default/files/uploads/14_embergithub.jpg (EmberJS GitHub page)
[60]: https://opensource.com/sites/default/files/uploads/15_knockoutjs.jpg (KnockoutJS page)
[61]: https://knockoutjs.com
[62]: https://knockoutjs.com/documentation/binding-syntax.html
[63]: https://opensource.com/sites/default/files/uploads/16_knockoutgithub.jpg (Knockout GitHub page)
[64]: https://opensource.com/sites/default/files/uploads/17_backbonejs.jpg (BackboneJS page)
[65]: https://backbonejs.org
[66]: https://medium.com/airbnb-engineering/our-first-node-js-app-backbone-on-the-client-and-server-c659abb0e2b4
[67]: https://sites.google.com/site/backbonejsja/examples
[68]: https://opensource.com/sites/default/files/uploads/18_backbonejsgithub.jpg (BackboneJS GitHub page)
[69]: https://opensource.com/sites/default/files/uploads/19_svelte.jpg (Svelte page)
[70]: https://svelte.dev
[71]: https://opensource.com/sites/default/files/uploads/20_svletegithub.jpg (Svelte GitHub page)
[72]: https://opensource.com/sites/default/files/uploads/21_aurelia.jpg (Aurelia page)
[73]: https://aurelia.io
[74]: https://opensource.com/sites/default/files/uploads/22_aureliagithub.jpg (Aurelia GitHub page)

277
translated/tech/20200528 9 open source JavaScript frameworks for front-end web development.md Normal file
View File

@ -0,0 +1,277 @@
[#]: collector: (lujun9972)
[#]: translator: (stevending1st)
[#]: reviewer: ( )
[#]: publisher: ( )
[#]: url: ( )
[#]: subject: (9 open source JavaScript frameworks for front-end web development)
[#]: via: (https://opensource.com/article/20/5/open-source-javascript-frameworks)
[#]: author: (Bryant Son https://opensource.com/users/brson)
9 个用于 web 前端开发的 JavaScript 开源框架
======
根据 JavaScript 框架的优点和功能的分类。
![Computer screen with files or windows open][1]
大约十年前，JavaScript 社区开始见证一场 JavaScript 框架的激战。在本文中我将介绍其中最著名的一些框架。值得注意的是，这些都是开源的 JavaScript 项目，这意味着你可以在 [开源许可证][2] 下自由地使用它们，甚至为它们的源代码和社区做出贡献。
你如果喜欢和我一起探索框架，可以看我的视频。
不过，在开始之前，了解一些 JavaScript 开发者谈论框架时常用的术语，将对后续的内容大有裨益。
术语 | 释义
---|---
[文档对象模型（DOM）][3] | 网站用树结构表示，每一个节点都是代表网页一部分的对象。万维网联盟（W3C），是万维网的国际标准组织，维护着 DOM 的定义。
[虚拟 DOM][4] | 用户界面（UI）以“虚拟”或“理想”的方式保存在内存中，并通过 [ReactDOM][5] 等一些库与“真实” DOM 同步。要进一步探索，请阅读 ReactJS 的虚拟 DOM 和内部文档。
[数据绑定][6] | 一个编程概念，为访问网站上的数据提供一致的接口。Web 元素与 DOM 维护的元素的 property 或 attribute 相关联（译者注：根据 MDN 的解释，Javascript 的 property 是对象的特征，通常描述与数据结构相关的特征；attribute 是指元素所有属性节点的一个实时集合）。例如，当需要在网页表单中填写密码时，数据绑定机制可以用密码验证逻辑检验，确保密码格式有效。
我们已经清楚了常用的术语，下面我们来探索一下开源的 JavaScript 框架有哪些。
框架 | 简介 | 许可证 | 发布日期
---|---|---|---
[ReactJS][7] | 目前最流行的 JavaScript 框架，由 Facebook 创建 | MIT 许可证 | 2013-5-24
[Angular][8] | Google 创建的流行的 JavaScript 框架 | MIT 许可证 | 2010-1-5
[VueJS][9] | 快速增长的 JavaScript 框架 | MIT 许可证 | 2013-7-28
[MeteorJS][10] | 比 JavaScript 框架更强大的框架 | MIT 许可证 | 2012-1-18
[KnockoutJS][11] | 开源的 MVVM（Model-View-ViewModel，模型-视图-视图模型） 框架 | MIT 许可证 | 2010-7-5
[EmberJS][12] | 另一个开源的 MVVM 框架 | MIT 许可证 | 2011-12-8
[BackboneJS][13] | 带有 RESTful JSON 和 Model-View-Presenter 模式的 JavaScript 框架 | MIT 许可证 | 2010-9-30
[Svelte][14] | 不使用虚拟 DOM 的 JavaScript 开源框架 | MIT 许可证 | 2016-11-20
[AureliaJS][15] | 现代 JavaScript 模块的集合 | MIT 许可证 | 2018-2-14
为了说明情况，下面是每个框架的 NPM 包下载量的公开数据，感谢 [npm trends][16]。
![Framework downloads graph][17]
### ReactJS
![React page][18]
[ReactJS][19] 是由 Facebook 研发的，它虽然在 Angular 之后发布，但明显是当今 JavaScript 框架的领导者。React 引入了一个虚拟 DOM 的概念，这是一个抽象副本，开发者能在框架内仅使用他们想要的 ReactJS 功能，而无需重写整个项目。此外，React 项目活跃的开源社区无疑成为增长背后的主力军。下面是一些 React 的主要优势：
* 合理的学习曲线——React 开发者可以轻松地创建 React 组件，而不需要重写整个 JavaScript 的代码。在 ReactJS 的 [首页][20] 查看它的好处以及它如何使编程更容易。
* 高度优化的性能——React 的虚拟 DOM 的实现和其他功能提升了应用程序的渲染性能。请查看 ReactJS 的关于如何对其性能进行基准测试，并对应用性能进行衡量的相关 [描述][21]。
* 优秀的支持工具——[Redux][22]、[Thunk][23] 和 [Reselect][24] 是构建良好、可调式代码的最佳工具。
* 单项数据绑定——模型使用 Reach 流，只从所有者流向子模块，这使得在代码中追踪因果关系更加简单。请在 ReactJS 的 [数据绑定页][25] 阅读更多相关资料。
谁在使用 ReactJS？Facebook 自从发明它，就大量使用 React 构建公司首页，据说 [Instagram][26] 完全基于 ReactJS 库。你可能会惊讶地发现，其他知名公司如 [New York Times][27]、[Netflix][28] 和 [Khan Academy][29] 也在他们的技术栈中使用了 ReactJS。
更令人惊讶的是 ReactJS 开发者的工作可用性，正如在下面 Stackoverflow 所做的研究中看到的，嘿，可以从事开源项目并获得报酬。这很酷！
![React jobs page][30]
Stackoverflow 的研究显示了对 ReactJS 开发者的巨大需求——[来源：2017年开发者招聘趋势——Stackoverflow 博客][31]
[ReactJS 的 GitHub][7] 目前显示超过 13,000 次提交和 1,377 位贡献者。它是一个在 MIT 许可证下的开源项目。
![React GitHub page][32]
### Angular
![Angular homepage][33]
对于大多数开发者来说，也许现在 React 是领先的 JavaScript 框架，但是 [Angular][34] 紧随其后。事实上，开源开发者和初创公司更乐于选择 React，而较大的公司往往更喜欢 Angular（下面列出了一些例子）。主要原因是，虽然 Angular 可能更复杂，但它的统一性和一致性适用于大型项目。例如，在我整个职业生涯中一直研究 Angular 和 React，我观察到大公司通常认为 Angular 严格的结构是一种优势。下面是 Angular 的另外一些关键优势：
* 精心设计的命令行工具——Angular 有一个优秀的命令行工具（CLI），可以轻松引导和使用 Angular 进行开发。ReactJS 提供命令行工具和其他工具，同时 Angular 有广泛的支持和出色的文档，你可以参见 [这个页面][35]。
* 单项数据绑定——和 React 类似，单向数据绑定模型使框架受更少的不必要的副作用的影响。
* 更好的 TypeScript 支持——Angular 与 [TypeScript][36] 有很好的一致性，它其实是 JavaScript 强制类型的拓展。它还可以转译为 JavaScript，强制类型是减少错误代码的绝佳选择。
像 YouTube、[Netflix][37]、[IBM][38] 和 [Walmart][39] 等知名网站，都已在其应用程序中采用了 Angular。我通过自学使用 Angular 来开始学习前端 JavaScript 开发。我参与了许多涉及 Angular 的个人和专业项目，但那是当时被称为 AngularJS 的 Angular 1.x。当 Google 决定将版本升级到 2.0 时，他们对框架进行了彻底的改造，然后成了 Angular。新的 Angular 是对之前的 AngularJS 的彻底改造，这一举动带来了一部分新开发者也驱逐了一部分原有的开发者。
截止到撰写本文，[Angular 的 GitHub][8] 页面显示 17,781 次提交和 1,133 位贡献者。它也是一个遵循 MIT 许可证的开源项目，因此你可以自由地在你的项目或贡献中使用。
![Angular GitHub page][40]
### VueJS
![Vue JS page][41]
[VueJS][42] 是一个非常有趣的框架。它是 JavaScript 框架领域的新来者，但是在过去几年里它的受欢迎程度显著增加。VueJS 由 [尤雨溪][43] 创建，他是曾参与过 Angular 项目的谷歌工程师。该框架现在变得如此受欢迎，以至于许多前端工程师更喜欢 VueJS 而不是其他 JavaScript 框架。下图描述了该框架随着时间的推移获得关注的速度。
![Vue JS popularity graph][44]
这里有一些 VueJS 的主要优点：
* 更容易地学习曲线——与 Angular 或 React 相比，许多前端开发者都认为 VueJS 有更平滑的学习曲线。
* 小体积——与 Angular 或 React 相比，VueJS 相对轻巧。在 [官方文档][45] 中，它的大小据说只有约 30 KB；而 Angular 生成的项目超过 65 KB。
* 简明的文档——VueJS 有全面清晰的文档。请自行查看它的 [官方文档][46]。
[VueJS 的 GitHub][9] 显示该项目有 3,099 次提交和 239 位贡献者。
![Vue JS GitHub page][47]
### MeteorJS
![Meteor page][48]
[MeteorJS][49] 是一个免费开源的 [同构框架][50]，这意味着它和 NodeJS 一样，同时运行客户端和服务器的 JavaScript。Meteor 能够和任何其他流行的前端框架一起使用，如 Angular、React、Vue、Svelte 等。
Meteor 被高通、Mazda 和宜家等多家公司以及如 Dispatch 和 Rocket.Chat 等多个应用程序使用。[您可以其在官方网站上查看更多案例][51]。
![Meteor case study][52]
Meteor 的一些主要功能包括：
* 在线数据——服务器发送数据而不是 HTML，并由客户端渲染。在线数据主要是指 Meteor 在页面加载时通过一个 WebSocket 连接服务器，然后通过该链接传输所需要的数据。
* 用 JavaScript 开发一切——客户端、应用服务、网页和移动界面都可以用 JavaScript 设计。
* 支持大多数主流框架——Angular、React 和 Vue 都可以与 Meteor 结合。因此，你仍然可以使用最喜欢的框架如 React 或 Angular，这并不防碍 Meteor 为你提供一些优秀的功能。
截止到目前，[Meteor 的 GitHub][10] 显示 22，804 次提交和 428 位贡献者。这对于开源项目来说相当多了。
![Meteor GitHub page][53]
### EmberJS
![EmberJS page][54]
[EmberJS][55] 是一个基于 [模型-视图-视图模型（MVVM）][56] 模式的开源 JavaScript 框架。如果你从来没有听说过 EmberJS，你肯定会惊讶于有多少公司在使用它。Apple Music、Square、Discourse、Groupon、LinkedIn、Twitch、Nordstorm 和 Chipotle 都将 EmberJS 作为公司的技术栈之一。你可以通过查询 [EmberJS 的官方页面][57] 来发掘所有使用 EmberJS 的应用和客户。
Ember 虽然和我们讨论过的其他框架有类似的好处，但这里有些独特的区别：
* 约定优于配置——Ember 标准化命名约定并自动生成结果代码。这种方法学习曲线有些陡峭，但可以确保程序员遵循最佳实践。
* 成熟的模板机制——Ember 依赖于直接文本操作，直接构建 HTML 文档，而并不关心 DOM。
正如所期待的那样，作为一个被许多应用程序使用的框架，[Ember 的 GitHub][58] 页面显示该项目拥有 19,808 次提交和 785 位贡献者。这是一个巨大的数字！
![EmberJS GitHub page][59]
### KnockoutJS
![KnockoutJS page][60]
[KnockoutJS][61] 是一个独立开源的 JavaScript 框架，采用 [模板-视图-视图模型（MVVM）][56] 模式与模板。尽管与 Angular、React 或 Vue 相比，听说过这个框架的人可能比较少，这个项目在开发者社区仍然相当活跃，并且有以下功能：
* 声明式绑定——Knockout 的声明式绑定系统提供了一种简洁而强大的方式来将数据链接到 UI。绑定简单的数据属性或使用单向绑定很简单。请在 [KnockoutJS 的官方文档页面][62] 阅读更多相关信息。
* 自动 UI 刷新。
* 依赖跟踪模板。
[Knockout 的 GitHub][11] 页面显示约有 1,766 次提交和 81 位贡献者。与其他框架相比，这些数据并不重要，但是该项目仍然在积极维护中。
![Knockout GitHub page][63]
### BackboneJS
![BackboneJS page][64]
[BackboneJS][65] 是一个具有 RESTful JSON 接口，基于 Model-View-Presenter（MVP）设计范式的轻量级 JavaScript 框架。
这个框架据说已经被 [Airbnb][66]、Hulu、SoundCloud 和 Trello 使用。你可以在 [Backbone 的页面][67] 找到上面所有这些案例来研究。
[BackboneJS 的 GitHub][13] 页面显示有 3,386 次提交和 289 位贡献者。
![BackboneJS GitHub page][68]
### Svelte
![Svelte page][69]
[Svelte][70] 是一个开源的 JavaScript 框架，它生成操作 DOM 的代码，而不是包含框架引用。在构建时而非运行时将应用程序转换为 JavaScript 的过程，在某些情况下可能会带来轻微的性能提升。
[Svelte 的 GitHub][14] 页面显示，截止到本文撰写为止，该项目有 5,729 次提交和 296 位贡献者。
![Svelte GitHub page][71]
### AureliaJS
![Aurelia page][72]
最后我们介绍一下 [Aurelia][73]。Aurelia 是一个前端 JavaScript 框架，是一个现代 JavaScript 模块的集合。Aurelia 有以下有趣的功能：
* 快速渲染——Aurelia 宣称比当今其他任何框架的渲染速度都快。
* 单向数据流——Aurelia 使用一个基于观察的绑定系统，将数据从模型推送到视图。
* 使用 vanilla JavaScript 架构——可以用 vanilla JavaScript 构建网站的所有组件。
[Aurelia 的 GitHub][15] 页面显示，截止到撰写本文为止该项目有 788 次提交和 96 位贡献者。
![Aurelia GitHub page][74]
这就是我在查看 JavaScript 框架世界时发现的新内容。我错过了其他有趣的框架吗？欢迎在评论区分享你的想法。
--------------------------------------------------------------------------------
via: https://opensource.com/article/20/5/open-source-javascript-frameworks
作者：[Bryant Son][a]
选题：[lujun9972][b]
译者：[stevending1st](https://github.com/stevending1st)
校对：[校对者ID](https://github.com/校对者ID)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
[a]: https://opensource.com/users/brson
[b]: https://github.com/lujun9972
[1]: https://opensource.com/sites/default/files/styles/image-full-size/public/lead-images/browser_screen_windows_files.png?itok=kLTeQUbY (Computer screen with files or windows open)
[2]: https://opensource.com/article/17/9/open-source-licensing
[3]: https://www.w3schools.com/js/js_htmldom.asp
[4]: https://reactjs.org/docs/faq-internals.html
[5]: https://reactjs.org/docs/react-dom.html
[6]: https://en.wikipedia.org/wiki/Data_binding
[7]: https://github.com/facebook/react
[8]: https://github.com/angular/angular
[9]: https://github.com/vuejs/vue
[10]: https://github.com/meteor/meteor
[11]: https://github.com/knockout/knockout
[12]: https://github.com/emberjs/ember.js
[13]: https://github.com/jashkenas/backbone
[14]: https://github.com/sveltejs/svelte
[15]: https://github.com/aurelia/framework
[16]: https://www.npmtrends.com/angular-vs-react-vs-vue-vs-meteor-vs-backbone
[17]: https://opensource.com/sites/default/files/uploads/open-source-javascript-framework-downloads-opensourcedotcom_0.png (Framework downloads graph)
[18]: https://opensource.com/sites/default/files/uploads/3_react.jpg (React page)
[19]: https://reactjs.org
[20]: https://reactjs.org/
[21]: https://reactjs.org/docs/perf.html
[22]: https://redux.js.org/
[23]: https://github.com/reduxjs/redux-thunk
[24]: https://github.com/reduxjs/reselect
[25]: https://reactjs.org/docs/two-way-binding-helpers.html
[26]: https://instagram-engineering.com/react-native-at-instagram-dd828a9a90c7
[27]: https://open.nytimes.com/introducing-react-tracking-declarative-tracking-for-react-apps-2c76706bb79a
[28]: https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9
[29]: https://khan.github.io/react-components/
[30]: https://opensource.com/sites/default/files/uploads/4_reactjobs_0.jpg (React jobs page)
[31]: https://stackoverflow.blog/2017/03/09/developer-hiring-trends-2017
[32]: https://opensource.com/sites/default/files/uploads/5_reactgithub.jpg (React GitHub page)
[33]: https://opensource.com/sites/default/files/uploads/6_angular.jpg (Angular homepage)
[34]: https://angular.io
[35]: https://cli.angular.io/
[36]: https://www.typescriptlang.org/
[37]: https://netflixtechblog.com/netflix-likes-react-509675426db
[38]: https://developer.ibm.com/technologies/javascript/tutorials/wa-react-intro/
[39]: https://medium.com/walmartlabs/tagged/react
[40]: https://opensource.com/sites/default/files/uploads/7_angulargithub.jpg (Angular GitHub page)
[41]: https://opensource.com/sites/default/files/uploads/8_vuejs.jpg (Vue JS page)
[42]: https://vuejs.org
[43]: https://www.freecodecamp.org/news/between-the-wires-an-interview-with-vue-js-creator-evan-you-e383cbf57cc4/
[44]: https://opensource.com/sites/default/files/uploads/9_vuejspopularity.jpg (Vue JS popularity graph)
[45]: https://vuejs.org/v2/guide/comparison.html#Size
[46]: https://vuejs.org/v2/guide/
[47]: https://opensource.com/sites/default/files/uploads/10_vuejsgithub.jpg (Vue JS GitHub page)
[48]: https://opensource.com/sites/default/files/uploads/11_meteor_0.jpg (Meteor Page)
[49]: https://www.meteor.com
[50]: https://en.wikipedia.org/wiki/Isomorphic_JavaScript
[51]: https://www.meteor.com/showcase
[52]: https://opensource.com/sites/default/files/uploads/casestudy1_meteor.jpg (Meteor case study)
[53]: https://opensource.com/sites/default/files/uploads/12_meteorgithub.jpg (Meteor GitHub page)
[54]: https://opensource.com/sites/default/files/uploads/13_emberjs.jpg (EmberJS page)
[55]: https://emberjs.com
[56]: https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel
[57]: https://emberjs.com/ember-users
[58]: https://github.com/emberjs
[59]: https://opensource.com/sites/default/files/uploads/14_embergithub.jpg (EmberJS GitHub page)
[60]: https://opensource.com/sites/default/files/uploads/15_knockoutjs.jpg (KnockoutJS page)
[61]: https://knockoutjs.com
[62]: https://knockoutjs.com/documentation/binding-syntax.html
[63]: https://opensource.com/sites/default/files/uploads/16_knockoutgithub.jpg (Knockout GitHub page)
[64]: https://opensource.com/sites/default/files/uploads/17_backbonejs.jpg (BackboneJS page)
[65]: https://backbonejs.org
[66]: https://medium.com/airbnb-engineering/our-first-node-js-app-backbone-on-the-client-and-server-c659abb0e2b4
[67]: https://sites.google.com/site/backbonejsja/examples
[68]: https://opensource.com/sites/default/files/uploads/18_backbonejsgithub.jpg (BackboneJS GitHub page)
[69]: https://opensource.com/sites/default/files/uploads/19_svelte.jpg (Svelte page)
[70]: https://svelte.dev
[71]: https://opensource.com/sites/default/files/uploads/20_svletegithub.jpg (Svelte GitHub page)
[72]: https://opensource.com/sites/default/files/uploads/21_aurelia.jpg (Aurelia page)
[73]: https://aurelia.io
[74]: https://opensource.com/sites/default/files/uploads/22_aureliagithub.jpg (Aurelia GitHub page)