Angular VS React [Translation]
In this article, we’ll compare the two most popular web technologies of 2018, exploring their history, core differences, and the core languages they use [TypeScript, JavaScript]. Overall, these technologies enable developers to modularize and componentize their code for reuse, modification, and maintenance.
The purpose of this article is not to find the best technology, but rather to compare, highlight, and clarify some misconceptions. We also focus on what’s important to us in the long term, rather than trivial details.
You should understand that comparing these two technologies doesn’t cover everything. Angular is a comprehensive MVC framework, while React is a library integrated with a collection of open-source packages. Note! The technologies referred to here are Angular and React.
Questions to Address
- Core differences between Angular and React
- What makes TypeScript special
- Why these technologies are popular
- Current state of open-source projects
- Which technology do major companies use most
- Do statically typed languages affect code quality and development cycles
The following content will provide answers based on these questions.
Key Comparison
Here’s a comparison: Angular (left), React (right)
Worth mentioning, React’s performance with virtual DOM is excellent, as you may have heard. If not, I’ll explain.
The Problem
Suppose in an HTML markup block, we want to update a user’s birth date
Virtual DOM
Only updates the differences between the current HTML version and the previous one. This is similar to how GitHub detects file changes.
Traditional DOM
Updates the entire HTML tree structure
What’s the Impact
For the above requirement, no problem. But if on a page we handle 20-30 asynchronous data requests, and for each request we replace the entire HTML block, this will affect user experience.
Need more context? See here
Let’s go back to the beginning
History
We need to know some history (context), which provides us with perspective that might affect the future.
I won’t delve deeply into Angular vs AngularJS, there are many resources on this. In short, Google replaced AngularJS with Angular, and JavaScript with TypeScript.
Back in the ES4/ES5 era, JavaScript had a really steep learning curve. If you came from the world of Java, C#, C++, the object-oriented OOP world, and then learned JavaScript, it was really unintuitive, in other words, quite painful.
This wasn’t because the language was poorly written, but because the purposes were different. JavaScript’s purpose was for asynchronous operations, like user interactions, data binding, transitions/animations, etc. Different animals have different behaviors.
Popularity
Angular and React are the two most popular web technologies in 2018.
Angular has higher search volume than React, but this doesn’t mean React is worse than Angular. But it shows people are interested, and note that users might search for AngularJS or Angular, so the search volume is actually higher.
What’s certain is: both technologies are evolving and have bright futures. But we also know what happened to AngularJS later, which might happen to React too. But that’s the nature of business, and so are we.
Open Source
React has over 100K stars, 1200 contributors, and nearly 300 issues awaiting resolution. React has a time-to-market advantage because it’s been released for 3 years, which is longer than Angular. This means it has faced real-world problems and undergone rigorous testing, ultimately developing into a frontend library with both adaptability and flexibility.
Angular has 6 times more issues, but let’s not forget that Angular is a framework, and since Angular was released in 2016, fewer developers are using it.
What Technologies Do Major Companies Use
React was originally developed by Facebook to optimize and decouple component development. An article by Chris Cordle points out that React usage at Facebook is higher than Angular usage at Google.
So who’s using these technologies?
React
- Airbnb
- Uber
- Netflix
- Dropbox
Angular
- Eat24
- CVS shop
- onefootball
- Google Express
- NBA
- Delta
TypeScript and JavaScript (ES6+)
Comparing only Angular and React without focusing on core languages would be misleading.
In terms of user base, JavaScript is larger, but TypeScript is growing, so who knows what the next 10-15 years will bring.
TypeScript was originally developed by Microsoft to simplify JavaScript. Released in 2012, it’s a compiler, which means you can write ES5 code in TypeScript files.
Generally speaking, TypeScript provides a smooth transition for developers with object-oriented backgrounds. Note that TypeScript was released during the ES5 era, when ES5 wasn’t yet an object-oriented language.
In short, you could implement object-orientation and classes through prototype chains. But for developers with OOP backgrounds, this was difficult. So when you choose TypeScript, it feels familiar and comfortable.
However, over the past few years, JavaScript has undergone massive changes, like modules, classes, spread operators, arrow functions, template strings, etc. In summary, this allows developers to write declarative code that supports OOP language features.
Static vs Dynamic Languages
A static language means you can define variable types (String, Number, Array, etc.). You might ask, why is this important? If you want to fill up with gasoline, one important thing is using the right fuel. If you don’t know, you might need to buy a new car. Of course, the severity differs from programming, but in some cases it can be similar. Think about it: if you’re developing a large application, you want to know parameter types, otherwise you’ll break the code. Well, if you’re still confused, look here.
Static Type Properties
Static typed property comparison between JavaScript and TypeScript
Static Type Arguments
I’ve learned that most developers believe statically typed languages mean more reliable code, and are better than dynamically typed languages most of the time. Frankly, it’s hard to prove this point because it depends on the development environment, developer experience, and project requirements.
Survey Results
- Statically typed languages require more time to fix type issues
- Dynamically typed languages are easier to read and write
The survey indicates that on average, when developers use dynamically typed languages, they can save development time with minor modifications. If you want to dive deeper into this topic, you can read this article which states that you may not need TypeScript (or statically typed languages).
Which to Choose
So the topic is not only about Angular and React, but also focuses on which language you’re willing to invest time in. Honestly, this isn’t very important. But if we had to choose, it seems TypeScript doesn’t have many advantages over JavaScript. I don’t understand why people would ignore ES6+. Anyway, if you’re not a typing enthusiast, there’s no resistance to writing ES6 code in .ts files. It’s just available if you need it.
Here’s a simple class declaration example
TypeScript
JavaScript (ES6)
In My Opinion
Static typing is more structured, secure, readable, and easier to collaborate with (avoiding passing unexpected values). However, with dynamic typing development, we have flexibility and creativity, focusing on development without worrying too much about types, interfaces, generics, etc.
In the past web apps I’ve built, I didn’t use static typing and didn’t have any major problems. This doesn’t mean I don’t like static typing, just that I didn’t need it yet, but maybe I will in the future.
Additional Points
- React effectively handles memory management
- React uses JavaScript (ES6), ES6 was released in 1995
- Angular uses TypeScript, TypeScript was released in 2012
- Statically typed languages are great, but you can do well without them
- Dynamically typed languages can take less time and offer more flexibility
- If you’ve always worked with dynamically typed languages, learning statically typed languages will be a challenge
- TS is ES6+ plus types and some other features
Final Thoughts
Your choice of framework or library might affect the time you spend programming and your budget. If you have a team of C#, Java, or C++ developers, I’d suggest choosing Angular because TypeScript has so many similarities to these languages. The best recommendation is to initialize an application with both Angular and React, then evaluate the language and workflow before making a decision. As mentioned earlier, all technologies have their own advantages and similarities, and it really depends on what requirements the application presents. If you want to understand the web ecosystem:
