WebApp Prototyping mit Nuxt.js & Vue.js

In diesem Artikel tauchen wir tief in die Welt des WebApp Prototyping ein und enthüllen die entscheidenden Schritte zur Umsetzung unseres MVPs „Nuxt the Prototype“. 🌐💡

Vom WebApp Design über Programmierung & Implementation bis zum Deployment der Web-App

Von der Designphase über die Programmierung bis hin zum Deployment – wir nehmen euch mit auf eine spannende Reise, wie wir unseren Prototypen zum Leben erwecken und erste Einblicke in unsere innovative WebApp erhalten. 🚀💻

Wir bieten euch wertvollen Input zu Themen wie:

✅ Wichtige Architekturentscheidungen und Technologiewahl

✅ Agile Softwareentwicklung in der Praxis erfolgreich gestalten

✅ Interoperabilität als entscheidendes Kriterium bei der Technologiewahl

✅ Einblicke in die Entwicklung unseres MVPs mit dem Nuxt Framework

✅ Feature Boxing als agiles Zeitmanagement

✅ Effektive Nutzung von Jira und Confluence als Collaboration Tools

✅ Transparenz und Zugänglichkeit von Wissen

✅ Etablierung einer gesunden Fehlerkultur in einer Organisation

Erfahrt, wie wir das Nuxt-Projekt-Boilerplate nutzen, um unseren WebApp Prototypen aufzubauen und zu designen. Wir zeigen euch leicht verständlich und Schritt für Schritt, wie wir unser MVP realisieren und einen agilen Entwicklungsprozess gestalten.

Rock the Prototype Community auf Discord

Wir freuen uns darauf, euch in unserer Rock the Prototype Community auf Discord zu begrüßen, wo ihr eure Ideen und Fragen mit uns teilen könnt. Eure Partizipation ist uns wichtig, denn wir wollen gemeinsam an unserem „Nuxt the Prototype“ arbeiten und eine großartige WebApp entwickeln! 💪💼

Verpasst nicht unsere neueste Rock the Prototype Podcast-Folge und erfahrt, wie ihr eure WebApp mit dem Nuxt Framework zaubert! 🌟🚀

Hier geht’s zur neuesten Podcast Folge:

Apple Podcasts: apple.co/3CpdfTs

Spotify Podcast: spoti.fi/3NJwdLJ

Stay tuned für weitere spannende Entwicklungen in unserem Projekt und danke, dass ihr Teil unserer Community seid! 🙌🎉

In der letzten Episode haben wir uns intensiv mit der Technologiewahl für unsere WebApp auseinandergesetzt. Dabei haben wir die Vor- und Nachteile von React mit Next.js und Vue.js mit Nuxt beleuchtet. Es wurde deutlich, dass beide Technologien starke Argumente für sich haben, aber auch Datenschutz und die Vermeidung von Vendor Lock-in entscheidende Faktoren sein können.

Heute setzen wir unseren Fokus auf die praktische Umsetzung unseres MVPs „Nuxt the Prototype“. Wie starten wir unser Prototyping und wie gestalten wir den Entwicklungsprozess agil und erfolgreich? Das sind die Fragen, auf die wir in dieser Folge Antworten liefern werden.

So entwickelst Du eine innovative Web-App mit dem Nuxt Framework

Unser Ziel ist es, eine innovative Web-App zu entwickeln, die euren Bedürfnissen und Wünschen entspricht. Deshalb bieten wir Dir immer einen klaren Einblick in unser gemeinsames Projekt.

Mir ist es wichtig euch transparent in die Webentwicklung einzubeziehen, damit ihr als Hörerinnen und Hörer die einzigartige Chance habt, aktiv am Entwicklungsprozess teilzunehmen.

Eure Ideen, Fragen und Anregungen sind herzlich willkommen!

Natürlich kannst Du auch gerne passiv aus der zweiten Reihe dabei sein. Du möchtest coden lernen, mehr über Software Pattern wissen oder mehr über UX von WebApps erfahren? Wenn Du aber wirklich etwas Lernen willst, musst Du in die erste Reihe wechseln und darfst direkt teilhaben.

