Igor Kosulin, 2015

AngularJS + ReactSpeedup research and comparison

What AngularJS is

● MVC client-side framework● A bridge to future (Web Components, etc)● Very opinionated framework● A pretty good working concept how it can be● Nice for web apps of small and middle size● Declarative style● Force to create separate modules

What React is

● Virtual DOM framework● Use reactive concepts for DOM rendering● Pretty straightforward● JSX● Everything is in jsx● Force to create separate modules● Thinking in React

Why do we need this

● Tired of Angular, want to move forward● Want to try React● Replace V in Angular MVC● Performance issues● Cause it’s fun to combine uncombinable● As a proof of concept

Javascript evolution

● Simple effects on HTML-page● Simple libraries● DOM manipulation frameworks● MVC frameworks, Virtual DOM frameworks● Full-stack frameworks?

Haters gonna hate

What Angular haters say

● Slow two-way data binding● Dependency Injection minification issue● Too much: Provider, Service, Factory….● Directives are too complex● Hard to find developers who can use it● Angular 2.0 is almost coming● Poor docs, logic in views, debugging...

Angular 1.3 features

● Performance optimization (3-4x faster)● Easier forms● ARIA support● Material design

Angular 2.0● Total rewrite, but core concepts preserved● Unified component model● Modular, mobile-first● Revised concept of “scope”● Web Components, ES6, TypeScript 1.5● Team will support 1.3 branch for 1.5-2 years

after 2.0 final release● Team will write a converter for old code

Google vs Facebook

Angular + React = ?

Angular + React= ngReact

● Angular module● Can use React Components as directives

Test case #1

Javascript code

● Direct DOM manipulation● Fastest possible version

jQuery code

● jQuery.append()● Overhead of very small

● React code (React Component)

● Angular code

Test case #2

● React code (PersonRow)

● React code (PersonTable)

● React code (ModifiablePersonTable)

● React code (ModifiablePersonTable)

That’s finally it… :)

● Angular code

● Angular code (reusable FocusOn directive)

Comparison

Pros● Angular code is shorter (23 js + 6 html vs 105 js)● Angular is more responsiveCons● Angular is slower to render● Angular is fatter (memory consumption)

When use ngReact

● For existing Angular apps only● For very big lists (but prefer paging)● For complex logic (but prefer optimizations)● For easy slow migration

When use Angular

● For web apps small and middle size● For fast prototyping● For not very fat apps● For newbies: a way to learn JS, they will

definitely meet all the issues● For professionals: to write tiny solid code● “Write less, do more” ⓒ jQuery

When use React

● Actually no limits, especially if you want to write many lines of code

Thanks for your attention!Any questions?