Trends in de JavaScript Wereld!

Trends in de JavaScript Wereld!

Tegenwoordig is JavaScript een van de meeste gebruikte talen om strakke en moderne applicaties mee te maken. Je zou hierbij kunnen denken aan normale websites die JavaScript gebruiken maar ook aan strakke webapplicaties voor bijvoorbeeld het admin systeem van je website. Natuurlijk heb je ook de mobiele applicaties geschreven met JavaScript die upcoming zijn maar daar hebben we al eens een blog over geschreven, die je hier kunt terug lezen! Maar wat zijn nou echt trends in de JavaScript wereld?

Een SPA als webapplicatie

Vooral de Single Page Applications (SPA), zijn razend populair. Een SPA is een webapplicatie die op 1 pagina geladen wordt en alleen content laat zien die daadwerkelijk nodig is. Wanneer je dus naar andere pagina gaat, wordt niet de pagina herladen maar eigenlijk gewoon de content veranderd. Door deze methode zijn de webapplicaties vaak enorm snel en fijn in gebruik want data die niet nodig is, hoeft ook niet geladen te worden.

Maar hoe haal je dan de data op?

Het komt regelmatig voor dat de applicatie geen software bevat voor de ‘achterkant’, zoals PHP. In plaats daarvan communiceert de applicatie met een ‘API’. Een API kun je zien als een soort van online service met data. Vaak is dit een verlengstuk van je eigen database en de bijbehorende data. Als je bijvoorbeeld een SPA maakt voor een intern project, maak je gebruik van een API die je zelf opzet. Je laat dan je eigen applicatie data ophalen via je eigen API.

Deze kun je zelf opzetten maar het kan ook goed zijn dat je een API van een ander bedrijf gebruikt. Als je bijvoorbeeld een webapplicatie aan het bouwen bent voor cryptocurrencies en je wilt weten hoeveel bijvoorbeeld de bitcoin waard is, ga je natuurlijk niet elke keer handmatig invullen hoeveel deze bitcoin waard is. Je maakt dan gebruik van een API van een andere partij. Verschillende partijen, van Facebook tot aan Spotify en Twitter, maar ook gewoon kleinere websites hebben een API die vaak goed gedocumenteerd is. Aan jou de taak om een API te zoeken die gegevens over de bitcoin heeft, op te zoeken naar welk adres je een verzoek moet sturen et voilá, de waarde van de bitcoin zit nu ook in jouw applicatie verwerkt met JavaScript.

Hot in JavaScript land

Als we het dan over verschillende termen en JavaScript hebben, kunnen we eigenlijk niet om de grootste trend van het afgelopen jaar heen: React. React is het grootste JavaScript project van het moment, van de makers van Facebook. React is gericht op de view layer van een applicatieen dus niet zo zeer dus op de achterkant van een applicatie. Met React worden dan ook voornamelijk de SPA’s gemaakt. Er wordt gebruik gemaakt van componenten die opgebouwd zijn met een taal dat een mix is van HTML en JavaScript, JSX.

Om de data te structureren in de applicatie wordt er bij React gebruik gemaakt van State management. State management zorgt ervoor dat de data in je applicatie gecentraliseerd wordt en op één plek wordt opgeslagen: de store. Het voordeel hiervan is dat je componenten altijd in sync zijn met elkaar: ze bevatten altijd dezelfde data en kunnen dus nooit verschillen van elkaar. Dit maakt je applicatie een stuk beter onderhoudbaar. Je weet waar alle data vandaan komt en hoeft dus niet in elke component steeds dezelfde functie te schrijven om data op te halen of af te vragen of de data nog wel gelijk is aan elkaar.

Een state van cryptocurrencies

Als we dan toch even weer terug vallen op ‘onze bitcoin applicatie’ kunnen we hiervan een mooi voorbeeld geven. Stel: je hebt een component die verantwoordelijk is voor de waarde van de bitcoin en deze waarde moet tonen. Dan moet je natuurlijk ophalen hoeveel deze waard is en wil je deze om de zoveel minuten laten vernieuwen. Als je dan ook een component hebt waarmee je kunt uitrekenen wat de waarde is van een paar euro in bitcoin, is het natuurlijk wel zo handig dat de waarde van de bitcoin gelijk is aan je eerste component. Zonder state management zou je dus in beide componenten een call doen naar een API en in beide componenten deze waarde opslaan.

Als om wat voor reden dan ook in de tweede component een andere waarde terecht komt is deze dus niet meer gelijk aan de eerste component en daardoor kan het voor de gebruiker enorm onduidelijk zijn. Met state management doe je dus geen call naar de API per component, maar doe je een enkele call naar de API waarvan je de waarde op een gecentraliseerd punt opslaat (de store). Vanuit je component spreek je dan dit punt aan op de waarde op te halen. Wanneer dan in de ene component de waarde verandert, verandert deze ook automatisch in de andere component.

Misschien een wat langere blog dan normaal maar wij leggen het graag goed uit zodat het goed te volgen is! Mocht je nog met vraagtekens zitten, wij willen je graag helpen! Stuur ons gewoon een berichtje. Wij geven nog graag een eervolle vermelding aan progressieve webapps en GraphQL, wellicht dat we in een volgende trends blog hier op verder gaan!

Happy coding!


Leuk artikel? Laat het andere weten!