Wie voor klanten bedrijfsapplicaties of websites en webshops bouwt, heeft de keuze uit een groot aantal verschillende front-ends. Maar wie wordt de winnaar na een onderlinge vergelijking? Bas Rutten, Senior Java Developer van Open Circle Solutions deed er uitgebreid onderzoek naar. We concentreren ons op de meest bekende, namelijk Angular en laten zien welke front-end technologieën daar interessante aanvullingen op zijn.

Angular

In de afgelopen jaren is er een behoorlijk aantal Javascript-frameworks op het toneel verschenen. Angular is ongetwijfeld een van de bekendste en meest gebruikte van deze frameworks. Angular is erg krachtig en intuïtief, maar het is niet altijd voldoende voor het ontwikkelen van een volledige webapplicatie.

Het biedt prima faciliteiten voor databinding, validatie, dependency injection etc., maar houdt zich niet expliciet bezig met zaken als schermopbouw en weergave van de data. Deze zijn wel wenselijk voor een goede user experience. Zo ontbreekt bijvoorbeeld een tabel die server-side paginering ondersteunt. Ook het aanmaken van een formulier voor data-invoer kan nogal bewerkelijk zijn, waarbij mogelijk veel code-duplicatie optreedt.

Angular productiever en robuuster maken

Er zijn een aantal frameworks die kunnen helpen om het werken met Angular productiever en robuuster te maken. De belangrijkste aandachtspunten ter verbetering zijn hierbij:

• Het bieden van een goed werkende tabel met server-side paginering.
• Een flexibel systeem voor het realiseren van een responsive lay-out.
• Een rijke set aan input-componenten.

We richten ons hierbij voornamelijk op het ontwikkelen van webapplicaties en minder op Progressive Web Apps (PWA’s) en mobiele applicaties. Een framework als Ionic laten we daarom in deze blog buiten beschouwing. De volgende 4 frameworks zijn in dit kader vergeleken:

1. Bootstrap
2. Angular Material
3. PrimeNG
4. Vaadin Components

1. Bootstrap

Bootstrap is een veelgebruikte front-end component library. Een van de belangrijkste verdiensten van Bootstrap is het flexibele grid-layout systeem, waarmee je gemakkelijk en eenvoudig een scherm kunt ontwerpen dat volledig responsive is.

De beperking van een puur visuele library
Bootstrap wordt met recht veel gebruikt, maar het is een bijna uitsluitend visuele library die geen directe samenhang met Angular heeft en een relatief laag abstractieniveau kent. Zo kun je bijvoorbeeld wel werken met dialoogvensters, maar moet je hierbij het venster nog helemaal samenstellen en ook de logica voor het tonen en verbergen grotendeels zelf definiëren. Het ziet er erg goed uit allemaal, maar het is nog niet voldoende geïntegreerd voor waar we hier naar op zoek zijn.

2. Angular Material

Angular Material is een componenten library voor Angular, die wordt ontwikkeld door Google. Angular Material bevat een redelijk groot aantal componenten, o.a. voor data-invoer, navigatie, lay-out en het tonen van dialoogvensters. Daarnaast beschikt het framework over een uitgebreide tabel die ondersteuning voor server side paginering biedt.

Het is erg eenvoudig om Angular Material toe te voegen aan je applicatie en om de componenten te gebruiken, al vereist de paginerende tabel wel een redelijke hoeveelheid boilerplate code. De documentatie van Angular Material is wel erg uitgebreid en compleet.

Het is belangrijk om op te merken dat Angular Material zelf geen responsive grid layout component bevat. Het is daarom aan te bevelen, of wellicht zelfs noodzakelijk, om Angular Material te combineren met Bootstrap.

3. PrimeNG

Dat het nog een stuk beter en completer kan, bewijst PrimeNG. Dit framework werkt op hoofdlijnen hetzelfde als Angular Material, maar blinkt uit door de grote hoeveelheid en volledigheid van beschikbare componenten. Ook hier zijn alle gebruikelijke componenten voor data-invoer, navigatie, lay-out, dialoogvensters etc. aanwezig, maar ook enkele bijzondere componenten zoals een volledig kalender-component, een Google Maps component en een “rating” component (waarmee je een waardering van 1 tot 5 sterren kunt geven).

