from angular to react dev tools(browser extension) coding and arch guides: provided by the community...
TRANSCRIPT
From Angular to React...and back again
@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