Flutter web vs React, Next.js, Astro, Vue, Svelte en Angular

In de snel evoluerende wereld van webontwikkeling kan de keuze van het juiste framework zowel het proces als het resultaat van het bouwen van webapplicaties sterk beïnvloeden. Van gevestigde reuzen zoals React, Angular, Vue.js en Svelte tot de nieuwere, intrigerende optie Flutter (web): developers hebben heel wat opties om te overwegen. In deze blogpost ontleden we deze frameworks en geven we een gedetailleerde vergelijking die developers kan helpen om de meest geschikte tool voor hun noden te kiezen.

Het korte antwoord

Flutter web tekent je app op een canvas, zoals een game-engine; React, Next.js, Astro, Vue, Svelte en Angular bouwen de pagina op uit HTML. Dat ene verschil bepaalt het grootste deel van de keuze:

Dus: Flutter web als het web een extra platform is voor een app; een webframework als het web zelf het product is. De rest van deze post vergelijkt ze in detail.

Overzicht van de frameworks

Flutter (web)

Flutter, ontwikkeld door Google, werd oorspronkelijk populair als platform voor mobiele app development, maar ondersteunt intussen ook webapplicaties. Met Flutter for Web kunnen developers dezelfde codebase gebruiken om apps te bouwen voor iOS, Android en het web. De grootste troef is dat je er sterk interactieve, grafisch rijke applicaties mee maakt met een consistente look-and-feel op alle platformen. De laatste releases legden veel meer de focus op performance, waardoor we vinden dat Flutter nu voor veel meer use cases in productie gebruikt kan worden.

WebAssembly (WASM)

Sinds Flutter 3.22 heeft Flutter stabiele ondersteuning voor WebAssembly (WASM). Dat verbetert de performance op het web met een factor 2 en soms zelfs 3. Het Dart-team werkt nauw samen met het Chrome-team, maar webapps draaien op verschillende platformen en browsers. Om ten volle van WebAssembly te profiteren, moet het uitgebracht en stabiel zijn in alle gangbare browsers.

Enkele bronnen over WebAssembly:

Documentatie over WebAssembly voor Flutter

Documentatie over WebAssembly voor Dart

React

React is een JavaScript-library om gebruikersinterfaces te bouwen, onderhouden door Facebook. Het staat bekend om zijn componentgebaseerde architectuur, waarmee je herbruikbare UI-componenten bouwt. React is geliefd om zijn snelle rendertijden en de flexibiliteit die het biedt, waardoor developers het vlot kunnen combineren met andere frameworks en libraries.

Angular

Angular, ontwikkeld door Google, is een volwaardig MVC-framework dat krachtig is om sterk interactieve webapplicaties te ontwikkelen. Het staat bekend om zijn dependency injection en two-way data binding, waardoor het model en de view-componenten in realtime gesynchroniseerd blijven.

Vue.js

Vue.js is een progressief JavaScript-framework om UI's en single-page applicaties te bouwen. Het is van in het begin ontworpen om stapsgewijs geadopteerd te worden. De core library focust alleen op de view-laag, waardoor het makkelijk te leren is en eenvoudig te integreren met andere libraries of bestaande projecten. Omdat het zo makkelijk te leren is, heb je maar basiskennis van programmeren nodig om met Vue.js te starten

Svelte

Anders dan de andere frameworks, die vooral at runtime werken, verschuift Svelte een groot deel van het werk naar de compilatiefase en levert het uiteindelijk sterk geoptimaliseerde vanilla JavaScript op. Dat zorgt voor een snellere runtime performance en minder code om te downloaden. 

Next.js

Next.js is het meest gebruikte framework bovenop React. Het voegt toe wat een gewone React-app aan jou overlaat: routing, rendering op de server of tijdens de build, en React Server Components, zodat een pagina als HTML aankomt en alleen de interactieve delen JavaScript nodig hebben. Dat maakt het een sterke keuze voor een product dat zowel een website als een app is, zoals een SaaS met zijn marketingpagina's en zijn dashboard in één codebase.

Astro

Astro is gemaakt voor content: websites, blogs, documentatie, landingspagina's. Het bouwt elke pagina naar HTML en stuurt standaard geen JavaScript mee; alleen de delen die het nodig hebben, zijn "islands", laden een component, geschreven in React, Vue, Svelte of gewoon JavaScript. Het resultaat laadt zowat zo snel als een website kan, en dat helpt in Google. Deze site is gebouwd met Astro.

Vergelijking van de performance

Flutter for Web staat bekend om zijn consistente en mooie, sterk interactieve UI's. Het genereert wel vaak grotere bestanden, wat de laadtijden negatief kan beïnvloeden in vergelijking met lichtere frameworks zoals React of Svelte.

React, Angular, Vue.js en Svelte worden over het algemeen als sneller beschouwd voor webapplicaties, omdat ze specifiek voor het web ontworpen zijn, met de focus op korte laadtijden en een betere responsiviteit.

Developer experience

