Yuriy Silvestrov and Mikhail Valkov presented a method for fast prototyping of rich user interface applications using AngularJS, RequireJS, jQuery. They discussed dividing projects into modules and components to manage dependencies and isolate code. They recommended using frameworks like Bootstrap and its extensions for responsive design templates. The presentation provided examples of prototyping an alarm clock app in under 24 hours and discussed questions on integrating Angular, RequireJS and other JavaScript tools.

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