In tegenstelling tot Angular Material biedt PrimeNG wel een eigen responsive grid-systeem. Dit responsive grid-systeem werkt overigens ongeveer hetzelfde als dat van Bootstrap en het is ook mogelijk om het grid-systeem van Bootstrap te combineren met de UI-componenten van PrimeNG.

De componenten van PrimeNG zijn over het algemeen erg makkelijk te gebruiken waarbij vooral de paginerende tabel in positieve zin opvalt, want deze vereist een stuk minder boilerplate code dan de tabel uit Angular Material en beschikt over enkele krachtige functionaliteiten zoals het herschikken van kolommen en het verbergen van kolommen op basis van de schermgrootte.

4. Vaadin Components

Vaadin Components is een componenten library voor zowel Java als Javascript. De Java-versie maakt onderdeel uit van het Vaadin-framework waarmee Open Circle Solutions veel ervaring heeft en mede daarom leek Vaadin Components ons een interessant alternatief om te onderzoeken.

Vaadin Components biedt iets meer componenten dan Angular Material maar een stuk minder dan PrimeNG. Voor een klein gedeelte van de componenten (zoals de rich tekst editor) geldt wel dat deze deel uitmaken van de “pro” suite waarvoor een betaalde licentie aangeschaft moet worden.

Vaadin Components bevat ook een responsive layout-systeem, maar dit is minder uitgebreid dan dat van de andere frameworks. Je kunt in Vaadin Components gebruikmaken van componenten als de HorizontalLayout, VerticalLayout en FormLayout, die zich wel responsive gedragen. Je hebt echter minder controle over het precieze gedrag m.b.t. verschillende schermgroottes.

Daarnaast zijn de componenten van Vaadin Components minder geschikt voor gebruik met Angular dan de andere frameworks. Dit is in zekere zin logisch, aangezien de Vaadin Components niet specifiek gemaakt zijn voor Angular. Het maakt dit framework daarom voor onze doeleinden minder geschikt. Het is met name jammer dat er voor de configuratie van de componenten Javascript (in plaats van Typescript) nodig is en dat de documentatie een beetje achterblijft bij de andere front-ends.

Andere frameworks

Er zijn natuurlijk nog veel andere frameworks beschikbaar om te combineren met Angular. Wij focussen ons vooral op deze frameworks omdat ze in eerste instantie het meest veelbelovend en/of populair zijn. Zoals gezegd kijken we daarnaast niet naar frameworks die zich voornamelijk lijken te focussen op PWA/mobiele apps en/of frameworks die het aanschaffen van een (dure) licentie vereisen, zoals Kendo. Indien je wel in eerste instantie voor mobiele apparaten wilt ontwikkelen dan is Ionic waarschijnlijk een betere optie.

Punt-voor-punt framework vergelijking

De onderstaande tabel toont hoe de verschillende onderzochte frameworks zich verhouden m.b.t. tot een aantal aspecten:

Het is daarbij goed om op te merken dat alle frameworks open source zijn en gratis te gebruiken, al geldt voor Vaadin Components wel dat voor een aantal van de meer exotische componenten betaald moet worden in de vorm van een “pro license”. Bij PrimeNG is het daarnaast mogelijk en ook aan te raden, om een “Long Term Support (LTS)” licentie aan te schaffen voor support/bugfixes op de twee meest recente versies van het framework die ouder zijn dan de huidige versie. Dat voorkomt dat je iedere 6 maanden hoeft te upgraden. De andere frameworks lijken zo’n optie vooralsnog niet te bieden. Verder is het goed om op te merken dat vooral PrimeNG een erg actief onderhouden framework lijkt te zijn, met een actieve gemeenschap.

Onze winnaar is…

PrimeNG! Op basis van ons onderzoek komt PrimeNG als de duidelijke winnaar naar voren. Niet voor niets noemen zij zich “The Most Powerful Angular UI Component Library.”

Dit framework heeft op vrijwel alle punten een streepje voor op de concurrentie. Het biedt de meeste en meest volledige componenten, heeft de best werkende tabel-component, is goed gedocumenteerd en kent een actieve community van wereldwijde developers. Het biedt daarnaast als enige een vorm van betaalde support. Op basis hiervan hebben wij er dan ook voor gekozen om PrimeNG te gebruiken als aanvulling op Angular.