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: rick@nforza.nl

Slides: http://www.slideshare.net/RickBeerendonk Sources: https://github.com/rickbeerendonk/react-om-examples