React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)

Angular. React. ups & downs

Oleksandr KovalovFrontend DeveloperBinary Studio

Agenda1.Overview

2.Angular

3.React

4.ES2015

5.Angular 2

6.Dev Tools

7.Summary

The most popular frameworks

Angular vs React

VS

Google trends

Angular.js

First version was created in 2009 as service for store data in JSON.

Created by Google

Angular.jsModule

Config

Routes

View Controller$scopeViewModel

Directives

Filter

Factory

Service

Provider

Value

Walk through Angular app architectureTemplates

Controllers

Services / Factories

Directives

Angular - Template

Angular - Controller

Angular - Service

Dirty checking - watchers etc.

Angular worldDependency Injection

Providers

Filters

Isolated Scope

Config

Events: $emit, $broadcast

Resources

Promises

Animation

Angular problems

Model

ViewController

Controller

Controller

Controller

View

View

View

View

Model

Model

SummaryQuick creation of initial version of application

Many created directives

Problems with current state control

React.JSReact was created by Jordan Walke, a

software engineer at Facebook

Become open-source in 2013

React Component

Props and State

Angular, Ember and Knockout put “JS” in your HTML.

React puts “HTML” in your JS.

Cory House React’s JSX: The Other Side of the Coin

Single Responsibility Principle

JSX● The same file for

code/template● XML-like syntax● Build components,

not templates. ○ Reusable○ Composable○ Unit testable

React renderReact re-render entire component

Re-render on every change makes life simple

Declarative JSX

Re-render on every change? That seems expensive

http://www.slideshare.net/floydophone/react-preso-v2

VirtualDOM

Reactive, Component-based UIs with React

VirtualDOM

ES 2015

ES 2015

http://kangax.github.io/compat-table/es6/

Babel

Babel

FluxAction

Dispatcher

Store

View

● Instead of MVC for React● Unidirectional data flow● Created by Facebook● Many stores

Store

Store

...

Redux● Evolution of Flux● One immutable state● Hot reload

View layer

Action

Dispatcher Store View

Provider Connect

Redux flow - StoreCreate store.

Connect store to Root element

Redux flow - Connect State/Actions to Components

Redux flow - Action

Whenever you want to change the state of the application, you shoot off an action.

Action function returns a formatted action object

Redux flow - Root ReducerCreation of Root reducer

Redux flow - ReducerEvery reducer:

receive state

return new state

Not mutated old state! new one!

SummaryState changes only in reducers

Structured code

We have access to state in every moment

Let`s compare!Router

Form validation

HTTP handling

Router organisation - Angular

Router organisation - React

Angular validation

Property

Class Description

$valid ng-valid Boolean Tells whether an item is currently valid based on the rules you placed.

$invalid ng-invalid Boolean Tells whether an item is currently invalid based on the rules you placed.

$pristine ng-pristine

Boolean True if the form/input has not been used yet.

$dirty ng-dirty Boolean True if the form/input has been used.

$touched ng-touched

Boolean True if the input has been blurred.

React validation (formsy-react)Validations list:

● matchRegexp● isEmail● isUrl● isExisty● isUndefined● isEmptyString● isTrue● isFalse● isAlpha● isNumeric● isAlphanumeric● isInt● isFloat● isWords● isSpecialWords● equals:value● equalsField:fieldName● isLength:length● minLength:length● maxLength:length

Angular $http Methods: ● .delete()● .get()● .head()● .jsonp()● .patch()● .post()● .put()

Response properties: ● .config ● .data ● .headers ● .status ● .statusText

Angular $resource

$resource(url, [paramDefaults], [actions], options);

A factory which creates a resource object that lets you interact with RESTful server-side data sources.

React HTTP (superagent)

Response properties: ● .text● .body ● .header● .type● .status

Methods: ● .get()● .delete()● .head()● .post()● .put()

OpinionUnix philosophy:

The philosophy of small, composable, single-purpose tools never goes out of style.

Angular 2 versus React: There Will Be Blood

Cook Angular React-way

Angular + React

+

Performance is not the reasonImprovements:

track by

Minimize watchers

:: one-time binding

debounce ng-model

ng-show/ng-if

use VanillaJS (native JavaScript)

Performance is not the reason

http://blog.500tech.com/is-reactjs-fast/

React Performance: http://speed.examples.500tech.com/ngrepeat/before/react.html

Angular before optimisation:http://speed.examples.500tech.com/ngrepeat/before/angular.html

Angular after optimisation:http://speed.examples.500tech.com/ngrepeat/after/angular.html

Performance is not the reason

React’s true strengths: composition, unidirectional data flow, freedom from DSLs, explicit mutation and static mental model.

Dan AbramovRedux Author

https://medium.com/@dan_abramov/youre-missing-the-point-of-react-a20e34a51e1a

Readability

To read Angular: Learn a long list of Angular-specific syntax.To read React: Learn JavaScript.

Angular 2 versus React: There Will Be Blood

Ember: {{# each}}Angular 1: ng-repeatAngular 2: ngForKnockout: data-bind=”foreach”React: JUST USE JS. :)

Who uses?Angular:

GoogleYoutube for PS3NikeGeneral MotorsGuardianWolphram alphaNBCIntel

React:FacebookInstagramAtlassianDropboxFlipboardIMDbNetflixPayPalWhatsApp

Angular 2.0

Angular 2.0

TypeScript

React Developer Tools

Redux DevTools https://github.com/gaearon/redux-devtools

React Native

React Native

2016

: The

Year

Rea

ct N

ativ

e Ea

ts M

obile

Dev

elop

men

t

React Native

https://facebook.github.io/react-native/showcase.html

Universal (Isomorphic) applications

https://react.rocks/tag/Isomorphic

Server Client

REST API, DB Access, etc.

Node.JS Browser

Universal JavaScript

HTML 5, DOM events, etc.

SummaryReact + Redux:

VirtualDOM

Uni-directional data flow

Low entry barrier

Easily manageable state. Immutable.

React Native for mobile development

Server-/Client-side rendering

Angular:

Full-featured MV* framework

Fast to start-off

2-way binding

TypeScript (Angular 2)

Remember about optimization

P.S.Looking to build something quickly that can be picked up by new

developers without long lead times? Pick Angular.

Building a long term project that requires a specific set of components and a componentized architecture? Pick React.

Prefer Angular? Pick Angular.

Prefer React? Pick React.Mike W.

Waracle Project ManagementAngular vs React

Any questions?