Skip to content

Wie Gatsby mit steigenden Anforderungen & Fähigkeiten wachsen kann

13.12.20183 Min. LesezeitKategorie: Allgemein

Viele, die Gatsby nutzen, sind oder waren keine React Profis. Einige haben andere Frameworks vorher benutzt. Andere beherrschen JavaScript. Und manch andere waren sogar komplette Programmieranfänger!

In jedem Fall konnten diese Personen Gatsby nutzen und Lieben lernen.

Ich selber bin ein Beispiel für die Idee, dass Gatsby mitwachsen kann. Meine Anfänge hatte ich im UI Design, später ist dann HTML, CSS und JavaScript dazugekommen. Je mehr ich meinen Horizon erweitert habe, hat Gatsby dazu beigetragen, dass ich meine Fähigkeiten verbessern konnte.

In diesem Post möchte ich erklären, wie Gatsby mich zu React geführt hat und wie ein Gatsby Projekt mitwachsen kann, anhand des Beispiels meiner persönlichen Seite (auf dieser bist du gerade). Gatsby kann nahtlos von einfachem React über Markdown bis zum kompletten Headless CMS wachsen.

#Die Anfänge

Als ich das erste Mal Gatsby vor zwei Jahren entdeckte, war React bereits recht populär. Ich entschied, dass ich mehr im Front-End Bereich lernen will — immerhin hatte ich bis dahin nur statisches HTML/CSS/JS genutzt mit ein bisschen Hilfe von SCSS und Gulp. Ich hatte nie eine Server-Side Skriptsprache (z.B. PHP) oder eine Engine wie Nunjucks genutzt. Das war also ein großer Schritt für mich oder?

Durch meinen Design Hintergrund (z.B. in Komponenten "denken"), ein bisschen JavaScript Wissen und gute Tutorials gelang mit der Einstieg in React gut, auch weil ich Gatsby nutzte. Meine persönliche Website war schon immer eine statische Seite, allerdings wollte ich meine Projekte leichter updaten und Blogeinträge schreiben können. Das hörte sich exakt nach einem Usecase von Gatsby an. Das Coole an Gatsby: Es blendet all die schwierigen Dinge aus und bietet dir einen React Spielplatz. Du kannst alles probieren und es auch zuerst nur als Templating Sprache nutzen.

#Move Fast and Break Things

Nachdem ich meine Seite gelaunched hatte, lernte ich weiter React und Gatsby. Da es einen wie gesagt nicht darin limitiert, was du in React tun kannst, sah ich meine Website als Experiment an — ich experimentierte mit neuen React Techniken, GraphQL oder gatsby-image.

Gatsby's großes und tolles Plugin Ökosystem erlaubte es mir auch sehr einfach Features hinzuzufügen oder auszuprobieren. Verschiedene Lösungen für das Styling, verschiedene Datenquellen und so weiter... Das Tolle ist: Die meisten Plugins funktionieren ohne jegliche Konfiguration. Einfach installieren, in die config Datei eintragen und loslegen!

Über die folgenden Monate habe ich dann wirklich viel für Gatsby erstellt und durch Fehler gelernt. Der wichtige Teil hierbei ist aber: Gatsby war nie der Flaschenhals oder der Grund, warum ich etwas nicht probieren konnte.

#Die Anreize mehr zu lernen

Ich habe ja bereits erklärt wie toll der Lernprozess mit Gatsby war. Aber nun möchte ich dir sagen, dass es eine gute Sache war die schweren Dinge (am Anfang) auszublenden. Sie waren ein Anreiz mehr zu lernen.

Warum? Du bekommst eine seichte Einführung in Themen wie GraphQL. Sicher sind einige Beschränkungen später nervig (in bestimmten Edge Cases) aber am Anfang ist es gut, dass einem ein klarer Weg vorgegeben wird. Das bedeutet, dass du GraphQL nicht komplett durchdrungen haben musst, um schnelle Seiten und GraphQL Querying zu haben — aber du bekommst schon ein Gefühl dafür, wie es am Ende funktionieren könnte.

So viele Leute sagen über Gatsby: "Wow, GraphQL für das Querying von Daten ist einfach geil, ich will nie wieder ohne!" Und ich behaupte, dass diese Leute definitiv versuchen werden GraphQL in ihr nächstes Projekt zu implementieren.

Das Venn-Diagramm versucht zu zeigen, dass das obige Beispiel auch auf andere Technologien/Tools angewendet werden kann, die Gatsby verwendet. Neben GraphQL entschied ich mich für React, Headless CMS und allgemeine Website-Performance.

Man kann verschiedene React-Frameworks/Komponenten ausprobieren, man kann lernen, wie man einen eigenen GraphQL-Server einrichtet oder die Leistung seiner Website steigern. Headless CMS ist ein weiteres sehr interessantes Feld, das es zu erforschen gilt. Und das ist es, was ich getan habe. Ich habe Next.js mit Apollo und anderen großartigen Bibliotheken verwendet, mit Prisma meinen eigenen GraphQL-Server eingerichtet und die Performance meiner Website optimiert (z.B. durch Optimierung von Schriften).

Ergebnis: Meine Gatsby-Projekte können von dem gewonnenen Wissen profitieren!

#Schlussgedanken

Monolithische CMS Applikationen werden zunehmend durch spezialisierte Content Systeme ersetzt, wie Sam Bhagwat schon in seiner Serie "Delivering Modern Website Experiences: The Journey to a Content Mesh" schrieb. Gatsby nutzt diese Modularität durch sein großes Plugin Ökosystem und die Möglichkeit Daten von überall her zu nutzen. Es ist genau diese Modularität, die es nicht nur Profis erlaubt mit ihren favorisierten Tools und Tech-Stacks zu arbeiten sondern auch Beginnern einen Einstieg in GraphQL und React zu geben. Gatsby ist eine unglaubliche Plattform, um in diesen beiden Feldern Wissen anzuhäufen. Starte klein und wachse mit deinem Wissen und Gatsby.

Weiterhin ist es auch eine tolle Plattform um andere Technologien zu lernen und Performance Optimierungen live zu sehen. Ohne in unnötig komplizierten Low-Level Frickeleien verwickelt zu sein, kannst du deinen Tech-Stack aufbauen. Für mich ist Gatsby für React Projekte eine tolle Boilerplate.

Lust auf mehr? Lies alle Beiträge in der Kategorie Allgemein

Weitere Beiträge