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?

Finn

Minko

Web UI Engineer at SoftServe

https://www.linkedin.com/in/finn-fitzsimons-3a713617

Freelance software consultant

https://github.com/mgechev

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?

Finn

Minko

React

React

How are Angular 2 and React similar? How are they different?

How are they similar?

How are they different?

  1. Both are technologies, which allows us to define the view of our applications (mobile/web/desktop).
  2. Both allow us to define component-based UI
  3. Both work great with FRP & OOP paradigms (flux-like architecture or mvw)
  1. React is more like a library rather than a complete framework (extra libraries from the community)
  2. Angular 2 provides full set of functionality supported by the core team at Google
  3. Enforced separation of concerns in Angular (pipes, services, DI)
  4. Inversion of control through DI in Angular
  5. Different change detection mechanism
  6. Developed in different languages
  1. Angular 2 is developed in TypeScript
  2. React in ES5
  1. Different way to declare your UI (jsx vs HTML templates)
  1. Minor performance differences (static typing wins)
  2. 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

  1. You can approach two different ways:
  1. Manage only data changes (shouldComponentUpdate)
  2. Allow react to calculate the changes itself
  1. Smarter way to apply changes
  2. Batches changes together
  3. Simpler to reason about
  4. Not that flexible way to extend the change detection
  1. 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).
  2. Different algorithms for ultra fast change detection (jit change detection with further support for inline caching, dynamic change detection for enabled CSP).
  3. Smart way to apply changes...only updates the changed bindings.
  4. More complex

How does the encapsulation of your components works?

React

Angular 2

  1. CSS modules (not part of the library, third-party module)
  1. Shadow DOM or its emulation (embedded into the framework)
  1. 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

  1. 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).
  2. You can incrementally migrate to react from legacy jQuery-ish app
  3. More minimalistic. Shorter learning curve.
  4. The synthetic events work great with SVG
  5. More mature
  6. If you need support for IE8
  1. If she or he wants to use a set of already assembled technologies, which are glued together well
  1. Easier knowledge transfer between projects (you use similar practices and components).
  1. More flexible change detection for custom scenarios
  2. It’s newer:
  1. Build with the new standards in mind
  1. Good support for Web Components
  2. Support of WebWorkers
  1. 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

  1. A way to create reusable declarative components
  2. Provides the view of your application
  1. They want to provide an entire platform
  2. Enforce us to have better separation of concerns
  3. Not couple you with specific architecture

What’s the development experience with Angular 2 vs React?

React

Angular 2

  1. Confusing stack traces
  2. Nice Chrome plugin which allows you to debug your component tree
  3. Mature hot loader
  1. Batarangle (Chrome plugin WIP)
  2. Web Tracing Framework
  3. Prototype for hot loader

With React, you can do Hot Module Replacement (Hot reloading). How about Angular 2?

  • What is Hot reloading
  • Allows you to dynamically update your view the moment you change any stateless component
  • How does it work?
  • Sends the code of the component through the network, evaluates it and patches the already existing component by keeping the same state
  • How it works in React?
  • 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

  1. Mature
  1. Not that mature
  2. Great performance

Are there other use cases where one or the other would make sense?

React

Angular 2

  1. You can easy, incrementally upgrade from your jQuery/Backbone-ish application.
  1. 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

  1. Very functional oriented, heavily influenced by ClojureScript’s om
  2. A lot of new, fresh ideas (hot loader, flux, redux, elm, clojure + om)
  1. A lot of podcasts, shows.
  2. Very friendly and easy going. A lot of articles and books (including open source ones).
  1. AngularAir.com
  2. devchat.tv/adventures-in-angular

Templating vs JS (jsx) which do you prefer?

JSX

Templating

  1. Essentially function calls (once transpiled)
  2. No additional syntax to learn (compared to the Angular 2 specific syntax for binding to events/properties)
  1. Completely declarative
  2. Easy to externalize (templateUrl)
  1. 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

  1. ES201(5|6)
  1. Static typing with flow
  1. TypeScript
  1. TypeScript
  2. ES201(5|6)
  3. ES5

What about Flow vs TypeScript?

Flow

TypeScript

  1. Easier to incrementally integrate it
  2. Simpler. They don’t have that much extra syntax
  3. It supports nullable
  1. Great text editor/IDE support
  1. A lot of ambient type definitions in DefinitelyTyped
  1. You have interfaces support

What does the performance tweaking look like for both frameworks?

React

Angular 2

  1. shouldComponentUpdate
  2. Immutable data
  1. Custom change detection algorithm
  2. Move the renderer/change detection to WebWorker
  3. 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

  1. React native
  1. iOS
  2. Android
  1. You can reuse existing iOS swift/objective-c components
  2. Have solution for the navigation problem (differences between native and web)
  1. Ionic 2
  2. NativeScript
  1. WIP

Clash of Technologies powered by