Vaak krijgen we de vraag: "Welk front-end framework adviseer je?". Er is duidelijk geen eenvoudig antwoord op deze vraag. Het komt allemaal neer op wat het beste bij jouw team past, maar er zijn enkele criteria die algemeen van toepassing zijn en die je kunnen helpen bij de beslissing.

Criteria die we hanteren zijn:

• Community
• Kenmerken
• Beschikbare ervaring in jouw team
• App mogelijkheden
• Statische mogelijkheden voor het genereren van sites

De front-end frameworks die we in deze beoordeling evalueren, zijn Angular, React, Svelte en Vue.

Gemeenschap

Ondersteuning van de gemeenschap en het eco-systeem eromheen zijn buitengewoon belangrijk.

We drukken community-ondersteuning uit in het aantal ontwikkelaars, beschikbare bibliotheken, (officiële) documentatie en blogposts. Met betrekking tot het aantal ontwikkelaars geven de resultaten van de State of JS 2020-enquête een goed overzicht: React, Svelte en Vue zijn de leiders. Angular is slechts half zo populair als deze drie. De afnemende populariteit van Angular (en de groeiende populariteit van React en Vue) wordt bevestigd door de trend van Github-sterren .

Kijkend naar Stackoverflow-activiteit zijn dit resultaten:

• Angular: 235.430 resultaten
• React: 465,982 resultaten
• Svelte: 2,869 resultaten
• Vue: 87,342 resultaten

React is verreweg het meest actief besproken onderwerp, gevolgd door Angular en Vue, en Svelte is echt een niche.

Kenmerken

Er zijn geen echte verschillen in wat je functioneel kunt bereiken met Angular, React, Svelte of Vue. Ze stellen je allemaal in staat HTML-presentatie componenten te maken en de status in jouw toepassing af te handelen.

Het verschil zit hem in de manier waarop je een bepaalde functie implementeert. De belangrijkste verschillen tussen de frameworks zijn:

Naast deze beschrijving zijn er nog andere goede referenties die de verschillen bespreken, bijvoorbeeld hier.

Conceptuele aanpak

Angular maakt gebruik van een framework en biedt daardoor veel functionaliteit out-of-the-box, het schrijft strikt de manier van werken en de te gebruiken tooling voor.

React, Svelte en Vue passen een bibliotheekgebaseerde benadering toe, waarbij ze zich richten op kernfunctionaliteit: presentatie, statusafhandeling en routing. Functionaliteit buiten de kern moet worden toegevoegd met behulp van externe bibliotheken en wat betreft manier van werken en tooling is er meer vrijheid.

Dataverbinding

Dataverbinding is er in 2 soorten: een-weg- en twee-weg verbinding. Met een-weg verbinding stromen gegevens alleen (automatisch) naar beneden in de componentenhiërarchie. Twee-weg dataverbinding maakt een automatische up- en down datastroom mogelijk.

React ondersteunt dataverbinding in één richting, terwijl de andere twee-weg dataverbinding ondersteunen. In het geval van React moet u expliciet de tweede verbinding schrijven. Het voordeel van twee-weg verbinding is minder standaard, het nadeel is dat code mogelijk moeilijker te begrijpen is.

Voorbeelden van dataverbinding per framework zijn hier te vinden:

• Angular: 2-weg verbinding
• React: 1-weg verbinding
• Svelte: 2-weg verbinding
• Vue: 2-weg verbinding

Presentatie model

Angular, Svelte en Vue zijn gebaseerd op sjablonen, wat betekent dat ze HTML + enkele extensies gebruiken om uw weergaven op te bouwen. React gebruikt een op Javascript gebaseerde syntaxis-extensie, genaamd JSX , om een ​​weergavemodel te genereren.

Over het algemeen is een op sjablonen gebaseerde benadering gemakkelijker om mee te beginnen voor iemand die gewend is om statische HTML te schrijven. De op JSX gebaseerde aanpak zal gemakkelijker te begrijpen zijn voor een ontwikkelaar die gewend is om Javascript-code te schrijven.

