Een gelikte user interface met Angular, zonder bijbehorende nadelen
Angular is een veelgebruikt JavaScript-framework dat het makkelijk maakt een website of webapplicatie te bouwen. Het geeft je user interface net die extra uitstraling en een supersnelle responstijd. Dat is mogelijk omdat ontwikkelen met Angular de front- en back-end splitst. Dat heeft ook nadelen omdat je aan beide kanten moet ontwikkelen, maar daar hebben we bij Open Circle Solutions een oplossing op gevonden.
Wat is Angular?
De front-end technologie Angular bepaalt vooral hoe je website eruitziet en hoe de code gestructureerd is. Het is populair omdat het goed aansluit op de HTML-basis van websites maar verder gaat waar het statische html ophoudt: Angular is speciaal gericht op dynamische applicaties waarin uitvoeren van en reageren op handelingen van de gebruiker centraal staan. Door deze dynamische functies in een heldere structuur te gieten, neemt het ontwikkelaars veel werk uit handen. Zo hoef je geen rekening meer te houden met de manier van codering per browser (DOM). Dat maakt het geschikt voor alle browsers.
In deze blog vertellen we meer over front-end technologieën.
Inzet van de client voor snellere respons
Angular is met name bedoeld om het ontwikkelen en testen in moderne browsers te vereenvoudigen. Daarvoor is het framework opgezet met een client-side model-view-controller (MVC)-architectuur. Die opzet maakt het mogelijk om op de machine van de gebruiker bepaalde handelingen uit te voeren, zoals je die ziet in rich internet applications. Zo kun je zien hoe gebruikers reageren op de manier waarop je (dynamische en datagestuurde) informatie presenteert in de interface van de applicatie, en of die weergave begrijpelijk is en de juiste handelingen stimuleert. Een voorbeeld zijn de rode balkjes in de velden van dit formulier. Zij geven aan dat deze informatie verplicht is, dat het in te vullen telefoonnummer alleen een Nederlands nummer mag zijn en het knopje “versturen” alleen in kan worden gedrukt wanneer alle informatie correct is ingevoerd.

In een traditioneel ontwerp wordt bij een handeling van de gebruiker een aanvraag van de client naar de server verstuurd. Daar wordt de aanvraag verwerkt en gecontroleerd op basis van de ingebouwde bedrijfs- en display-logica. Deze logica bepaalt onder andere wie recht heeft om welke informatie te zien. Vervolgens wordt op basis van die regels een reactie terug naar de client gestuurd. Het feitelijke werk gebeurt in deze opzet op de server.
Met Angular is dat anders: hier vindt een deel, waaronder de display logica, plaats bij de client, dus direct in de browser. Dat heeft verschillende voordelen:
- snellere responstijd: pagina’s worden ververst op de client in plaats van op de server
- gevoelige data hoeven niet verstuurd te worden over het internet
Betere layout
Een ander voordeel van Angular is dat het meer mogelijkheden biedt voor een mooiere opmaak van de pagina’s. Dat komt omdat de pagina’s niet automatisch gegenereerd worden vanuit een generator zoals Dynamo, en je dus veel flexibeler bent in de vormgeving. Daarnaast heb je volledige controle over de view en zit je niet vast aan een theme. Ten slotte kun je custom of bestaande ontwerpen gebruiken van echte visuele ontwerpers, in plaats van die van ontwikkelaars.
De user interface van Angular maakt het mogelijk eenvoudig de huisstijl van de organisatie te klonen. Gebruikers ervaren daardoor applicaties als één geheel en kunnen moeiteloos door de verschillende bedrijfsapplicaties navigeren.
Nadelen Angular
Het nadeel van ontwikkelen met Angular is dat een applicatie in feite uit twee delen bestaat: de applicatie op de server en de applicatie aan de client-kant. Dat heeft verschillende consequenties:
- Het is meer werk om te ontwikkelen. Waar een front-end vaak eenvoudig gegenereerd kan worden met een generator als Dynamo, moet in dit geval de user interface echt apart gecodeerd worden.
- Het onderhoud is ook meer werk. Als je een veld wilt toevoegen in de applicatie, moet je deze in beide applicaties toevoegen: dat is meer werk en geeft dus meer kans op fouten.
- Wanneer er ineens meerdere gebruikers tegelijk gebruikmaken van de applicatie, is het lastig inschatten waar meer resources ingezet moeten worden: aan de server- of de clientkant?

