reactjs vs angularjs - head to head comparison
TRANSCRIPT
![Page 1: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/1.jpg)
ANGULAR2 REACT
VS
![Page 2: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/2.jpg)
MEGA MEETUP
![Page 3: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/3.jpg)
![Page 5: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/5.jpg)
Nir Kaufman Boris Dinkevich
![Page 6: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/6.jpg)
AGENDAFrameworks Overview
Round 1
Round 2
Q&A Panel
Live Coding
Prepare Questions
![Page 7: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/7.jpg)
ANGULAR2 REACT
ROUND 1
![Page 8: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/8.jpg)
REACT OVERVIEW
![Page 9: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/9.jpg)
HISTORY
Released in 2013
Production version from day one
Dedicated teams at Facebook
![Page 10: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/10.jpg)
THE BASE
Webpack
React
Redux
Win!
![Page 11: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/11.jpg)
Game engine
User
Todos
Study React
Root
App
Add TodoTodos
Todo…
Study Redux Win! Todo…
Todo…
![Page 12: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/12.jpg)
THE TWO PROBLEMS
Update the state
Update the UI
![Page 13: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/13.jpg)
VIRTUAL DOM
Only make browser do the changes
Never worry about $watch
Support super element-heavy pages
![Page 14: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/14.jpg)
State React Components Virtual DOM
Browser DOM
React Native
Text
etc
Our code React
+
![Page 15: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/15.jpg)
DOM
<div>
<input>
value=‘100’class=‘’
<div>
<input>
class=‘’
Virtual DOM
value=‘’
Just a simple diff!
![Page 16: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/16.jpg)
Update the state…Once in a galaxy far far away…
MVVC...
![Page 17: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/17.jpg)
Component
![Page 18: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/18.jpg)
Component
Service Service
![Page 19: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/19.jpg)
Component
Service Service Service
![Page 20: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/20.jpg)
Component
Service Service Service
Service
![Page 21: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/21.jpg)
Component
Service Service Service Service
Service
![Page 22: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/22.jpg)
Component
Service
Component
Service Service Service
Service Service
![Page 23: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/23.jpg)
Component
Model
ComponentComponent
Service Service Service
Service Service Service Service
![Page 24: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/24.jpg)
MVVC
![Page 25: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/25.jpg)
User Interface
DispatcherStores
UNI-DIRECTIONAL DATA FLOW
StoresStores
![Page 26: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/26.jpg)
UI IS RENDERED
![Page 27: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/27.jpg)
UI IS RENDEREDSOMETHING HAPPENED
![Page 28: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/28.jpg)
UI IS RENDEREDSOMETHING HAPPENEDSTATE CHANGED
![Page 29: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/29.jpg)
UI IS RENDEREDSOMETHING HAPPENEDSTATE CHANGEDUI IS RENDERED
![Page 30: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/30.jpg)
UI IS RENDEREDSOMETHING HAPPENEDSTATE CHANGEDUI IS RENDEREDSOMETHING HAPPENEDSTATE CHANGEDUI IS RENDEREDSOMETHING HAPPENEDSTATE CHANGED
![Page 31: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/31.jpg)
FLUX
![Page 32: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/32.jpg)
ReduxThe leader in Flux frameworks
One single store of state!
![Page 33: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/33.jpg)
SINGLE STATE
Easy to re-render
Easy to debug
Easy to do server rendering
![Page 34: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/34.jpg)
Current State
Next StateReducers (processors)
Action
Update UI…Event…
![Page 35: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/35.jpg)
TADA!(applause)
![Page 36: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/36.jpg)
ANGULAR OVERVIEW
![Page 37: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/37.jpg)
ANGULAR2 IS A NEW FRAMEWORK
- built from scratch to be a development platform
- dedicated team at google and around the world
- currently in BETA 3
![Page 38: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/38.jpg)
TARGETING DESKTOP & MOBILE
- Abstract rendering layer
- Server side rendering
- Natural native-script support
![Page 39: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/39.jpg)
CUTTING EDGE TECHNOLOGIES
- Use of WebWorkers
- Shadow DOM components
- server-side pre-rendering, offline compile
![Page 40: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/40.jpg)
EACH APP IS
UNIQUE
![Page 41: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/41.jpg)
CHOOSE YOUR TOOLS
- build-tool agnostic: webpack, gulp, grunt etc..
- language support: ES5, ES6, TypeScript, Dart
![Page 42: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/42.jpg)
CHOOSE YOUR STYLE & DATA FLOW
- Object oriented style: plain classes
- Reactive style: RxJS built-in
- MV* style: build your data model layer with services
- Flux / Redux: uni-direction data-flow
![Page 43: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/43.jpg)
Components
Dispatcher
ActionsStores
FLUX
![Page 44: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/44.jpg)
Current State
Next StateReducers (processors)
Action
Update UI…Event…
REDUX
![Page 45: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/45.jpg)
MVC Style
Model
Model
Model
Http
Logger
Auth
Component
Component
Component
![Page 46: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/46.jpg)
DEVELOPMENT PLATFORM
![Page 47: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/47.jpg)
ALL ASPECTS OF MODERN WEB APPS
- Animation module (js, css & Web animation API)
- Internationalization (I18N) & accessibility
- Powerful component router
- Form system - (two-way data binding, change tracking, validation, and error handling)
![Page 48: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/48.jpg)
ABSTRACTIONS
- Http module for server-side communication
- Dependency injection for modularity and testability
- Core directives for declarative dynamic templates
![Page 49: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/49.jpg)
ECOSYSTEM
![Page 50: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/50.jpg)
Released 2013 (2+ years)
Used extensively in production
https://github.com/facebook/react/wiki/Sites-Using-React
REAL WORLD USE
Beta 3 Released in 2016
currently used in production only
inside of Google
![Page 51: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/51.jpg)
• Massive adoption abroad by startups
and companies
• Initial adoption in Israel
• Active and growing React community
• Multiple companies started PoC
the technology
• Initial adoption in Israel
• Community interest exploding
DEVELOPERS
![Page 52: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/52.jpg)
• Active and growing React community
• Huge amounts of quality Courses &
Books
• Community interest exploding
• official conferences in Europe &
USA
• large amount of angular local
communities around the world
• massive amount of Books, Videos,
Tutorials, Courses and posts
COMMUNITY
![Page 53: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/53.jpg)
![Page 54: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/54.jpg)
![Page 55: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/55.jpg)
![Page 56: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/56.jpg)
• Gradual small improvements
• Easy upgrade path (angular hah!)
• milestones and development
process (public)
• tutorials and tools for easier
migration from angular 1.x
• dedicate team of 28 google
engineers +community
contributors
ROADMAP
![Page 57: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/57.jpg)
• Extensive eco system
• Components for every need
• Growing eco system
• Angular 1.x components are
currently in migration process
• Easy integration with components
made in other frameworks /
libraries
3RD PARTY
![Page 58: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/58.jpg)
TECHNICAL
![Page 59: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/59.jpg)
• ES6/7 Focused
• TypeScript adding extensive JSX
support
• ES6 / TypeScript focused (ES5 and
Dart as well)
• Standart HTML / CSS (react??)
LANGUAGE
![Page 60: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/60.jpg)
• Webpack & Babel • Webpack /gulp / grunt / etc…
• TSC or Babel
• Angular CLI (game changer!)
BUILD TOOLS
![Page 61: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/61.jpg)
• What is VirtualDOM • encapsulated structure and style
• part of web components spec
• exciting technology (not invented..)
VIRTUAL / SHADOW DOM
![Page 62: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/62.jpg)
• JSX - Next slide • Standart JavaScript - (.js or .ts)
• Standard HTML - can be written as
a separate file, valid, (.html)
• Standard CSS - can be written as a
separate file, valid (.css)
• directives - declarative abstractions,
extends element behaviour.
• bind to native element properties
and events - no wrappers!
TEMPLATE ENGINES
![Page 63: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/63.jpg)
JSX
<div>
<Component />
<h1>Regular HTML tags</h1> <Hello title=‘React rules!’/>
<ComponentWithChildren>
<StuffInside /> Some text with { 4 - 3 } expressions in it.
</ComponentWithChildren>
</div>
![Page 64: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/64.jpg)
Components
const Hello = ({ title }) => <h1>{ title }</h1>;
hello.jsx
hello.cssh1 { font-weight: bold; }
![Page 65: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/65.jpg)
hello.jsimport {Component} from 'angular2/core'; @Component({ selector: 'hello-angular', templateUrl: 'hello.html', styleUrls: ['hello.css'] }) class HelloAngular { . . . }
hello.cssh1 { font-weight: bold; }
hello.html<h1>{{ title }}</h1>
![Page 66: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/66.jpg)
• FLUX • Zone.js - proxy for all the async
methods in the browser
• two-way, one-way, one-time
binding mechanism
• Flux, RxJS (streaming) and ‘classic’
Model style data flows
• No $digest, $apply, $scope,
$watch
CHANGE DETECTION
![Page 67: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/67.jpg)
• No need for browser
• Mocking tools
• Build in E2E (click())
(next slide)
• No need for browser
• Mocking tools out of the box
• Testable from the ground up thanks
to dependency injection
TESTS
![Page 68: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/68.jpg)
React Tests
const component = TestUtils.renderIntoDocument( <MyComponent />); const button = component .findRenderedDOMComponentWithTag('button') .getDOMNode(); const label = component .findRenderedDOMComponentWithTag('h1') .getDOMNode(); TestUtils.Simulate.click(button); expect(label.textContent) .toEqual('I have been clicked!');
![Page 69: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/69.jpg)
(next slide)
Server Rendering
• Server rendering support (angular
universal)
• WebWorker support
![Page 70: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/70.jpg)
Server rendering
import { renderToString } from ‘react-dom/server';// Render the component to a stringconst html = renderToString( <div> <h1>Hello from the server!</h1> </div>);
import { render } from ‘react-dom'; render( <div> <h1>Hello from the server!</h1> </div>, document.getElementById('app') );
![Page 71: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/71.jpg)
• React Native
• Same code on Android & iOS
• Using Native Components!
• No crappy WebView wrappers (ionic/
cordova/etc)
• Server side rendering for web-
mobile
• Natural integration with native-
script (native components, no
cordova)
MOBILE
![Page 72: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/72.jpg)
• React Chrome extension
• Easy “state” inspection
• Great action replay with redux
• redux dev tool for redux
• built-in inspection tool
• TypeScript support through IDE’s
and sourceMaps
https://github.com/gaearon/redux-devtools
DEBUGGING
![Page 73: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/73.jpg)
ANGULAR2 REACT
ROUND 2
![Page 74: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/74.jpg)
CODE
![Page 75: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/75.jpg)
Angular is a development platform
aimed for modern most demanding
web and mobile applications.
Angular2 built from several modules
working together to supply high level
abstractions and API’s for building
complex applications with ease.
Nuth said
FINAL WORDS
![Page 76: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/76.jpg)
We are looking for rockstars to join our band
HIRING
![Page 77: ReactJS vs AngularJS - Head to Head comparison](https://reader034.vdocument.in/reader034/viewer/2022042619/58729e721a28ab07208b534b/html5/thumbnails/77.jpg)
ANGULAR2 REACT
Q&A