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:

1. 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.
2. 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.
3. 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.