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.

Designing interface

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?
Mensen gebruiken smartphone

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

OCS Academy in het teken van Scrum Awareness

OCS Academy in het teken van Scrum Awareness

De OCS Academy is een repeterend jaarprogramma gericht op de startende consultant. Die leert van een ervaren rot in het vak, die zijn kennis en ervaring op een specifiek onderwerp met zijn jongere collega’s deelt. Dit keer stond de OCS Academy in het teken van Scrum...

OCS Family Event in de Efteling

OCS Family Event in de Efteling

Bij Open Circle Solutions weten we dat er meer is dan alleen werk... Nee, serieus: onderling contact buiten werkuren ís erg belangrijk voor onze cultuur en samenwerking. Niet voor niets organiseren we meerdere events per jaar waar onze medewerkers elkaar treffen in...

Nieuwsbrief

Meld je nu aan voor Open Circle Stories en krijg een verzameling artikelen, tips, nieuws en verdiepingen in je mailbox.

Pin It on Pinterest

Share This