![Page 1: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/1.jpg)
ReactJS.NETFast and ScalableSingle Page Applications
Rick Beerendonktwitter.com/rickbeerendonk
![Page 2: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/2.jpg)
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
![Page 3: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/3.jpg)
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
![Page 4: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/4.jpg)
ReactJS:http://reactjs.com/
ReactJS.NET:http://reactjs.net/
React Native:https://facebook.github.io/react-native/
React is Open Source (GitHub)
4
![Page 5: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/5.jpg)
Defies
“Best Practices”
What is React?
5
![Page 6: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/6.jpg)
What do you use now?
What are your current problems?
Why React?
6
![Page 7: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/7.jpg)
Synchronizing state is hard=> Hence Databinding=> Chain reaction of callbacks
Small changes can lead to unprecedented reactionWhat is the effect on performance?
Updating the DOM is hard
Debugging• Where to place breakpoints?
• Forward, not backward
• Line by line
Problems
7
![Page 8: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/8.jpg)
“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
![Page 9: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/9.jpg)
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
![Page 10: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/10.jpg)
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
![Page 11: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/11.jpg)
Traditional:
DOM
11
App DOM
builds/modifies
events
![Page 12: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/12.jpg)
Throw away and rebuild DOM:
Losing input focus & cursos position
Losing text selection
Losing scroll position
Losing IFrame state
DOM
12
![Page 13: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/13.jpg)
React:
Virtual DOM
13
App Virtual DOM
builds/modifies
events
DOM
builds/modifies
events
![Page 14: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/14.jpg)
Doom3
14
![Page 15: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/15.jpg)
Doom3
15
![Page 16: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/16.jpg)
Doom3 React
16
![Page 17: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/17.jpg)
React:
Virtual DOM
17
AppNew
Virtual DOM
builds
events
DOM
modifies
events
OldVirtual DOM
Queue Differences
![Page 18: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/18.jpg)
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
![Page 19: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/19.jpg)
Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/01.%20HelloReact
React!
19
![Page 20: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/20.jpg)
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
![Page 21: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/21.jpg)
HTML in Javascript?
Are you nuts!?!?!?!
Separation of concerns
21
![Page 22: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/22.jpg)
Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/02.%20Component
Components
22
![Page 23: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/23.jpg)
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
React Developer Tools
23
![Page 24: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/24.jpg)
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
![Page 25: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/25.jpg)
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 onMouseMoveonMouseOut onMouseOver onMouseUp
Supported events (1)
25
![Page 26: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/26.jpg)
Touch events• onTouchCancel onTouchEnd onTouchMove onTouchStart
UI events• onScroll
Wheel events• onWheel
Supported events (2))
26
![Page 27: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/27.jpg)
Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/03.%20Events
Events)
27
![Page 28: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/28.jpg)
Immutable
Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/04.%20Properties
Properties)
28
![Page 29: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/29.jpg)
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
![Page 30: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/30.jpg)
Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/06.%20MultipleComponents
Multiple components)
30
![Page 31: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/31.jpg)
Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/05b.%20State%20without%20XSS%20Protection
Cross-site scripting)
31
![Page 32: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/32.jpg)
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
![Page 33: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/33.jpg)
React:
Virtual DOM Server
33
App Virtual DOMbuilds/modifies
<HTML>builds/modifies
![Page 34: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/34.jpg)
Who’s using React?
34
![Page 35: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/35.jpg)
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
![Page 36: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/36.jpg)
“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
![Page 37: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/37.jpg)
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
![Page 38: ReactJS - download.microsoft.com€¦ · “Our intellectual powers are rather geared to master static relations and our powers to visualize processes evolving in time are relatively](https://reader034.vdocuments.mx/reader034/viewer/2022052018/6031eec537a65e62b1198ae4/html5/thumbnails/38.jpg)
Let’s React!
Twitter: http://twitter.com/rickbeerendonk
Mail: [email protected]
Slides: http://www.slideshare.net/RickBeerendonk
Sources: https://github.com/rickbeerendonk/react-om-examples