HTML-over-the-Wire: Moderne webutvikling med en "besteforeldre"-vri
Lag raskere, billigere og mer robuste nettsteder med HTML Over the Wire og Turbo, ved å sende HTML i stedet for JSON tilbake til nettleseren.
Written by Vegard Ottervig on
I "gamle dager", i det noen yngre utviklere kanskje vil kalle "besteforeldrenes tid" (rundt 2015), sendte webutviklere HTML over internett. Så kom æraen med massive JSON-nyttelaster og komplekse frontend-rammeverk.
Tom Arild fra Item Consulting argumenterer for at det er på tide å gå tilbake til fremtiden. Ved å bruke "HTML-over-the-wire"-tilnærmingen med Hotwire Turbo og Enonic, kan utviklere bygge raske, applikasjonslignende opplevelser uten å måtte bruke tunge JavaScript-rammeverk.
Filosofien: Progressiv forbedring
Grunnlaget for denne tilnærmingen er Progressiv forbedring. Tenk på nettsiden din som en serie robuste lag:
- Fundamentet (HTML): Du starter med ren, semantisk og robust HTML. En bruker skal kunne fullføre oppgavene sine, som å lese en artikkel eller sende inn et skjema, ved å kun bruke dette laget. Det er ikke pent, men det er uknuselig.
- Stilen (CSS): På toppen av HTML legger du til CSS for å få opplevelsen til å se bedre ut. Ved å bruke en "mobil-først"-tilnærming og standard CSS, sikrer du at nettstedet ser greit ut selv på eldre nettlesere (for en bestemor som bruker Internet Explorer).
- Opplevelsen (JavaScript): Til slutt legger du til et tynt lag med JavaScript for å få nettstedet til å føles som en moderne app. Hvis JavaScript ikke lastes inn i en tunnel eller på en dårlig tilkobling, fungerer nettstedet fortsatt fordi de underliggende lagene er solide.
Motoren: Hotwire Turbo
"Kjøttet" i denne moderne gammeldagse tilnærmingen er Hotwire Turbo. Opprinnelig utviklet av Ruby on Rails-fellesskapet, og passer perfekt med Enonic. Turbo er delt inn i tre kraftige deler:
1. Turbo Drive
Turbo Drive fungerer som en ruter. Den "kaprer" hver lenke på siden din. Når du holder musepekeren over en lenke, begynner den å hente HTML for den aktuelle siden i bakgrunnen. Når du klikker, bytter den ganske enkelt den gjeldende <body> med den nye. Dette er betydelig raskere enn en fullstendig sideinnlasting fordi nettleseren ikke trenger å analysere alle skriptene og stilene i toppteksten på nytt.
2. Turbo Frames
Dette er kraftsenteret for "delvis oppdatering". Ved å pakke en del av siden din inn i et <turbo-frame>-element, kan du oppdatere bare den spesifikke delen. Hvis du sender inn et skjema inne i en ramme, oppdateres bare denne rammen med en "Suksess"-melding. Resten av siden forblir urørt.
Det beste er at du ikke trenger å skrive en eneste linje med frontend-JavaScript for å få denne oppførselen.
3. Turbo Streams
Noen ganger må du oppdatere flere deler av en side samtidig. La oss si at du må oppdatere et handlekurvikon i toppteksten når et element legges til i en liste i brødteksten. Da bør du bruke Turbo Streams.
Gjennom en WebSocket-tilkobling til Enonic kan serveren "streame" CRUD-operasjoner direkte til DOM. Den kan legge til, sette foran, erstatte eller fjerne elementer i sanntid for én bruker, eller for hver bruker som er på nettstedet.
Hvorfor dette fungerer med Enonic
Å sende HTML i stedet for JSON handler like mye om ytelse som stil:
- Malfrihet: Enten du foretrekker Thymeleaf eller FreeMarker, kan du bruke ditt foretrukne serverside-malspråk.
- Mindre vedlikehold: Du trenger ikke å vedlikeholde to sett med maler (ett for serveren og ett for en jQuery/React-frontend). Du har én kilde til sannhet for markeringen din.
- The Booster Edge: Enonics Booster-applikasjon passer perfekt her. Fordi du serverer HTML, kan du cache en markering i utkanten eller på et CDN, noe som gjør den "applikasjonslignende" opplevelsen enda raskere.
- Lat lasting: Du kan bruke en Turbo Frame til å lat-laste ("lazy load") tungt innhold. Servér hovedsiden umiddelbart fra hurtigbufferen, og la rammen hente de tidkrevende API-dataene etterpå.
Utfordringer og lærdommer
Hver teknologi har sine særegenheter. Hvis du legger til Turbo på en eksisterende side, må du huske disse to "nybegynnerfeilene":
- JavaScript-nytilknytning: Siden Turbo bytter DOM uten en fullstendig sideoppdatering, må all "vanilje"-JavaScript som trenger å knyttes til elementer (som et galleri eller en glidebryter) kjøres på nytt. Tom anbefaler å bruke Web Components (Custom Elements) fordi de er en del av webplattformen og instansierer seg selv automatisk når de vises i DOM.
- Lenkekapring: Som standard prøver en Turbo Frame å åpne hver lenke inne i seg selv. Hvis du har en ekstern lenke, må du eksplisitt fortelle den om å bryte ut av rammen. En sikker vinner er å sette standardoppførselen til å åpne i en ny side og merke spesifikke "Turbo"-lenker manuelt.
Konklusjonen
HTML er også et dataformat. Ved å flytte logikken tilbake til serveren og bruke Hotwire Turbo, får vi applikasjonslignende ytelse med robustheten til 2015-æraens web. Det er raskere å utvikle, enklere å vedlikeholde, og viktigst av alt, det bare fungerer.
