Post on 27-May-2015
description
transcript
Lean Startup mit JavaScript
WHO AM I?
• Sebastian Springer
• aus München
• arbeite bei Mayflower
• https://github.com/sspringer82
• @basti_springer
• Consultant, Trainer, Autor
Was machen wir denn so?
Was erzähle ich euch heute?
Welche Erfahrungen haben wir bei der Entwicklung innovativer Projekte
gemacht? Welche Fehler sind passiert und was haben wir daraus gelernt?
Lean Startup?
Business-Hypothesen-getriebene Entwicklung mit iterativen
Releases und validiertem Lernen.
Wie bringe ich meine Idee schnell auf den Markt?
Wie finde ich heraus, ob meine Idee gut ist?
Wie erreiche ich eine schnelle Reaktionsfähigkeit?
Die Problemstellung
Alexandra H. / pixelio.de
Das Internet - unendliche Weiten
Ein Kunde hat eine erfolgversprechende
Idee
Nachdem das geklärt ist, kann es losgehen.
K. Bangwa / pixelio.de
#1 Wie bringe ich meine Idee schnell
auf den Markt?
Das Web ist extrem schnelllebig
Unser Kunde muss der erste oder zumindest der erfolgreichste mit seiner Idee auf dem Markt sein.
Bevor es losgeht: Die Idee muss verstanden sein.
Und was hat das Ganze jetzt mit JavaScript zu
tun?
Der Benutzer steht im Fokus, also müssen wir alles tun, um sichtbare Ergebnisse zu
liefern. Das geht im Web mit JavaScript am
schnellsten. Es ist überall verfügbar und in der Kombination mit HTML5 und CSS3 ein
sehr mächtiges Werkzeug.
Was wird für die Umsetzung benötigt?
Gila Hanssen / pixelio.de
Eine Umgebung
Virtualisierung
VirtualBox, Puppet und Vagrant
$ vagrant up
Paketmanager
Rainer Sturm / pixelio.de
Bower für unser Frontend. NPM oder Composer für das Backend, je nach verwendeter Technologie.
$ bower install —save angular !$ bower install —save requirejs
bower.json!“dependencies”: {! “angular”: “~1.2.16”,! “requirejs”: “~2.1.11”!}
Yeoman bietet Scaffolding für Projekte. Es gibt Generatoren für die verschiedensten Libraries und
Frameworks.
$ yo angular:controller user!$ yo angular:directive myDirective
Frameworks & Libraries
Do not reinvent the wheel
Anforderungen: Registrierung, Authentifizierung und
Datenhaltung.
Standardisierte Kommunikation
Aka / pixelio.de
Vorhandene Tools nutzen, z.B. Werkzeuge zur
Datenbank-Administration
Welche Technologien setzen wir im Backend
ein?
Angular bietet Struktur für eine Applikation und liefert zahlreiche Lösungsansätze out of the box. Außerdem dient es als Basis für
zusätzliche Erweiterungen mit eigenen oder fremden Modulen.
Modulsystem zum Laden von Dateien und Auflösen von
Abhängigkeiten. Verfügt über einen eigenen Optimizer.
D3 dient zur Manipulation von Dokumenten basierend auf Daten. D3 setzt sehr stark auf existierende
Standards wie HTML, CSS und SVG.
Testing?
Rike / pixelio.de
Wir testen nur Kernkomponenten und Features, von denen wir
wissen, dass sie länger in unserer Applikation bleiben.
Keine!Experimente!
Tim Reckmann / pixelio.de
Keep it simple
No over engineering
#2 Wie finde ich heraus, ob meine
Idee gut ist?
Wir brauchen Hypothesen!
Hansjörg Keller / pixelio.de
10.000 Neuregistrierungen im
ersten Monat
Jeder Nutzer generiert pro Woche 10 Beiträge
Ein durchschnittlicher Registrierungsprozess
dauert 2 Minuten.
SMARTSpezifisch Messbar
Akzeptiert Realistisch Terminiert
Independent Negotiable Valuable
Estimatable Scalable Testable
INVEST
So ziemliche jede Aktion auf der Seite muss aufgezeichnet werden. Vom
einfachen Pageload über Aktionen wie Mausklicks oder Workflows bis hin zu
Fehlermeldungen.
Auch die Dauer bestimmter Aktionen ist relevant, z.B.
Ladezeiten, Durchlaufzeiten, etc.
Fire and Forget
Siegfried Fries / pixelio.de
Die Messwerte regelmäßig hinterfragen.
Tool der Wahl: Google Analytics
Wir brauchen Feedback!
Forum anlegen, FAQ sammeln, kontextabhängige Feedbackformulare,
die einfach erreichbar sind, Realtimechat mit Applikationssupport.
#3 Wie erreiche ich eine schnelle
Reaktionsfähigkeit?
Continuous Deployment
Die Hürde, ein neues Release zu erstellen, muss sehr klein sein. Im
Idealfall ist es lediglich ein Mausklick.
Features werden im Frontend und Backend an-/abgeschaltet. Per Konfiguration werden Features,
Routen etc. deaktiviert.
angular.module(‘app.routes’).config(function( $stateProvider, $urlRouterProvider, $config) {! $urlRouterProvider.otherwise('/list');!! if ($config.isEnabled(‘forum’)) {! $stateProvider.state('forum', {! url: '/forum',! template: tplForum,! controller: 'ForumCtrl'! });! }
Die Zielgruppe wird unterteilt und jede Gruppe erhält eine andere Version der Applikation oder bestimmter Features.
Das Verhalten der Gruppen wird gemessen. Erlaubt Rückschlüsse auf die Akzeptanz bestimmter Varianten.
Ein Modul pro Feature. Jedes Feature hat sein eigenes Verzeichnis mit allen
Komponenten. RequireJS und AngularJS in
Kombination zur Modularisierung.
define(['angular', 'ngRouter', ‘text!../../tpl.html'],! function(angular, router, tpl) {! angular.module(‘app.index', [‘ui.router']);! …! }!);!
Fazit
Tim Reckmann / pixelio.de
Fehler zulassen
Wir wollen nicht alle Fehler im Vorfeld vermeiden, sondern eine Infrastruktur,
die das Erkennen von Fehlern und deren Behebung sehr einfach macht.
Rahmen zum Lernen aufspannen
Benutzer in den Entwicklungsprozess
einbeziehen
Fragen?
Rainer Sturm / pixelio.de
KONTAKT
Sebastian Springer sebastian.springer@mayflower.de !Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland !@basti_springer !https://github.com/sspringer82