Introducing Facebook's React and ReactJS.NET @ Microsoft's TechDays 2015 in The Netherlands. Is the HTML of your SPA also filled with unmaintainable semi code? Is data binding performance causing you headaches? Don’t you remember how data finds its way to the UI? Let's React! There is a new functional approach to tackle traditional complexities in JavaScript: ReactJS (open source). Maligned in 2013, embraced in 2015 by the largest websites in the world. Let's build fast components in a lasting and meaningful way. This session is a full introduction to the React JavaScript library, its virtual DOM and synthetic events. ReactJS.NET for ASP.NET MVC (and OWIN) will be covered as well. With ReactJS.NET your app starts with a server side rendered page, ideal for search engine optimization (SEO). Does your page need to work under IE8? No problem! The best part: You do not have to build your entire site with ReactJS, but you can start with any parts you like. Afterwards this talk you can immediately apply React in your daily work. See http://reactjs.net and http://reactjs.com

1. ReactJS.NET
Fast and Scalable
Single Page Applications
Rick Beerendonk
twitter.com/rickbeerendonk

2. REACT
A JAVASCRIPT LIBRARY FOR
BUILDING USER INTERFACES
REACT .NET
REACT ♥ C#
AND ASP.NET MVC
REACT NATIVE
A FRAMEWORK FOR
BUILDING NATIVE APPS
USING REACT
What is React?
2

3.  Made by Facebook
 Used by Facebook
 IE8 and up
 All recent mobile browsers
 GitHub Fork for IE6 & IE7
 Native apps for iOS (Android soon)
• Windows already allows for native JavaScript applications.
What is React?
3

4.  ReactJS:
http://reactjs.com/
 ReactJS.NET:
http://reactjs.net/
 React Native:
https://facebook.github.io/react-native/
React is Open Source (GitHub)
4

5. Defies
“Best Practices”
What is React?
5

6.  What do you use now?
 What are your current problems?
Why React?
6

7.  Synchronizing state is hard
=> Hence Databinding
=> Chain reaction of callbacks
Small changes can lead to unprecedented reaction
What is the effect on performance?
 Updating the DOM is hard
 Debugging
• Where to place breakpoints?
• Forward, not backward
• Line by line
Problems
7

8. “Our intellectual powers are rather geared to master static relations and our
powers to visualize processes evolving in time are relatively poorly
developed.
For that reason we should do (as wise programmers aware of our
limitations) our utmost to shorten the conceptual gap between the static
program and the dynamic process, to make the correspondence between
the program (spread out in text space) and the process (spread out in time)
as trivial as possible”
Edsger Dijkstra
8

9.  Rebuild instead of update
 Immutable instead of Mutable
• Flow: Uni-directional instead of bi-directional
 Debugging
• Minimum number of change locations (where to place breakpoint?)
• Move from change to change instead of from line to line
Solutions
9

10.  20th century: Old server, easy: Throw away old page and generate a new page on every
request.
 2004: HTML = Composed string
 2007: HTML = Composed string with XSS protection
 2010: Reduce server callbacks by having more JavaScript (databinding/MVC/etc.)
 2013: React
History
10

11. Traditional:
DOM
11
App DOM
builds/modifies
events

12. Throw away and rebuild DOM:
 Losing input focus & cursor position
 Losing text selection
 Losing scroll position
 Losing IFrame state
DOM
12

13. React:
Virtual DOM
13
App Virtual DOM
builds/modifies
events
DOM
builds/modifies
events

14. Doom3
14

15. Doom3
15

16. Doom3 React
16

17. React:
Virtual DOM
17
App
New
Virtual DOM
builds
events
DOM
modifies
events
Old
Virtual DOM
Queue
Differences

18.  Minimum number of differences
 Fastest possible changes
 Minimize garbage collection
 Only write to the browser DOM
 Event handlers only attached to browser DOM root
Smart Virtual DOM
18

19.  Demo:
https://github.com/rickbeerendonk/react-om-
examples/tree/master/01.%20HelloReact
React!
19

