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