VS



ANGULAR2



REACT

MEGA

MEETUP

hackademy.co.il

Nir Kaufman



Boris Dinkevich

AGENDA



Round 1

Frameworks Overview

Round 2

Live Coding

Q&A Panel

Prepare Questions

ROUND 1



ANGULAR2



REACT

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



Study Redux



Win!



Root



App



Todos



Add Todo



Todo 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

Our code



State



+ React Components



React



Browser DOM



Virtual DOM



Text React Native



etc

Virtual DOM



<div> <input>



class=‘’



value=‘100’



DOM



<div> <input>



class=‘’



value=‘’



Just a simple diff!

Update the state…

Once in a galaxy far far away…

MVVC...

Component

Service



Service



Component

Service



Service



Component



Service

Service Service



Service



Component



Service

Service



Service Service



Service



Component



Service

Component



Service Service



Service Service



Service



Component



Service

Component



Component



Service Model



Service Service



Service Service



Component



Service Service

MVVC

User Interface



SStSototroerersess



Dispatcher



UNI-DIRECTIONAL DATA FLOW

UI IS RENDERED

UI IS RENDERED SOMETHING HAPPENED

UI IS RENDERED SOMETHING HAPPENED

STATE CHANGED

UI IS RENDERED SOMETHING HAPPENED STATE CHANGED

UI IS RENDERED

UI IS RENDERED SOMETHING HAPPENED STATE CHANGED UI IS RENDERED SOMETHING HAPPENED STATE CHANGED UI IS RENDERED SOMETHING HAPPENED STATE CHANGED

FLUX

Redux

The 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 Action



Reducers

(processors)



Next State



…Event…



Update UI

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

FLUX



Stores



Components Actions

Dispatcher

Current State Action



REDUX

Reducers

(processors)



Next State



…Event…



Update UI

MVC Style



Http Logger

Auth



Model Model Model



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

REAL WORLD USE



Released 2013 (2+ years) Used extensively in production

https://github.com/facebook/react/ wiki/Sites-Using-React



Beta 3 Released in 2016 currently used in production only inside of Google

DEVELOPERS



• 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

COMMUNITY



• 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

ROADMAP



• 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

3RD PARTY



• 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

TECHNICAL

LANGUAGE



• ES6/7 Focused • TypeScript adding extensive JSX

support



• ES6 / TypeScript focused (ES5 and Dart as well)

• Standart HTML / CSS (reactjQuery1102043735298586587135_1458003381559)

BUILD TOOLS



• Webpack & Babel



• Webpack /gulp / grunt / etc… • TSC or Babel • Angular CLI (game changer!)

VIRTUAL / SHADOW DOM



• What is VirtualDOM



• encapsulated structure and style • part of web components spec • exciting technology (not invented..)

TEMPLATE ENGINES



• 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!

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



hello.jsx



const Hello = ({ title }) => <h1>{ title }</h1>;



h1 { font-weight: bold;

}



hello.css

hello.js

import {Component} from 'angular2/core';  @Component({

selector: 'hello-angular', templateUrl: 'hello.html', styleUrls: ['hello.css'] })  class HelloAngular { . . . }

hello.css

h1 { font-weight: bold;

}

hello.html

<h1>{{ title }}</h1>

CHANGE DETECTION



• 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

TESTS



• 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

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!');

Server Rendering



(next slide)



• Server rendering support (angular universal)

• WebWorker support

Server rendering

import { render } from ‘react-dom';  render(

<div> <h1>Hello from the server!</h1>

</div>, document.getElementById('app') );

import { renderToString } from ‘react-dom/server';  // Render the component to a string const html = renderToString(

<div> <h1>Hello from the server!</h1>

</div> );

MOBILE



• React Native • Same code on Android & iOS • Using Native Components! • No crappy WebView wrappers (ionic/

cordova/etc)



• Server side rendering for webmobile

• Natural integration with nativescript (native components, no cordova)

DEBUGGING



• 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

ROUND 2



ANGULAR2



REACT

CODE

Nuth said



FINAL WORDS

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.

HIRING

We are looking for rockstars to join our band jobs@500tech.com

Q&A



ANGULAR2



REACT