Datadreven frontend
I dette foredraget viser jeg frem hvor jeg har havnet etter en 10 år lang reise der mer datadreven frontendarkitektur har vært målet. Jeg presenterer flere eksempler fra en kodebase som selv etter 10.000 commits over 9 år er i sitt livs beste stand: endringer tas på stående fot og features går ut raskere enn noen gang – takket være en datadrevet arkitektur.
Foredraget tar deg gjennom reisen og valgene som ble gjort underveis, og alle fruktene vi høstet underveis. Velbekomme!
Verktøyene
I løpet av presentasjonen viser jeg frem en del verktøy vi har laget og brukt for å understøtte prosessen. Her er de viktigste, for de som vil dykke litt dypere:
- Portfolio lar deg jobbe isolert med UI-komponenter for å fokusere på de visuelle aspektene, litt som Storybook gjør.
- Dumdom ligner på React, men støtter kun props, og tvinger deg dermed i en datadrevet retning.
- m1p er et bibliotek som løser blant annet i18n på en helt datadrevet måte.
Av disse var det særlig Dumdom som åpnet dørene for mange av løsningene våre. Det var feks der vi åpnet opp for å kunne ha helt datadrevne event-handlere.
Dumdom baserer seg på snabbdom. Etter å ha brukt det i noen år har jeg innsett at rendering-biblioteket kan – eller kanskje bør – være enda enklere, og jeg har derfor startet på et nytt “virtuell DOM”-bibliotek som er helt skjært til beinet. Mer om dette i nær fremtid.
Videre lesning
En av de viktige poengene i foredraget er at man må ha tydelig for seg hvilket domene man opererer i. Dette har jeg også skrevet om tidligere.
Min kollega Magnar har også skrevet om enklere frontendarkitektur ved flere anledninger. Jeg vil spesielt trekke frem En enkel frontendarkitektur som funker og hans foredrag Strøm data til nettleseren uten å lage det på nytt hver gang, som zoomer enda litt lenger ut på denne arkitekturen.
Til siste vil jeg anbefale Dumme klienter, et innlegg som tar for seg den ekstremt datadrevne tilnærmingen vi tok for å lage et nettspill i vår screencast ZombieCLJ. Her laget vi et helt spill, og det er kun ~230 linjer frontendkode, hvorav over halvparten er rene HTML-komponenter.
