Download - Lean Startup mit JavaScript

Transcript
Page 1: Lean Startup mit JavaScript

Lean Startup mit JavaScript

Page 2: Lean Startup mit JavaScript

WHO AM I?

• Sebastian Springer

• aus München

• arbeite bei Mayflower

• https://github.com/sspringer82

• @basti_springer

• Consultant, Trainer, Autor

Page 3: Lean Startup mit JavaScript

Was machen wir denn so?

Page 4: Lean Startup mit JavaScript

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?

Page 5: Lean Startup mit JavaScript

Lean Startup?

Business-Hypothesen-getriebene Entwicklung mit iterativen

Releases und validiertem Lernen.

Page 6: Lean Startup mit JavaScript

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?

Page 7: Lean Startup mit JavaScript

Die Problemstellung

Alexandra H. / pixelio.de

Page 8: Lean Startup mit JavaScript

Das Internet - unendliche Weiten

Page 9: Lean Startup mit JavaScript

Ein Kunde hat eine erfolgversprechende

Idee

Page 10: Lean Startup mit JavaScript

Der Kunde hat Geld

I-vista / pixelio.de

Page 11: Lean Startup mit JavaScript

Nachdem das geklärt ist, kann es losgehen.

K. Bangwa / pixelio.de

Page 12: Lean Startup mit JavaScript

#1 Wie bringe ich meine Idee schnell

auf den Markt?

Page 13: Lean Startup mit JavaScript

Das Web ist extrem schnelllebig

Page 14: Lean Startup mit JavaScript

Unser Kunde muss der erste oder zumindest der erfolgreichste mit seiner Idee auf dem Markt sein.

Page 15: Lean Startup mit JavaScript

Bevor es losgeht: Die Idee muss verstanden sein.

Page 16: Lean Startup mit JavaScript

Und was hat das Ganze jetzt mit JavaScript zu

tun?

Page 17: Lean Startup mit JavaScript

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.

Page 18: Lean Startup mit JavaScript

Was wird für die Umsetzung benötigt?

Gila Hanssen / pixelio.de

Page 19: Lean Startup mit JavaScript

Eine Umgebung

Page 20: Lean Startup mit JavaScript

Virtualisierung

Page 21: Lean Startup mit JavaScript

VirtualBox, Puppet und Vagrant

Page 22: Lean Startup mit JavaScript

$ vagrant up

Page 23: Lean Startup mit JavaScript

Paketmanager

Rainer Sturm / pixelio.de

Page 24: Lean Startup mit JavaScript

Bower für unser Frontend. NPM oder Composer für das Backend, je nach verwendeter Technologie.

Page 25: Lean Startup mit JavaScript

$ bower install —save angular !$ bower install —save requirejs

bower.json!“dependencies”: {! “angular”: “~1.2.16”,! “requirejs”: “~2.1.11”!}

Page 26: Lean Startup mit JavaScript
Page 27: Lean Startup mit JavaScript

Yeoman bietet Scaffolding für Projekte. Es gibt Generatoren für die verschiedensten Libraries und

Frameworks.

Page 28: Lean Startup mit JavaScript

$ yo angular:controller user!$ yo angular:directive myDirective

Page 29: Lean Startup mit JavaScript

Frameworks & Libraries

Do not reinvent the wheel

Page 30: Lean Startup mit JavaScript

Das Backend

Christa Nöhren / pixelio.de

Page 31: Lean Startup mit JavaScript

Anforderungen: Registrierung, Authentifizierung und

Datenhaltung.

Page 32: Lean Startup mit JavaScript

Standardisierte Kommunikation

Aka / pixelio.de

Page 33: Lean Startup mit JavaScript

Vorhandene Tools nutzen, z.B. Werkzeuge zur

Datenbank-Administration

Page 34: Lean Startup mit JavaScript

Welche Technologien setzen wir im Backend

ein?

Page 35: Lean Startup mit JavaScript

Frontend

Corinna Dumat / pixelio.de

Page 36: Lean Startup mit JavaScript
Page 37: Lean Startup mit JavaScript

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.

Page 38: Lean Startup mit JavaScript
Page 39: Lean Startup mit JavaScript

Modulsystem zum Laden von Dateien und Auflösen von

Abhängigkeiten. Verfügt über einen eigenen Optimizer.

Page 40: Lean Startup mit JavaScript
Page 41: Lean Startup mit JavaScript

D3 dient zur Manipulation von Dokumenten basierend auf Daten. D3 setzt sehr stark auf existierende

Standards wie HTML, CSS und SVG.

Page 42: Lean Startup mit JavaScript

Testing?

Rike / pixelio.de

Page 43: Lean Startup mit JavaScript

Wir testen nur Kernkomponenten und Features, von denen wir

