React vs angular

Preview:

Citation preview

THE FRONT-END JUNGLE

Adam Klein

React vs. Angular

ONCE UPON A TIME

<1995

1997-2010

2010 - Adam Learns Web

2010-2015

Google trends - world wide2011-2015

Google trends - Israel2011-2015

SPASingle Page Application

I’m going to be an Angular Expert!!

AngularJSGoogle

Initial release - 2010

Currently version 1.5

HTML based<body> <h1>Hi {{ name }}</h1> <my-grid data="data"></my-grid> </body>

2 way data binding

Digest Cycle

[DELETE THIS]: Use this slide for strong messages. It’s not a chapter name

AngularJSWrite normal HTML

2 way data binding

Much built-in: forms, http, Dependency injection

Custom tags & attributes for reusability

Magical change detection

Harder component composition

Extensive adoption in Israel

ReactJSFacebook

2013

Current version v15

JSX & virtual DOM<div> <h1>Hi { this.name }</h1> <MyGrid data={this.data}></MyGrid> </div>

Component based

Explicit change detection

ReactJScomponent architecture

component lifecycle

just the view, nothing else built in

one way data binding

explicit change detection, customisable

decoupled from DOM (mobile, server)

no magic

early adoption in Israel

Bothgreat eco-system & community

much open source

no state management (flux)

2016

Angular 2

https://youtu.be/gNmWybAyBHI?t=607https://youtu.be/gNmWybAyBHI?t=548

https://youtu.be/gNmWybAyBHI?t=724

Late 2014 announcements

https://youtu.be/gNmWybAyBHI?t=984

Angular 2 here we go!!

2.0

Angular 228 google developers

September 2014 announcement

May 2016 RC

Angular 1 is continuing

Huge cooperations and idea sharing (React, Ember, Microsoft)

Development platform - i18n, http, DI, forms, router, lazy loading

Component based

Improved change detection

Using Web Component standard

Typescript

Decoupled from DOM (mobile NativeScript, server, testing, web workers)

Removed old browser support

Angular 2Hardly any open source

Hardly any Stack Overflow

API changes

Not in production

Existing Angular 1.5 - Migration pathUse a component based architecture

Use angular 1.5 components

Use TypeScript

Use the new router (when it works well)

Wait for Angular2 to be production & stable

New appsAngular React

All in one View only

Typescript ES6

Object Oriented Functional Programming

HTML Templates JSX

Conferencesreact-next.com - September

angular conference - November

Courses react.courses.500tech.com

angular2.courses.500tech.com

Learn more:

http://blog.500tech.comhttp://meetup.com/angularjs-il

http://meetup.com/reactjs-israel

Contactadam@500tech.com

0527475633

Recommended