The document discusses quick prototyping of applications using JavaScript. It provides biographies of Yuriy V. Silvestrov and Mikhail Valkov, and then discusses topics like when quick prototyping is useful, how to quickly prototype an app, JavaScript techniques like MVC, jQuery, AngularJS and RequireJS, design tips including responsive design, and includes links to example applications and code on BitBucket and GitHub.

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; also I am CTO in
PromoRepublic startup.
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
 Not the right way, not
the best way, but the
fast one.
 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?
 Is AngularJS/RequireJS expert?
 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.  A way to write something useful and not
to spend years on it
 Fits to Minimum Valuable Product
approach
◦ If you’ll fail, it would be fast
◦ If not, you’ll have plenty of time to refactor the
application
◦ …while the “prototype” is still in use
Prototyping

9.  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

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 loading and cashing
Visit http://requirejs.org/ for details
RequireJS

19.  AMD = Asynchronous 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.  Jasny bootstrap(http://jasny.github.com/bootstrap/)
◦ Row links, Input mask, File upload
◦ … and much more
 Kickstrap (http://getkickstrap.com/)
◦ Bootstrap with blackjack and hookers
◦ actually, with apps and themes
Twitter bootstrap extensions
@ysilvestrov, @valkovnet

23.  Using media queries
 Mobile first
Responsive design

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

25. ???
Questions?

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