ReactJS vs AngularJS - Head to Head comparison
-
Upload
500tech -
Category
Technology
-
view
2.989 -
download
3
Transcript of ReactJS vs AngularJS - Head to Head comparison
ANGULAR2 REACT
VS
MEGA MEETUP
hackademy.co.il
Nir Kaufman Boris Dinkevich
AGENDAFrameworks Overview
Round 1
Round 2
Q&A Panel
Live Coding
Prepare Questions
ANGULAR2 REACT
ROUND 1
REACT OVERVIEW
HISTORY
Released in 2013
Production version from day one
Dedicated teams at Facebook
THE BASE
Webpack
React
Redux
Win!
Game engine
User
Todos
Study React
Root
App
Add TodoTodos
Todo…
Study Redux Win! Todo…
Todo…
THE TWO PROBLEMS
Update the state
Update the UI
VIRTUAL DOM
Only make browser do the changes
Never worry about $watch
Support super element-heavy pages
State React Components Virtual DOM
Browser DOM
React Native
Text
etc
Our code React
+
DOM
<div>
<input>
value=‘100’class=‘’
<div>
<input>
class=‘’
Virtual DOM
value=‘’
Just a simple diff!
Update the state…Once in a galaxy far far away…
MVVC...
Component
Component
Service Service
Component
Service Service Service
Component
Service Service Service
Service
Component
Service Service Service Service
Service
Component
Service
Component
Service Service Service
Service Service
Component
Model
ComponentComponent
Service Service Service
Service Service Service Service
MVVC
User Interface
DispatcherStores
UNI-DIRECTIONAL DATA FLOW
StoresStores
UI IS RENDERED
UI IS RENDEREDSOMETHING HAPPENED
UI IS RENDEREDSOMETHING HAPPENEDSTATE CHANGED
UI IS RENDEREDSOMETHING HAPPENEDSTATE CHANGEDUI IS RENDERED
UI IS RENDEREDSOMETHING HAPPENEDSTATE CHANGEDUI IS RENDEREDSOMETHING HAPPENEDSTATE CHANGEDUI IS RENDEREDSOMETHING HAPPENEDSTATE CHANGED
FLUX
ReduxThe leader in Flux frameworks
One single store of state!
SINGLE STATE
Easy to re-render
Easy to debug
Easy to do server rendering
Current State
Next StateReducers (processors)
Action
Update UI…Event…
TADA!(applause)
ANGULAR OVERVIEW
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
TARGETING DESKTOP & MOBILE
- Abstract rendering layer
- Server side rendering
- Natural native-script support
CUTTING EDGE TECHNOLOGIES
- Use of WebWorkers
- Shadow DOM components
- server-side pre-rendering, offline compile
EACH APP IS
UNIQUE
CHOOSE YOUR TOOLS
- build-tool agnostic: webpack, gulp, grunt etc..
- language support: ES5, ES6, TypeScript, Dart
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
Components
Dispatcher
ActionsStores
FLUX
Current State
Next StateReducers (processors)
Action
Update UI…Event…
REDUX
MVC Style
Model
Model
Model
Http
Logger
Auth
Component
Component
Component
DEVELOPMENT PLATFORM
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)
ABSTRACTIONS
- Http module for server-side communication
- Dependency injection for modularity and testability
- Core directives for declarative dynamic templates
ECOSYSTEM
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
• 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
• 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
• 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
• 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
TECHNICAL
• ES6/7 Focused
• TypeScript adding extensive JSX
support
• ES6 / TypeScript focused (ES5 and
Dart as well)
• Standart HTML / CSS (react??)
LANGUAGE
• Webpack & Babel • Webpack /gulp / grunt / etc…
• TSC or Babel
• Angular CLI (game changer!)
BUILD TOOLS
• What is VirtualDOM • encapsulated structure and style
• part of web components spec
• exciting technology (not invented..)
VIRTUAL / SHADOW DOM
• 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
JSX
<div>
<Component />
<h1>Regular HTML tags</h1> <Hello title=‘React rules!’/>
<ComponentWithChildren>
<StuffInside /> Some text with { 4 - 3 } expressions in it.
</ComponentWithChildren>
</div>
Components
const Hello = ({ title }) => <h1>{ title }</h1>;
hello.jsx
hello.cssh1 { font-weight: bold; }
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>
• 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
• 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
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!');
(next slide)
Server Rendering
• Server rendering support (angular
universal)
• WebWorker support
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') );
• 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
• 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
ANGULAR2 REACT
ROUND 2
CODE
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
We are looking for rockstars to join our band
HIRING
ANGULAR2 REACT
Q&A