angular和react
In this article, we will compare two of the most popular web technologies in 2019, and also address their history, key differences, core languages recommended (TypeScript and JavaScript) and so forth. Overall, these technologies have made it much easier for developers to reuse, refactor, and maintain code by dividing things into modules/components.
在本文中，我们将比较2019年两种最流行的网络技术，并解决它们的历史，主要区别，推荐的核心语言(TypeScript和JavaScript)等等。 总体而言，这些技术通过将事物划分为模块/组件，使开发人员更容易重用，重构和维护代码。
The goal of this article is not to find the best technology, but to compare, highlight, and clarify few misconceptions. We’ll also focus on what is important instead of minor details that do not really matter in the long-term.
本文的目的不是寻找最佳技术，而是比较，强调和澄清一些误解。 我们还将专注于重要的事情，而不是那些从长远来看并不重要的次要细节。
You should be aware that the comparison between these two technologies cannot be fully covered. Angular comes with a complete framework (MVC), while React is a fronted-library with lots of open-source packages to integrate with.
您应该意识到，这两种技术之间的比较无法完全涵盖。 Angular带有一个完整的框架(MVC)，而React是一个前端库，具有许多要集成的开源软件包。
If you want to become a better web developer, start your own business, teach others, or simply improve your development skills, subscribe to my newsletter to get latest web news and updates.
如果您想成为一个更好的Web开发人员，开始自己的事业，教别人，或者干脆提高您的开发技能，请订阅我的新闻通讯以获取最新的Web新闻和更新。
有待解决的问题 (Questions to be addressed)
- What are the key differences between Angular and React? Angular和React之间的主要区别是什么？
- What makes TypeScript so special? 是什么让TypeScript如此特别？
- How popular are these technologies? 这些技术有多受欢迎？
- What is the current open-source status? 当前的开源状态是什么？
- Which technology do companies use the most? 公司使用最多的技术是什么？
- Do static typed languages influence code quality and development time? 静态类型语言是否会影响代码质量和开发时间？
Future sections will be added based on demand from the comments.
将来的部分将根据评论的需求添加。
关键比较 (Key comparisons)
Here’s a quick side-to-side comparison between Angular (left) and React (right).
这是Angular(左)和React(右)之间的快速侧面比较。
One thing that is really great about React in terms of performance is the Virtual DOM, which you’ve probably heard about a couple of times. If not, don’t worry, I’ll explain it!
就性能而言，React真正很棒的一件事就是您可能听说过几次的虚拟DOM。 如果没有，请不用担心，我会解释！
ProblemLet’s say you want to update a user’s birth date within a block of HTML tags.
问题假设您要在一个HTML标签块中更新用户的生日。
Virtual DOMIt only updates the part that is required by seeing the differences between the previous and current HTML version. Its a similar approach to how GitHub operates when detecting changes in the file.
虚拟DOM仅通过查看以前和当前HTML版本之间的差异来更新所需的部分。 与检测文件中的更改时GitHub的运行方式类似。
Regular DOMIt will update the whole tree structure of HTML tags until it reaches the birth date.
常规DOM它将更新HTML标签的整个树结构，直到到达生日为止。
为什么这有关系？ (Why does it matter?)
It may not matter for the problem described above. However, if we deal with 20–30 asynchronous data requests on the same page (and for every page request we replace the whole HTML block), it will influence performance as well as user-experience.
对于上述问题可能并不重要。 但是，如果我们在同一个页面上处理20–30个异步数据请求(对于每个页面请求，我们将替换整个HTML块)，这将影响性能以及用户体验。
Need more context? Check out Dace’s article!
But first, back to the beginning…
但是首先，回到开始...
历史 (History)
We’ll need to know a bit of history (context) because it provides insight into how things may shape up in the future.
我们需要了解一些历史(上下文)，因为它可以洞悉未来的情况。
I will not go into the details of what exactly happened between Angular and AngularJS, and I’m sure there are lots of resources available that cover it. But in short, Google replaced AngularJS with Angular, and JavaScript with TypeScript.
我不会详细介绍Angular和AngularJS之间到底发生了什么，我敢肯定有很多可用的资源来介绍它 。 简而言之，Google用Angular替换了AngularJS，并用TypeScript替换了JavaScript。
Alright, so back in the days with ES4/ES5, the learning-curve for JavaScript was really high. If you came from the world of Java, C# or C++, a world of object-oriented programming (OOP), then learning JavaScript was simply not that intuitive. In other words, it was a pain in the ass.
好吧，所以在使用ES4 / ES5的日子里，JavaScript的学习曲线确实很高。 如果您来自Java，C＃或C ++领域，即面向对象编程(OOP)领域，那么学习JavaScript根本就不是那么直观。 换句话说，这是一个痛苦的屁股。
It’s not because the language was poorly written, but because it has a different purpose. It was built to handle the asynchronous nature of the web, such as user interaction, event-binding, transitions/animations, and so forth. It’s a different animal with different instincts.
这不是因为该语言写得不好，而是因为它具有不同的目的。 它被构建为处理Web的异步特性，例如用户交互，事件绑定，过渡/动画等。 这是一种具有不同本能的动物。
人气度 (Popularity)
As Google Trends reveal, Angular and React are two of the most popular web technologies in 2019.
正如Google趋势所揭示的那样，Angular和React是2019年最受欢迎的两种网络技术。
Angular has more search hits than React, however it does not necessarily mean that one is better than the other. But this indicates what people find interesting, whatever the reason may be. It’s important to be aware that people may mix between keywords such as AngularJS or Angular, and thus lead to higher search hits.
Angular的搜索命中率比React高，但这并不一定意味着其中一个要比另一个更好。 但是，这表明人们发现了什么有趣的东西，无论原因是什么。 重要的是要意识到人们可能会在AngularJS或Angular之类的关键字之间混用，从而导致更高的搜索量。
One thing is for sure — both technologies are growing, and the future looks bright. That means you don’t have to worry if one technology will fail, and leave you behind.
可以肯定的是，这两种技术都在增长，并且前景一片光明。 这意味着您不必担心某一项技术是否会失败并把自己抛在后面。
It’s important that we do not neglect history in terms of what happened between AngularJS and Angular, because history is a form of indication on what may happen in the future. But if you have some experience with Angular and AngularJS, then you’ll most likely see why the decisions was made for the better. Just to mention, such things can happen to any frameworks out there, including React.
重要的是，我们不要忽视AngularJS和Angular之间发生的事情，因为历史是对未来可能发生的事情的一种指示。 但是，如果您具有Angular和AngularJS的经验，那么您很可能会明白为什么做出更好的决定。 只需提一下，这样的事情就可能发生在包括React在内的任何框架上。
开源的 (Open-source)
React has over 100,000 stars, along with 1200 contributors and close to 300 issues waiting to be resolved.
React拥有100,000多颗恒星，以及1200个贡献者和将近300个问题需要解决。
React has an a time-to-market advantage, since it was released 3 years prior to Angular. And that means it has faced lots real-world problems, gone through critical tests, and overall has developed into an adaptable and flexible fronted-library which many love.
由于React在Angular之前3年发布，因此具有上市时间优势。 这意味着它面临着许多现实世界中的问题，经过了严格的测试，并且总体上已经发展成为一个适应性强且灵活的前端图书馆，受到了很多人的喜爱。
When it comes to Angular, at first glance, we can clearly see that Angular has 6 times more issues than React (not good). However, we must not forget that Angular is a much larger framework, and also has fewer developers using it (currently) because it was released in 2016.
乍一看到Angular，我们可以清楚地看到Angular的问题是React的6倍(不好)。 但是，我们一定不要忘记Angular是一个更大的框架，并且因为它是在2016年发布的，所以使用它的开发人员也较少(目前)。
公司正在使用什么 (What companies are using)
React was initially developed at Facebook for Facebook to optimize and ease the development of components. An article written by Chris Cordle points out that React has a higher usage at Facebook than Angular has at Google.
React最初是在Facebook上为Facebook开发的，旨在优化和简化组件的开发。 克里斯·科尔德尔 ( Chris Cordle)发表的一篇文章指出，React在Facebook上的使用率高于Angular在Google上的使用率。
So who uses which technology?
那么谁在使用哪种技术呢？
＃React (# React)
- Facebook 脸书
- AirBnb 爱彼迎
- Uber 优步
- Netflix Netflix公司
- Instagram Instagram
- Whatsapp Whatsapp的
- Dropbox 投寄箱
＃角度 (# Angular)
- Eat24 吃24
- CVS shop CVS店
- onefootball 足球
- Google Express Google Express
- NBA NBA
- Delta 三角洲
- wix.com wix.com
If you know of any large (well-known) companies using Angular, please share with a link.
如果您知道使用Angular的任何大型(知名)公司，请共享链接。
TypeScript和JavaScript(ES6 +) (TypeScript and JavaScript (ES6+))
As I mentioned, it can be misleading to only compare Angular and React without focusing on the core language each one has emphasizes (according to their docs).
正如我提到的，仅比较Angular和React而没有关注每个人都强调的核心语言(根据他们的文档)可能会产生误导。
Note! The aim this section is not to decide whether we’ll choose Angular or React. But clarify few misconceptions between statically- vs dynamically-typed languages that has been going on for a while, backed with research.
注意！ 本部分的目的不是决定我们将选择Angular还是React。 但是，请澄清一下静态语言与动态类型的语言之间存在的误解，这种误解已经持续了一段时间，并得到了研究的支持。
In terms of user base, JavaScript is superior. But TypeScript is rapidly increasing, so who knows what 10–15 years will bring.
就用户群而言，JavaScript是优越的。 但是TypeScript正在Swift增加，所以谁知道10-15年会带来什么。
TypeScript在过去5年的流行 (TypeScript popularity in the past 5 years)
过去5年中JavaScript的普及程度 (JavaScript popularity in the past 5 years)
JavaScript与TypeScript在过去5年的普及 (JavaScript vs TypeScript popularity in the past 5 years)
TypeScript was initially developed by Microsoft to make JavaScript easier (in other words, to make ES5 easier). It was released in October 2012. And it is simply a transpiler that compiles TypeScript to JavaScript code, which also means you can write ES5 code in a TypeScript file. TypeScript is referred to as a superset of JavaScript.
TypeScript最初是由Microsoft开发的，以简化JavaScript(换句话说，简化ES5)。 它于2012年10月发布。它只是一个将TypeScript编译为JavaScript代码的编译器，这也意味着您可以在TypeScript文件中编写ES5代码。 TypeScript被称为JavaScript的超集。
In general, TypeScript provides a smooth transition for programmers with an object-oriented programming (OOP) background. It is important to notice that TypeScript was released in the period of ES5, and during that time, ES5 was not a class-based OOP language.
通常，TypeScript为具有面向对象编程(OOP)背景的程序员提供了一个平滑的过渡。 重要的是要注意TypeScript是在ES5期间发布的，在此期间，ES5不是基于类的OOP语言。
In short, the closest you could come to classes and objects back then was through prototype inheritance. And as we know, this was a difficult transition for most developers with an OOP background. So the ideal decision was of course choosing something you felt comfortable and familiar with, which was likely TypeScript.
简而言之，那时可以最接近类和对象的是通过原型继承。 众所周知，对于大多数具有OOP背景的开发人员来说，这是一个艰难的过渡。 因此，理想的决定当然是选择您感到舒适和熟悉的东西，这很可能是TypeScript。
However, in the past years, JavaScript has evolved and implemented lots of great changes such as modules, classes, spread operators, arrow functions, template literals and so on. Overall, it allows developers to write declarative code, while supporting the characteristics of a true OOP language (that is, including class-based structure).
但是，在过去的几年中，JavaScript进行了改进并实现了许多重大更改，例如模块，类，传播运算符，箭头函数，模板文字等。 总体而言，它允许开发人员编写声明性代码，同时支持真正的OOP语言的特征(即，包括基于类的结构)。
静态和动态类型的语言 (Statically and Dynamically-typed languages)
A statically typed language basically means that you can define the variable type (string, number, or array etc). You may ask why this is important. Here’s a real world analogy I’ve setup (creativity at its best).
静态类型语言基本上意味着您可以定义变量类型(字符串，数字或数组等)。 您可能会问为什么这很重要。 这是我设置的现实世界类比(创造力处于最佳状态)。
Let’s say you want to refuel your car with gas. One thing that is important is to fuel with the right gas — petrol or diesel. And if you don’t know, you may need to buy a new car.
假设您想为汽车加油。 重要的一件事是使用正确的汽油(汽油或柴油)作为燃料。 而且，如果您不知道，则可能需要购买新车。
Of course, the severity is not like that with coding, however, in some cases it may be. Think about it. If you work with a large application, you would like to know the argument and property type that is passed, otherwise you may break the code.
当然，严重性与编码不同，但是在某些情况下可能会如此。 想一想。 如果使用大型应用程序，则想知道传递的参数和属性类型，否则可能会破坏代码。
Alright, so if you are still confused what statically typed means, check this out:
好吧，所以如果您仍然对静态类型的含义感到困惑，请查看以下内容：
静态类型属性 (Static typed property)
静态类型参数 (Static typed argument)
I’ve learned that lots of people believe that a statically typed language means reliable code, and is most often used as a winning argument over dynamically typed languages. And frankly, it is quite difficult to disprove this statement because it fundamentally relies on the development environment, the programmers experience and of course the project requirements.
我了解到，很多人认为静态类型的语言意味着可靠的代码，并且最常被用作动态类型的语言的优胜者。 坦率地说，很难反驳这一说法，因为它从根本上依赖于开发环境，程序员的经验以及项目需求。
Luckily, research (tl;dr video) has taken this seriously, and put this myth to test with 49 subjects.
幸运的是， 研究 (tldr video )对此非常重视，并将这个神话用49个主题进行了测试。
该研究的观察结果是： (The observations from the research are:)
- Statically typed language require more time due to fixing typo errors 由于修复了打字错误，静态类型语言需要更多时间
- Dynamically typed language is readable and easier to write (declarative code) 动态类型语言易读且易于编写(声明性代码)
Figure 5 shows that, on average, developers reduce their development time by a factor of two when writing a dynamically typed language.
图5显示，平均而言，开发人员在编写动态类型的语言时，将其开发时间减少了两倍。
If you want to dig deeper into this topic, I suggest reading this article by Eric Elliott which states that you may not need TypeScript (or statically typed languages).
如果您想更深入地研究该主题，建议阅读Eric Elliott的这篇文章，其中指出您可能不需要TypeScript(或静态类型的语言)。
选择什么 (What to choose)
So the question is not only about what Angular or React offers, but also about what core language you should invest time on. And it does not really matter as long you choose something that fits your requirements and complexity.
因此，问题不仅在于Angular或React提供什么，还在于您应该花时间在哪种核心语言上。 只要您选择适合您的要求和复杂性的东西，它实际上并不重要。
If you are not a fan of types, then there is nothing standing in your way of writing ES6 code in TypeScript. It’s just that if you need it, then it is there.
如果您不喜欢类型，那么用TypeScript编写ES6代码就没有任何障碍。 只是如果您需要它，它就在那里。
But if you build a fairly large front-end application with Angular dealing with many HTTP requests, then having types really helps with questions such as “What type of object is this, what fields can I use, and what type is this field etc”. It works great for collaboration and clarifying small things.
但是，如果您使用Angular构建了一个相当大的前端应用程序来处理许多HTTP请求，那么使用类型确实可以解决诸如“这是什么类型的对象，我可以使用哪些字段以及该字段是什么类型”之类的问题。 。 它非常适用于协作和澄清小事情。
Here is a simple class-object comparison between TS and JS (ES6).
这是TS和JS(ES6)之间的简单类对象比较。
海事组织 (IMO)
Statically typed feels structured, secure, readable, and easy to collaborate with others (prevents people from passing unexpected values). However, when working with dynamically typed, I have the flexibility and creativity to focus more on creating than thinking to much about types, interfaces and generics and so forth.
静态类型的感觉结构化，安全，易读并且易于与他人协作(防止人们传递意外的值)。 但是，在使用动态类型时，我具有灵活性和创造力，可以更加专注于创建，而不是过多地考虑类型，接口和泛型等等。
And from the past web-apps I’ve built, I haven’t really had any large issues with not having static typed. It does not mean I don’t like it — I just that I don’t need it, but maybe I do in the future.
从过去构建的Web应用程序来看，没有静态类型确实没有什么大问题。 这并不意味着我不喜欢它-我只是不需要它，但也许将来我会喜欢。
Here’s an update — currently I’m working with a couple of Microsoft developers to build an application using Angular framework. The reason we’ve selected Angular is because most of the packages are already defined, and the documentation for everything is in one place. It also emphasizes on TypeScript, which is a perfect choice because the majority of devs have already lots of experience with object-oriented programming.
这是一个更新—目前，我正在与几个Microsoft开发人员一起使用Angular框架构建应用程序。 我们选择Angular的原因是因为大多数软件包都已定义，所有内容的文档都放在一个地方。 它还强调TypeScript，这是一个完美的选择，因为大多数开发人员已经具有丰富的面向对象编程经验。
On the other hand, I’ve seen similar apps we are working with built with React. So in general, both are powerful tools, and mostly rely on how you setup the architecture.
另一方面，我已经看到我们正在使用React构建的类似应用程序。 因此，通常来说，两者都是功能强大的工具，并且主要取决于您如何设置体系结构。
外卖笔记 (Takeaway notes)
- TypeScript is simply a transpiler, it can be used with React or any other JS frameworks TypeScript只是一个编译器，可以与React或任何其他JS框架一起使用
- React handles memory-management efficiently (virtual DOM) React有效地处理内存管理(虚拟DOM)
- React uses JavaScript (ES6), a recognized web-language since 1995 React使用JavaScript(ES6)，这是1995年以来公认的网络语言
- Angular uses TypeScript, released in 2012 Angular使用TypeScript，于2012年发布
- Statically typed language is great, but its not a must 静态类型语言很棒，但不是必须的
- Dynamically typed languages require less time to write and more flexibility to use creativity 动态类型语言需要更少的时间来编写，并且使用创造力时需要更大的灵活性
- Learning statically-typed language may be a challenge, especially if you’ve only been working with dynamically typed languages 学习静态类型的语言可能是一个挑战，特别是如果您只使用动态类型的语言
- ES6 has implemented lots of great features such as modules, classes, spread operator, arrow functions, template literals that allows you to write less, cleaner and more structured code (syntactic sugar) ES6实现了许多很棒的功能，例如模块，类，扩展运算符，箭头函数，模板文字，使您可以编写更少，更干净和更结构化的代码(语法糖)
- TS is simply ES6+ with types and much more TS只是具有类型和更多功能的ES6 +
结论 (Conclusion)
The framework/component-library you choose may influence how much time you spend programming and your budget. If you have a team with C#, Java or C++ developers, then I would probably go for Angular, since TypeScript shares many similarities with these languages.
您选择的框架/组件库可能会影响您花费多少时间进行编程和预算。 如果您有C＃，Java或C ++开发人员组成的团队，那么我可能会选择Angular，因为TypeScript与这些语言有很多相似之处。
The best recommendation I can offer is to setup a basic application both in Angular and React, and then evaluate the language and work flow before you make a decision.
我可以提供的最佳建议是在Angular和React中都设置一个基本应用程序，然后在做出决定之前评估语言和工作流程。
As previously mentioned, both technologies have their own set of advantages and similarities, and it really boils down to what type of requirements the application offers, the complexity and level of experience the developers have.
如前所述，这两种技术都有自己的一套优点和相似性，并且实际上归结为应用程序提供哪种类型的要求，开发人员所具有的复杂性和经验水平。
Here are a few articles I’ve written about the web-ecosystem along with personal programming tips and tricks.
这是我写的有关Web生态系统的几篇文章，以及个人编程技巧和窍门。
You can find me on Medium where I publish on a weekly basis. Or you can follow me on Twitter, where I post relevant web development tips and tricks along with personal stories.
您可以在我每周发布的“媒介”中找到我。 或者，您也可以在Twitter上关注我，我在其中发布了相关的Web开发技巧和窍门以及个人故事。
P.S. If you enjoyed this article and want more, please clap ❤ and share with friends that may need it, it’s good karma.
PS：如果您喜欢这篇文章并想要更多，请拍手❤并与可能需要它的朋友分享，这是很好的业障。
angular和react
4175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
