Upload
binary-studio
View
750
Download
1
Embed Size (px)
Citation preview
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?