Twee applicaties in één
Open Circle Solutions heeft dit probleem opgelost door met behulp van een extra architectuurlaag van twee applicaties één applicatie te maken. Hiermee kun je makkelijker:
- opschalen waar het nodig is
- de gehele applicatie beheren
- slechts een deel van de applicatie aanpassen
- applicaties er exact hetzelfde uit laten zien, waardoor de gebruiker naadloos navigeert tussen meerdere applicaties.
Extra toevoegingen voor privacy en mobiele applicaties
Naast deze heeft de ontwikkelde oplossing ook voordelen op het gebied van privacy en de ontwikkeling van mobiele applicaties.
Technisch gezien hanteert de applicatie nog steeds het principe van Angular, waarbij de front- en back-end gescheiden zijn. De front-end controleert of de gebruiker toegang heeft tot bepaalde data. De server aan de back-end haalt in deze techniek echter niet langer de tabel op met gebruikers, maar alleen de beperkte lijst met gebruikers die toegang hebben. Zo kunnen de functionaliteiten alleen gebruikt worden door diegenen die over de juiste rechten beschikken.
Dat betekent dat privacy op meerdere niveaus gewaarborgd is. In traditionele architectuur is het altijd een risico dat gebruikers per ongeluk toch toegang krijgen tot de verkeerde informatie. Met name wanneer aanpassingen aan de applicatie worden gedaan, vinden datalekken plaats. In deze techniek is er op twee plekken controle. Als de front-end per ongeluk toegang verleent, dan blokkeert de back-end ongeautoriseerde gebruikers alsnog.
Ook het ontwikkelen van mobiele applicaties is minder werk omdat het tweestapsmodel werkt met webservices tussen de back- en front-end. Deze webservices kunnen ook direct worden toegepast op aansluiting met mobiele applicaties. Dat geldt voor zowel functionaliteiten als beveiliging.
Angular draagt bij aan je bedrijfsimago
Zoals gezegd: een met Angular ontwikkelde webapplicatie biedt een mooiere user interface omdat het veel flexibeler is in het grafische ontwerp dan automatisch gegenereerde systemen. Daarom raden we deze technologie met name aan voor applicaties gericht op de eindgebruiker: je klant. Hiermee kun je je huisstijl toepassen op alle applicaties en de interface een extra boost geven. Met de door Open Circle Solutions ontwikkelde oplossing zorg je dat back- en front-end gesynchroniseerd blijven en het beheer geen extra werk vereist.
Een keer verder met ons over Angular praten? Dat kan: neem vrijblijvend contact met ons op of bel naar +31 40 30 41 330.
Meer artikelen
Kubernetes: naadloos opschalen van servercapaciteit en geheugen
Heb je een applicatie die te maken heeft met korte piekbelastingen? Bestaat er een oplossing om razendsnel (reken)capaciteit en geheugen op te schalen voor applicaties zodat overbelasting wordt voorkomen? Jazeker: Kubernetes schaalt applicaties ‘horizontaal’, zodat je...
Cloud applicaties ontwikkelen met scrum: hoe werkt dat?
Voor het ontwikkelen van applicaties gebruiken wij de agile scrum-methodiek, zoals zovelen. Iedereen heeft het over ‘scrummen’, maar als je zelf nog nooit zo’n traject hebt meegemaakt, is het moeilijk je er iets bij voor te stellen. Daarom beschrijven wij in deze blog...
Natural Language Processing: slimmer omgaan met taal en tekst
Dat Open Circle Solutions beeldherkenning gebruikt voor bepaalde toepassingen, is bekend. Wat minder bekend is, is dat we ook actief zijn op het gebied van Natural Language Processing: een deelgebied binnen de Data Science dat zich bezighoudt met de interactie tussen...