from angular to react · 2018-02-07 · • rxjs • typescript • embercli . performance is not a...

From Angular to React...and back again

Photo credit: @jwcarrol

@simona_cotin @hackawaye

One framework. Mobile & desktop.

Release date: September, the 14th 2014 Contributors: 462 License: MIT

Intro - Angular

History - misko hevery

Keep Your Minds Open

• ES6

Keep Your Minds Open

• ES6 • Web components

Keep Your Minds Open

• ES6 • Web components • React

Keep Your Minds Open

• ES6 • Web components • React • RxJS

Keep Your Minds Open

• ES6 • Web components • React • RxJS • Typescript

Keep Your Minds Open

• ES6 • Web components • React • RxJS • Typescript • EmberCli

Performance is not a single number

Startup

Speed

First Time Render Update

Render

Route Transition Change Detection

Memory

Pressure

Lazy Loading

AoT

● Faster rendering ● Fewer asynchronous requests ● Smaller Angular framework download

size ● Detect template errors earlier ● Better security

AoT

Tree Shaking

Angular Cli

REACT

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

Release date: May, the 26th 2013 Contributors: 1034 License: BSD

● Component based architecture ● Predictable state management (Redux +

Middlewares) ● ES6 ● Flow (strongly typed)

● Virtual dom ● Reconciliation algorithm v1 a.k.a. Stack

reconciler (2013) ● Reconciliation algorithm v2 a.k.a Fiber

(2016)

Getting started

vs

vs

vs

vs

vs

vs

Wait, how do I manage state?

vs

predictable state container for JavaScript apps

vs

vs

Where did $http go?

vs

“..not a framework” -every React developer out there

axios

superagent

fetch

Wait, how do I pass data between components?

vsParent To child

Wait, how do I pass data between components?

vsChild To Parent

Wait, how do I pass data between components?

vs

Component To Component

Back to Angular

Back to Angular

Back to Angular

Stateful vs Stateless

Tooling

Angular CLIby

Angular Augury Language ServicesProtractor

● Linter: eslint-config-airbnb. ● Editor: any editor that allows you to

configure linting ● Debugging: Browser Console, React

Developer Tools(browser extension), Redux Dev Tools(browser extension)

● Coding and Arch Guides: provided by the community with love

Challenges

● Angular Style Guide

● Typescript

● UpgradeModule

● Upgrade cheatsheet

● Can prove difficult to architect a large app

● State management and asynchronous data can be confusing

● There is no unified way of doing things, only recommendations

Who wins?

Thank you!

@simona_cotin @hackawaye