Angular
Google kwam in oktober 2010 met AngularJS. De intentie van dit puur-javascript framework is om frontend development middels het MVC model (Model View Control) te vergemakkelijken met de gedachte dat de frontend steeds meer taken van de backend overneemt. Bovendien biedt het de mogelijkheid om eenvoudiger eigen herbruikbare componenten te bouwen dan in vanilla javascript en HTML. In september 2016 kwam Angular 2.0 uit, dit was een complete rewrite van het framework. Er zijn fundamentele veranderingen doorgevoerd sinds de versies van vóór 2.0, waaronder het werken met Typescript. Sinds de lancering van deze nieuwe versie, is er elk halfjaar een nieuwe major versie uitgebracht, waarmee we (op het moment van schrijven) al op Angular 6 zitten.
Voor- en nadelen van Angular
Hieronder zijn voor- en nadelen van Angular opgesomd. Natuurlijk is een groot deel smaakafhankelijk. Ik ben hier trouwens uitgegaan van Angular 6.0.
| Voordeel | Nadeel |
| Met Angular-cli zet je snel en eenvoudig een Angular skelet op volgens alle conventies. | Alles voelt erg zwaar: je moet een ton aan dependencies binnenhalen voordat je zelf nog maar een regel hebt geschreven. |
| Het binden van values in de view en de control werkt prettig. | Angular heeft een stevige leercurve, mede veroorzaakt door alle dependencies. |
| Je kunt component georiënteerd ontwikkelen, de zelfontwikkelde componenten voelen daarna aan als HTML. | Het schrijven van tests werkt zeer stroef. |
| Componenten hebben mooie MVC scheiding. Zelfs bij het schrijven van de stylesheets hoef je niet bang te zijn voor botsingen met andere componenten. | Het gebruiken van bestaande javascript libraries (niet-Typescript) had eenvoudiger mogen zijn. |
| Het framework is volledig; voor alles dat een webdeveloper wenst is ergens wel een oplossing te vinden. Van I18N tot multi-environments… | Foutmeldingen zijn cryptisch; ze geven niet duidelijk aan wat er aan de hand is. |
| Er is een grote community wereldwijd waar je op terug kunt vallen met vragen en problemen. | De tijd die nodig is voor het hot-reloaden (direct refreshen na het doen van een wijziging) loopt al snel op tot aan 10 seconden soms. |
| Typescript. Dit voegt alleen maar complexiteit toe (tenzij je misschien een enterprise applicatie bouwt, maar wie doet dat in de frontend?) | |
| Voor je gevoel moet je alles op 20 plekken declareren: in de component zelf, in de module, bij de imports, etc. |
React
React is jonger dan de Angular familie: In maart 2013 rolde het van de tekentafel van Facebook. React is voornamelijk javascript-georiënteerd (waar Angular meer HTML-georiënteerd is). Dit zie je terug in het gebruik van JSX: een HTML-variant die in javascript ingebed wordt en zodoende de view vormt. Er is een tool nodig (Babel) om de vertaalslag van JSX naar HTML te maken, zodat de browsers ermee uit de voeten kunnen. Een belangrijk principe van React is het gebruik van een “Virtual DOM”. Dit principe zorgt er voor dat enkel veranderingen opnieuw gerenderd worden in de echte DOM om de app hiermee sneller te maken. Net als met Angular kun je met React component georiënteerd ontwikkelen.
Voor- en nadelen van React
Ook hier weer een lijstje voor- en nadelen, van React dit keer.
| Voordeel | Nadeel |
| Met create-react-app zet je snel en eenvoudig een React skelet op volgens alle conventies. | De scheiding tussen view en control vervaagt door het aanbrengen van de templates (JSX) in Javascript classes (of functies). |
| React voelt klein, licht en overzichtelijk. | JSX. Jammer dat er een nét-niet-HTML taal gebruikt wordt. |
| Je kunt component georiënteerd ontwikkelen. De componenten voelen heel lean en mean. React stimuleert om in kleine componenten te ontwikkelen. Dit werkt eenvoudiger dan bij Angular. | De argumenten die je aan een eigen component mee kunt geven zijn impliciet. React helpt je niet om een duidelijke interface van je component te maken. |
| Een create-react-app applicatie heeft maar 3 dependencies en ze zijn allemaal van React. Over de subdependencies hoef je je geen zorgen meer te maken. | Binding van variabelen aan een input/view werkt ouderwets. Dit heeft Angular beter voor elkaar. |
| Componenten zijn eenvoudig onder test te brengen. | Webdevelopment met alleen React is onvolledig. Je zult bijvoorbeeld zelf een library voor routing moeten zoeken. |
| React biedt vrijheid doordat het niet overal een mening over heeft (in tegenstelling tot Angular). | |
| De virtual DOM van React biedt performance winst ten opzichte van directe DOM rendering. |
Conclusie
Zowel Angular als React stelt je in staat om fantastische web apps te ontwikkelen. Persoonlijk zou ik bij een nieuw project eerder naar React grijpen. De testbaarheid en lichtheid van React tegenover die van Angular zijn bij mij doorslaggevend. En dan nu de anticlimax: beide opties zijn absoluut prima. Happy coding!
