ReactJS maakt het web eenvoudig
•Download as PPTX, PDF•
0 likes•1,032 views
Voor het maken van single page web applications lijkt MVC met databinding de standaard. Daarmee zijn fouten lastig te achterhalen. Facebook ondervond dat ook en koos voor een functionele aanpak: ReactJS. Deze sessie geeft een introductie, gaat dieper in op ogenschijnlijke snelheid nadelen en laat zien hoe je herbruikbare React componenten bouwt. Tevens zal ASP.NET MVC gebruikt worden voor server side rendering van de initiële state, ideaal voor search engines die meestal een probleem hebben met single page apps. Na deze sessie zul je nooit meer hetzelfde denken over web UI’s.
Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (20)
Similar to ReactJS maakt het web eenvoudig
Similar to ReactJS maakt het web eenvoudig (20)
Recently uploaded
Recently uploaded (20)
ReactJS maakt het web eenvoudig
- 1. ReactJS maakt het web eenvoudig Rick Beerendonk twitter.com/rickbeerendonk
- 3. 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?
- 4. Tart “best practices” Wat is React?
- 5. Wat wordt nu gebruikt? Welke problemen ervaar je? Why React?
- 6. Synchroniseren van state is moeilijk => Daarom Databinding => Kettingreactie van callbacks Kleine wijziging kan leiden tot ongekend grote reactie Wat doet dat met performance? Update DOM is moeilijk Debuggen • Waar plaats ik breakpoint? • Vooruit, niet achteruit • Regel voor regel Problemen
- 7. “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
- 8. 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
- 9. 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
- 11. Weggooien en herbouwen DOM: Verlies input focus + cursor positie Verlies tekst selectie Verlies scroll positie Verlies IFrame state DOM
- 12. React: Virtual DOM App Virtual DOM builds/modifies events DOM builds/modifies events
- 13. Doom3
- 14. Doom3
- 15. Doom3 React
- 16. React: Virtual DOM App New Virtual DOM builds events DOM modifies events Old Virtual DOM Queue Differences
- 17. Minimale verschillen Snelst mogelijke wijzigingen Minimale garbage collection Alleen schrijven naar de browser DOM Events alleen gekoppeld aan browser DOM root. Smart Virtual DOM
- 18. Demo: https://github.com/rickbeerendonk/react-om- examples/tree/master/01.%20HelloReact React!
- 19. 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
- 20. HTML in Javascript? Ben je gek!?!?!?! Separation of concerns
- 21. Demo: https://github.com/rickbeerendonk/react-om- examples/tree/master/02.%20Component Components
- 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 23
- 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) 24
- 25. Touch events • onTouchCancel onTouchEnd onTouchMove onTouchStart UI events • onScroll Wheel events • onWheel Ondersteunde events (2) ) 25
- 26. Demo: https://github.com/rickbeerendonk/react-om- examples/tree/master/03.%20Events Events ) 26
- 28. Mutable Maar alleen te wijzigen door setState() en replaceState(). Demo: https://github.com/rickbeerendonk/react-om- examples/tree/master/05.%20State State
- 31. 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%20 MVC Node.js • Example: https://github.com/mhart/react-server-example PHP Server Side
- 32. React: Virtual DOM Server App Virtual DOM builds/modifies <HTML> builds/modifies
- 34. 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
- 35. “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. 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. 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