Het is al enige tijd geleden dat we binnen ShareValue kennis hebben gemaakt met de JAMstack. Zo zijn collega Johan en ik vorig jaar naar JAMstack_conf_London geweest.
Wat is de JAMstack ook alweer?
De ‘JAM’ in JAMstack staat voor:
- JavaScript
- API’s
- MarkUp
Binnen de JAMstack maak je gebruik van een Static Site Generator. Deze generator doet denken aan een CMS, waar we tegenwoordig veelvuldig gebruik van maken. Denk aan WordPress, Expression Engine en Drupal. Toch is een Static Site Generator niet helemaal hetzelfde als een CMS: Een Static Site Generator is een applicatie die de site-content samenvoegt met de templates en daarmee een pure statische HTML pagina kan serveren aan zijn bezoeker. Bij een CMS wordt geen statische pagina geserveerd, maar worden de content en templates pas samengevoegd bij het laden van de pagina, waardoor de laadtijd langer zal zijn. Een Static Site Generator kan in verschillende talen geschreven zijn zoals Ruby, go en JavaScript.
Voordelen van een Static Site Generator:
- Snelle laadtijden
- Veiligheid en stabiliteit
- Flexibiliteit
Maar waar is Angular?
Toen ik voor het eerst in aanraking kwam met de JAMstack, waren de JavaScript Site Generators vooral gebaseerd op de frameworks React en Vue.js. Dit zijn twee van de meest populaire Front-End Frameworks van de afgelopen periode. Persoonlijk miste ik de mogelijkheid om binnen het JAMstack-landschap met Angular te werken, maar daar is verandering in gekomen.
Medio december 2019 heeft HeroDevs een beta versie van Scully vrijgegeven. Scully is een Angular Static Site Generator dat prima past binnen het JAMstack-landschap.
Wat is Scully?
Scully rendert elke pagina in je applicatie vooraf naar gewone HTML en CSS. Om dit te doen, maakt Scully gebruik van guess.js om alle routes binnen het project te vinden. Scully bezoekt vervolgens elke route en slaat deze op in een statisch HTML-bestand. De gegenereerde HTML-bestanden kunnen via een pipeline van Git en Netlify naar statische webserver gebracht worden. Elke pagina in de applicatie is nu maar enkele kb’s en kan op elk device snel geladen worden. Dit in tegenstelling tot de hoeveelheid kb’s die nodig zijn om een volledige Angular-app te downloaden op je device.
De grootste voordelen van Scully zijn:
- Angular
- De mogelijkheid om de gehele applicatie te pre-renderen naar platte HTML & CSS
- De inhoud van de pagina’s zijn direct beschikbaar, ook zonder dat Javascript is ingeladen
- De mogelijkheid Angular te bootstrapen om een volledige singe page applicatie te verkrijgen.
Sinds september 2020 zit Scully niet meer in de beta-fase maar is de release van versie 1.0.0 een feit.
Requirements voor Scully (versie 1.0.3, oktober 2020):
- Angular: 9.x.x of 10.x.x
- Node.js 12 of hoger
Hoe te starten?
Binnen een Angular project kan je Scully gemakkelijk implementeren via: >ng add @scullyio/init. Dit installeert Scully en maakt de benodigde aanpassingen binnen je project die nodig zijn om met Scully aan de slag te gaan.
Als we dan de applicatie draaien, zien we dat Angular netjes de melding geeft dat Scully up and running is.
Als er met >ng build –prod een productie build gemaakt is, kan je vervolgens ook Scully draaien middels het scully commando >npm run scully. Hierna kom Scully pas echt tot zijn recht en maakt een static rendering voor elke pagina die Scully tegen komt in je applicatie.
Hiermee heb je de basis van Scully te pakken. Wil je ook met JAMstack in combinatie met Angular aan de slag? Je vindt meer informatie over de mogelijkheden van Scully op de onderstaande pagina’s:
- Scully
- Introducing Scully: the Angular Static Site Generator
- Create a Static Site Using Angular & Scully
- Introducing Scully: Angular + JAMStack
Helaas is Scully in dit stadium de enige Angular static site generator binnen het JAMstack landschap dat we kunnen gebruiken. Dit zorgt ervoor dat keuze om met Angular aan de slag te gaan nog steeds beperkt is binnen JAMstack.
Gelukkig wordt Scully steeds meer ontdekt en loopt het aantal downloads op. Dit geeft aan dat er een behoefte is om met JAMstack in combinatie met Angular aan de slag te gaan.
Leuk om te weten: HeroDevs waren opzoek naar een krachtige vrouwelijke naam voor hun static site generator, waarbij ze gekozen hebben voor Dana Scully (in combinatie van X-files – Static files). Aangezien ik opgegroeid ben met de X-files kan Scully voor mij voorlopig niet meer stuk!
Ben je geïnteresseerd in de JAMstack? Op 26 november komen wij (digitaal) bijeen voor een tweetal presentaties over de JAMstack. Je kunt hierbij aanhaken!
Heb je vragen over dit onderwerp of zou je Wietze willen inhuren voor een vergelijkbare opdracht?
