Udviklingsprocessen for Houdini Sportwears nye e-handel

I mit <a href="/how-we-build-modern-ehandel-as-a-spa" target="_blank">tidligere blogindlæg</a> gik jeg kort igennem, hvordan vi byggede <a href="https : //valamagasinet.se" target="_blank">Vålamagasinets e-handel</a> som Single Page Application (SPA) med React. Over tid har vi forbedret vores udviklingsproces, og jeg tænkte, at jeg ville gennemgå et par af de forbedringer, vi lavede, mens vi arbejdede på <a href="https://houdinisportswear.com" target="_blank">Houdini Sportwears nye e-handel</a a> for at lette arbejdet for vores udviklere.

Udfordringer undervejs

Som altid ved brug af ny teknologi stødte vi på udfordringer, vi skulle løse under udviklingen af ​​Vålamagasinets e-handel. Flere af disse var relateret til, at frontend ikke kontrollerede webserveren, der hostede vores webapp.

Det betød, at data såsom sidetitler og metatags skulle indstilles af backend i sideskabelonen, så Googles spider og andre bots kunne få adgang til disse data direkte uden at downloade og køre vores JavaScript. Derudover skulle vi skrive logik i frontend-appen, der sikrede sidetitler og metatags blev opdateret, mens brugeren navigerede rundt i appen. Det kunne selvfølgelig løses, men krævede et tæt samarbejde mellem frontend og backend, og føltes ikke optimalt.

Et andet område for forbedring er indlæsningstiden for den første sidevisning. Da React fungerer ude af boksen, skal browseren downloade vores JavaScript og fortolke det, før den kan begynde at hente data og tegne den side, der skal vises. På en moderne enhed med en anstændig internetforbindelse er dette hurtigt, men hurtigere er altid bedre.

Det sidste område, vi virkelig ønskede at forbedre, er muligheden for nemt at have forskellige miljøer, der kører forskellig kode for at lette test og kodegennemgang af vores frontend-kode. Dette blev vanskeliggjort af, at vores webapp er hostet i et Windows-miljø.

Next.js til undsætning!

For at løse disse forhindringer under vores udviklingsproces byggede vi Houdini Sportswear med gengivelse på serversiden ved hjælp af <a href="https://nextjs.org/" target="_blank">Next.js</a> og skiftede til at skelne backend og frontend endnu mere.

Da al kommunikation mellem backend og frontend foregår med Ajax-opkald, havde vi i Houdini mulighed for selv at styre hostingen af ​​vores webapp. Vi sætter et system op i Heroku, hvor en ny forekomst af vores app dukker op, hver gang vi laver en pull-anmodning i GitHub.

Dette lettede i høj grad test i forskellige enheder og kodegennemgang, da vi automatisk altid har et miljø, der kører præcis den kode, vi ønsker at teste. Derudover kan du hurtigt se direkte i GitHub, om koden af ​​en eller anden grund ikke bygger korrekt.

Forbedring 1: Har automatisk forskellige miljøer, der kører forskellig kode, check.

![alex-blogpost-utvprocess (1)](//images.ctfassets.net/ckfp71nhsbgs/5gK3LY7WFv27fJcuvWCtcb/70db8ccdf1b074ca9adf982d66dcdblogg_utvinv.la____jpg-utvprocesg.

Da vi nu styrer webserveren i frontend, kan vi bruge Next.js til at tegne hvordan siden skal se ud direkte i serveren. Brugeren, der besøger siden, behøver ikke længere at vente på, at vores JavaScript downloader og kører, før browseren kan gengive siden.

Derudover kan vi cache resultatet fra Next.js i webserveren for at give endnu hurtigere sidevisninger.

Forbedring 2: Hurtigere første sidevisning med caching på serveren, check.

Det betyder, at vores logik til indstilling af sidetitler og metatags også bliver eksekveret og sendt ud fra vores server, og behøver således ikke være i både backend og frontend kode.

Forbedring 3: Læt håndteringen af ​​sidetitler og metatags, check.

En levende udviklingsproces

Dette var blot et udvalg af nogle af de forbedringer, vi lavede under udviklingen af ​​Houdini Sportswear. Vores udviklingsproces er noget, der konstant forbedres og udvikles i takt med, at teknologien og vores erfaring vokser.

Alexander Järnehall, interfaceudvikler hos Cloud Nine.

Hvis du er en udvikler og synes, det lyder interessant, så tjek vores <a href="/career" target="_blank">karriereside</a>.