APPLES TO ORANGES
• Angular is a full framework out of the box
• No depending on a third-party library which might become
unsupported in the future
• Rigidly opinionated
• Less dev disagreements on code structure
• Forces Typescript adoption
• Angular/Core is more comparable with React
Slide 3
Slide 3 text
POPULARITY
Slide 4
Slide 4 text
POPULARITY
Slide 5
Slide 5 text
POPULARITY
• React
• Incredible FOSS adoption
• 124k stars on React repo
• 4m weekly NPM
downloads
• Angular
• More enterprise use
• “Only” 46k stars on
Angular repo
• 500k weekly NPM
downloads
STACK OVERFLOW DEV
SURVEY 2018
https://insights.stackoverflow.com/survey/2018
Slide 8
Slide 8 text
STACK OVERFLOW DEV
SURVEY 2018
https://insights.stackoverflow.com/survey/2018
Slide 9
Slide 9 text
STACK OVERFLOW DEV
SURVEY 2018
https://insights.stackoverflow.com/survey/2018
Slide 10
Slide 10 text
STACK OVERFLOW DEV
SURVEY 2018
https://insights.stackoverflow.com/survey/2018
Slide 11
Slide 11 text
PERFORMANCE
Slide 12
Slide 12 text
PERFORMANCE
•Bundle size
• React - 1m dev bundle. 150k prod bundle.
• Angular - 1.2m dev bundle. 200k prod bundle.
• In development Ivy Renderer with tree shaking can have
a 4K Hello World
•Both support Server Side Rendering
REACT CODE COMPLEXITY
• 158 LOC JS Framework
Benchmark
• ~2000 LOC Realworld
App
Slide 21
Slide 21 text
ANGULAR CODE COMPLEXITY
• 215 LOC JS Framework
Benchmark
• ~2500 LOC Realworld
App
Slide 22
Slide 22 text
FEATURE COMPARISON
Slide 23
Slide 23 text
HIGH LEVEL CODE
ORGANISATION 1
• Angular
• Modules
• No Higher Order Components
• No Mixins
• In development “Ivy Renderer” makes it possible. But
• Client Code may require rewriting to use
• Loss of Tooling. No Enforced Code Style
Slide 24
Slide 24 text
STATE MANAGEMENT
• Angular – RxJS. Do NOT use MobX.
• Two Way bindings lead to spaghetti code
• NgRx takes inspiration from Redux but incorporates RxJS. Another is NGXS which also uses
modern TypeScript features
• RxJS is great for HTTP calls.
• React
• One Way Bindings. Functional Views.
• Redux. Many others
• React wins big here.
Slide 25
Slide 25 text
HIGH LEVEL CODE
ORGANISATION 2
• React Promotes -
• Functional Views, and Functional Components, which are Pure & Stateless. Very easy to Use
and Test.
• Hooks allow state management in pure components
• Immutable data structures
• Virtual-Dom abstracts away lots of complexity
• Angular’s 2 Way Data Binding is much messier. It has third party support for Virtual-Dom, via ng-
vdom. But it is not recommended.
Slide 26
Slide 26 text
JSX
• JSX Syntax is great!
• JSX compiled to fast Javascript
• Angular Template Syntax is bad
• But Side Effect Free, which is great!
• Compiled to Javascript when in AOT mode. More Complex.
https://angular.io/guide/aot-compiler
• Angular, you should use the third party TSX instead of inbuilt
templating solution
Slide 27
Slide 27 text
DEPENDENCY INJECTION
• Angular – Has It
• React – Doesn’t need it. but more work. https://blog.mgechev.com/2017/01/30/implementing-
dependency-injection-react-angular-element-injectors/
• But I would recommend not injecting dependencies anyways.
Just pass props/function args to React components. Also you
can pass functions/components themselves.
• React “Contexts” allow auto passing props down a tree of
components. Should be used sparingly.
TRANSPILATION TARGET
•React - excellent Transpilation Target
•Bindings for - Purescript, Haskell, Scala, Reason
•Angular – Not easily targeted
Slide 30
Slide 30 text
ACTIVE DEVELOPMENT
•Angular – New Ivy Renderer. Faster. Better tree shaking (4K
hello world app). Easier build pipeline. Easy lazy-loading
components. Meta Programming.
•React – Fiber. Hooks. Suspense. All the meta programming
capabilities provided by Ivy are already in React.
Slide 31
Slide 31 text
NEW USER EXPERIENCE
• Confusing error messages in Angular. Require web search.
• Lots of new concepts in Angular - Typescript, RxJS, DI, Decorators,
Components, Services, Templates, Directives. etc. Pipes, AoT
compilation, Change detection.
• Onboarding on React is definitely easier.
Slide 32
Slide 32 text
MAINTENANCE
• Angular CLI. Automatically installs deps and configures your
application to use the dependency. Uses Angular “Schematics”
which are like templates for making changes to the code.
Schematics are also very helpful in automatically migrating code to
new versions.
• Debugging
• Augury. Good Debugger for Angular.
• React Dev Tools, Redux Dev Tools.
Slide 33
Slide 33 text
DEBUGGING
• React
• React dev tools
• Redux dev tools - Can also be used with Angular+Redux.
• Angular
• RxJS - tap() chains.
• Augury
• ng.probe()
Slide 34
Slide 34 text
FLASH OF UNSTYLED
CONTENT
•Angular JS had a major problem with templates showing
up before page fully loads. This was worked around with
`ngCloak` etc.
•May still not have a good solution.
Slide 35
Slide 35 text
INPUT FOCUS MANAGEMENT
•React
•Like most other Virtual-Dom libraries, Input Focus
Management is a problem.
•Mostly solved by “defaultValue” etc. but still something to
watch out for.
Slide 36
Slide 36 text
NATIVE APPS
•React-Native
•NativeScript for Angular
•Ionic
Slide 37
Slide 37 text
UI LIBRARIES
•React – Lots of them
•Angular – Material, Ionic
•React - 360 for VR. Gatsby for static sites.
Slide 38
Slide 38 text
MICROSERVICES
• Much better with React?
• Angular is frontend-heavy.
Slide 39
Slide 39 text
OTHER SIMILAR FEATURES
• Ajax - Use Axios or Fetch in React.
• Inbuilt Security, e.g. XSS Protection
• Inbuilt utils for Testing. Use Enzyme in React
Slide 40
Slide 40 text
QUESTION TO ASK
• Proof Of Concept – Much easier to bang something out in React
• For Large projects, with long lifetimes, with developer churn, Angular provides stability. (But does it?)
• If new dev experience is important, React is better
• If multiple platforms (web, mobile, desktop, embedded) will be targeted, then React will have better
support
• If no experienced developers are present initially to guide the project, then Angular may be a better
choice
• Server side rendering? Microservices? React.
• Will libraries be updated regularly? If not, then Angular may be better supported
• If 3rd party library/component ecosystem is important then React has more integrations
Slide 41
Slide 41 text
QUESTION TO ASK
•Even with React, it is recommended to use Typescript.
•Even with Angular, use One way binding.