Lean Startup mit
JavaScript
WHO AM I?
• Sebastian Springer	

• aus München	

• arbeite bei Mayflower	

• https://github.com/sspringer82	

• @basti_spri...
Was machen wir
denn so?
Was erzähle ich euch heute?
Welche Erfahrungen haben wir bei
der Entwicklung innovativer Projekte
gemacht? Welche Fehler s...
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 schnell...
Die Problemstellung
Alexandra H. / pixelio.de
Das Internet -
unendliche Weiten
Ein Kunde hat eine
erfolgversprechende
Idee
Der Kunde hat Geld
I-vista / pixelio.de
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...
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”,!
“req...
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
D
o
notreinventthe
w
heel
Das Backend
Christa Nöhren / pixelio.de
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?
Frontend
Corinna Dumat / pixelio.de
Angular bietet Struktur für eine Applikation
und liefert zahlreiche Lösungsansätze out
of the box. Außerdem dient es als B...
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...
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
N
o
overengineering
#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.
SMART
Spezifisch
Messbar
Akzeptiert
Realistisch
Terminiert
Independent
Negotiable
Valuable
Estimatable
Scalable
Testable
IN...
Messen
roja48 / pixelio.de
So ziemliche jede Aktion auf der Seite
muss aufgezeichnet werden. Vom
einfachen Pageload über Aktionen wie
Mausklicks oder...
Auch die Dauer bestimmter
Aktionen ist relevant, z.B.
Ladezeiten, Durchlaufzeiten, etc.
Fire and Forget
Siegfried Fries / pixelio.de
Die Messwerte
kontinuierlich beobachten
hamma / 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 Applikations...
#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 ein- und
ausschalten
pogobuschel / pixelio.de
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...
A/B-Testing
Erich Westendarp / pixelio.de
Die Zielgruppe wird unterteilt und jede
Gruppe erhält eine andere Version der
Applikation oder bestimmter Features.
Das Ve...
Modularisierung
Initiative Echte Soziale Marktwirtschaft IESM / pixelio.de
Ein Modul pro Feature. Jedes Feature
hat sein eigenes Verzeichnis mit allen
Komponenten.
RequireJS und AngularJS in
Kombin...
define(['angular', 'ngRouter',
‘text!../../tpl.html'],!
function(angular, router, tpl) {!
angular.module(‘app.index',
[‘ui...
Kontinuierliche
Modernisierung
Michael Loeper / pixelio.de
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 Behe...
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
!
@b...
Lean Startup mit JavaScript
Lean Startup mit JavaScript
Lean Startup mit JavaScript
Lean Startup mit JavaScript
Nächste SlideShare
Wird geladen in …5
×

Lean Startup mit JavaScript

783 Aufrufe

Veröffentlicht am

In diesem Vortrag werden drei zentrale Fragen gestellt (und beantwortet):
Wie bringe ich meine Idee schnell auf den Markt?
Wie finde ich heraus, ob meine Idee gut ist?
Wie kann ich auf geänderte Anforderungen reagieren?

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Lean Startup mit JavaScript

  1. 1. Lean Startup mit JavaScript
  2. 2. WHO AM I? • Sebastian Springer • aus München • arbeite bei Mayflower • https://github.com/sspringer82 • @basti_springer • Consultant,Trainer,Autor
  3. 3. Was machen wir denn so?
  4. 4. 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?
  5. 5. Lean Startup? Business-Hypothesen-getriebene Entwicklung mit iterativen Releases und validiertem Lernen.
  6. 6. 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?
  7. 7. Die Problemstellung Alexandra H. / pixelio.de
  8. 8. Das Internet - unendliche Weiten
  9. 9. Ein Kunde hat eine erfolgversprechende Idee
  10. 10. Der Kunde hat Geld I-vista / pixelio.de
  11. 11. Nachdem das geklärt ist, kann es losgehen. K. Bangwa / pixelio.de
  12. 12. #1 Wie bringe ich meine Idee schnell auf den Markt?
  13. 13. Das Web ist extrem schnelllebig
  14. 14. Unser Kunde muss der erste oder zumindest der erfolgreichste mit seiner Idee auf dem Markt sein.
  15. 15. Bevor es losgeht: Die Idee muss verstanden sein.
  16. 16. Und was hat das Ganze jetzt mit JavaScript zu tun?
  17. 17. 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.
  18. 18. Was wird für die Umsetzung benötigt? Gila Hanssen / pixelio.de
  19. 19. Eine Umgebung
  20. 20. Virtualisierung
  21. 21. VirtualBox, Puppet und Vagrant
  22. 22. $ vagrant up
  23. 23. Paketmanager Rainer Sturm / pixelio.de
  24. 24. Bower für unser Frontend. NPM oder Composer für das Backend, je nach verwendeter Technologie.
  25. 25. $ bower install —save angular ! $ bower install —save requirejs bower.json! “dependencies”: {! “angular”: “~1.2.16”,! “requirejs”: “~2.1.11”! }
  26. 26. Yeoman bietet Scaffolding für Projekte. Es gibt Generatoren für die verschiedensten Libraries und Frameworks.
  27. 27. $ yo angular:controller user! $ yo angular:directive myDirective
  28. 28. Frameworks & Libraries D o notreinventthe w heel
  29. 29. Das Backend Christa Nöhren / pixelio.de
  30. 30. Anforderungen: Registrierung, Authentifizierung und Datenhaltung.
  31. 31. Standardisierte Kommunikation Aka / pixelio.de
  32. 32. Vorhandene Tools nutzen, z.B. Werkzeuge zur Datenbank-Administration
  33. 33. Welche Technologien setzen wir im Backend ein?
  34. 34. Frontend Corinna Dumat / pixelio.de
  35. 35. 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.
  36. 36. Modulsystem zum Laden von Dateien und Auflösen von Abhängigkeiten. Verfügt über einen eigenen Optimizer.
  37. 37. D3 dient zur Manipulation von Dokumenten basierend auf Daten. D3 setzt sehr stark auf existierende Standards wie HTML, CSS und SVG.
  38. 38. Testing? Rike / pixelio.de
  39. 39. Wir testen nur Kernkomponenten und Features, von denen wir wissen, dass sie länger in unserer Applikation bleiben.
  40. 40. Keine! Experimente! Tim Reckmann / pixelio.de
  41. 41. Keep it simple N o overengineering
  42. 42. #2 Wie finde ich heraus, ob meine Idee gut ist?
  43. 43. Wir brauchen Hypothesen! Hansjörg Keller / pixelio.de
  44. 44. 10.000 Neuregistrierungen im ersten Monat
  45. 45. Jeder Nutzer generiert pro Woche 10 Beiträge
  46. 46. Ein durchschnittlicher Registrierungsprozess dauert 2 Minuten.
  47. 47. SMART Spezifisch Messbar Akzeptiert Realistisch Terminiert Independent Negotiable Valuable Estimatable Scalable Testable INVEST
  48. 48. Messen roja48 / pixelio.de
  49. 49. So ziemliche jede Aktion auf der Seite muss aufgezeichnet werden. Vom einfachen Pageload über Aktionen wie Mausklicks oder Workflows bis hin zu Fehlermeldungen.
  50. 50. Auch die Dauer bestimmter Aktionen ist relevant, z.B. Ladezeiten, Durchlaufzeiten, etc.
  51. 51. Fire and Forget Siegfried Fries / pixelio.de
  52. 52. Die Messwerte kontinuierlich beobachten hamma / pixelio.de
  53. 53. Die Messwerte regelmäßig hinterfragen.
  54. 54. Tool der Wahl: Google Analytics
  55. 55. Wir brauchen Feedback!
  56. 56. Forum anlegen, FAQ sammeln, kontextabhängige Feedbackformulare, die einfach erreichbar sind, Realtimechat mit Applikationssupport.
  57. 57. #3 Wie erreiche ich eine schnelle Reaktionsfähigkeit?
  58. 58. Continuous Deployment
  59. 59. Die Hürde, ein neues Release zu erstellen, muss sehr klein sein. Im Idealfall ist es lediglich ein Mausklick.
  60. 60. Features ein- und ausschalten pogobuschel / pixelio.de
  61. 61. Features werden im Frontend und Backend an-/abgeschaltet. Per Konfiguration werden Features, Routen etc. deaktiviert.
  62. 62. 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'! });! }
  63. 63. A/B-Testing Erich Westendarp / pixelio.de
  64. 64. 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.
  65. 65. Modularisierung Initiative Echte Soziale Marktwirtschaft IESM / pixelio.de
  66. 66. Ein Modul pro Feature. Jedes Feature hat sein eigenes Verzeichnis mit allen Komponenten. RequireJS und AngularJS in Kombination zur Modularisierung.
  67. 67. define(['angular', 'ngRouter', ‘text!../../tpl.html'],! function(angular, router, tpl) {! angular.module(‘app.index', [‘ui.router']);! …! }! );!
  68. 68. Kontinuierliche Modernisierung Michael Loeper / pixelio.de
  69. 69. Fazit Tim Reckmann / pixelio.de
  70. 70. Fehler zulassen
  71. 71. Wir wollen nicht alle Fehler im Vorfeld vermeiden, sondern eine Infrastruktur, die das Erkennen von Fehlern und deren Behebung sehr einfach macht.
  72. 72. Rahmen zum Lernen aufspannen
  73. 73. Benutzer in den Entwicklungsprozess einbeziehen
  74. 74. Fragen? Rainer Sturm / pixelio.de
  75. 75. KONTAKT Sebastian Springer sebastian.springer@mayflower.de ! Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland ! @basti_springer ! https://github.com/sspringer82

×