LeanJS - Lean startup with JavaScript
-
Upload
johannes-weber -
Category
Engineering
-
view
54 -
download
1
Transcript of LeanJS - Lean startup with JavaScript
![Page 1: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/1.jpg)
Lean Startup with JavaScriptLeanJS
![Page 2: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/2.jpg)
WHO ARE WE?
• Sebastian Springer
• @basti_springer
• Johannes Weber
• @jowe
![Page 3: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/3.jpg)
What are we doing?
![Page 4: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/4.jpg)
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?
![Page 5: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/5.jpg)
Lean Startup?
Business-hypothesis-driven development with iterative
releases and validated learning.
![Page 7: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/7.jpg)
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?
![Page 8: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/8.jpg)
Alexandra H. / pixelio.de
The Problem
![Page 9: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/9.jpg)
The Internet:The Final Frontier
![Page 10: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/10.jpg)
de.wikipedia.org
The customer has the idea. We’ve the
experience and the tools.
![Page 11: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/11.jpg)
K. Bangwa / pixelio.de
That being said, there you go.
![Page 12: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/12.jpg)
#1How do I get my idea to market
quickly?
![Page 13: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/13.jpg)
The Web's extremely fast paced
![Page 14: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/14.jpg)
Our customer must be the first or at least the most successful
with his idea on the market.
![Page 15: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/15.jpg)
First of all: The idea must be understood by all.
![Page 16: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/16.jpg)
And what does all this have to do with
JavaScript?
![Page 17: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/17.jpg)
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.
![Page 18: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/18.jpg)
Gila Hanssen / pixelio.de
What is needed for the implementation?
![Page 19: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/19.jpg)
An environment
![Page 20: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/20.jpg)
Virtualization
![Page 21: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/21.jpg)
VirtualBox, Puppet and Vagrant
![Page 23: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/23.jpg)
Rainer Sturm / pixelio.de
Package Management
![Page 24: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/24.jpg)
Bower or JSPM for our frontend. NPM or Composer for the back end, depending on the technology used.
![Page 25: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/25.jpg)
$ bower install —save angular $ bower install —save requirejs
bower.json“dependencies”: { “angular”: “~1.4.x”, “requirejs”: “~2.1.11”}
![Page 26: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/26.jpg)
![Page 27: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/27.jpg)
Yeoman provides scaffolding for projects. There are generators for
a variety of libraries and frameworks.
![Page 28: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/28.jpg)
$ yo angular:controller user$ yo angular:directive myDirective
![Page 29: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/29.jpg)
Frameworks & Libraries
Do not reinvent the wheel
![Page 31: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/31.jpg)
Requirements: registration, authentication,
and data management.
![Page 32: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/32.jpg)
Aka / pixelio.de
Standardized communication
![Page 33: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/33.jpg)
Using existing tools, such as Tools for database
administration
![Page 34: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/34.jpg)
What technologies we use in the backend?
![Page 36: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/36.jpg)
![Page 37: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/37.jpg)
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.
![Page 38: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/38.jpg)
![Page 39: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/39.jpg)
Modular system for loading files and resolve dependencies.
Seamless integration for a optimized build.
![Page 40: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/40.jpg)
![Page 41: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/41.jpg)
D3 is used for handling documents based on data. D3 relies very
heavily on existing standards such as HTML, CSS and SVG.
![Page 42: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/42.jpg)
Rike / pixelio.de
Testing?
![Page 43: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/43.jpg)
Don’t!
![Page 44: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/44.jpg)
We're testing only core components and features, of
which we know that they will stay in our application for longer.
![Page 45: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/45.jpg)
Noexperiments!
Tim Reckmann / pixelio.de
![Page 46: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/46.jpg)
Training off the Job
![Page 47: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/47.jpg)
Keep it simple
No over engineering
![Page 48: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/48.jpg)
#2 How do I know if my idea is good?
![Page 49: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/49.jpg)
Hansjörg Keller / pixelio.de
We need hypotheses!
![Page 50: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/50.jpg)
![Page 51: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/51.jpg)
10,000 new registrations within the first month
![Page 52: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/52.jpg)
Each user generates 10 posts every week
![Page 53: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/53.jpg)
An average registration process takes 2 minutes.
![Page 54: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/54.jpg)
SMARTSpecific
Measurable Achievable Relevant
Time-bounded
Independent Negotiable Valuable
Estimatable Scalable Testable
INVEST
![Page 56: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/56.jpg)
Pretty much every action on the page needs to be recorded. From simple
PageLoad about actions like clicks or workflows to error messages.
![Page 57: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/57.jpg)
The duration of certain actions is relevant, for example,
loading times, lead times, etc.
![Page 58: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/58.jpg)
Siegfried Fries / pixelio.de
Fire and Forget
![Page 60: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/60.jpg)
Scrutinize these values regularly.
![Page 61: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/61.jpg)
Tool of choice: Google Analytics, Piwik
![Page 62: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/62.jpg)
We needFeedback!
![Page 63: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/63.jpg)
Create forum, create a FAQ area, contextual feedback forms, which
are easily accessible, real-time chat with application support.
![Page 64: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/64.jpg)
ASAP: consider about the on-boarding process
![Page 65: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/65.jpg)
#3 How do I get a quick response?
![Page 66: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/66.jpg)
Continuous Deployment
![Page 67: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/67.jpg)
The effort to create a new release must be very small.
Ideally, it is automated.
![Page 69: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/69.jpg)
Features are togglable in the frontend and backend. Per
configuration you can enable or disable features, routes etc.
![Page 71: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/71.jpg)
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.
![Page 73: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/73.jpg)
One module per feature. Each feature has its own directory containing all
components. Frameworks support you in building
Modules.
![Page 75: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/75.jpg)
Tim Reckmann / pixelio.de
Conclusion
![Page 76: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/76.jpg)
Allow mistakes.
![Page 77: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/77.jpg)
We don’t want to avoid any errors in advance, but an infrastructure
that makes the detection of errors and their solutions very simple.
![Page 78: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/78.jpg)
Provide a framework for learning
![Page 79: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/79.jpg)
Include users in the development process from the beginning.
![Page 80: LeanJS - Lean startup with JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042819/55c7f0cabb61ebed098b4604/html5/thumbnails/80.jpg)
Rainer Sturm / pixelio.de
Questions?
@basti_springer
@joweReach us on Twitter