Technieken Uitgelegd: React, Angular of Vue voor jouw project?
Het zijn op het moment de meest populairste tools voor het maken van web applicaties. Onze Front End Developers zijn bedreven in minstens één van deze drie technieken. Ieder heeft zo zijn voorkeur; de ene developer kiest voor Vue.js, een ander voor React. Sommige projecten lenen zich meer voor Angular. Wij wagen er in dit blogbericht aan om een winnaar te kiezen.
In de huidige development wereld groeien de verschillende programmeertechnieken in razendsnel tempo. Vele technieken worden bedacht om verschillende en uiteenlopende problemen op te lossen. Zo krijg je technieken die uitblinken in andere aspecten van het vak. De drie populairste Front End technieken zijn daar een goed voorbeeld van. Een interessante vergelijking: React, Angular of Vue. Welke techniek is het beste?
Om deze vergelijking te maken bekijken we de technieken op basis van projectarchitectuur en/of het oogpunt van een developer die een techniek moet kiezen voor een nieuw project.
“System4’s front end developers zijn bedreven in minstens één van deze technieken.”
Verkennen van de rol van bibliotheken en frameworks in front-end technieken
Libraries zijn ontworpen om een specifieke taak uit te voeren en zijn normaal gesproken niet ingewikkeld. Als een developer besluit om zijn applicatie te bouwen met libraries, dan moeten we voor elke taak een library selecteren en task runners instellen. Het grote voordeel van een library is dat we volledige controle hebben over de applicatie. Maar het probleem is dat het meer tijd kost om het project op te zetten.
Frameworks, daarentegen, zijn ontworpen voor het uitvoeren van complexere dingen. Dus als er gekozen wordt om een framework te gebruiken, lost het automatisch veel problemen voor het project op. Elk framework heeft een vooraf gedefinieerd ontwerp of structuur, waaronder veel libraries en set up runners. Het belangrijkste voordeel van een framework is dat het ontwikkelingsproces veel sneller verloopt, omdat het alle mogelijke libraries bevat die we nodig hebben om verschillende taken uit te voeren.
React is een library voor het bouwen van gebruikersinterfaces. Angular en Vue zijn frameworks die gebruikt worden voor hetzelfde doel.
Library: React
Framework: Angular of Vue
Levenscyclus en grote gebruikers
React, voor het eerst uitgebracht in maart 2013, wordt omschreven als een JavaScript-bibliotheek. React wordt ontwikkeld en onderhouden door Facebook. Veel componenten op Facebook gebruiken React, maar niet voor het maken van een enkele pagina-applicatie.
Gebruikers: o.a. Facebook, Uber, Netflix, Twitter, Reddit, Udemy, Paypal, Walmart
Angular is een op TypeScript gebaseerd JavaScript-framework. Het is ontwikkeld en wordt beheerd door Google. Het werd voor het eerst uitgebracht in oktober 2010, maar heeft sindsdien diverse updates ondergaan en is momenteel al Angular 6.
Gebruikers: Google, Wix, Weather.com, Forbes
Vue is een van de snelst groeiende JavaScript-frameworks van vandaag. Het wordt beschreven als “een intuïtief, snel en compatibel MVVM voor het bouwen van interactieve interfaces”. Voor het eerst uitgebracht in februari 2014 door ex-Google-medewerker Evan You. In 2016 is de tweede versie uitgebracht.
Gebruikers: Alibaba, Baidu, Gitlab.
Zowel React, Angular als Vue zijn beschikbaar onder de MIT-licentie.
Kernontwikkeling in Front-End Technieken
Angular en React worden ondersteund en gebruikt door grote bedrijven zoals Facebook en Google. Op dit moment gebruikt Google Angular in hun vele projecten zoals in de user interface van Google Ads (Adwords). Met in het achterhoofd dat Vue voornamelijk door particulieren in kleinere projecten wordt gebruikt, moet je kijken naar deze GitHub statistieken:
React heeft meer dan 70.000 sterren en meer dan 1.000 bijdragers
Angular heeft meer dan 25.000 sterren en 460+ bijdragers
Vue heeft bijna 60.000 sterren en 120 bijdragers
Flexibiliteit
Met React en Vue kun je gemakkelijk een project starten, door simpelweg de JavaScript-bibliotheek aan de source van de applicatie toe te voegen. Met Angular is dit niet mogelijk, omdat het TypeScript gebruikt. In de huidige development wereld gaan we meer richting microservices en micro-apps, waarin React en Vue de ontwikkelaar meer controle geeft over de applicatie, door alleen de onderdelen te kiezen die echt nodig zijn. Angular werkt het beste als een framework voor Single Page Applicaties (SPA).
Vergelijking van Prestaties van Angular, React en Vue Technieken
In geval van grootte is Angular de grootste van de drie. De gzipped-bestandsgrootte is 143kb, vergeleken met 23kb voor Vue en 43kb voor React. React en Vue gebruiken beiden de Virtual DOM, die de prestaties in de DOM van de browser verbetert. In de algehele analyse heeft Vue geweldige prestaties en de diepste geheugentoewijzing van de drie. Maar alle drie zijn wat betreft prestaties erg aan elkaar gewaagd.
Als je de source code van de drie technieken wilt controleren, kun je hieronder de GitHub repositories inzien:
(kleine) conclusie
React, Angular en Vue zijn allen erg handig voor het ontwikkelen van interactieve webapplicaties en geen van hen is opzichtig beter dan de ander. Het is vooral van belang om na te gaan met welk project je bezig bent. Onderstaande tabel zou je moeten helpen met het kiezen van de juiste techniek voor jou:
| Angular | React | Vue |
|---|---|---|
| Gebruik van TypeScript | JavaScript-gebaseerde aanpak | Makkelijkste leercurve in JavaScript |
| Voor gebruik van OOPS (Object-Oriented Programming) | Voor grote ecosystemen | Voor kleine projecten |
| Structuur gebaseerd Framework | Flexibiliteit | Voor Hybride apps | Voor Native apps | Groot team van developers | Groot team van developers | Klein team van developers | Als je HTML wilt scheiden voor design doeleinden | Als je één bestand wilt behouden voor JavaScript-code en HTML-code | Als je HTML wilt scheiden voor design doeleinden |
Als je nog steeds niet kunt beslissen welke je moet kiezen, raad ik je aan om eerst React, dan Vue en dan Angular te leren. Omdat de eerste twee voornamelijk op JavaScript zijn gebaseerd en de derde volledig op TypeScript is gebaseerd.
Onze developers zijn allen bedreven met minstens één van deze front end technieken. Ben jij aan het werk met deze technieken, heb je vragen of ben je het helemaal niet eens met dit blogbericht? Dat kan natuurlijk, je kunt altijd ons een mailtje sturen. We leren graag van elkaar en zijn altijd op zoek naar verbetering.