Fallstudie manuel-schoebel.com Teil 2 - Tech Stack

Im ersten Teil habe ich darüber geschrieben, wie ich von der Vision für meine Selbstständigkeit hin zu den fertigen Mockups gekommen bin. Im zweiten Teil gehe ich nun darauf ein, wie ich die Webseite umgesetzt habe. Dabei schreibe ich über die folgenden Punkte:

• Tech Stack
• React und Storybook
• Infrastruktur und Automatisierung
• Next Steps

In diesem Artikel wirst du keinen Quellcode finden. Aber keine Sorge, Tech-Artikel wird es in naher Zukunft natürlich auch geben!

Tech Stack

Für die Umsetzung der Webseite habe ich mit folgenden Technologien gearbeitet:

• Gatsbyjs, React, Typescript, Storybook, Apollo-Client für das Frontend
• Jest fürs testing
• AWS Cloudformation für Infrastructure as code
• AWS Lambda für ein serverless graphql backend
• AWS S3 für das hosting der statischen Webseite
• AWS Route53 für domain hosting
• AWS Certificate Manager für SSL/TLS certificates
• AWS CloudFront als CDN
• AWS SES schickt Emails bei Nachrichten über das Kontaktformular
• AWS Local SAM für lokale Entwicklung der Lambda-Funktionen
• AWS CodeCommit für das code repository (git)
• AWS CodePipeline für die build und deployment pipeline (CD)
• Mailchimp für email listen/newsletter subscriptions
• Google Analytics für das Nutzer-Tracking

Auf der einen Seite arbeite ich gerne mit aktuellsten Technologien, auf der anderen Seite mag ich es wenn die Dinge einfach und unkompliziert sind. Durch den gewählten Tech-Stack arbeite ich einerseits mit React, auf der anderen Seite werden durch Gatsby am Ende einfache statische html Seiten generiert. Das wiederum vereinfacht stark den Betrieb der Webseite, macht diese wahnsinnig performant, einfach skallierbar und dabei auch noch sehr günstig in Bezug auf die Betriebskosten.

Manchmal ist es allerdings auch etwas Aufwand um im Technologie-Umfeld Prozesse einfach und unkompliziert zu halten. Diesen Aufwand zu vermeiden ist allerdings auf vielfältige Weise falsch und die richtige Basis entscheidend um schnell Ergebnisse erzielen zu können aber vor allem auch Änderungen schnell und einfach umzusetzen. Die Infrastruktur und Automatisierung ist hierbei ein Schlüsselfaktor!

Infrastruktur und Automatisierung

Bevor ich mit der Entwicklung beginne, ist es mir wichtig, sowohl die Infrastruktur, als auch die Automatisierung der Entwicklungsprozesse zu erstellen. Denn sobald ich mit der eigentlichen Entwicklung anfange, möchte ich mich zum Einen nur auf die Entwicklung konzentrieren können und nicht, dass bspw. zwischendurch immer wieder Infrastruktur-Themen auftauchen. Zum Anderen will ich Änderungen schnell und unkompliziert live nehmen können, automatisiert durch einen einfachen “push” in das code repository. Kunden können die umgesetzten Änderungen so direkt nachvollziehen. Auch im Entwicklungsprozess gilt, so schnell und oft wie möglich Feedback bekommen, um gute Produkte zu bauen.

In meinem Fall reicht meine lokale Entwicklungsumgebung und die Produktivumgebung. In Kundenprojekten ist es üblich eine weitere Umgebung zu haben in der Kunden sich vor der Veröffentlichung in die Produktionsumgebung, Änderungen noch einmal anschauen und dann freigeben können. Natürlich können solche Pipelines abhängig von den Anforderungen beliebig komplex werden. Allerdings sollte man hier vorsichtig sein, schließlich ist Komplexität an sich kein sinnvolles Ziel :)

Bei der Infrastruktur setze ich wann immer möglich auf serverless Architekturen. Der Vorteil ist, dass ich sehr wenig Aufwand mit der Infrastruktur habe, die Kosten sehr gering sind und ich über AWS CloudFormation die gesamte Infrastruktur sehr gut “as code” abbilden kann. Außerdem ist meine Webseite schon jetzt für den Ansturm von Millionen von Nutzern gewappnet, womit ich natürlich jeder Zeit rechne! Dabei liegen die gesamten Betriebskosten meiner Website aktuell unter 2$ pro Monat...

React und Storybook

React und Storybook sind meine Technologien der Wahl für die Frontend-Entwicklung. Durch die Komponentenbasierte Entwicklung kann die Komplexität gering gehalten und Wiederverwendbarkeit verbessert werden. Insbesondere wenn man im Vorhinein Mockups oder Prototypen erstellt hat, können die einzelnen Komponenten sehr effizient mit Storybook entwickelt werden. Storybook bietet aber auch eine gute Möglichkeit einzelne Komponenten für Kunden nutzbar bzw. testbar zu machen, lange bevor sie in die eigentliche Anwendung integriert werden. Alles was frühes Feedback ermöglicht ist der richtige Weg für digitale Produktentwicklung.

Nachdem die einzelnen Komponenten implementiert sind wird dann die eigentliche Website mit gatsbyjs umgesetzt.

Next Steps

Schon jetzt habe ich durch Gespräche mit potentiellen Kunden und Partnern in meinem Netzwerk viele Erkenntnisse gewonnen. Der Gedankenprozess läuft stetig fort, sodass die Seite in einem ständigen Wandel bleiben wird. Bspw. fehlt ein Leistungsverzeichnis, dass etwas konkreter beschreibt was ich genau mache. Auch werden die Überlegungen zu einem stärkeren Fokus, bspw. auf technische Implementierung weitere Änderungen mit sich bringen. Landingpages zu verschiedenen Themen sind sicher auch spannend. Die Performance-Messung der Seite ist noch ausbaufähig usw...