Het web is een geweldige plek en de beschikbare technologieën ervan zijn vandaag de dag krachtiger dan ooit tevoren. De kracht van het web ligt in het feit dat het een platform is dat voor iedereen beschikbaar is en dat het gebaseerd is op open standaarden. De technologieën worden ontworpen en gespecificeerd op basis van consensus en zijn niet in handen van één enkele entiteit.
Desondanks zijn er veel mensen en bedrijven die vinden dat het internet niet voldoet aan hun behoeften. Dit blijkt uit de pogingen van grote techbedrijven om hun eigen afgesloten ecosystemen te creëren. Ze streven hiermee naar controle over zowel de gebruikerservaring als de gegenereerde data.
In dit vier weken durende vak zullen we de kracht van het web ervaren en kijken hoe we (mobiele) web apps kunnen maken die net zo aantrekkelijk zijn als native mobiele apps. We beginnen met het maken van een server-side gerenderde applicatie waarbij we geleidelijk de gebruikerservaring verbeteren met relevante beschikbare web API's.
TLDR; hoe zet ik mijn project op?
Na deze cursus zul je:
- In staat zijn om een server-side gerenderde applicatie te maken.
- In staat zijn om een enerverende gebruikerservaring te creëren.
- Een breder begrip hebben van het web en zijn mogelijkheden.
In dit vak zullen we een van de meest voorkomende app-concepten van vandaag gebruiken en ontdekken dat we deze kunnen maken met moderne webtechnologie met als doel om een rijke gebruikerservaring creëeren.
Randvoorwaarden:
- Minimaal een overzichts- en detailpagina
- Gebouwd in TinyHTTP + Liquid
- Minimaal een content API
- Minimaal twee Web API's
Voorbeelden:
- Maak je eigen streamingplatform (Netflix/Spotify).
- Maak je eigen doom-scroll-app (Instagram/TikTok).
- Maak je eigen chatapplicatie (WhatsApp/Signal).
- Een andere app die je zelf leuk vindt...
Voorbeeld content API's die je kan gebruiken:
Voorbeelden van Web API's die je kan gebruiken:
- Page Transition API voor animaties tusse npagina's
- Web Animations API voor complexe animaties
- Service Worker API voor installable web apps
- Web Push API voor push notifications
- Server sent events voor realtime functionaliteit
- Geolocation API
- Web Speech API
- Web Share API voor sharen van content binnen de context van de gebruiker
- ...
De lijst is eindeloos, laat je vooral inspireren op de overzichtspagina van MDN.
De beoordelingscriteria zijn te vinden op DLO
| Planning | Maandag | Dinsdag | Vrijdag |
|---|---|---|---|
| Week 1 - Kickoff & concept | Introductie ne uitleg | Workshops | Feedback gesprekken |
| Week 2 - The baseline | College + workshops | Workshops | Feedback gesprekken |
| Week 3 - Enhance | College + workshops | Workshops | Feedback gesprekken(DONDERDAG) |
| Week 4 - Enhance & wrap up | Tweede paasdag | Individuele vragen | Beoordelingsgesprekken(DONDERDAG/VRIJDAG) |
- Nodejs.org, voor de installatie van NodeJS op jouw systeem, kies voor NodeJS 22.13.1 Long Term Support. Dit is de meest stabiele versie van NodeJS, welke ondersteund wordt met goede documentatie.
- VSCode How To Open Terminal, om iemand de terminal te zien openen en gebruiken op Youtube.
- Introduction to NodeJS, voor een in depth introductie met de NodeJS ontwikkelomgeving. Let op: dit is best een technisch verhaal. De eerste zes pagina’s zijn interessant.
- Om serverside te kunnen renderen maken we gebruik van TinyHttp.
- Voor templating maken we gebruik van LiquidJS.
- Liquid Filters
- Voor build tooling(CSS en JS) maken we gebruik Vite.
- Using the Fetch API @ MDN
- JSON.parse() @ MDN
- Partial commits in GitHub Desktop
- Committing and reviewing changes to your project in GitHub Desktop
-
Navigeer naar nodejs.org en installeer de NodeJS ontwikkelomgeving. Kies voor NodeJS 22.13.1 with long-term support, download de benodigde bestanden en doorloop het installatieproces.
-
Fork daarna deze repository en clone deze op jouw computer.
-
Open deze repository in je code editor.
-
Open de Terminal in Visual Studio Code door de toetscombinatie
^`(control + `) te gebruiken. Er opent een terminalscherm in de hoofdmap van jouw project. -
Voer in de terminal het commando
npm installuit, door het in te typen en op enter te drukken. Je gebruikt NPM, de NodeJS Package Manager om alle afhankelijkheden voor dit project te installeren. NPM is een veelgebruikte package manager in frontend land. Voor dit project gebruiken we TinyHTTP (om een server te maken) en Liquid (om HTML te renderen).
- (Optioneel) Na de installatie is de map
node_modulesaangemaakt, en gevuld met allerlei packages. Scroll eens door deze map heen; vele honderden open source ontwikkelaars hebben de packages die je ziet gebouwd en die mag je gratis gebruiken. Ontwikkelen in NodeJS is standing on the shoulders of giants.
Start het voorbeeldproject op door in de terminal het commando npm run dev uit te voeren. Als het goed is, komt een melding te staan over het opstarten van de server: Server available on http://localhost:3000 — Open deze URL in je browser. Let op: Vite draait op een andere poort dan TinyHTTP, dus je moet de poort van TinyHTTP gebruiken: http://localhost:3000
Als het werkt, zet je je server weer uit door in de terminal de toetscombinatie ^c (control + c) in te voeren. Deze toetsencombinatie wordt in de terminal gebruikt om de huidige taak te stoppen en controle (vandaar de c) terug te krijgen van het programma.
- Optioneel: Volg het NodeJS ‘Hello World’ voorbeeld
- Optioneel, iets technischer: Lees de eerste vijf delen van Introduction to Node als je een meer in-depth introductie wilt met de NodeJS ontwikkelomgeving.