20.  Looks like XAML in WPF
 Familiar for designers
 Compiles into JavaScript
• Online: http://facebook.github.io/react/jsx-compiler.html
• Babel (ES 2015 & 2016 Transpiler): https://babeljs.io/docs/usage/jsx/
• Offline: https://github.com/rickbeerendonk/react-om-
examples/tree/master/Extra%2003.%20JSX%20Compiler
 Can be generated from HTML
• Online: http://facebook.github.io/react/html-jsx.html
• Offline: https://github.com/reactjs/react-magic/blob/master/README-htmltojsx.md
JSX
20

21. HTML in Javascript?
Are you nuts!?!?!?!
Separation of concerns
21

22.  Demo:
https://github.com/rickbeerendonk/react-om-
examples/tree/master/02.%20Component
Components
22

23.  https://chrome.google.com/webstore/detail/react-developer-
tools/fmkadmapgofadopljbjfkapdkoienihi
React Developer Tools
23

24.  Synthetic, cross-browser wrapper for the browser event
 Identical on all browsers
 Same as browser event, incl. capturing/bubbling phases.
 Extra event property: nativeEvent
Events
24

25.  Clipboard events
• onCopy onCut onPaste
 Keyboard events
• onKeyDown onKeyPress onKeyUp
 Focus events
• onFocus onBlur
 Form events
• onChange onInput onSubmit
 Mouse events
• onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave
onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove
onMouseOut onMouseOver onMouseUp
Supported events (1)
25

26.  Touch events
• onTouchCancel onTouchEnd onTouchMove onTouchStart
 UI events
• onScroll
 Wheel events
• onWheel
Supported events (2)
)
26

27.  Demo:
https://github.com/rickbeerendonk/react-om-examples/tree/master/03.%20Events
Events
)
27

28.  Immutable
 Demo:
https://github.com/rickbeerendonk/react-om-
examples/tree/master/04.%20Properties
Properties
)
28

29.  Mutable
 Only changeable by setState()
• Currently also by replaceState(), but that is no longer supported by ES6 classes.
 Demo:
https://github.com/rickbeerendonk/react-om-examples/tree/master/05.%20State
State
)
29

30.  Demo:
https://github.com/rickbeerendonk/react-om-
examples/tree/master/06.%20MultipleComponents
Multiple components
)
30

31.  Demo:
https://github.com/rickbeerendonk/react-om-
examples/tree/master/05b.%20State%20without%20XSS%20Protection
Cross-site scripting
)
31

32.  ASP.NET MVC
• NuGet: https://www.nuget.org/packages/React.Web.Mvc4/
• JSX compilation including ECMAScript 2015 + caching
• JSX bundling & minification
• Server side rendering
 OWIN
• NuGet: https://www.nuget.org/packages/React.Owin/
• JSX compilation through OWIN middleware
 Demo:
https://github.com/rickbeerendonk/react-om-
examples/tree/master/Extra%2004.%20Server%20Side%20ASP.NET%20MVC
ReactJS.NET Server Side
32

33. React:
Virtual DOM Server
33
App Virtual DOM
builds/modifies
<HTML>
builds/modifies

34. Who’s using React?
34

35.  React component search engine (npm):
http://react-components.com/
 React-router:
https://github.com/rackt/react-router
 React Drag and Drop:
https://github.com/gaearon/react-dnd
 React-bootstrap:
http://react-bootstrap.github.io/
Useful links
35

36. “Flux is the application architecture that Facebook uses for building client-side web
applications. It complements React's composable view components by utilizing a
unidirectional data flow.”
https://facebook.github.io/flux/
Flux
36

37.  Om:
https://github.com/swannodette/om
 Undo/Redo:
http://swannodette.github.io/2013/12/31/time-travel/
 Goya (app):
http://jackschaedler.github.io/goya/
Om: Undo/Redo
37

38. Let’s React!
Twitter: http://twitter.com/rickbeerendonk
Mail: rick@nforza.nl
Slides: http://www.slideshare.net/RickBeerendonk
Sources: https://github.com/rickbeerendonk/react-examples