Nutze diese einmalige Chance und connecte Dich jetzt direkt über unseren Discord Server mit uns.

In unserer heutigen Episode gehen wir Schritt für Schritt durch den Prozess der Umsetzung unseres MVPs „Nuxt the Prototype“. Wir wollen euch zeigen, wie agiles Prototyping in der Praxis aussieht und wie wir dabei vorgehen.

Es beginnt mit einem klaren Blick auf den Ist-Zustand und einer Grobplanung. Diese Schritte sind entscheidend, um unsere Ziele für die erste Iteration festzulegen. Dabei geht es nicht nur um die technische Umsetzung, sondern auch darum, eine klare Vision für unser Projekt zu haben.

Projektsetup und Nuxt-Projekt-Boilerplate

Der erste Schritt ist das Projektsetup und die Verwendung des Nuxt-Projekt-Boilerplates. Dabei erstellen wir einen Projektordner und initialisieren ein Git-Repository. Mit dem Befehl „npx nuxi@latest init NuxtThePrototype“ nutzen wir das Nuxt-Projekt-Boilerplate, um die Grundstruktur unserer WebApp aufzubauen. Dabei werden bereits viele grundlegende Dateien und Konfigurationen eingerichtet, was uns Zeit und Aufwand spart.

WebApp Nuxt Boilerplate Template fuer WebApps

Nutze ein GitHub-Repository um die WebApp zu versionieren

Ein weiterer wichtiger Punkt ist die Einbindung unseres Projekts in ein GitHub-Repository. Dies ermöglicht uns eine effektive Versionsverwaltung und eine kollaborative Entwicklung.

Nachdem das Projektsetup abgeschlossen ist, geht es an die eigentliche Umsetzung unseres MVPs. Hierfür nutzen wir die Funktionalitäten des Nuxt-Frameworks, um unsere WebApp zu designen und zu programmieren.

Wichtig ist dabei, dass wir unsere Ziele für die erste Iteration im Blick behalten. Wir wollen sicherstellen, dass unser MVP lauffähig ist und sich zur weiteren Modifikation eignet. Dazu setzen wir auf agile Methoden wie Feature Boxing, um den Entwicklungsprozess strukturiert und effizient zu gestalten.

Die Umsetzung des MVPs beinhaltet auch die Nutzung von Jira und Confluence als Collaboration Tools. Diese helfen uns, den Entwicklungsprozess zu organisieren, Aufgaben zu verwalten und Informationen transparent zugänglich zu machen.

Am Ende dieser Phase stehen wir vor dem Deployment unseres MVPs. Dabei geht es darum, unsere WebApp auf einen Server zu bringen und sie für die Nutzung bereitzustellen. Hierfür nutzen wir die Features von Nuxt, wie zum Beispiel serverseitiges Rendern und Code-Splitting, um eine optimale Leistung und Benutzererfahrung zu gewährleisten. Wie das Statemanagement in Vue.js funktionierst erfährst Du auch in unserem Wiki zu VueX.

Unsere sechste Podcast-Folge bietet euch somit einen umfassenden Einblick in den praktischen Prozess des Prototypings und der Umsetzung eines MVPs. Wir nehmen euch mit auf unsere Reise, wie wir „Nuxt the Prototype“ entwickeln und euch zeigen, wie ihr selbst erfolgreich prototypische WebApps realisieren könnt.

Prototypisch eine WebApp mit Nuxt realisieren:

Unser Web App Prototyping startet mit der ersten Phase, der Vorbereitung.

Phase 1: Vorbereitung

Mit Phase 1 treffen wir alle notwendigen Vorbereitungen.

Schritt 1.1 – Ist-Zustandsbeschreibung

Unser Prototyping startet mit einer Ist-Zustandsbeschreibung. Wir haben uns eingehend mit WebApp Technologien befasst, Technologien bewertet und mit Nuxt unsere Technologieauswahl getroffen.

