Tech 4963 x bekeken

Nieuwe technieken? Kom maar op!

11 mei 2016 - Fokkejan Meijer

Bij Estate zijn we niet bang voor nieuwe ontwikkelingen op de markt. Ondanks dat we expert zijn binnen de gevestigde orde van Sitecore en Sitefinity, betekent dat niet automatisch dat dit altijd de beste keuze is. We denken graag mee met uw wensen en zoeken daar de best passende techniek bij.

Afgelopen 3 maanden hebben we met een klein scrumteam hard gewerkt aan de ontwikkeling van een nieuw klantenportaal voor ruim 1.500 gebruikers, die hierin ieder kwartaal hun afzet op de markt gaan bijhouden. Een keiharde eis voorafgaand aan de ontwikkeling was een snelle reactietijd van de applicatie. Daarnaast was het hoog tijd voor een nieuwe eigentijdse uitstraling en ook de gebruiksvriendelijkheid kon een flinke boost gebruiken. Kortom: een sterke verbetering qua user experience.

Onderzoek

Voordat we zijn begonnen hebben we ons eerst afgevraagd wat de meest geschikte techniek zou zijn om deze uitdaging te lijf te gaan. Bestaande kennis binnen het bedrijf heeft natuurlijk een grote rol gespeeld, maar ook wat iedere techniek ons te bieden had. Uiteindelijk hebben we ervoor gekozen om een websevice op te zetten met WebApi. Hierop zouden we vervolgens een website neerzetten met AngularJS.

We hebben voor WebApi gekozen omdat het een lichte architectuur heeft, maar standaard toch veel functionaliteit biedt die we direct konden gebruiken. Dit scheelt natuurlijk enorm veel ontwikkeltijd. AngularJS kwam als een natuurlijke keuze. Het biedt tenslotte enkele voordelen die naadloos aansluiten op eerder genoemde eisen, zoals laadtijd en een betrouwbare user experience. Er bestaan anno 2015 verschillende frameworks om een Single Page Application (SPA) te bouwen. Zo heb je onder meer AngularJSEmberJS en BackboneJS. Dit zijn allen javascript frameworks die een standaard set aan kant- en klare functionaliteiten bieden, waarmee je als ontwikkelaar veel tijd bespaart. Toch verschillen de bestaande frameworks onderling nog behoorlijk.

Voorafgaand aan de ontwikkeling van het klantportaal hebben wij een aantal belangrijke specificaties in kaart gebracht. Zo wilden we onder meer werken met MVC, two-way databinding en gebruik maken van HTML templates. Daarom viel ons oog al snel op Angular JS. Angular is een framework dat oorspronkelijk is ontwikkeld door Google en heeft inmiddels een brede ondersteuning van developers over de hele wereld.

Werken met AngularJS 

Werken met AngularJS biedt enkele unieke voordelen, maar kenmerkt zich ook door een steile leercurve. Gelukkig bestaat er uitgebreide documentatie en ook foutmeldingen zijn snel te begrijpen, doordat er altijd een URL naar de betreffende documentatie wordt gelogd.

MVC architectuur
Voor een applicatie als deze schrijf je al snel honderden regels code. Om dit overzichtelijk te houden, hanteert AngularJS het MVC principe. Dit houdt in dat de data, de logica en het uiterlijk van de applicatie allemaal van elkaar gescheiden zijn. In feite werk je dus met losse blokken code die je aan elkaar lijmt met behulp van dependency injection en two-way databinding. Het grote voordeel van dit ontwerppatroon is dat het zich uitstekend leent voor het continue doorontwikkelen van de functionaliteit van de applicatie: de losse blokjes kan je steeds herbruiken, uitbreiden en aanvullen.

Views en viewmodels
Angular kent enkele uitstekende features waarmee je gemakkelijk met losse templates “views” per functionaliteit kunt werken, de zogeheten directives. Hiermee bereik je een stuk dynamiek, zonder dat je daadwerkelijk hoeft te programmeren. Zo kun je bijvoorbeeld gemakkelijk informatie herhalen, verbergen of berekenen. Dit is tegelijkertijd ook direct een valkuil, omdat je ook weer allerlei functies vanuit je view kunt aanroepen.

De informatie die je op je website wil tonen moet eigenlijk ‘op maat’ aangeleverd worden aan je view. Een belangrijke tool die wij hierbij gebruikt hebben is UnderscoreJS. Dit is een snelle javascript library om je informatie (vanuit WebAPI) te filteren, samen te voegen of juist te sorteren voordat je het op je scherm toont. Belangrijk hierbij is om het geheugengebruik goed in de gaten te houden. De keuzes die je maakt qua architectuur moet je steeds maken met de efficiënte laadtijd in het achterhoofd.

Conclusie

Kiezen voor een nieuwe techniek brengt altijd risico’s met zich mee, maar juist ook mogelijkheden. Het ontwikkelen gaat met vallen en opstaan, des te meer omdat je iets nieuws onder de knie moet krijgen. Dat is eng, net als leren fietsen. Wel hebben wij gemerkt dat de voordelen als snel begonnen op te wegen tegen de nadelen. Na die fase konden wij steeds meer de vruchten te plukken van deze nieuwe technieken.

Onder aan de streep zijn we vooral heel erg trots op hetgeen we hebben neergezet. Vooral de kracht van AngularJS is perfect naar voren gekomen in de applicatie en de webservice draagt daar zijn steentje aan bij. Doordat alle functionaliteit is geschreven met onderhoudbaarheid in het achterhoofd, is de applicatie simpel en gestructureerd opgezet. Het grote voordeel hiervan is dat dit perfect aansluit bij de Agile werkmethode van dit project en de toekomstvisie van de klant.
 

Fokkejan Meijer

Als lid van het Front-end team ben ik verantwoordelijk voor de optimale prestatie van online applicaties. Hierbij kun je denken aan een snelle laadtijd, intuïtieve gebruikerservaring, goede toegankelijkheid en makkelijke onderhoudbaarheid. 
Bij Estate werken we in scrumteams intensief samen met klanten en krijg ik als teamlid veel verantwoordelijkheid over de uitvoering van mijn projecten en het faciliteren van klanten. 

Reacties ()