En ny paradigm av gränssnittsutveckling
Jesper Petersson Booli / GeoGuessr
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?
React- komponent DOMData Virtuell
DOM
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
• Prestanda (sidladdning)
• Progressive enhancement
• SEO
Argument mot Javascript
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
<span onClick={this._onClicked} />
Tack!
Jesper Petersson @PeterssonJesper