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

jobs@500tech.com

HIRING

ANGULAR2 REACT

Q&A