React.js

En ny paradigm av gränssnittsutveckling

Jesper Petersson Booli / GeoGuessr

Vyer DOMData

(models, stores, …)

Vyer DOM

Vy

DOM

Vy

Vy

Vy

Vy

Vy

Back to the 90’s

• Hämta tillstånd från databas

• Skriv ut ny fräsch HTML

• Det var enklare!

Kan vi rita om hela applikationen, så fort någon data ändras?

Vyer DOMData

• Prestanda-problem?

• Formulär?

• Reflows?

Virtuell DOM

React- komponent DOMData Virtuell

DOM

div

p p

Hello world

(Befintligt träd)

Virtuella DOM-träd

div

p p

Hello world

div

p p

Hello #vtd15

(Befintligt träd) (Nytt träd)

Virtuella DOM-träd

div

p p

Hello world

div

p p

Hello #vtd15

Virtuella DOM-träd

(Befintligt träd) (Nytt träd)

• Generera en ny virtuell DOM

• Diff mot den befintliga

• Batch-skrivning till DOM

Vid förändring av data

Enkelheten i en 90-tals-app med kraften av Javascript

[Exempel]

• Prestanda (sidladdning)

• Progressive enhancement

• SEO

Argument mot Javascript

[Exempel]

Isomorphic Javascript

Speaker.js

Speaker.jsx

Speaker.jsx

Speaker.jsx

Deklarativt

Förutsägbart

Tillförlitligt

render(props) -› Virtuell DOM

• Ingen riktig DOM

• Selenium, PhantomJS, …

• Enhetstestning som vilken funktion som helst

Testbarhet

Mer awesomeness

• Statisk analys

• Bokföring av lyssnare

• react-a11y

Mer awesomeness

• Statisk analys

• Bokföring av lyssnare

• react-a11y

<span onClick={this._onClicked} />

Tack!

Jesper Petersson @PeterssonJesper