![](https://lh7-us.googleusercontent.com/docsz/AD_4nXe4J2vH8NRUiVre3gr-vRG4VDi6mYkWHBcbqWeTKZlIOXnHkW4JW-7Epw0SnGGNnMS5A1UUo3FvIG_02pLXasKCi1xys7Clsh2EDuq8FjqebTZlC5b9i7A1PGGhYMPRxfi_o6V_I3kRUBtx8hnD=s650?key=oIRekhajTjtaj-fb3-goEA)
Introduction
This document is based on the notes of a discussion, part of the meetup “Clash of Technologies”, Sofia, Bulgaria.
The React side was represented by Finn Fitzsimons and the Angular side was represented by Minko Gechev.
Some of the questions below are taken from the podcast AngularAir.
The document was reviewed by the participants of the discussion and Patrick Stapleton.
React vs Angular 2
Who are you guys?
What is your experience with AngularJS, Angular 2 and React?
Finn | Minko |
Used AngularJS 1.x for ~ 12 months Used React for ~ 12 months Haven’t used Angular 2 | Used AngularJS 1.x for ~12 months Using React last ~16 months Contributing to Angular 2 Working on “Switching to Angular 2” |
What do you use for the moment?
How are Angular 2 and React similar? How are they different?
How are they similar? | How are they different? |
- Both are technologies, which allows us to define the view of our applications (mobile/web/desktop).
- Both allow us to define component-based UI
- Both work great with FRP & OOP paradigms (flux-like architecture or mvw)
| - React is more like a library rather than a complete framework (extra libraries from the community)
- Angular 2 provides full set of functionality supported by the core team at Google
- Enforced separation of concerns in Angular (pipes, services, DI)
- Inversion of control through DI in Angular
- Different change detection mechanism
- Developed in different languages
- Angular 2 is developed in TypeScript
- React in ES5
- Different way to declare your UI (jsx vs HTML templates)
- Minor performance differences (static typing wins)
- Undefined is not a function less likely static typing!
|
At a low level, one key difference is that React does Virtual DOM diffing while Angular 2 uses dirty checking. What are the advantages and disadvantages of each approach?
React | Angular 2 |
- You can approach two different ways:
- Manage only data changes (shouldComponentUpdate)
- Allow react to calculate the changes itself
- Smarter way to apply changes
- Batches changes together
- Simpler to reason about
- Not that flexible way to extend the change detection
| - You can easy plug and change the change detection mechanism (custom differs, implement custom change detection for given component, even create your own change detection for the entire application).
- Different algorithms for ultra fast change detection (jit change detection with further support for inline caching, dynamic change detection for enabled CSP).
- Smart way to apply changes...only updates the changed bindings.
- More complex
|
How does the encapsulation of your components works?
React | Angular 2 |
- CSS modules (not part of the library, third-party module)
| - Shadow DOM or its emulation (embedded into the framework)
- Works well with polymer and WebComponents
|
Why would someone use Angular 2 instead of React? And why would someone use React instead of Angular 2?
React | Angular 2 |
- If he wants to assemble the libraries in his application by himself (i.e. allows freedom for more manual stuff and you can use libraries you’re already familiar with).
- You can incrementally migrate to react from legacy jQuery-ish app
- More minimalistic. Shorter learning curve.
- The synthetic events work great with SVG
- More mature
- If you need support for IE8
| - If she or he wants to use a set of already assembled technologies, which are glued together well
- Easier knowledge transfer between projects (you use similar practices and components).
- More flexible change detection for custom scenarios
- It’s newer:
- Build with the new standards in mind
- Good support for Web Components
- Support of WebWorkers
- Easier to join the project
|
What are the goals that React and Angular 2 are trying to solve?
Goals of React | Goals of Angular 2 |
- A way to create reusable declarative components
- Provides the view of your application
| - They want to provide an entire platform
- Enforce us to have better separation of concerns
- Not couple you with specific architecture
|
What’s the development experience with Angular 2 vs React?
React | Angular 2 |
- Confusing stack traces
- Nice Chrome plugin which allows you to debug your component tree
- Mature hot loader
| - Batarangle (Chrome plugin WIP)
- Web Tracing Framework
- Prototype for hot loader
|
With React, you can do Hot Module Replacement (Hot reloading). How about Angular 2?
- Allows you to dynamically update your view the moment you change any stateless component
- Sends the code of the component through the network, evaluates it and patches the already existing component by keeping the same state
- You use flux-like architecture - your view state is in the store so you can only patch the prototype of the object, which represents your component (this means you patch your render method as well). After that you just rerender the components (render is pure).
- How it works in Angular 2?
- Similarly to react except that you need to instantiate all your components and rerender them.
What about Server-Side Rendering?
React | Angular 2 |
- Mature
| - Not that mature
- Great performance
|
Are there other use cases where one or the other would make sense?
React | Angular 2 |
- You can easy, incrementally upgrade from your jQuery/Backbone-ish application.
| - Not that risky to start from scratch (once it is being released), since you have well supported set of components, which are maintained by the same team (router, di, even material components)
|
Do the communities have any unique characteristics?
React Community | Angular 2 Community |
- Very functional oriented, heavily influenced by ClojureScript’s om
- A lot of new, fresh ideas (hot loader, flux, redux, elm, clojure + om)
| - A lot of podcasts, shows.
- Very friendly and easy going. A lot of articles and books (including open source ones).
- AngularAir.com
- devchat.tv/adventures-in-angular
|
Templating vs JS (jsx) which do you prefer?
JSX | Templating |
- Essentially function calls (once transpiled)
- No additional syntax to learn (compared to the Angular 2 specific syntax for binding to events/properties)
| - Completely declarative
- Easy to externalize (templateUrl)
- Allows one component to use different templates for different platforms (i.e. enforces easier code reuse) with multiple @View-s
|
What is your preferred language for development of React/AngularJS applications?
React | Angular 2 |
- ES201(5|6)
- Static typing with flow
- TypeScript
| - TypeScript
- ES201(5|6)
- ES5
|
What about Flow vs TypeScript?
Flow | TypeScript |
- Easier to incrementally integrate it
- Simpler. They don’t have that much extra syntax
- It supports nullable
| - Great text editor/IDE support
- A lot of ambient type definitions in DefinitelyTyped
- You have interfaces support
|
What does the performance tweaking look like for both frameworks?
React | Angular 2 |
- shouldComponentUpdate
- Immutable data
| - Custom change detection algorithm
- Move the renderer/change detection to WebWorker
- Change detection run strategies (immutable data)
|
You can use benchpress for performance benchmarks.
How well those libraries are suite to support the increasing demand for mobile solutions.
React | Angular 2 |
- React native
- iOS
- Android
- You can reuse existing iOS swift/objective-c components
- Have solution for the navigation problem (differences between native and web)
| - Ionic 2
- NativeScript
- WIP
|
Clash of Technologies powered by ![](https://lh7-us.googleusercontent.com/docsz/AD_4nXetpYOL-C3RTRUW1C5Ytp2tQLYTAL2thbFYjgOj46Fezz3G5-c5nOfCxlGY3plXdNh5rdmBLWC8hEgQ6-tN53_ngm1ruv-KUFPKa4-W7lyvQMewYL9daZKBC7zXjTSNecP2uVlZKLmG7CQM8yXV=s650?key=oIRekhajTjtaj-fb3-goEA)