Programmeertaal

Angular vereist dat je Typescript gebruikt, dit geeft het voordeel dat Typescript out-of-the-box goed wordt ondersteund. De andere frameworks passen een opt-in-strategie toe: Typescript kan indien gewenst worden toegevoegd.

React, Svelte en Vue gebruiken op ES6 gebaseerd Javascript, wat vaak de behoefte aan Typescript wegneemt.

Beschikbare ervaring

Het is belangrijk om de waarde te erkennen van direct beschikbare ervaring binnen jouw team. Als je een team hebt waar alle leden de afgelopen jaren mee hebben gewerkt, bijvoorbeeld Angular, is het waarschijnlijk niet de moeite waard om naar een ander framework te migreren. De beslissing wordt interessanter wanneer een deel van het team beperkte Angular-ervaring heeft en het andere deel beperkte Vue-ervaring. Voor een team zonder eerdere ervaring kun je deze overweging gewoon overslaan!

App-mogelijkheden

We horen vaak de wens om een ​​Progressive Web Application (PWA) te maken, en tegelijkertijd de wens om in de toekomst een native (iOS, Android) app te kunnen maken van dezelfde code-base. Het eerste deel is eenvoudig: alle frameworks die hier worden besproken, bieden behoorlijke PWA-ondersteuning. Het maken van een native app op basis van dezelfde code basis is een grotere uitdaging.

Met betrekking tot native app-ontwikkeling zijn er een paar op Javascript gebaseerde opties: State-of-JS 2020 - Mobile Desktop. Van deze opties zijn er twee haalbaar:

• React native
• Capacitor

We beschouwen Electron niet als een haalbare optie voor het maken van een app vanaf jouw website, omdat je hiervoor een volledig nieuwe code basis moet maken.

React native biedt de mogelijkheid om, door enkele React native componenten toe te voegen, een native React gebaseerde app te bouwen.

Condensator biedt de mogelijkheid om op Angular, React of Vue gebaseerde applicatiecodes te vertalen naar een native app. Vue heeft nog een optie: Vue Native, maar dit staat momenteel nog in de kinderschoenen.

State-of-JS 2020: Electron en React Native zijn de twee bekendste namen in deze categorie

Statische mogelijkheden voor het genereren van sites

We willen de best presterende websites bouwen. Voor openbare websites betekent dit het genereren van een statische website en deze op een CDN te implementeren. Dit is geen diepe duik in Static Site Generation (SSG)-opties, maar het niet hebben van de mogelijkheid om SSG te doen, is blocker voor ons.

Een kort overzicht van de mogelijkheden per framework:

• Angular: Scully
• React: Gatsby, NextJS
• Svelte: Elder.js
• Vue: GridSome, NuxtJS

Een compleet SSG-overzicht vindt je hier.

React en Vue bieden de beste (en meeste) SSG-opties, terwijl Angular en Svelte een zeer beperkte reeks mogelijkheden hebben die meestal minder populair zijn.

Kiezen

Kijkend naar de community zijn React en Vue de duidelijke winnaars, is Svelte nog steeds een (opkomende) nichespeler en verliest Angular qua populariteit.

Qua kenmerken zijn er geen grote verschillen tussen de frameworks: de ervaring en voorkeur van jouw ontwikkelaar kan hier tot een voorkeur leiden.

Als je een native app wilt ontwikkelen vanuit dezelfde codebase, is React jouw veiligste keuze.

Het genereren van statische sites is een vereiste voor moderne openbare websites, we zijn van mening dat momenteel alleen React en Vue goede SSG-bibliotheken beschikbaar hebben.

Wat hebben we bij Unplatform gekozen?

Voor ons was het eigenlijk vrij eenvoudig, we hebben een team van ervaren React-ontwikkelaars en de community- en app mogelijkheden zijn het beste met React. Onze keuze is dus React, maar we evalueren onze keuze elk jaar. Tot volgend jaar!

Heb je meer hulp of advies nodig? Neem hier contact met ons op of stuur een e-mail naar: info@unplatform.io