PGM4 - Kick-off

Lesorganisatie

Wat gaan we doen?

• We kunnen een single page application (SPA) bouwen met React
• We kunnen ons datamodel opmaken en de data beheren met Strapi
• We kunnen een REST API maken met Strapi
• We kunnen onze applicatie testen met een framework
• We kunnen een development workflow (Gitflow) toepassen
• We kunnen onze applicatie publiek maken

Overzicht cursus

• Week 1: kick-off en introductie tot React
• Week 2: introductie tot Strapi
• Week 3:
  • infrastructuur (Github Actions, Vercel ...)
  • applicatie maken met React en Strapi
  • briefing eindopdracht
• Week 4: applicatie maken met React en Strapi

Overzicht cursus

• Week 5:
  • advanced React (routing, hooks ...)
  • tussentijdse feedback deel 1
• Week 6: advanced React (testing) + werkcollege
• Week 7:
  • TBD
  • tussentijdse feedback deel 2
• Week 8: TBD

Houding

• Je bent altijd en op tijd aanwezig tijdens de lessen
• Afwezigheid moet gewettigd zijn
• Je communiceert op tijd wanneer je met vragen zit en formuleert duidelijke vragen en antwoorden

PGM4 - Kick-off

Lesverloop

Wekelijks

• Dinsdag (08:30 - 12:30)

  • 08:30 - 08:45 - Voorbereiding + opwarmoefening 
  • 08:45 - 09:00 - Toets
  • 09:00 - 09:45 - College
  • 09:45 - 10:00 - Pauze
  • 10:00 - 11:15 - College
  • 11:15 - 11:30 - Pauze

  • 11:30 - 12:30 - College

Wekelijks

• Donderdag (08:30 - 12:30)

  • 08:30 - 08:45 - Voorbereiding + opwarmoefening 
  • 08:45 - 09:45 - College
  • 09:45 - 10:00 - Pauze
  • 10:00 - 11:15 - (Werk)college
  • 11:15 - 11:30 - Pauze
  • 11:30 - 12:30 - (Werk)college

Tools

• Canvas
  • Aankondigingen
  • Opdrachten
  • Toetsen
• Edulist
  • URL: https://edulist.be/pgm4jamstack
  • Wekelijkse leerpaden, theorie en oefeningen
  • Herhalende videos en referenties

Tools

• Teams Channel
  • Algemeen
  • Ask A Question
    • In de problemen? Vraag het iedereen
  • Crazy Stuff
  • Streams

PGM4 - Kick-off

JAMstack

JAMstack

• Geladen term
  • niet iedereen hanteert dezelfde definitie
• Acroniem
  • Javascript
  • APIs
  • Markup

JAMstack

JAMstack

• CDN: Content Delivery Network
  • A content delivery network (CDN) is a geographically distributed group of servers that caches content close to end users.
  • https://www.cloudflare.com/learning/cdn/what-is-a-cdn/

JAMstack

• We onderscheiden doorgaans 2 vormen van JAMstack
  1. Single Page Applications (SPAs)
  2. Multi Page Applications (MPAs)

JAMstack

JAMstack

• We onderscheiden doorgaans 2 vormen van JAMstack
  1. Single Page Applications (SPAs)
     • Gemaakt met Angular, React, Vue, Svelte ...
     • Output: 1 HTML-pagina, relatief veel Javascript
     • Data: opgehaald tijdens runtime
  2. Multi Page Applications (MPAs)

JAMstack

• We onderscheiden doorgaans 2 vormen van JAMstack
  1. Single Page Applications (SPAs)
  2. Multi Page Applications (MPAs)
     • Gemaakt met Static Site Generators (SSGs)
       bv. Hugo, Jekyll, Eleventy, Gatsby ...
     • Output: meerdere HTML-pagina's,
       relatief weinig Javascript
     • Data: opgehaald tijdens build time

Single Page Applications

• Focus in PGM4: Single Page Applications (SPAs)
  • Belangrijke voordelen:
    • Eens gedownload: snel
    • Caching
    • Front-end en back-end losgekoppeld
  • Belangrijke nadelen:
    • Search Engine Optimization (SEO)
    • Tragere initiële load

Single Page Applications

• Welke tools gebruiken wij voor onze SPA?
  • Javascript:
    • React
  • APIs:
    • Strapi
  • Markup:
    • HTML (JSX)

Single Page Applications

• Welke tools gebruiken wij voor onze SPA?
  • Andere:
    • Vite (lokaal builden + serven)
    • Jest + React Testing Library
    • evt. Tailwind of een UI framework zoals
      Bulma of Bootstrap