Schritt 1.2 –  Grobplanung

Es folgt der zweite Schritt in der ersten Phase, die Grobplanung für unsere erste Iteration.

Unsere Gobplanung umfasst das Projektsetup mit dem Aufsetzen des Nuxt-Projekt-Boilerplate, einem Template für unsere WebApp.

Schritt 1.3 –  Ziele definieren

Im dritten Schritt in Phase 1 definieren wir die Ziele für unseren ersten Prototypen.

Basierend auf unserer Grobplanung definieren wir die Ziele für unser Prototyping der ersten Iteration.

Mit unserer ersten Iterationsstufe konzentrieren wir uns darauf unsere Entwicklungsumgebung einzurichten.
Wir werden das Nuxt-Projekt-Boilerplate verwenden und richten damit die grundlegende Struktur für unsere WebApp ein.

Unsere Ziele für die erste Iteration sind:

• Wir haben unsere Entwicklungsumgebung eingerichtet
• Projektsetup: Erstellung eines Projektordners und Initialisierung eines Git-Repositories.
• der MVP nutzt das Nuxt Boilertemplate
• der MVP ist lauffähig
• unser MVP eignet sich zur weiteren Modifikation
• wir sind mit der Grundstruktur des Nuxt Frameworks vertraut
• wir nutzen GitHub und haben unseren Nuxt the Prototype in das GitHub-Repository deployt

Phase 2: Spezifikation

Jetzt müssen wir unseren Prototypen als MVP spezifizieren. Dazu definieren wir Softwarefunktionen mit festgelegtem Leistungsumfang.

2.1 Prototype = MVP spezifizieren

Phase 2 – Schritt 1 MVP spezifizieren

Für unseren auf dem Nuxt Boilerplate basierenden MVP ist das noch einfach, weil dessen Funktionsumfang vollständig bereitgestellt wird. Das ist besonders komfortabel für uns. Ohne das wir codeseitig eine Modifikation vornehmen müssen ist dieser MVP bereits lauffähig.

Wir werden uns in dieser ersten Iterationsstufe darauf konzentrieren das wir mit der Nuxt Architektur vertraut werden und unsere Entwicklungsumgebung und das Projektmanagement reibungslos funktioniert.

Phase 2 – Schritt 2 die

2.2 Aufwandsschätzung

Außerdem führen wir in der Spezifikationsphase eine Aufwandsschätzung durch und definieren Akzeptanzkriterien. Auf Basis dieser von uns vorgenommen Prototyping Spezifikation definieren wir ein Zieldatum zu dem wir unsere Iteration beenden.

Wir folgen also der Strategie des Feature Boxing und nutzen keine festen Zeitintervalle, sondern nur maximale Zeitvorgaben.

Feature Driven definierte Anforderungen sind immer feingranular und damit jederzeit hinsichtlich des verbundenen Aufwands bewertbar. Außerdem werden wir beim Feature Boxing unsere Aufgaben sinnvoll in Feature-Gruppen organisieren und damit mit jedem neuen MVP Release fachlich sinnvolle Einheiten und Funktionen an unsere Nutzer ausliefern.

Zu unseren geplanten Release-Terminen gibt es somit niemals Abstriche zu Lasten der jeweils vorab definierten Funktionalität. Außerdem ist jederzeit immer ganz genau erkennbar, ob wir im Zeitplan liegen, diesen übererfüllt haben oder hinter unseren Plan fallen.

Im Feature Boxing commiten wir uns auch darauf, dass wenn Funktionen – anders als geplant – zeitaufwendiger in der Umsetzung sind, wir unseren Umsetzungstermin verschieben.

Feature Boxing ist also ein durch Features getriebenes agiles Zeitmanagement.

