GatsbyJS - Statische Websites mit React

Statische Website-Generatoren versprechen einige Vorteile gegenüber dynamischen Website-Frameworks, vor allem hinsichtlich Caching, Performance und Security. GatsbyJS ist ein solcher statischer Website-Generator, basierend auf JavaScript und React. Durch die Verwendung von Service Workers, Routen-basiertem Code-Splitting und Offline-Support können mit GatsbyJS sehr kurze Ladezeiten erreicht werden. Aufgebaut ist das Framework als Plugin-System, wodurch die Entwicklung von Websites beschleunigt werden soll. Für die Datenbeschaffung verwendet GatsbyJS eine GraphQL Datenverarbeitungsschicht, um Daten aus lokalen Dateien und externen Quellen zusammenzuführen. Vor kurzem ist GatsbyJS in Version 1.0 erschienen, der Talk gibt einen Überblick über die Verwendung und Features des Frameworks.

Transcript

1. GatsbyJS – Statische Webseiten mit React Tobias Lehwalder | cosee tobias.lehwalder@cosee.biz
2. GatsbyJS • https://github.com/gatsbyjs/gatsby • v1.0.0 seit Juli 2017 • Entwickelt von Kyle Mathews • Generieren von statischen Webseiten mit React
3. Dynamisch vs. Statisch • Inhalte beim Aufruf vom Server dynamisch generiert wird • Statische HTML, CSS, JS-Dateien • SSG: Generieren statische Webseiten + Geschwindigkeit + Sicherheit + Kosten Microsites, Blogs, Firmenseiten
4. Wie funktioniert Gatsby?
5. React • komponentenbasierte Architektur • Modular • Wiederverwendbar • React Ökosystem – Open-Source-Komponenten – Tutorials – Tools
6. Verwendung der Komponenten
7. Gatsby - /layouts
8. Gatsby - /templates
9. Plugin System + GraphQL • Offizielle Gatsby Plugins + Community • Source Plugins • Transformer Plugins • gatsby-plugin-google-analytics • gatsby-plugin-offline • gatsby-plugin-styled-components • gatsby-source-wordpress, gatsby-source-drupal, … • gatsby-transformer-remark
10. Performance • 2-3x schneller als vergleichbare Seitentypen • Automatische Optimierungen: – <link preload /> für kritische Resourcen – Routenbasiertes Code-/Data-Splitting – Pre-fetch von bald benötigten Resourcen • Service-Workers → Progressive Web App
11. Nächster Talk ... Ad-hoc Microservices mit JHipster <Jonas Bechstein/> Januar 2018 > talks.cosee.biz > blog.cosee.biz > @coseeaner > #coseetechtalks