The document discusses quick prototyping of applications using JavaScript within 24 hours, providing an overview of the speakers' backgrounds and experiences and outlining topics like startup mode, JavaScript techniques including MVC, modules and responsive design, and demonstrating a sample alarm clock application created using these techniques. The presentation discusses plans to develop the demo within 4 hours that did not come to fruition due to additional complexity, instead showing code fragments and the full code on BitBucket.

1. Application in 24h
Quick prototyping of application using JavaScript
by Yuriy V. Silvestrov, Mikhail Valkov

2. About us
Yuriy V. Silvestrov
10+ years record in IT, 8+ years devoted to managing
projects. Now working for Ciklum, managing a team
of 30+ persons making different software for Danish
financial organizations.
Twitter: @ysilvestrov
Please visit my website
http://yuriy.silvestrov.com
for more info or contact me at
yuriy@silvestrov.com.

3. About us
Mikhail Valkov
10+ years record in IT. 2+ years devoted to system
architecture. Now working for Ciklum.
for more info contact me at
valkov.net@gmail.com.

4.  Based on our own About lection
experience
 Useful for startups
and pet projects
 Divide and conquer 

5. ⌛ < 60
Time is counting

6.  Have tried to do a startup?
 Have experience with JavaScript/HTML5?
 Participated in Hakatons or similar
events?
 We’ll try to adapt
How many of you

7.  Startup mode ON
◦ When do we need quick prototyping?
◦ How to quick prototype an app?
 JavaScript tricks
◦ MVC in JavaScript
◦ jQuery and jQuery plugins
◦ AngularJS
◦ RequireJS, Modules and AMD
 Design tips
◦ Using bootstraps (twitter etc.)
◦ Responsive design
 Q&A
Content

8.  Alarm clocks with skinning and time
synchronization
 See on BitBucket:
◦ http://bitbucket.org/ysilvestrov/alarm-clock
 See online demo:
◦ http://jayostudio.net/app/
Demo application

9. Plans Reality
 Write an app in max.  Spent 24h
4h  Code is too complex
 Rewrite JS code right to rewrite fast
at the demo  Due to extra
 Show the code on complexity, we’re just
screen to show some
fragments; see the
rest at BitBucket
Plans VS Reality

10.  What is startup?
 Act like startup!
 Implement main idea only
 Throw away everything else
Startup mode ON

11.  Lack of resources
 Fast show results
 If to fail at all – fail fast!
Why quick prototyping?

12.  Choose platform
 Download seed for chosen platform
 Quick UI
 Choose vital functionality to prototype
 Find the frameworks/solutions realizing
the functionality
 Compose all together
 …
 PROFIT
How to prototype

13.  Client-Side JS & HTML5
 Development perspective
 Platform independency
Client-side JavaScript

14.  Use 3-rd party components
 Existing online services
◦ Prefer ones implementing REST interface
 Use dependency managers to integrate
Component development

15. JavaScript MVC

16.  85% of WebApps made with jQuery
 Pros
◦ Modularity
◦ Speed
◦ Small footprint
◦ Json
Visit http://jquery.com/ for more details
jQuery and plugins

17.  One of 20+ MVC JS frameworks
 Supported by Google
 Integrated
◦ Templates
◦ Directives and filters
◦ Module systems
◦ Resources
◦ Asynchronous programming
Visit http://angularjs.org for details
Angular JS

18.  Dependency isolation
 Dependency management
 Modules cashing
Visit http://requirejs.org/ for details
RequireJS

19.  AMD = Advanced Module Definition
 CommonJS
See https://github.com/amdjs/amdjs-api
Modules and AMD

20.  Use advanced CSS and JS
 Throw away old browsers
 Build one version of web app for all the
devices
 Responsive design and mobile first
Design tips

21.  Twitter bootstrap
http://twitter.github.com/bootstrap/
◦ Made for everyone
◦ Packed with features
Bootstrap usage

22.  Using media queries
 Mobile first
Responsive design

23. https://github.com/angular/angular-seed
https://github.com/ysilvestrov/angular-seed
Angular Seed

24.  Improve our skills
 Select simpler task
 Real-time coding demo
What is next…

25. ???
Questions?

26. yuriy@silvestrov.com
valkov.net@gmail.com
Thank you!
Waiting for your demos