Over de hele stack van software development zijn er constante veranderingen te vinden. De conferentie Infobip Shift gaf dan ook een kijkje achter de schermen bij bedrijven die bezig zijn met de nieuwste technologieën en frameworks te creëren, en hiermee de meest frustrerende problemen van ontwikkelaars op te lossen.
Naar aanleiding van mijn bezoek aan de infobip shift deel ik graag een aantal interessante nieuwe technologieën waar ik tijdens de conferentie mee heb kennis gemaakt.
In deze blog focussen we ons op een aantal Javascript technologieën die in opkomst zijn die veel potentie bieden op het gebied van snelheid, namelijk: Qwik en Remix.
Qwik
We kennen allemaal React, en hoe het tegenwoordig één van de frontend frameworks is waar vrijwel iedereen zich toe keert wanneer er een frontend (business) applicatie gemaakt moet worden. React heeft met al zijn features en nadruk op ontwikkelingsgemak wel een nadeel die steeds prominenter wordt naarmate er meerdere versies uitkomen: snelheid. Dit is niet direct React zijn eigen fout, maar meer hoe Javascript in elkaar zit en hoe het de gebundelde code oplevert aan de client. Dit oplossen is een lastig probleem. Niet alleen omdat het zou betekenen dat de makers van React het fundamenteel zouden moeten gaan veranderen, maar ook omdat je tegenwoordig veel meer in huis haalt aan extensies zoals React router en Redux.
Qwik is dan ook een framework dat van de grond af opnieuw is bedacht en gemaakt met snelheid altijd in het achterhoofd. De ontwikkelaars noemen deze snelheid de TTI (time to interact) waar ze zich op focussen. Het is bedacht om nog steeds de look en feel te geven die je krijgt wanneer je JSX of React aan het schrijven bent, maar achter de schermen is de aanpak volledig anders, en enorm veel sneller. Om een beeld te krijgen van een grof verschil tussen het laden van applicaties raad ik je aan op deze link te klikken waar een van de ontwikkelaars bij Builder.io dat laat zien.
Deze snelheid verschillen worden bereikt doordat Qwik de javascript code uit elkaar trekt in porties die los van elkaar staan, en wanneer een pagina geladen wordt alleen de HTML van die pagina oplevert met de minimale bundel die nodig is om de pagina goed weer te geven. Aan de achterkant heeft Qwik weet van wanneer er events afgaan zoals ‘clicks’ of ‘listeners’, en wanneer dat gebeurt, wordt de code-bundel die bij het event hoort naar de client verzonden. Hierdoor wordt de laadtijd drastisch verkleind, maar blijft de gebruiker nog steeds in staat om de volledige applicatie te gebruiken zoals men dat gewend is.
Terug naar MVC?
Waar vroeger veel gebruik werd gemaakt van model-view-controllers is dit tegenwoordig haast niet meer denkbaar. Tegenwoordig zenden we eigenlijk alleen maar data via ‘rest’. Hierdoor doet de server niks anders dan Json aanleveren aan een single-page-application.
Ondanks dat iedereen helemaal fan is van deze ontwikkeling, wakkeren Qwik en Remix het MVC vuurtje toch weer een beetje aan. Dit doordat de server intelligenter omgaat met welke informatie naar de client toe moet. Dit is natuurlijk niet een directe vertaling naar MVC, maar gaat wel uit van een nauwere verbinding met de server dan die we gewend zijn met REST.
Remix
Remix is nog een framework wat belooft de focus op snelheid te leggen, door middel van zoveel mogelijk terug te gaan naar de basis en alleen de HTML op te sturen die nodig is. Het verschil met Qwik is alleen, dat Remix een fullstack framework is wat kan inhaken op zowel de voorkant als de achterkant van de applicatie. Remix omschrijft zichtzelf als een MVC framework, waar het model wordt overgelaten aan de ontwikkelaar. Aan de achterkant kan je bijvoorbeeld je favoriete server gebruiken zoals Express.js, en als een soort van middelware neemt Remix daarna de functionaliteit over van hoe de pagina’s worden geserveerd aan de voorkant.
Aan de voorkant zorgt Remix er voor dat het ontwikkelen nog steeds gebeurd op de manier die je gewend bent in JSX, maar dat in runtime, alleen wordt gegeven en ververst wat daadwerkelijk nodig is. Dit kan Remix bereiken doordat het een notie heeft van welke data er naar de voorkant moet gaan op ieder moment, aangezien het zelf die data oplevert. De rest van de pagina die niet hoort te wijzigen blijft dan ook hetzelfde en wordt dan ook niet weer opnieuw opgevraagd aan de server.
Deze aanpak zorgt voor een enorm strakke integratie tussen de voorkant en de achterkant die we gewend zijn van vroegere MVC frameworks (denk aan Laravel, Spring Boot, Django), maar met de snelheid waar Javascript om bekent staat. Het grote voordeel is dan dus ook dat Remix vooral inhaakt op delen van je applicatie om het renderen soepelere te laten verlopen. Je bent volledig vrij om aan de achterkant je extensies van NodeJS te gebruiken zoals Express.js als een server, en aan de voorkant houd niks je tegen om React te importeren als library om de UseEffect en UseState functionaliteit te gebruiken. Sterker nog, het leunt nog best veel op de daadwerkelijke implementatie die React geeft.
Conclusie
React is al jarenlang in de opmars en geeft ontwikkelaars de mogelijkheid snel applicaties neer te zetten op een ontwikkelaarsvriendelijke en veelzijdige manier. Doordat computers en internet steeds sneller zijn geworden de afgelopen jaren werd het niet direct duidelijk hoe langzaam een applicatie kan worden wanneer er geen rekening met snelheid wordt gehouden, en de manier hoe Javascript van zichzelf de bundels oplevert aan de client laat veel te wensen over. Tegenwoordig zijn er bedrijven en kringen die hierin willen helpen door opnieuw tijd en moeite te stoppen in hoe onze apparaten al die code toegestuurd krijgen en daarmee omgaan. Qwik en Remix zijn een van de nieuwste technologieën in de Javascript wereld die daar hun versie van graag met de wereld willen delen. Speelt bij jouw volgende applicatie snelheid een belangrijke rol? Geef Qwik or Remix dan een kans!
Auteur van deze blog:
