Bij het ontwikkelen van webapplicaties is het kiezen van het juiste frontend framework een kritische en belangrijke beslissing. In ons recente project, Neobyte CMS, kozen we voor Angular als frontend framework. In dit artikel bespreken we waarom. We verkennen onze ervaringen met Angular, vergelijken het met andere populaire frameworks, en delen onze bevindingen over de voordelen en uitdagingen.
Waarom Angular ?
Om te bepalen welk frontend framework je het best kiest voor je project moet je rekening houden met een aantal factoren. Allereerst is het belangrijk om te kijken naar de functionaliteit die je nodig hebt voor je project en of het framework hierin voorziet. Daarnaast is het ook relevant om te kijken naar de grootte en de actieve community rondom het framework, omdat dit de toekomstige ondersteuning en ontwikkeling van het framework kan beïnvloeden. Ook is het handig om te kijken naar de leercurve van het framework en de beschikbaarheid van documentatie en ondersteuning.
Alternatieven
Angular is een framework ontwikkeld en onderhouden door Google. Het is de meest volwassen technologie aangezien het bestaat sinds 2010. Angular gebruikt TypeScript, een geavanceerde versie van JavaScript. Typescript biedt statische typecontrole, wat de code kwaliteit en leesbaarheid verbetert en fouten opspoort vóór runtime, in tegenstelling tot dynamische typecontrole van JavaScript. Angular werkt ook met Javascript als je deze prefereert. Dit framework is zeer uitgebreid, dus als je er eenmaal mee gaat werken, heb je waarschijnlijk geen extra bibliotheken of tools nodig. Deze technologie is een perfecte keuze als je werkt aan grootschalige complexe projecten met rijke functionaliteit.
React werd in 2013 gecreëerd door het ontwikkelingsteam van Facebook als cross-platform software met behulp van JavaScript. React is geen framework, maar eerder een bibliotheek, dus deze oplossing is niet zo complex en zelfvoorzienend als Angular. Het maakt React echter flexibeler, omdat de ontwikkelaars zelf kunnen kiezen met welke tools en bibliotheken ze het aanvullen.
Vue is, net als Angular, gerelateerd aan Google - het is ontwikkeld door de ex-werknemer van het bedrijf, Evan You, en in eerste instantie uitgebracht in 2014. Het is een open-source JavaScript-framework voor het bouwen van gebruikersinterfaces. Deze oplossing is relatief nieuw. Vue is vrij lichtgewicht, maar het is ook niet zo complex als Angular. Vue is ideaal voor het bouwen van middelgrote en kleine weboplossingen en single-page applicaties.
Svelte is een ook een nieuwkomer, niet veel mensen gebruiken of kennen het. Denk aan React, Vue, of Angular in hun beginfase: dat is wat Svelte momenteel is. Svelte legt de nadruk op eenvoud en snelheid. Het werd in 2016 gecreëerd door een ontwikkelaar van New York Times, Rich Harris, om complexe grafieken en diagrammen op een performante manier af te handelen. Van daaruit groeide het uit tot een zeer geliefde concurrent voor React en Vue.
Populariteit
Google trends
De afbeelding hierboven bevat de google zoek trends voor deze 4 frontend frameworks in de afgelopen 5 jaar. Zoals je kunt zien, wordt React veruit het meest gezocht met een stijgende lijn. Svelte is duidelijk het minst gezochte framework.
NPM trends
React is duidelijk het populairst in termen van NPM-pakketdownloads. Vue en Svelte hebben allebei hun piek momentje gehad. Dit is ook het moment waarin ze zijn opgenomen in de community. Angular hangt hierbij iets tussenin. Angular kan tevens ook met de Angular CLI geïnitialiseerd worden en is dus niet volledig afhankelijk van npm downloads. Dit verklaart hun lagere download cijfers.
Wrap-up
| Angular | React | Vue | Svelte | |
|---|---|---|---|---|
| Type | Framework | Library | Library | Framework |
| Release Date | 2010 | 2013 | 2014 | 2016 |
| Founder | Google's ex-werknemer Evan You | Rich Harris | ||
| Preferred Language | Typescript | Javascript | Javascript | Javascript |
| Famous Users | Google, Instagram | Facebook, Netflix | Gitlab, Alibaba | GoDaddy, New York Times |
| Github Stars (14/03/2023) | 86.9k | 204k | 203k | 66.3k |
| Github Contributions (14/03/2023) | 1.679 | 1.606 | 357 | 589 |
Architectuur
Qua prestaties presteert Angular meestal beter als het gaat om DOM-manipulatie. Svelte is echter in staat om de code in één stap te produceren en tegelijkertijd te optimaliseren door het ontbreken van virtuele DOM. Een DOM (Document Object Model) is de programmeerbare structuur en inhoud van een webpagina.
Angular, React, Vue en Svelte hebben allemaal actieve communities en hulpmiddelen beschikbaar voor ontwikkelaars.
In termen van het aantal apps dat op deze frameworks draait, is React de duidelijke winnaar, maar Vue komt op de tweede plaats met momenteel meer dan 1,5 miljoen apps die erop draaien.
Wrap-up
| Angular | React | Vue | Svelte | |
|---|---|---|---|---|
| Performance | Heavier than Svelte and Vue, can be slower to initialize | Heavier than Svelte and Vue, but still manageable | Lightweight, fast initial load. | Lightweight, fast initial load. |
| Documentation | Comprehensive | Comprehensive | Comprehensive | Comprehensive |
| Community & Resources (14/03/2023) | Large and active community. (293.026 questions on stackoverflow) | Large and active community.(447.299 questions on stackoverflow) | Large and active community.(102.266 questions on stackoverflow) | Growing community (4.544 questions on stackoverflow). |
| Lifespan | Released in 2010, still actively developed. | Released in 2013, still actively developed. | Released in 2014, still actively developed. | Released in 2016, still actively developed. |
| Hosting | JS, no problem | JS, no problem | JS, no problem | JS, no problem |
| Entry Treshold | High entry threshold. | Medium entry threshold. | Low entry threshold. | Low entry threshold. |
| Security | by default. | by default. | by default. | by default. |
| Debugging | Good debugging tools. | Excellent | Good debugging / No extras | Unknown / No extras |
| Testing | Easy to test with Jasmine and Karma. | Easy to test with Jest or Cypress. | Easy to test with Jest, peecky or vitest | Need to setup env yourself. |
Onze keuze
Angular biedt een grote en actieve community die regelmatig updates en verbeteringen aanbrengt aan het framework. Dit maakt het gemakkelijker om up-to-date te blijven en eventuele problemen op te lossen die zich tijdens de ontwikkeling voordoen. Angular is volledig te beheren met CLI, dit maakt de instapdrempel om de taal te leren een stuk lager. Ook is Angular bekend om zijn gemakkelijke testmogelijkheden. Aangezien ons project van aanzienlijke grootte is met een grote verscheidenheid aan functionaliteit lijkt Angular ook de beste keuze.
Terugblik en onze ervaringen
De ervaringen met Angular zijn positief. Angular is een goed voorzien framework voor applicaties met veel functionele vereisten.
Het opzetten van het project ging gemakkelijk dankzij Angular CLI. Onze zoektocht naar een UI Component Library ging moeizamer. We hadden niet hetzelfde uitgebreide aanbod als bij react.
Onze eerste aanraking met Angular gaf ons meteen de indruk dat er meer boiler plate code aanwezig is. Ondanks de extra code konden we ons wel verwachten aan een hoop extra mogelijkheden. Hier even kort samengevat wat ik fantastisch vond aan Angular:
- Guard, een fantastische manier om routes te beveiligen
- Pipes, om gemakkelijk gegevens te transformeren
- Interceptors, om endpoints anders af te handelen
- Resolvers, pre-fetch data wanneer de route veranderd
Tijdens het werken met de reactive forms zijn we veel meer extra functies tegengekomen. Deze hebben ons zeker geholpen.
Als je in Angular een nieuw component aanmaakt, maakt het standaard drie bestanden aan (en een vierde als het een module is) één voor de template (HTML), één voor stijlen en de andere om alle logica af te handelen. Je kunt het soms terugbrengen tot één, maar ik denk dat React, door JSX te gebruiken, dit veel efficiënter en schoner aanpakt.
Ook is het project, door minder bestanden te hebben, beter te onderhouden, schoner en minder intimiderend voor nieuwe ontwikkelaars.
Al bij al hebben we een fijne aanraking gehad met Angular en zijn zeker overtuigd van zijn nut bij bepaalde projecten.
Bronnen
Angular IO Official Docs
Example Project Angular ProductStore
Quora Can I build my own CMS using Angular 4
Medium 3 Style Management Tips That Will Save You a Headache in Your Angular App CSS
How To Structure Styling In An Angular App
Tutorialspoint Angular
Medium How to make angular project layout
NGServio Creating a Navigation Module and Breadcrumb
Setting up Child Routes Telerik
Medium Style Child Components
Stackoverflow Multple ng Contents
Angular 10 authentication
Logout using routeguard dev.to
Handle API call state NICELY Medium
Make API Calls Medium
BreadCrumb navigation
Custom Headers Angular
Angular Basics: How To Use HttpClient in Angular
Pass function between components
Editing Documents with Tinymce and Angular
dev.to React vs Vue vs Angular vs Svelte
Is Angular Dead in 2022 dev.to
React vs Angular Radixweb
Interviewbit Angular vs React
Using TinyMCE in Angular
Google Trends
Npm Trends
Learning Angular 5 as a long time react developer
React: thoughts from an Angular developer DEV.to
Angular vs React vs Vue Medium
Angular vs React vs Vue: Core Differences
Angular vs React vs Vue
Angular vs Vue
3 ways to implement conditional validation of Angular reactive forms Medium
Top comments (0)