ReactJS Israel - 3 hour - live head to head battle

1. ANGULAR2 REACT
VS

2. MEGA
MEETUP

4. hackademy.co.il

5. Nir Kaufman Boris Dinkevich

6. AGENDA
Frameworks Overview
Round 1
Round 2
Q&A Panel
Live Coding
Prepare Questions

7. ANGULAR2 REACT
ROUND 1

8. REACT OVERVIEW

9. HISTORY
Released in 2013
Production version from day one
Dedicated teams at Facebook

10. THE BASE
Webpack
React
Redux
Win!

11. Game engine
User
Todos
Study React
Root
App
Add TodoTodos
Todo
…
Study Redux Win! Todo
…
Todo
…

12. THE TWO PROBLEMS
Update the state
Update the UI

13. VIRTUAL DOM
Only make browser do the changes
Never worry about $watch
Support super element-heavy pages

14. State
React
Components
Virtual DOM
Browser DOM
React Native
Text
etc
Our code React
+

15. DOM
<div>
<input>
value=‘100’class=‘’
<div>
<input>
class=‘’
Virtual DOM
value=‘’
Just a simple diff!

16. Update the state…
Once in a galaxy far far away…
MVVC...

17. Component

18. Component
Service Service

19. Component
Service Service Service

20. Component
Service Service Service
Service

21. Component
Service Service Service Service
Service

22. Component
Service
Component
Service Service Service
Service Service

23. Component
Model
ComponentComponent
Service Service Service
Service Service Service Service

24. MVVC

25. User Interface
Dispatcher
Stores
UNI-DIRECTIONAL DATA FLOW
StoresStores

26. UI IS RENDERED

27. UI IS RENDERED
SOMETHING HAPPENED

28. UI IS RENDERED
SOMETHING HAPPENED
STATE CHANGED

29. UI IS RENDERED
SOMETHING HAPPENED
STATE CHANGED
UI IS RENDERED

30. UI IS RENDERED
SOMETHING HAPPENED
STATE CHANGED
UI IS RENDERED
SOMETHING HAPPENED
STATE CHANGED
UI IS RENDERED
SOMETHING HAPPENED
STATE CHANGED

31. FLUX

32. Redux
The leader in Flux frameworks
One single store of state!

33. SINGLE STATE
Easy to re-render
Easy to debug
Easy to do server rendering

34. Current State
Next State
Reducers
(processors)
Action
Update UI…Event…

35. TADA!(applause)

36. ANGULAR OVERVIEW

37. ANGULAR2 IS A NEW FRAMEWORK
- built from scratch to be a development platform
- dedicated team at google and around the world
- currently in BETA 3

38. TARGETING DESKTOP & MOBILE
- Abstract rendering layer
- Server side rendering
- Natural native-script support

39. CUTTING EDGE TECHNOLOGIES
- Use of WebWorkers
- Shadow DOM components
- server-side pre-rendering, offline compile

40. EACH APP IS
UNIQUE

41. CHOOSE YOUR TOOLS
- build-tool agnostic: webpack, gulp, grunt etc..
- language support: ES5, ES6, TypeScript, Dart

42. CHOOSE YOUR STYLE & DATA FLOW
- Object oriented style: plain classes
- Reactive style: RxJS built-in
- MV* style: build your data model layer with services
- Flux / Redux: uni-direction data-flow

43. Components
Dispatcher
ActionsStores
FLUX

44. Current State
Next State
Reducers
(processors)
Action
Update UI…Event…
REDUX

45. MVC Style
Model
Model
Model
Http
Logger
Auth
Component
Component
Component

46. DEVELOPMENT
PLATFORM

47. ALL ASPECTS OF MODERN WEB APPS
- Animation module (js, css & Web animation API)
- Internationalization (I18N) & accessibility
- Powerful component router
- Form system - (two-way data binding,
change tracking, validation, and error handling)

48. ABSTRACTIONS
- Http module for server-side communication
- Dependency injection for modularity and testability
- Core directives for declarative dynamic templates

49. ECOSYSTEM

50. Released 2013 (2+ years)
Used extensively in production
https://github.com/facebook/react/
wiki/Sites-Using-React
REAL WORLD USE
Beta 3 Released in 2016
currently used in production only
inside of Google

51. • Massive adoption abroad by startups
and companies
• Initial adoption in Israel
• Active and growing React community
• Multiple companies started PoC
the technology
• Initial adoption in Israel
• Community interest exploding
DEVELOPERS