Ich habe mir für unsere Prototyping Ziele der ersten Iteration einen Arbeitstag, also 8 Mannstunden eingeräumt. Zusätzlich habe ich zwei Rock the Prototype Video Tutorials angefertigt, die diese Podcast Folge begleiten und Euch jederzeit nicht nur Schritt für Schritt erläutern was zu tun ist um das Nuxt Boilerplate zu initialisieren, sondern auch die technischen Hintergründe und Zusammenhänge dazu vermittelt. Die Videoerstellung ist aufwendig und hat mich weitere Arbeitsstunden gekostet. Solche Videotutorials sind aber in jedem Projekt sehr hilfreich und dienen der Projekt-Dokumentation.

Projektmanagement + Zeitplanung in Jira

Ebenfalls Bestanteil unserer Grobplanung ist das Projektmanagement mit der Aufwandsermittlung.

Auch wenn diese kleinteiligen Aufgaben noch leicht überschaubar sind, ergibt es Sinn diese Aufgaben leicht verständlich und gut strukturiert als einzelne Jira Tasks zu definieren und begleitend über das Collaboration Tool Confluence zu dokumentieren.

Warum?

Wir wissen dann jederzeit – auch noch Monate später – wie wir genau vorgegangen sind. Aber nicht nur das. Über Jira können wir jetzt direkt damit beginnen uns in der Aufwandsschätzung zu üben und Jira Tasks für andere leicht nachvollziehbar gestalten.

Es gibt aber noch einen weiteren unschätzbaren Vorteil.

Neben einer detaillierten Aufwandsschätzung erleichtern wir anderen Teams und praktisch jedem beliebigen Stakeholder unsere Aktivitäten nachzuvollziehen und vor allem auch zu verstehen. Nicht nur Neulingen in unserer Organisation, sondern jedem Teammitglied fällt es so leicht sich zu jedem beliebigen Zeitpunkt eigenständig Wissen selbstständig zu erarbeiten. Schließlich ist es wichtig, dass Wissen immer transparent und leicht zugänglich ist.

Es gibt noch ein drittes handfestes Argument für diese akribische Vorgehensweise. Fehler – zum Beispiel in der Konfiguration oder in Annahmen, bei Schätzungen usw. könnt ihr jederzeit durch diese transparente Arbeitsweise nachvollziehen. Das fördert eine gesunde Fehlerkultur in eurer Organisation!

Somit ist auch das grundlegende Setup und die Nutzung dieser unverzichtbaren Collaboration Tools bereits Bestandteil unserer ersten Iterationsstufe.

Phase 3: WebApp Prototype implementieren

Wir realisieren den MVP unserer WebApp.

Zuerst erstellen wir einen Projektordner und initialisieren ein Git-Repository für unsere lokale Entwicklungsumgebung. Damit ist sichergestellt, dass wir unser Projekt von Anfang an git-basiert versionieren.

Dazu gehört es auch alle erforderlichen Vorbereitungen innerhalb unseres Projekts zu treffen, so dass wir basierend auf dem Nuxt Framework zum Ende unserer ersten Iterationsstufe den ersten MVP „Nuxt the Prototype“ fertig stellen. Auch müssen wir alle Abhängigkeiten innerhalb des Nuxt Frameworks auflösen und entsprechende Libraries importieren und Tools in unserer Entwicklungsumgebung in Betrieb nehmen.

Das schließt entsprechende Paketmanager zur Organisation dieser Abhängigkeiten in Form von Versionsständen und Software-Bibliotheken mit ein.

Dann verwenden wir den NPM package executor, kurz npx. Das praktische npx Tool nutzen zur Ausführung von Node-Paketen und npm-Paket-Binärdateien. NPX kommt als Werkzeug immer dann sinnvoll zu Einsatz, wenn wir Befehle auszuführen wollen, die in einem Paket enthalten sind, ohne das Paket selbst tatsächlich zu installieren.

Auch diesen Schritt kannst in unserem begleitenden YouTube Tutorial nachvollziehen.

