Gekozen tech-stack: Astro met Hygraph en Netlify
De bieb in bloei release candidate website verbloemen met ideeën van de minor CMD.
Om te beginnen met deze opdracht heb ik eerst zorgvuldig de leertaak doorgelezen en een fork gemaakt.
Vervolgens heb ik met mijn team overlegd wie welke Site Generator van jamstack.org gaat onderzoeken. Ik heb ervoor gekozen om het framework Astro te onderzoeken, en daarmee de website/1 á 2 pagina's opnieuw te realiseren.
Tot slot heb ik een groot deel van de documentatie gelezen en de volledige tutorial van Astro gevolgd om een idee te krijgen van het framework en hoe het werkt. (final tutorial commit)(Browse repository at this point)
Informatie die ik heb gelezen in de documentatie heb ik vervolgens verwerkt in mijn Learning Journal.
Issues van ontwerpfase vorige sprint:
Dit framework stelt geen eisen waardoor ik mijn ontwerp zou moeten veranderen, dus ik ga bouwen vanuit hetzelfde ontwerp.
Ik ben gaan bouwen met het framework Astro en de headless CMS Hygraph. Tijdens het bouwen hiervan heb ik verschillende documentatie gelezen van Astro om grip te krijgen op het framework.
- Astro installatie & project opzet
- Astro koppelen aan Hygraph
- Data uit hygraph ophalen en renderen
- Werken met componenten
- Werken met layouts
- Styling met Astro
- Accessibility menu toevoegen
- View transition maken in Astro
Om de website live te zetten heb ik deze guide gevolgd: https://docs.astro.build/en/guides/deploy/netlify/
De website staat live met Netlify.
Ik heb mijn website getest op verschillende categoriën: UX, DX en CMX.
In conclusie, hoewel er enkele nadelen zijn, zoals de TypeScript-foutmeldingen en de enige kennis om GraphQL te begrijpen, wegen de voordelen van Astro, Hygraph en Netlify zwaarder. Je kun snel met Astro aan de slag door de simpele projectopzet en het ondersteund diverse frameworks zoals React, Vue en Svelte. De documentatie is uitgebreid en heeft handige tutorials waardoor je makkelijk kunt leren en problemen kunt oplossen. De herbruikbare componenten en de mogelijkheid om je data rechtstreeks in de frontmatter op te halen dragen bij aan de efficiëntie van het ontwikkelproces.
De flexibiliteit, snelheid en gebruiksvriendelijkheid van Hygraph maken deze combinatie een sterke keuze voor het bouwen van moderne websites. Zowel technische als niet-technische gebruikers kunnen samenwerken, wat de efficiëntie en het succes van projecten bevordert.
De ingebouwde TypeScript-foutmeldingen kunnen soms wel vervelend zijn voor iedereen die liever met standaard Javascript werkt. Bovendien is het integreren van een headless CMS zoals Hygraph wat complexer en zul je je in GraphQL moeten verdiepen.
Al met al bieden Astro en Hygraph dus een sterke basis voor developers, maar moet je met sommige dingen zoals TypeScript en CMS-integraties rekening houden.