52. • Active and growing React community
• Huge amounts of quality Courses &
Books
• Community interest exploding
• official conferences in Europe &
USA
• large amount of angular local
communities around the world
• massive amount of Books, Videos,
Tutorials, Courses and posts
COMMUNITY

56. • Gradual small improvements
• Easy upgrade path (angular hah!)
• milestones and development
process (public)
• tutorials and tools for easier
migration from angular 1.x
• dedicate team of 28 google
engineers +community
contributors
ROADMAP

57. • Extensive eco system
• Components for every need
• Growing eco system
• Angular 1.x components are
currently in migration process
• Easy integration with components
made in other frameworks /
libraries
3RD PARTY

58. TECHNICAL

59. • ES6/7 Focused
• TypeScript adding extensive JSX
support
• ES6 / TypeScript focused (ES5 and
Dart as well)
• Standart HTML / CSS (react??)
LANGUAGE

60. • Webpack & Babel • Webpack /gulp / grunt / etc…
• TSC or Babel
• Angular CLI (game changer!)
BUILD TOOLS

61. • What is VirtualDOM • encapsulated structure and style
• part of web components spec
• exciting technology (not invented..)
VIRTUAL / SHADOW DOM

62. • JSX - Next slide • Standart JavaScript - (.js or .ts)
• Standard HTML - can be written as
a separate file, valid, (.html)
• Standard CSS - can be written as a
separate file, valid (.css)
• directives - declarative abstractions,
extends element behaviour.
• bind to native element properties
and events - no wrappers!
TEMPLATE ENGINES

63. JSX
<div>
<Component />
<h1>Regular HTML tags</h1>
<Hello title=‘React rules!’/>
<ComponentWithChildren>
<StuffInside />
Some text with { 4 - 3 } expressions in it.
</ComponentWithChildren>
</div>

64. Components
const Hello = ({ title }) => <h1>{ title }</h1>;
hello.jsx
hello.css
h1 {
font-weight: bold;
}

65. hello.js
import {Component} from 'angular2/core';
@Component({
selector: 'hello-angular',
templateUrl: 'hello.html',
styleUrls: ['hello.css']
})
class HelloAngular { . . . }
hello.css
h1 {
font-weight: bold;
}
hello.html
<h1>{{ title }}</h1>

66. • FLUX • Zone.js - proxy for all the async
methods in the browser
• two-way, one-way, one-time
binding mechanism
• Flux, RxJS (streaming) and ‘classic’
Model style data flows
• No $digest, $apply, $scope,
$watch
CHANGE DETECTION

67. • No need for browser
• Mocking tools
• Build in E2E (click())
(next slide)
• No need for browser
• Mocking tools out of the box
• Testable from the ground up thanks
to dependency injection
TESTS

68. React Tests
const component = TestUtils.renderIntoDocument(
<MyComponent />
);
const button = component
.findRenderedDOMComponentWithTag('button')
.getDOMNode();
const label = component
.findRenderedDOMComponentWithTag('h1')
.getDOMNode();
TestUtils.Simulate.click(button);
expect(label.textContent)
.toEqual('I have been clicked!');

69. (next slide)
Server Rendering
• Server rendering support (angular
universal)
• WebWorker support

70. Server rendering
import { renderToString } from ‘react-dom/server';
// Render the component to a string
const html = renderToString(
<div>
<h1>Hello from the server!</h1>
</div>
);
import { render } from ‘react-dom';
render(
<div>
<h1>Hello from the server!</h1>
</div>,
document.getElementById('app')
);

71. • React Native
• Same code on Android & iOS
• Using Native Components!
• No crappy WebView wrappers (ionic/
cordova/etc)
• Server side rendering for web-
mobile
• Natural integration with native-
script (native components, no
cordova)
MOBILE

72. • React Chrome extension
• Easy “state” inspection
• Great action replay with redux
• redux dev tool for redux
• built-in inspection tool
• TypeScript support through IDE’s
and sourceMaps
https://github.com/gaearon/redux-devtools
DEBUGGING

73. ANGULAR2 REACT
ROUND 2

74. CODE

75. Angular is a development platform
aimed for modern most demanding
web and mobile applications.
Angular2 built from several modules
working together to supply high level
abstractions and API’s for building
complex applications with ease.
Nuth said
FINAL WORDS

76. We are looking for
rockstars to join our band
jobs@500tech.com
HIRING

77. ANGULAR2 REACT
Q&A