Presentation have been taken at KyivJS conference, 2012

1. Application in 24h
Fast prototyping of rich UI applications using
AngularJS, RequireJS, jQuery
by Yuriy V. Silvestrov, Mikhail Valkov
@ysilvestrov, @valkovnet

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.
@ysilvestrov, @valkovnet

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.
@ysilvestrov, @valkovnet

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 
@ysilvestrov, @valkovnet

5. ⌛ < 30
Time is counting
@ysilvestrov, @valkovnet

6.  Have tried to do a startup?
 Participated in Hakatons or similar events?
 Is JavaScript/HTML5 expert?
 Is AngularJS/RequireJS expert?
 We’ll try to adapt
How many of you
@ysilvestrov, @valkovnet

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
@ysilvestrov, @valkovnet

8.  A way to write something useful and not
to spend years on it
 Prototyping = Minimum Viable Product
creation
◦ 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
@ysilvestrov, @valkovnet

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:
what we’ve started with
@ysilvestrov, @valkovnet

10.  An ability to quickly alter UI (or create
totally new one) leaving the promotion
mechanic unchanged
 One app to rule them all: from mobiles to
tablets and desktops
 < 24 hours to make it 
Promotion template:
what we’re to use it for
@ysilvestrov, @valkovnet

11.  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
@ysilvestrov, @valkovnet

12.  Plain, vanilla Client-Side JS & HTML5
 No CoffeeScript
 No node.js
Client-side JavaScript
@ysilvestrov, @valkovnet

13.  Use 3-rd party components
 Existing online services
◦ Prefer ones implementing REST interface
 If to create new ones – create them with
REST
 Use dependency managers to integrate
Component development
@ysilvestrov, @valkovnet

14. jQuery and plugins
@ysilvestrov, @valkovnet

15.  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
@ysilvestrov, @valkovnet

16.  Template
 Controller
AngularJS:
template and controller
@ysilvestrov, @valkovnet

17.  Routes
 Events
AngularJS:
routes and events
@ysilvestrov, @valkovnet

18.  Dependency isolation
 Dependency management
 Modules loading & cashing
Visit http://requirejs.org/ for details
RequireJS
@ysilvestrov, @valkovnet

19.  AMD = Asynchronous Module Definition
 CommonJS
See https://github.com/amdjs/amdjs-api
Modules and AMD
@ysilvestrov, @valkovnet

20.  Twitter bootstrap
http://twitter.github.com/bootstrap/
◦ Made for everyone
◦ Packed with features
Bootstrap usage
@ysilvestrov, @valkovnet

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

22. https://github.com/angular/angular-seed
https://github.com/ysilvestrov/angular-seed
Angular Seed
@ysilvestrov, @valkovnet

23.  Use domReady! plugin to start Angular
bootstrap at a time
Requiring Angular:
what’s inside

24.  Do not use “define” for controllers – you’d
to return too much
 Use services to manage controllers
dependencies
Requiring Angular:
what’s inside

25. ???
Questions?
@ysilvestrov, @valkovnet

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