wissen, dass sie länger in unserer Applikation bleiben.

Page 44: Lean Startup mit JavaScript

Keine!Experimente!

Tim Reckmann / pixelio.de

Page 45: Lean Startup mit JavaScript

Keep it simple

No over engineering

Page 46: Lean Startup mit JavaScript

#2 Wie finde ich heraus, ob meine

Idee gut ist?

Page 47: Lean Startup mit JavaScript

Wir brauchen Hypothesen!

Hansjörg Keller / pixelio.de

Page 48: Lean Startup mit JavaScript

10.000 Neuregistrierungen im

ersten Monat

Page 49: Lean Startup mit JavaScript

Jeder Nutzer generiert pro Woche 10 Beiträge

Page 50: Lean Startup mit JavaScript

Ein durchschnittlicher Registrierungsprozess

dauert 2 Minuten.

Page 51: Lean Startup mit JavaScript

SMARTSpezifisch Messbar

Akzeptiert Realistisch Terminiert

Independent Negotiable Valuable

Estimatable Scalable Testable

INVEST

Page 52: Lean Startup mit JavaScript

Messen

roja48 / pixelio.de

Page 53: Lean Startup mit JavaScript

So ziemliche jede Aktion auf der Seite muss aufgezeichnet werden. Vom

einfachen Pageload über Aktionen wie Mausklicks oder Workflows bis hin zu

Fehlermeldungen.

Page 54: Lean Startup mit JavaScript

Auch die Dauer bestimmter Aktionen ist relevant, z.B.

Ladezeiten, Durchlaufzeiten, etc.

Page 55: Lean Startup mit JavaScript

Fire and Forget

Siegfried Fries / pixelio.de

Page 56: Lean Startup mit JavaScript

Die Messwerte kontinuierlich beobachten

hamma / pixelio.de

Page 57: Lean Startup mit JavaScript

Die Messwerte regelmäßig hinterfragen.

Page 58: Lean Startup mit JavaScript

Tool der Wahl: Google Analytics

Page 59: Lean Startup mit JavaScript

Wir brauchen Feedback!

Page 60: Lean Startup mit JavaScript

Forum anlegen, FAQ sammeln, kontextabhängige Feedbackformulare,

die einfach erreichbar sind, Realtimechat mit Applikationssupport.

Page 61: Lean Startup mit JavaScript

#3 Wie erreiche ich eine schnelle

Reaktionsfähigkeit?

Page 62: Lean Startup mit JavaScript

Continuous Deployment

Page 63: Lean Startup mit JavaScript

Die Hürde, ein neues Release zu erstellen, muss sehr klein sein. Im

Idealfall ist es lediglich ein Mausklick.

Page 64: Lean Startup mit JavaScript

Features ein- und ausschalten

pogobuschel / pixelio.de

Page 65: Lean Startup mit JavaScript

Features werden im Frontend und Backend an-/abgeschaltet. Per Konfiguration werden Features,

Routen etc. deaktiviert.

Page 66: Lean Startup mit JavaScript

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'! });! }

Page 67: Lean Startup mit JavaScript

A/B-Testing

Erich Westendarp / pixelio.de

Page 68: Lean Startup mit JavaScript

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.

Page 69: Lean Startup mit JavaScript

Modularisierung

Initiative Echte Soziale Marktwirtschaft IESM / pixelio.de

Page 70: Lean Startup mit JavaScript

Ein Modul pro Feature. Jedes Feature hat sein eigenes Verzeichnis mit allen

Komponenten. RequireJS und AngularJS in

Kombination zur Modularisierung.

Page 71: Lean Startup mit JavaScript

define(['angular', 'ngRouter', ‘text!../../tpl.html'],! function(angular, router, tpl) {! angular.module(‘app.index', [‘ui.router']);! …! }!);!

Page 72: Lean Startup mit JavaScript

Kontinuierliche Modernisierung

Michael Loeper / pixelio.de

Page 73: Lean Startup mit JavaScript

Fazit

Tim Reckmann / pixelio.de

Page 74: Lean Startup mit JavaScript

Fehler zulassen

Page 75: Lean Startup mit JavaScript

Wir wollen nicht alle Fehler im Vorfeld vermeiden, sondern eine Infrastruktur,

die das Erkennen von Fehlern und deren Behebung sehr einfach macht.

Page 76: Lean Startup mit JavaScript

Rahmen zum Lernen aufspannen

Page 77: Lean Startup mit JavaScript

Benutzer in den Entwicklungsprozess

einbeziehen

Page 78: Lean Startup mit JavaScript

Fragen?

Rainer Sturm / pixelio.de

Page 79: Lean Startup mit JavaScript

KONTAKT

Sebastian Springer [email protected] !Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland !@basti_springer !https://github.com/sspringer82