Moderne websites; meer dan een paar HTML-pagina’s

In de huidige maatschappij is jou online aanwezigheid niet meer een leuk extraatje, maar een regelrechte vereiste. Medewerkers, klanten en aandeelhouders verwachten dat ze online informatie kunnen vinden, producten kunnen bestellen, diensten afnemen, of zelfs hele bedrijfsprocessen online, vanaf hun pc, tablet of mobiele telefoon kunnen uitvoeren. De eenvoudige website van tien jaar geleden is opgevolgd door complete online applicaties die uit vele modules bestaan en tal van taken moeten kunnen uitvoeren.

Kennis van wat eenvoudige HTML en CSS volstaat niet meer om dergelijke veeleisende applicaties te maken.

Gelukkig zijn er inmiddels ook de tools beschikbaar om zulke omvangrijke webapplicaties te maken. Dit zijn complete, geïntegreerde frameworks die alle functionaliteit bieden die in moderne websites gevraagd wordt. De bekendste spelers op dit gebied zijn React, Angular en Vue.js. Zij bieden alles om een moderne webapp in te stellen, op te schalen en te beheren.  Toch wordt vaak de vraag gesteld welk framework nu “het beste” gebruikt kan worden. Daar is eigenlijk geen eenvoudig antwoord op te geven. Elk framework heeft kenmerken en eigenschappen die beter, of juist minder goed in een bepaalde organisatie passen. We zetten een aantal overeenkomsten, maar ook een aantal verschillen op een rij.

Overeenkomsten tussen React, Angular en Vue.js

• Elk modern framework is gebaseerd op het principe van Single Page Applications. Dit betekent dat een webapplicatie in principe binnen één pagina draait. Die een pagina laadt de gewenste functionaliteit in een grotere omgeving (bijvoorbeeld een dashboard, of portal).
• Elk framework is gebaseerd op componenten. De ontwikkelaar maakt geen volledige HTML-pagina’s meer, maar kleine, gespecialiseerde componenten. Componenten tezamen vormen de complete applicatie.
• Elk framework gebruikt dezelfde principes van data binding, events, routing, http-communicatie en state management. Alleen de syntaxis is onderling uiteraard verschillend.
• Rond alle frameworks is inmiddels een reusachtig ecosysteem Er zijn aanvullende bibliotheken met user interface-componenten, extra functionaliteit, integratie met backends en meer. Er is niets dat niet kan.
• Er is een hoge adaptatiegraad van elk van de frameworks. De grootste bedrijven ter wereld gebruiken een van de bekende frameworks. Het is niet te zeggen dat framework A alleen geschikt is voor kleinere websites, terwijl framework B zich pas bewijst in grote enterprise-omgevingen. Zowel Angular, React als Vue worden ingezet van kleine MKB-bedrijven tot Fortune-500 organisaties.
• Elk framework maakt applicaties die ontkoppeld zijn van het backend. De applicaties kunnen worden uitgevoerd als webapplicaties, worden omgezet naar standalone native mobiele applicaties (voor Android of iOS) of naar bureaubladapplicaties. Via API-calls wordt met een backend naar keuze gecommuniceerd. Het maakt hierbij voor het framework niets uit of dit backend is geprogrammeerd in Java, .NET, PHP, Python of nog iets anders.

Kortom, voor het eindproduct en voor de uiteindelijke gebruiker maakt het niets uit welk framework wordt gekozen. Met elk van de frameworks kan snelle code, trage code, een gebruikersvriendelijke of juist een gedrocht van een applicatie worden ontwikkeld. Dit hangt enkel af van de skills van de programmeur.

Natuurlijk zijn er ook verschillen tussen de frameworks te noteren. En juist die onderlinge verschillen bepalen vaak welke keuze wordt gemaakt. Elk team heeft immers zijn eigen voorkeuren.

Verschillen tussen React, Angular en Vue.js

• Zowel Angular als Vue zijn grotendeels gebaseerd op standaard HTML. Normale HTML wordt uitgebreid met Angular-specifieke of Vue-specifieke uitbreidingen zoals *ngFor of v-if. React kent dergelijke attributen niet. Angular en Vue staan daarmee iets dichter bij de traditionele webdesigner die gewend is te werken met HTML.
• React kent maar één uitgangspunt: JavaScript. Je dient een apart JavaScript-dialect in combinatie met HTML te leren (JSX) om goede applicaties te kunnen schrijven. Natuurlijk is JavaScript-kennis ook belangrijk binnen Angular en Vue, maar in React is dit het uitgangspunt. JavaScript-programmeurs zullen dan ook vooral gecharmeerd zijn van React.
• De visie van Angular is om een ‘one-stop-shop’ oplossing te bieden. Na het instellen van een nieuw project kun je direct alles doen: formulier, http-communicatie, data binding enzovoort. Bij React en in (iets mindere mate) Vue installeer je handmatig voor elk van de taken aanvullende bibliotheken.
• React biedt daarentegen volledige keuzevrijheid, maar kost meer tijd om in te stellen. Dit kan op zijn beurt weer leiden tot keuzestress.
• Angular heeft meer voor gedefinieerde instellingen en is daarmee minder flexibel.
• Angular werkt per definitie met TypeScript. Bij React en Vue is dat een optionele keuze.
• Angular werkt met een architectuur die gebaseerd is op modules. Dit wordt afgedwongen door het framework. Bij Vue en React kun je hier voor kiezen, maar ben je wel zelf verantwoordelijk voor het bewaken van deze architectuur.
• Vue biedt waarschijnlijk de kleinste footprint van alle frameworks. Oftewel: Vue-applicaties zijn het kleinst en laden daarmee het snelst in de browser.
• Wanneer je een achtergrond in OOP-programmeren met .NET of Java hebt, zul je Angular waarschijnlijk sneller doorzien.
• Als je meer een traditionele JavaScript-achtergrond hebt met functioneel programmeren, zul je React of Vue weer meer waarderen.

Zo zie je maar, er zijn tal van overwegingen die jou keuze kunnen bepalen. De items die hierboven zijn genoemd vormen nog maar het topje van de ijsberg. Het hangt erg van jou achtergronden en doelstellingen af welk framework je kiest. Er is geen goede of foute keuze.

Welke keuze moet ik maken?

Wil je bespreken welk framework het beste bij jou situatie zou aansluiten? Neem dan contact op Vijfhart.  Zij kunnen je ondersteunen bij de keuze voor een framework en advies op maat geven. Maar misschien heb je al een keuze gemaakt en wil je jouw medewerkers een training aanbieden in een van de frameworks. Ook in dat geval kunnen we een maatwerkoplossing bieden.

Dit artikel is geschreven door Peter Kassenaar. Peter heeft meer dan 20 jaar ervaring in webdevelopment en heeft talloze boeken over webdevelopment en verwante technieken gepubliceerd bij verschillende uitgevers. Binnen Vijfhart verzorgt Peter trainingen op het gebied van frontend webdevelopment. Hij is een bekende trainer in West-Europa en reist de wereld over om training te geven.