reactjs.net - fast and scalable single page applications
TRANSCRIPT
![Page 1: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/1.jpg)
ReactJS.NETFast and ScalableSingle Page Applications
Rick Beerendonktwitter.com/rickbeerendonk
![Page 2: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/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.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/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.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/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.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/5.jpg)
Defies
“Best Practices”
What is React?
5
![Page 6: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/6.jpg)
What do you use now? What are your current problems?
Why React?
6
![Page 7: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/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.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/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.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/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.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/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.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/11.jpg)
Traditional:
DOM
11
App DOM
builds/modifies
events
![Page 12: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/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.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/13.jpg)
React:
Virtual DOM
13
App Virtual DOM
builds/modifies
events
DOM
builds/modifies
events
![Page 14: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/14.jpg)
Doom3
14
![Page 15: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/15.jpg)
Doom3
15
![Page 16: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/16.jpg)
Doom3 React
16
![Page 17: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/17.jpg)
React:
Virtual DOM
17
AppNew
Virtual DOM
builds
events
DOM
modifies
events
OldVirtual DOM
Queue Differences
![Page 18: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/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.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/19.jpg)
Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/01.%20HelloReact
React!
19
![Page 20: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/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.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/21.jpg)
HTML in Javascript?
Are you nuts!?!?!?!
Separation of concerns
21
![Page 22: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/22.jpg)
Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/02.%20Component
Components
22
![Page 23: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/23.jpg)
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
React Developer Tools
23
![Page 24: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/24.jpg)
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
![Page 25: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/25.jpg)
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)
![Page 26: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/26.jpg)
26
Touch events• onTouchCancel onTouchEnd onTouchMove onTouchStart
UI events• onScroll
Wheel events• onWheel
Supported events (2))
![Page 27: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/27.jpg)
27
Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/03.%20Events
Events)
![Page 28: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/28.jpg)
28
Immutable
Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/04.%20Properties
Properties)
![Page 29: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/29.jpg)
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)
![Page 30: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/30.jpg)
30
Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/06.%20MultipleComponents
Multiple components)
![Page 31: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/31.jpg)
31
Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/05b.%20State%20without%20XSS%20Protection
Cross-site scripting)
![Page 32: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/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.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/33.jpg)
React:
Virtual DOM Server
33
App Virtual DOMbuilds/modifies
<HTML>builds/modifies
![Page 34: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/html5/thumbnails/34.jpg)
Who’s using React?
34
![Page 35: ReactJS.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/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.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/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.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/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.NET - Fast and Scalable Single Page Applications](https://reader035.vdocument.in/reader035/viewer/2022062420/55b36596bb61eb99548b4775/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