OR

Components

Flux

Modules

Unidirectional flow

ES6/ES7

Redux

Transcompiler

Virtual Dom

Legacy Front-end problems

VM

VM

VM

VM

VM VM

VM

Coupled architectureApplication state issuesImpure (buggy)Lack of reuse across teamsLack of designDeveloper skills are dated

HTML

Decoupled architectureComposition architectureUni-directional flowPure Reuse (Components)FE ArchitectureNew patterns

Front-end Future

Component

HTML

JavaScriptCSS

Component

HTML

JavaScriptCSS

Component

HTML

JavaScriptCSS

Component

HTML

JavaScriptCSS

HTML

Can they be compared?

ComponentsES6/ES7/ModulesOpinionated from startEverything in the box (764k)TypeScript (doesn't have to be ; highly recommend)Beta - 22% into their releaseLow number of people using in production?HTML outside componentHard integration modelHard to build around business use casesHuge learning curve?

Key Differences

ComponentsES6/ES7/ModulesOpinionated at pattern levelLightweight (React + Redux 151k)JavaScript Version 15.0High number of people using in productionJSX inside ComponentEasier integration modelEasy to build around business use caseReact is easy to learn. Ecosystem hard?Virtual Dom and performance

Current versions

Launch in May at ngconf?

15.0

https://facebook.github.io/react/blog/2016/02/19/new-versioning-scheme.html

?

Tools

Hot reloader

Enzyme

Code Examples

JSX (HTML) inside JS allows us to utilise the power of JS

Angular has to have its own APIJS inside HTML….

*, ngFor, #all seem unintuitive?

Just a map…To read React

Just learn JavaScript

To read Angular Learn angular syntax

Code Examples

Simple onClick

Angulars own API again

What does () and [] mean?

To read React Just learn JavaScript

To read Angular Learn angular syntax

Learning

]

What can React offer

Good BadJust JavaScript (enthesis on functional programming) Developers have to up skill in JavaScript

Simple API EcosystemComponents Library based system

Major version Release High risk of churnA lot of companies using it in production

Small (151k)Uni-directional flow

Focus on minimising state changeGreat workflow and supporting tools

Compile time feedback (Fails fast and explicitly)Easy to Test ComponentsCan test against VDOM

Puts HTML in JSEasy integration with UI Framework

Pure > Inpure functionsRecommends functional programming

ScalesFlexableIntuative

Performant (vDOM)VDom offers 3-10x improvements in performance

Huge community

What can Angular2 offer

Good Bad

Typescript (Compile time errors, IDE support) Typescript

.net developers might like it (Typescript) Big learning curve (Have to learn another FW)

Provides framework out the box Non transferable skills?

Components Still in Beta (Major Version in May)

Opinionated Not a lot of people using in Production (yet)

4 x faster than Angular 1 Not very intuitive?

Huge improvement (rewrite) over Angular 1 Opinionated

VDom offers 3-10x improvements in performance Cant drop into existing projects

Access to ES6/ES7 functionality Size (760k)

Embrace the Web Component standard Puts JS inside HTML

Uses RxJS Fails slow? (Runtime vs compile time)

Low risk of churn Have to learn RxJS?

Community just starting

You have to relearn Angular

Some more…

Highlights

Simple easy API

Just have to learn JavaScript

Skills can be transferredMultiple companies using it

.net developers might prefer TypeScript

Provides framework out the box

Have to learn eco system Risk of churn Developers have to learn JS

Still in Beta

Skills are tied down (TS and Angular)

Ang1 1 doesn't mean you know Ang2

Devs have to learn TS and Angular

More reading…

Code comparisonshttp://www.ociweb.com/resources/publications/sett/comparison-of-angular-2-and-react/

Comparisonshttp://tutorials.pluralsight.com/front-end-javascript/angular-vs-react-a-side-by-side-comparison

https://docs.google.com/document/d/1Ah9IJ72DhV4AzoZ1TJUnMzj42PzQrLrwQUkg9koO0dg/mobilebasic

Reacthttps://blog.formidable.com/using-react-is-a-business-decision-not-a-technology-choice-63c4641c5f7#.60nhwnibc

https://medium.freecodecamp.com/angular-2-versus-react-there-will-be-blood-66595faafd51#.yp3hdgeck

https://medium.com/@alexewerlof/when-should-i-use-typescript-311cb5fe801b#.tyeeyf22y

Angular 2