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