Tech 5073 x bekeken

Verbinding en gemak met Angular JS

11 mei 2016 - Dave van Emmerik

AngularJS is een Front-end framework dat volledig in de browser draait en dit verrijkt met elementen. Het slaat een solide brug naar traditionele Back-end talen, doordat de rol van de server wordt teruggedrongen.

De afgelopen jaren zijn Front End frameworks als paddenstoelen uit de grond gekomen. Deze frameworks zijn vaak gericht op het uiterlijk van de website en zorgen ervoor dat een website goed werkt op bijvoorbeeld jouw iOS device, maar ook op een desktop PC, of zelfs de full HD smart tv in je huiskamer.

Dat een website er mooi uitziet en overal goed werkt is vanzelfsprekend belangrijk, maar daarmee zijn we er nog niet. Websites zijn tegenwoordig vaak complexe applicaties waarmee je bijvoorbeeld bankzaken kunt regelen, vakanties kunt boeken en de wekelijkse boodschappen bestelt. In de praktijk bestaat een website daardoor vaak uit heel veel verschillende kleine onderdelen. Deze onderdelen hebben niet altijd een connectie met elkaar. Iedere library of ieder script heeft dan ook zijn eigen specifieke functie. Zo’n stukje programmeertaal zorgt bijvoorbeeld voor een winkelwagentje, een slider of het afspelen van video op je mobiel. Al die losse stukken code maken het onderhouden en testen van een complexe (front-end) applicatie in de praktijk vaak ondoorzichtig. Zo kan het zomaar voorkomen dat bij een aanpassing in onderdeel A, onderdeel B niet meer goed functioneert in browser X, omdat e.e.a. met elkaar verbonden is.

Front- én backend

Om al deze redenen is de behoefte ontstaan aan een Front-end framework dat ook verbinding maakt met de Back-end. Hiervoor gebruikt Estate AngularJS, één van de eerste volwassen Javascript Frameworks. AngularJS is in 2012 door Google ontwikkeld en inmiddels als open source project beschikbaar voor het grote publiek. 

Met AngularJS kunnen single page applicaties (SPA's) worden gebouwd waarbij het programmeren van de user interfaces en het koppelen van webapplicaties op declaratieve wijze (een beschrijvende manier van programmeren) plaatsvindt. 

Angular implementeert hiervoor het model-view-controller-principe, afgekort MVC. Dit is een ontwerppatroon om datamodel, datapresentatie en applicatielogica van elkaar te scheiden. De kracht van AngularJS schuilt in two-way data binding: wijzigingen in het model zijn zichtbaar in de view en wijzigingen in de view zijn meteen zichtbaar in het model. Het resultaat hiervan is dat Angular de noodzaak om het Document Object Model (DOM) te manipuleren vermindert. Dit heeft weer als doel om de testbaarheid, onderhoudbaarheid én het prestatievermogen te verbeteren.

Wat betekent dit voor de gebruiker van de website?
Een AngularJS-applicatie functioneert in principe volledig in elke browser. De server wordt hiermee ontlast, omdat een (groot) deel van de functionaliteiten rechtstreeks aan de kant van de bezoeker plaatsvindt. De scripts worden namelijk modulair opgebouwd en via een API voorzien van gegevens. De server hoeft daardoor alleen maar in actie te komen wanneer de applicatie daarom vraagt. Het AngularJS script zorgt vervolgens zelf voor het verwerken van de content op de juiste wijze en biedt hierin bijvoorbeeld functionaliteiten voor filteren, sorteren of zelfs bewerken.
 
Kortom: snelheidswinst, vooral merkbaar op drukbezochte sites met hoge technische eisen. Snelheidswinst betekent anno 2015 een betere conversie, tevreden bezoekers en meer traffic.
Alle onderdelen uit AngularJS zijn “universeel” inzetbaar in de meest gebruikte browsers en op diverse besturingssystemen. Dit scheelt weer in ontwikkeltijd.
Last but not least, door de modulaire opbouw, is een website veel onderhoudsvriendelijker geworden voor de ontwikkelaars.
 

Dave van Emmerik

Webdeveloper met interesse voor de interactie tussen Design, Front-End, UX en IxD. Stiekeme liefhebber van PHP en is overtuigd van de toekomst van JS.

Reacties ()