De leercurve van Flutter kan steil zijn als je Dart, de programmeertaal van Flutter, niet kent. Flutter biedt wel hot reload, wat het ontwikkelproces sterk versnelt (op het moment van schrijven wordt hot reload niet ondersteund op het web, maar je kunt je app bijvoorbeeld op desktop draaien en daar hot reload gebruiken, omdat je al je UI-code met Flutter over alle platformen heen kunt delen). De developer tools en documentatie zijn uitgebreid, en hoewel de community niet zo groot is als die van React of Angular, groeit ze heel snel.

React, Angular, Vue.js en Svelte hebben allemaal grote communities en een schat aan leermateriaal. Vooral React en Vue krijgen vaak lof omdat ze makkelijk te leren zijn, terwijl Angular door zijn uitgebreide aard een steilere leercurve kan hebben. Svelte wordt gewaardeerd om zijn eenvoud en de unieke aanpak om het werk naar de compilatiestap te verschuiven, waardoor de browser minder werk heeft.

Ecosysteem en community

React en Angular profiteren allebei van een enorm ecosysteem met talloze libraries en tools die hun mogelijkheden uitbreiden. Vue heeft een iets kleinere community, maar die is heel actief en het ecosysteem groeit snel.

Het ecosysteem van Flutter voor webontwikkeling groeit, maar is nog niet zo volwassen als de mobiele tegenhanger. Het evolueert wel snel, met sterke steun van Google. Het Flutter- en Dart-team heeft al heel wat onmisbare plugins/libraries gemaakt om je development te versnellen. 

Use cases en geschiktheid

Flutter for Web is het meest geschikt voor applicaties waarbij je je merk via de UI sterk wilt laten uitkomen op alle platformen. Het is niet ideaal voor applicaties waarbij een kleine omvang en snel laden cruciaal zijn.

React en Vue zijn uitstekend voor progressive web apps en single-page applicaties die een responsieve, dynamische gebruikersinterface vragen. Angular is ideaal voor applicaties op enterpriseniveau, dankzij zijn robuustheid en uitgebreide features. Svelte is de beste keuze wanneer performance en snelheid voorop staan en je het eenvoudig en efficiënt wilt houden.

Voor- en nadelen

Flutter for Web

Voordelen:

• Sterk interactieve, mooie UI's die consistent zijn op alle platformen.
• Een rijke set widgets en tools.
• Deel al je code tussen web, Android, iOS, macOS, Windows en Linux. (ja, zelfs de UI-code)
• Gebruik dezelfde technologie voor elk platform (als je voor meerdere platformen bouwt)

Nadelen:

• Grotere initiële laadgrootte. (Wordt steeds beter met WebAssembly)
• Geen native SEO-ondersteuning (voorlopig zegt het Flutter/Dart-team: gebruik Flutter niet voor marketingwebsites waar SEO heel belangrijk is)
• Minder volwassen web-ecosysteem.

Traditionele frameworks (React, Angular, Vue.js, Svelte)

Voordelen:

• Specifiek voor webontwikkeling, geoptimaliseerd voor performance.
• Grote ecosystemen en communities.

Nadelen:

• Vragen mogelijk een complexere setup om codebases over platformen heen te delen (behalve Vue.js, dat ontworpen is om stapsgewijs geadopteerd te worden).
• Moet je ook op een ander platform releasen, dan heb je nog een andere technologie nodig om je app (meestal) opnieuw te bouwen. (Gebruik je een JavaScript-technologie, dan kun je wel wat code delen, maar in de meeste gevallen moeten de UI en de UI-logica volledig herschreven worden)

Conclusie

De keuze van een framework voor webontwikkeling hangt grotendeels af van de specifieke vereisten van het project, de expertise van het team en de gewenste gebruikerservaring. Flutter for Web biedt een unieke aanpak voor wie een consistente ervaring op alle platformen wil bieden, terwijl traditionele frameworks zoals React, Angular, Vue.js en Svelte robuuste oplossingen bieden die geoptimaliseerd zijn voor het web. Net zoals het web blijft evolueren, doen deze frameworks dat ook, en elk verlegt op zijn eigen manier de grenzen. Wij kiezen meestal voor Flutter wanneer we voor meerdere platformen moeten bouwen en zoveel mogelijk code willen delen. Dat levert minder ontwikkeltijd op, en het extra budget kan dan gebruikt worden om nog meer features te bouwen die op alle platformen werken.

Hoe wij kiezen

We gebruiken ze allebei, elke week. Flutter als een app op iOS, Android en het web moet draaien vanuit één codebase: de tijd die we daarmee winnen, gaat naar meer features, op elk platform tegelijk. Astro als het een website is die snel moet laden en goed moet scoren in Google, zoals deze; Next.js of React als het een webproduct is met veel interactie. Sinds deze post voor het eerst verscheen, is Flutter web met WebAssembly de standaard geworden in Chrome en Edge, wat de app-kant nog sneller maakt.

Twijfel je wat bij jouw project past? Lees hoe we apps en websites bouwen, of vraag het ons: die keuze komt in elk project eerst.