Ab auf die Insel: die Island-Architecture mit Vue und Eleventy

Moderne Frontend Frameworks werden nicht mehr nur dafür verwendet um Single Page Applications zu bauen, sondern – in Kombination mit Static Site Generators wie Nuxt – auch für das Generieren von klassischen Webseiten.

Um statisches, vorgerendertes HTML wieder dynamisch zu machen, wird ein Prozess namens Hydration angewandt. Dies kann sich negativ auf wichtige Core-Web-Vital-Metriken auswirken. Die Island-Architecture setzt darauf, nur Teile einer Webseite zu hydrieren: Partial Hydration ermöglicht es, Bundle-Sizes erheblich zu reduzieren.

Erfahre wie man Vue.js und Eleventy vereinen kann, um mit modernen Tools, Webseiten zu bauen, die perfekte Core Web Vitals erreichen.

Vorkenntnisse

  • Erfahrung mit Vue.js ist für diesen Vortrag von großem Vorteil.
  • Wissen über statische Site-Generatoren und speziell Eleventy ebenfalls.
  • Wer schon einmal eine JavaScript-lastige Seite für das erreichen von guten Core-Web-Vitals-Werten optimiert hat, kann sich neue Anregungen holen.

Lernziele

  • Grundkenntnisse über die Island-Architecture
  • Partial Hydration mit Vue.js
  • Eleventy verwenden mit Vue.js und JSX
  • Grundkenntnisse Performanceoptimierung von JavaScript-lastigen Seiten

 

Speaker

 

Markus Oberlehner
Markus Oberlehner ist ein Webentwickler aus Österreich. Er arbeitet für karriere.at, österreichs größtem Karriereportal. Markus betreibt einen Blog auf dem er regelmäßig über Vue.js und allgemeine Webthemen schreibt.


enterJS-Newsletter

Sie möchten über den enterJS
auf dem Laufenden gehalten werden?

 

Anmelden