• 1: Metaframeworks voor React, Angular en Vue
• 2: Meer metaframeworks (deze pagina)

In een vorige blogpost schreef ik over metaframeworks die veel worden ingezet voor React, Angular en Vue. Ik noemde toen Next.js (als framework voor React), Analog.js (voor Angular) en Nuxt (voor Vue).

Maar er zijn er meer! Hieronder heb ik voor de bekendste frameworks een aantal metaframeworks op een rijtje gezet. Ik herhaal de eerder genoemde frameworks nogmaals, zodat je overzicht compleet is.

Voor React

• Next.js – Next.js is waarschijnlijk het meest veelzijdige React-framework en richt zich op fullstack-ontwikkeling. Hiervoor worden onder meer React Server Components (RSC’s) gebruikt, die de kracht van React naar de server brengen.
  https://nextjs.org/
  
• Remix – Richt zich op het verbeteren van prestaties door het efficiënter ophalen van data en eenvoudige routing toevoegen in je applicaties. Remix legt de nadruk op geoptimaliseerde server-side rendering, progressieve verbetering en minimale JavaScript voor interactiviteit. Applicaties die met Remix zijn gemaakt, zijn meestal erg snel en compact.
  https://remix.run/
  
• Gatsby – Gatsby is gebouwd voor high-performance statische sites. Als een van de eersten maakte Gatsby gebruik van GraphQL voor dataverwerking. Gatsby heeft een enorm plugin-ecosysteem. Hierdoor is het ideaal voor content-gedreven sites waarvan gegevens vaak uit meerdere databronnen afkomstig zijn.
  https://www.gatsbyjs.com/

Voor Vue

• Nuxt – Dit is het grootste, bekendste en meestgebruikte metaframework voor Vue. Nuxt is een typisch applicatie framework en biedt een enorm scala aan uitbreidingen, ondersteuning, YouTube-kanalen en -video’s en actieve ontwikkeling vanuit de volledige Vue-community.
  https://nuxt.com/
  
• VitePress - Een statische site-generator die is geoptimaliseerd voor documentatie en eenvoudigere projecten. Gebouwd op Vite, snel en eenvoudig te configureren.
  https://vitepress.dev/
  
• Gridsome: Vergelijkbaar met Gatsby maar dan voor Vue. Gridsome richt zich op het bouwen van statische sites met een plugin-ecosysteem dat integratie met CMS’en en API’s gemakkelijk maakt. Gridsome presenteert zichzelf als een Jamstack-framework (JavaScript, API’s en Markup). Als je zelf al een Jamstack-applicatie beheert, ligt het gebruik van Gridsome voor de hand.
  https://gridsome.org/

Voor Angular

• Scully – Scully is voornamelijk een statische site-generator die Angular-apps omzet naar statische HTML. Dit optimaliseert de prestaties en SEO zonder een volledige server-rendering setup nodig te hebben. Ook Scully presenteert zich – net als Gridsome voor Vue – als een Jamstack-framework.
  https://scully.io/
  
• Angular Universal – Angular Universal is niet echt een standalone metaframework. Het is in feite ingebouwd in Angular (al sinds ca. 2018) en is meer een set tools die SSR mogelijk maakt voor Angular. Vaak wordt Angular Universal gecombineerd met tools zoals NestJS om API’s naast server rendering af te handelen.
  https://angular.dev/guide/ssr

Voor Svelte

• SvelteKit – SvelteKit is het officiële metaframework voor Svelte. Het biedt ondersteuning voor SSR, SSG en CSR, op een minimale en sterk geoptimaliseerde manier. SvelteKit is ideaal voor het bouwen van applicaties met hoge performance en minimale overhead.
  https://svelte.dev/docs/kit/introduction

Overige

• Astro – Astro staat bekend om zijn "Islands Architecture," hiermee kun je componenten uit verschillende frameworks zoals React, Vue en Svelte samen gebruiken. Het richt zich op het verzenden van minder JavaScript voor snellere laadtijden. Dit maakt Astro tot een goede keuze voor content-rijke of statische sites.
  https://astro.build/
  
