Binary Studio MEET FOR IT gatherings in Lviv, Ukraine: 5th of March 2016 our meetup was devoted to .NET platform and partly JS frameworks. ,

1. Angular. React.
ups & downs

2. Oleksandr Kovalov
Frontend Developer
Binary Studio

3. Agenda
1. Overview
2. Angular
3. React
4. ES2015
5. Angular 2
6. Dev Tools
7. Summary

4. The most popular frameworks

5. Angular vs React
VS

6. Google trends

9. Angular.js
First version was created in 2009 as
service for store data in JSON.
Created by Google

10. Angular.js
Module
Config
Routes
View Controller
$scope
ViewModel
Directives
Filter
Factory
Service
Provider
Value

11. Walk through Angular app architecture
Templates
Controllers
Services / Factories
Directives

12. Angular - Template

13. Angular - Controller

14. Angular - Service

15. Dirty checking - watchers etc.

16. Angular world
Dependency Injection
Providers
Filters
Isolated Scope
Config
Events: $emit, $broadcast
Resources

17. Angular problems
Model
View
Controller
Controller
Controller
Controller
View
View
View
View
Model
Model

18. Summary
Quick creation of initial version of application
Many created directives
Problems with current state control

19. React.JS
React was created by Jordan Walke, a
software engineer at Facebook
Become open-source in 2013

20. React Component

21. Props and State

22. 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

23. JSX
● The same file for
code/template
● XML-like syntax
● Build components, not
templates.
○ Reusable
○ Composable
○ Unit testable

24. React render
React 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

25. VirtualDOM
Reactive, Component-based UIs with React

26. VirtualDOM

27. ES 2015

28. ES 2015
http://kangax.github.io/compat-table/es6/

29. Babel

30. Babel

31. Flux
Action
Dispatcher
Store
View
● Instead of MVC for React
● Unidirectional data flow
● Created by Facebook
● Many stores
Store
Store
...

32. Redux
● Evolution of Flux
● One immutable state
● Hot reload
View layer
Action
Dispatcher Store View
Provider Connect

33. Redux flow - Store
Create store.
Connect store to
Root element

34. Redux flow - Connect State/Actions to Components

35. 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

36. Redux flow - Root Reducer
Creation of Root
reducer

37. Redux flow - Reducer
Every reducer:
receive state
return new state
Not mutated old state! new one!

38. Summary
State changes only in reducers
Structured code
We have access to state in every moment

39. Let`s compare!
Router
Form validation
HTTP handling

40. Router organisation - Angular

41. Router organisation - React

42. 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.

43. 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

44. Angular $http Methods:
● .delete()
● .get()
● .head()
● .jsonp()
● .patch()
● .post()
● .put()
Response properties:
● .config
● .data
● .headers
● .status
● .statusText

45. Angular $resource
$resource(url, [paramDefaults], [actions], options);
A factory which creates a resource object
that lets you interact with RESTful server-side
data sources.

46. React HTTP (superagent)
Response properties:
● .text
● .body
● .header
● .type
● .status
Methods:
● .get()
● .delete()
● .head()
● .post()
● .put()

47. Opinion
Unix philosophy:
The philosophy of small, composable, single-purpose tools never goes
out of style.
Angular 2 versus React: There Will Be Blood

48. Cook Angular React-way

49. Angular + React
+

50. Performance is not the reason
Improvements:
track by
Minimize watchers
:: one-time binding
debounce ng-model
ng-show/ng-if
use VanillaJS (native JavaScript)

51. 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

52. Performance is not the reason
React’s true strengths: composition, unidirectional data
flow, freedom from DSLs, explicit mutation and static
mental model.
Dan Abramov
Redux Author
https://medium.com/@dan_abramov/youre-missing-the-point-of-react-
a20e34a51e1a

53. 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-repeat
Angular 2: ngFor
Knockout: data-bind=”foreach”
React: JUST USE JS. :)

54. Who uses?
Angular:
Google
Youtube for PS3
Nike
General Motors
Guardian
Wolphram alpha
NBC
Intel
React:
Facebook
Instagram
Atlassian
Dropbox
Flipboard
IMDb
Netflix
PayPal
WhatsApp

55. Angular 2.0

56. Angular 2.0

57. TypeScript

58. React Developer Tools

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

60. React Native

61. React Native
2016:TheYearReactNativeEatsMobileDevelopment

62. React Native
https://facebook.github.io/r
eact-native/showcase.html

63. 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.

64. Summary
React + Redux:
VirtualDOM
Uni-directional data flow
Low entry barrier
Easily manageable state.
Immutable.
React Native for mobile
development
Angular:
Full-featured MV* framework
Fast to start-off
2-way binding
TypeScript (Angular 2)
Remember about optimization

65. 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

66. Any questions?