ReactJS maakt het web eenvoudig
-
Upload
rick-beerendonk -
Category
Technology
-
view
345 -
download
1
description
Transcript of ReactJS maakt het web eenvoudig
ReactJS maakt het web eenvoudig
Rick Beerendonktwitter.com/rickbeerendonk
Wat is React?
Made by Facebook Used by Facebook
IE8 en hoger Alle recente mobile browsers Fork op Github voor IE6 + IE7
Open source op GitHub:http://facebook.github.io/react/
ReactJS.NET, open source op Github:http://reactjs.net/
Wat is React?
Tart “best practices”
Wat is React?
Wat wordt nu gebruikt? Welke problemen ervaar je?
Why React?
Synchroniseren van state is moeilijk=> Daarom Databinding=> Kettingreactie van callbacks
Kleine wijziging kan leiden tot ongekend grote reactieWat doet dat met performance?
Update DOM is moeilijk Debuggen
• Waar plaats ik breakpoint?• Vooruit, niet achteruit• Regel voor regel
Problemen
“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 tekst space) and the process (spread out in time) as trivial as possible”
Edsger Dijkstra
Herbouwen i.p.v. update Immutable i.p.v. Mutable
• Flow in één richting i.p.v. twee richtingen
Debuggen• Minimum aantal wijzigingslocaties (waar plaats ik breakpoint?)• Van wijziging naar wijziging i.p.v. van regel naar regel
Oplossingen
20e eeuw: Oude server situatie eenvoudig: Gooi oude pagina weg en genereer steeds een nieuw pagina.
2004: HTML = Composed string 2007: HTML = Composed string with XSS protection 2010: Reduce server callbacks by having more Javascript
(databinding/MVC/etc.) 2013: React
Ontstaan React
Traditioneel:
DOM
App DOM
builds/modifies
events
Weggooien en herbouwen DOM: Verlies input focus + cursor positie Verlies tekst selectie Verlies scroll positie Verlies IFrame state
DOM
React:
Virtual DOM
App Virtual DOM
builds/modifies
events
DOM
builds/modifies
events
Doom3
Doom3
Doom3 React
React:
Virtual DOM
AppNew
Virtual DOM
builds
events
DOM
modifies
events
OldVirtual DOM
Queue Differences
Minimale verschillen Snelst mogelijke wijzigingen Minimale garbage collection Alleen schrijven naar de browser DOM Events alleen gekoppeld aan browser DOM root.
Smart Virtual DOM
Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/01.%20HelloReact
React!
Lijkt op XAML in WPF Prettig voor designers Compileert in JavaScript
• Online:http://facebook.github.io/react/jsx-compiler.html
• Offline:https://github.com/rickbeerendonk/react-om-examples/tree/master/Extra%2003.%20JSX%20Compiler
Te genereren vanuit HTML• Online:
http://facebook.github.io/react/html-jsx.html• Offline:
https://github.com/reactjs/react-magic/blob/master/README-htmltojsx.md
JSX
HTML in Javascript? Ben je gek!?!?!?!
Separation of concerns
Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/02.%20Component
Components
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
React Developer Tools
23
Synthetisch, cross-browser wrapper om het browser event Identiek over alle browsers Zelfde als browser event, incl. capturing/bubbling fases. Extra event property: nativeEvent
Events
24
Clipboard events• onCopy onCut onPaste
Keyboard events• onKeyDown onKeyPress onKeyUp
Focus events• onFocus onBlur
Form events• onChange onInput onSubmit
Mouse events• onClick onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp
Ondersteunde events (1)
25
Touch events• onTouchCancel onTouchEnd onTouchMove onTouchStart
UI events• onScroll
Wheel events• onWheel
Ondersteunde events (2))
26
Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/03.%20Events
Events)
Immutable
Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/04.%20Properties
Properties
Mutable Maar alleen te wijzigen door setState() en replaceState().
Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/05.%20State
State
Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/06.%20MultipleComponents
Multiple components
Demo:https://github.com/rickbeerendonk/react-om-examples/tree/master/05b.%20State%20without%20XSS%20Protection
Cross-site scripting
JSX compilatie (optioneel: ECMAScript 6) JSX bundling & minification Rendering
ASP.NET MVC• Demo:
https://github.com/rickbeerendonk/react-om-examples/tree/master/Extra%2004.%20Server%20Side%20ASP.NET%20MVC
Node.js• Example:
https://github.com/mhart/react-server-example
PHP
Server Side
React:
Virtual DOM Server
App Virtual DOMbuilds/modifies
<HTML>builds/modifies
Wie gebruiken React?
React component search engine (npm): http://react-components.com/
React-router: https://github.com/rackt/react-router
React-bootstrap: http://react-bootstrap.github.io/
Handige links
“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
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
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