• Eleventy (11ty) – Eleventy is technisch gezien eigenlijk meer een statische site-generator. Het voordeel is dat Eleventy flexibel en framework-agnostisch is. Het biedt, ondersteuning voor verschillende templating-talen en optimalisatie voor performance-geoptimaliseerde statische sites. Eleventy is het allersnelst in de benchmarks als het gaat om het bouwen (build) van een website die bestaat uit 1000+ pagina’s.
  https://www.11ty.dev/

Voor je gemak heb ik snel een pagina opgezet met korte beschrijvingen en hyperlinks naar deze metaframeworks: https://www.kassenaar.com/metaframeworks/

<shameless-plug>
Als er behoefte is aan een training in jouw bedrijf over React, Angular, Vue of een van de metaframeworks, aarzel dan niet om contact op te nemen! Training op jouw of onze locatie, op een tijdstip dat uitkomt. Ook 1:1-trainingen.
</shameless-plug>

-- Peter Kassenaar
10 november 2024

• 1: Metaframeworks voor React, Angular en Vue (deze pagina)
• 2: Meer metaframeworks

Inleiding

In de webdevelopmentwereld zijn tal van JavaScript-frameworks populair. Iedere webdeveloper kent waarschijnlijk namen als React, Vue en Angular. Naast de ‘grote drie’ zijn er nog tal van kleinere frameworks die allemaal een bepaalde specialisatie en een eigen plekje in de markt hebben veroverd. Bekend zijn onder meer Svelte en Qwik.

Frameworks zijn echter vooral geschikt voor kernfunctionaliteiten. Denk aan het bouwen met componenten, communicatie tussen componenten onderling, http-communicatie met een backend, routing enzovoort.

Dit betekent dat je als programmeur behoorlijk wat tijd kwijt bent met het inrichten van een complete applicatie met homepage, overzichtspagina’s, detailpagina’s en meer. Frameworks zijn bekend (of: berucht) om de hoeveelheid boilerplatecode die nodig is om een complete applicatie in de lucht te krijgen.

Metaframeworks

Dit is precies het gat waarin metaframeworks zijn gesprongen! Ze breiden de kernmogelijkheden van de basisframeworks uit door extra functionaliteit en abstracties toe te voegen. Hiermee worden veelvoorkomende taken bij het maken van een webapplicatie geautomatiseerd. Dit gebeurt vaak doordat metaframeworks een serie afspraken (conventions) hebben die je als programmeur moet kennen. Daarna werk je een stuk sneller.

De bekendste metaframeworks zijn:

• Voor React – Next.js
• Voor Angular – Analog.js
• Voor Vue – Nuxt

Metaframeworks zijn full-stack frameworks. Ze bestaan uit een client- en een serverdeel.

Convention over configuration

In metaframeworks is bijvoorbeeld vaak afgesproken dat wanneer componenten in een specifieke map /pages in de applicatie staan, deze componenten automatisch een route in de applicatie worden. Je hoeft dan niet meer de router te programmeren en zelf routes en componenten te onderhouden. Het metaframework pikt alle pagina’s op en zorgt dat er routes bestaan. Dit principe is nog veel verder uitgewerkt door met speciale naamgeving ook parameters in de pagina’s te gebruiken, pagina’s te groeperen, pagina’s op de server te renderen voor betere SEO en nog veel meer.

Essentiële kenmerken

Metaframeworks hebben veel overeenkomsten. Dit zijn onder meer:

• Server-Side Rendering (SSR): metaframeworks ondersteunen SSR waardoor je pagina’s vooraf op de server kunt renderen voor betere vindbaarheid in Google (SEO), snellere laadtijden en een verbeterde bezoekerservaring doordat pagina’s sneller laden.
  
  
• Static Site Generation (SSG): metaframeworks maken het mogelijk om tijdens de buildfase van de applicatie statische HTML-pagina’s op de server te renderen. Ook dit komt de snelheid van de applicatie ten goede. Via configuratiebestanden kun je altijd aangeven welke pagina’s in de applicatie wél en welke niet gegenereerd moeten worden.
  
  
• File Based Routing: door bestanden in een speciale map te plaatsen (zoals /pages) wordt de router automatisch geconfigureerd en krijg je direct een navigatiestructuur voor je applicatie. Dit scheelt erg veel tijd, omdat je het niet zelf hoeft in te stellen.
  
  
• API-routing: metaframeworks bieden vaak ingebouwde ondersteuning voor serverloze functies (of: ‘api-routes’). Dit vereenvoudigd communicatie met een backend. In sommige gevallen is een aparte API-server zelfs compleet overbodig. Het voorkomt in ieder geval dat je aparte CORS-instellingen moet toepassen op je server, omdat deze op hetzelfde adres draait als je frontend applicatie (er is vaak een route als /v1/api gedefinieerd). Ook dit gebeurt op basis van conventies. Via configuratiebestanden kun je hier overigens van afwijken, maar dit is niet beslist nodig.
  
  
• Bundeling en code-splitting: metaframeworks splitsen op intelligente wijze code in aparte modules en bundelen code die elkaar nodig heeft. Ook dit komt de snelheid ten goede.
  
  
• Hot Module Replacement: als developer is het handig dat tijdens het ontwikkelen alleen modules worden vervangen die je daadwerkelijk hebt aangepast – zonder dat de complete applicatie opnieuw gecompileerd hoeft te worden. Dit verbetert de ontwikkelervaring of developer experience of dx.
  
  
• SEO-optimalisatie en metatag-beheer: de meeste metaframeworks bieden tools voor het beheren van de titel en metatags op een pagina en andere SEO-elementen zoals Open Graph-tags voor Facebook en X.

Wanneer kies je voor een metaframework?

Als je een klein project hebt, kan het gebruik van een metaframework voor extra overhead zorgen waar je niet op zit te wachten.

In veel andere gevallen zal het je echter veel tijd besparen. Het inzetten van een metaframework is uiteindelijk een tijdsbeparende actie. Je moet in het begin even wat instellen – en je natuurlijk de conventies van het betreffende framework eigen maken – maar die tijd win je dubbel en dwars terug.

Gebruik een metaframework voor:

• SEO-intensieve projecten: als je applicatie afhankelijk is van SEO, zoals e-commerce en contentrijke sites, maken metaframeworks SSR en SSG eenvoudiger. Dit verbetert de doorzoekbaarheid en pageranking.
• Prestatie Optimalisatie: als je snelle laadtijden nodig hebt, helpen SSR, SSG en geoptimaliseerde bundeling om de snelheid te verbeteren. Met name in JavaScript-rijke applicaties zoals Vue, React en Angular is dit een groot pluspunt.
• Snelle Prototyping: metaframeworks versnellen de ontwikkeling omdat ze standaardoplossingen hebben voor routing, API-endpoints en code-splitting. Dit is natuurlijk ideaal voor startups en proof-of-concept applicaties (POC).
• Schaalbaarheid en onderhoudbaarheid: naarmate de app groeit, zorgen metaframeworks voor goede praktijken en structuur. Dit kan het inwerken van nieuwe ontwikkelaars vereenvoudigen. Voorwaarde is dan uiteraard wel dat het principe van convention-over-configuration goed is gevolgd en gedocumenteerd.

Conclusie

Metaframeworks kunnen het leven van een developer behoorlijk veraangenamen. Ze versnellen het proces van applicatieontwikkeling.

Als je een kleine applicatie met beperkte scope maakt waarbij niet veel ingewikkelde configuratie nodig is – en waarvan je weet dat dit in de toekomst ook niet nodig zal zijn! – is het inzetten van een metaframework vanwege de extra overhead waarschijnlijk overbodig. Dan kun je beter de zaken slank houden.

In alle andere gevallen loont het de moeite om een metaframework in te zetten dat past bij de technologie van jouw keuze!

<shameless-plug>
Als er behoefte is aan een training in jouw bedrijf over React, Angular, Vue of een van de metaframeworks, aarzel dan niet om contact op te nemen! Training op jouw of onze locatie, op een tijdstip dat uitkomt. Ook 1:1-trainingen.
</shameless-plug> 

-- Peter Kassenaar
1 november 2024