Mit diesen Implementationsschritten erspart uns das Nuxt-Projekt-Template die zeitaufwändige Erstellung der Grundstruktur eines Nuxt-Projekts und bietet bereits eine vordefinierte Ordnerstruktur, Konfigurationen und grundlegende Dateien für unsere WebApp. Mit all diesen Aktivitäten sind wir bereits mitten in unserem praktischen Teil. So entsteht über das Nuxt-Projekt-Boilerplate unser funktionsfähiger MVP. Wir sparen uns somit eine Menge Zeit und Mühe bei der Erstellung der Basisstruktur unseres Nuxt-Projekts.

Unser Deployment beschränkt sich diesmal auf unser GitHub Remote Repository. Den Link findet ihr in den Shownotes.

Die Verzeichnisse .nuxt und node_modules wurden nicht in das öffentliche GitHub Repo übertragen. Warum?

Dafür gibt es gute Gründe:

• Unnötiger Upload: Die „node_modules“-Verzeichnisse enthalten alle externen Abhängigkeiten unseres Nuxt the Prototype Projekts, die wir jederzeit durch das Ausführen eines Befehls über unseren Paketmanager npm wiederherstellen können. Alle Abhängigkeiten sind in der package.json aufgelistet. Daher ist es unnötig, sie im Repository zu speichern und hochzuladen. Sie würden unser Repository nur unnötig aufblähen und das Hochladen und Klonen langsamer machen.
• Vertrauliche Informationen: Bitte achtet immer darauf keinerlei sensible Informationen wie Anmeldedaten oder Tokens in einem Repository bereitzustellen. Seid Euch immer bewusst, dass Daten die nicht für die Öffentlichkeit bestimmt sind nicht in einem Repository verloren haben.
• Konsistenz und Wiederholbarkeit: Durch das Ignorieren von „node_modules“ können wir sicherstellen, dass alle Entwickler im Projekt dieselben Abhängigkeiten installieren. Damit fördern wir die Konsistenz und Wiederholbarkeit unserer Entwicklungsumgebung.

Ähnlich verhält es sich mit dem Verzeichnis „.nuxt“, das von Nuxt.js generiert wird. Es enthält temporäre Dateien und Artefakte, die nicht in das Repository aufgenommen werden müssen, da sie durch das Ausführen des Build-Prozesses vor Ort wiederhergestellt werden können.

Und mit vor Ort ist etwa Eure lokale Entwicklungsumgebung oder eine Deployment Umgebung wie Staging oder die Produktivumgebung gemeint.

Damit enthält das bereitgestellte GitHub Repo also jederzeit immer alles was ihr braucht um aktiv an unserem Projekt mitzuarbeiten. Alle benötigten Abhängigkeiten stellt ihr mit dem Befehl „npm install“ wieder her. Ihr findet den Link zu unserem GitHub Repo in den Shownotes wo ihr auch die Links zu unseren YouTube Tutorials findet.

Mit diesen praktischen Tipps und einem fundierten Verständnis für das Nuxt Framework bist Du bestens gerüstet, um gemeinsam mit uns unsere WebApp zu gestalten.

Ich hoffe, dass Dir unsere heutige Podcast-Folge informative Einblicke in die Entwicklung einer WebApp mit dem Nuxt Framework konnte. Bleib dran, denn in kommenden Podcast Episoden geht es mit Entwicklung unserer WebApp natürlich weiter.

Über unseren Discord Server habt ihr jederzeit die Möglichkeit Kontakt zu uns aufzunehmen, könnt Fragen stellen und Euch aktiv einzubringen und aktiv an der Gestaltung mitwirken.

Alle Informationen findest du in den Shownotes und hier auf unserer Website unter http://www.rock-the-prototype.com.

Egal, ob du bereits eine erfahrenere Entwicklerin bist oder gerade erst in die Welt des Programmierens eintauchst, bei Rock the Prototype bist du genau richtig.

Also, abonniere jetzt unseren Podcast und lass uns Softwareentwicklung & Prototyping gemeinsam rocken!

Wenn du Fragen hast oder weitere Informationen benötigst, zögere nicht, dich bei mir zu melden.

Vielen Dank für Dein Interesse bis zur nächsten Folge des Rock the Prototype Podcast!

Euer Sascha Block