In our daily work we are often faced with rapidly changing requirements and environments. Tand the lean principles in combination with JavaScript provide us a great toolset for solving a lot of common problems. Lean JS is centered around the principle of quickly preserving value with less work. It’s about being less wasteful and shortening the product development cycles by adopting a combination of business-hypothesis-driven experimentation, iced by iterative product releases and validated learning. It`ll result in a ramped-up lead time with less waste, and empower your team to reach its goals more effective. In this talk we will show you practical examples and demonstrate how to avoid common pitfalls in a world with a lot of unknown unknowns.

1. Lean Startup with JavaScript
LeanJS

2. WHO ARE WE?
• Sebastian Springer
• @basti_springer
• Johannes Weber
• @jowe

3. What are we doing?

4. What we are telling you
today?
Which experiences we have made
in developing innovative projects?
What mistakes have happened and
what we have learned from this?

5. Lean Startup?
Business-hypothesis-driven
development with iterative
releases and validated learning.

6. Lean Startup?
Tam P. / quora.com

7. How do I get my idea to market quickly?
How do I know whether my idea is good?
How do I get a quick response?

8. Alexandra H. / pixelio.de
The Problem

9. The Internet:
The Final Frontier

10. de.wikipedia.org
The customer has the
idea. We’ve the
experience and the tools.

11. K. Bangwa / pixelio.de
That being said, there
you go.

12. #1
How do I get my
idea to market
quickly?

13. The Web's extremely
fast paced

14. Our customer must be the first
or at least the most successful
with his idea on the market.

15. First of all: The idea must
be understood by all.

16. And what does all this
have to do with
JavaScript?

17. The user is the focus, so we must do
everything possible to deliver visible
results.
The quickest way on the web is with
Javascript. It is available everywhere and
in combination with HTML5 and CSS3 a
very powerful tool.

18. Gila Hanssen / pixelio.de
What is needed for the
implementation?

19. An environment

20. Virtualization

21. VirtualBox, Puppet
and Vagrant

22. https://github.com/mayflower/wasted

23. Rainer Sturm / pixelio.de
Package Management

24. Bower or JSPM for our frontend.
NPM or Composer for the back end,
depending on the technology used.

25. $ bower install —save angular
$ bower install —save requirejs
bower.json
“dependencies”: {
“angular”: “~1.4.x”,
“requirejs”: “~2.1.11”
}

27. Yeoman provides scaffolding for
projects. There are generators for
a variety of libraries and
frameworks.

28. $ yo angular:controller user
$ yo angular:directive myDirective

29. Frameworks &
Libraries
D
o
notreinventthe
w
heel

30. Christa Nöhren / pixelio.de
The Backend

31. Requirements:
registration, authentication,
and data management.

32. Aka / pixelio.de
Standardized
communication

33. Using existing tools, such
as Tools for database
administration

34. What technologies we
use in the backend?

35. Corinna Dumat / pixelio.de
Frontend

37. Angular provides structure for an
application and provides numerous
solutions out of the box. It also serves as a
basis for additional extensions with their
own or other modules.

39. Modular system for loading files
and resolve dependencies.
Seamless integration for a
optimized build.

41. D3 is used for handling documents
based on data. D3 relies very
heavily on existing standards such
as HTML, CSS and SVG.

42. Rike / pixelio.de
Testing?

43. Don’t!

44. We're testing only core
components and features, of
which we know that they will stay
in our application for longer.

45. No
experiments!
Tim Reckmann / pixelio.de

46. Training off the Job

47. Keep it simple
N
o
overengineering

48. #2How do I know if
my idea is good?

49. Hansjörg Keller / pixelio.de
We need hypotheses!

51. 10,000 new registrations
within the first month

52. Each user generates
10 posts every week

53. An average registration
process takes 2 minutes.

54. SMART
Specific
Measurable
Achievable
Relevant
Time-bounded
Independent
Negotiable
Valuable
Estimatable
Scalable
Testable
INVEST

55. roja48 / pixelio.de
Measuring

56. Pretty much every action on the page
needs to be recorded. From simple
PageLoad about actions like clicks or
workflows to error messages.

57. The duration of certain actions
is relevant, for example,
loading times, lead times, etc.

58. Siegfried Fries / pixelio.de
Fire and Forget

59. hamma / pixelio.de
Observe the measurement
values continuously

60. Scrutinize these
values regularly.

61. Tool of choice:
Google Analytics, Piwik

62. We need
Feedback!

63. Create forum, create a FAQ area,
contextual feedback forms, which
are easily accessible, real-time
chat with application support.

64. ASAP: consider about
the on-boarding process

65. #3 How do I get a
quick response?

66. Continuous
Deployment

67. The effort to create a new
release must be very small.
Ideally, it is automated.

68. pogobuschel / pixelio.de
Feature toggles

69. Features are togglable in the
frontend and backend. Per
configuration you can enable or
disable features, routes etc.

70. Erich Westendarp / pixelio.de
A/B-Testing

71. The target group is divided and each
group receives a different version of
the application or certain features.
The behavior of groups is measured.
Allows conclusions concerning the
acceptance of certain variants.

72. Initiative Echte Soziale Marktwirtschaft IESM / pixelio.de
Modularization

73. One module per feature. Each feature
has its own directory containing all
components.
Frameworks support you in building
Modules.

74. Michael Loeper / pixelio.de
Continuous
modernization

75. Tim Reckmann / pixelio.de
Conclusion

76. Allow mistakes.

77. We don’t want to avoid any errors
in advance, but an infrastructure
that makes the detection of errors
and their solutions very simple.

78. Provide a framework
for learning

79. Include users in the
development process
from the beginning.

80. Rainer Sturm / pixelio.de
Questions?
@basti_springer
@jowe
Reach us on Twitter