• 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

Na een voorbereidingstijd van ruim 2,5 jaar is in september 2016 eindelijk de final release van Angular 2 vrijgegeven. Tegelijkertijd introduceerde Team Angular een nieuwe manier van versiebeheer in Angular.

Met Angular 2 werd semantic versioning of kortweg semver ingevoerd. Voorheen hadden we releases als Angular 1.4, Angular 1.5 enzovoort. Met ingang van Angular 2 is het versiesysteem met drie cijfers ingevoerd, bijvoorbeeld 2.2.1, waarbij de drie cijfers staan voor een major.minor.patch-versie. Dit is een geaccepteerde standaard in de softwarewereld en betekent het volgende:

• 2 – Majorversie- bij een upgrade mogelijk breaking changes ten opzichte van eerdere major versies.
• 2 – Minorversie, nieuwe features zonder breaking changes.
• 1 – Patchversie, met bugfixes. Geen breaking changes.

Het semver-systeem is sinds de release van Angular 2 trouw gevolgd en op het moment van schrijven is Angular 2.4.0 de actuele versie.

Angular Roadmap

Tijdens zijn keynote op de conferentie NG-BE in december 2016 gaf Angular Team Lead Igor Minar een toelichting op de roadmap van Angular. In maart 2017 zal Angular 4 verschijnen.

“Wat? Angular 4? Wat is er met Angular 3 gebeurd? Betekent dit weer dat ik een compleet nieuw framework moet leren?”

Het antwoord op deze vragen is gelukkig een duidelijk NEE.

Angular 4 is  - zoals de slide al aangeeft – backwards compatible met alle Angular 2-code die je tot nu toe geschreven hebt. Je hoeft niet opnieuw een framework te leren. De overgang van Angular  2 naar 4 zal (in tegenstelling tot de overgang van Angular 1 naar Angular 2) pijnloos verlopen. Wel zullen er nieuwe onderdelen worden geïntroduceerd, zoals een nieuwe view compiler die kleinere code oplevert en betere AoT-compiling. Maar verder is het enige dat gewijzigd is, het versienummer.

Meer informatie hierover vind je bijvoorbeeld in de blogpost van Igor Minar.

Waar is Angular 3 gebleven?

Het zou natuurlijk logisch zijn om na Angular 2 eerst Angular 3 uit te brengen. Maar Angular bestaat uit allemaal losse onderdelen (core, router, forms, compiler en meer), met elk hun eigen versienummers. Zo is een zeer belangrijk onderdeel als de router van Angular op dit moment al bij versie 3.3 aangeland. En als deze ook geüpgraded zou worden, zouden we Angualr 3 met routerversie 4 krijgen. Dat is ook verwarrend.

Daarom is  voor de strategie gekozen om vanaf versie 4 alles gelijk te trekken. In het projectbestand package.json staan straks dus allemaal dezelfde versienummers. Dat is wel een verademing. Maar voordat het zover is, moeten we eerst even door de zure appel met versienummers heen bijten.

Snelle upgrades

Het zal niet bij Angular 4 blijven. Team Angular heeft een ambitieus schema samengesteld voor de toekomst. Elke zes maanden zal een nieuwe versie van Angular verschijnen:

Tot ziens versienummers, Hello Angular

Om die reden ziet Team Angular ook liever vandaag dan morgen dat versienummers in projecten verdwijnen. “It’s just Angular”, aldus Igor Minar. Dit betekent dat we vanaf dit moment eigenlijk nog maar twee grote stromingen overhouden in Angular-land:

• AngularJS – de eerste versie van het framework, gebaseerd op de 1.x-reeks.
• Angular – alles wat Angular 2 en hoger is. Het versienummer is hierbij van ondergeschikt belang. Gebruik het liever niet meer.

Onze trainingen

Onze trainingen en voorbeeldcode wordt vanaf het verschijnen van Angular 4 (of vanaf nu dus kortweg: Angular), ook aangepast aan de nieuwe versienummers. Inhoudelijk wordt de training telkens bijgewerkt volgens de laatste standaardaarden.

Maar je weet nu ook: het versienummer doet er eigenlijk niet meer zo toe.

Wil je een Angular-training organiseren binnen je bedrijf of instelling of de mogelijkheden bespreken, aarzel dan niet om contact op te nemen.

-- Peter Kassenaar
7 maart 2017.