Embed Size (px)
DESCRIPTION
Presentation have been taken at KyivJS conference, 2012
Citation preview
Application in 24hFast prototyping of rich UI applications using
AngularJS, RequireJS, jQuery
by Yuriy V. Silvestrov, Mikhail Valkov
@ysilvestrov, @valkovnet
About us
Yuriy V. Silvestrov10+ 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.comfor more info or contact me at [email protected].
@ysilvestrov, @valkovnet
About us
Mikhail Valkov10+ years record in IT. 2+ years devoted to system architecture. Now working for Ciklum.
for more info contact me at [email protected].
@ysilvestrov, @valkovnet
About lectionBased on our own experience
Useful for startups and pet projects
Not the right way, not the best way, but the fast one.
Divide and conquer
@ysilvestrov, @valkovnet
Time is counting
⌛ < 30
@ysilvestrov, @valkovnet
How many of you
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
@ysilvestrov, @valkovnet
Content
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
@ysilvestrov, @valkovnet
Prototyping
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
@ysilvestrov, @valkovnet
Demo application:what we’ve started with
Alarm clocks with skinning and time synchronization
See on BitBucket:◦http://bitbucket.org/ysilvestrov/alarm-clock
See online demo:◦http://jayostudio.net/app/
@ysilvestrov, @valkovnet
Promotion template:what we’re to use it for
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
@ysilvestrov, @valkovnet
How to prototype
Choose platformDownload seed for chosen platformQuick UIChoose vital functionality to prototype Find the frameworks/solutions realizing
the functionalityCompose all together…PROFIT
@ysilvestrov, @valkovnet
Client-side JavaScript
Plain, vanilla Client-Side JS & HTML5
No CoffeeScript
No node.js
@ysilvestrov, @valkovnet
Component development
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
@ysilvestrov, @valkovnet
jQuery and plugins@ysilvestrov, @valkovnet
Angular JS
One of 20+ MVC JS frameworksSupported by GoogleIntegrated
◦Templates◦Directives and filters◦Module systems◦Resources◦Asynchronous programming
Visit http://angularjs.org for details
@ysilvestrov, @valkovnet
AngularJS: template and controller
Template
Controller
@ysilvestrov, @valkovnet
AngularJS:routes and events
Routes
Events
@ysilvestrov, @valkovnet
RequireJS
Dependency isolation
Dependency management
Modules loading & cashing
Visit http://requirejs.org/ for details
@ysilvestrov, @valkovnet
Modules and AMD
AMD = Asynchronous Module Definition
CommonJS
See https://github.com/amdjs/amdjs-api
@ysilvestrov, @valkovnet
Bootstrap usage
Twitter bootstrap http://twitter.github.com/bootstrap/◦Made for everyone
◦Packed with features
@ysilvestrov, @valkovnet
Twitter bootstrap extensions
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
@ysilvestrov, @valkovnet
Angular Seed
https://github.com/angular/angular-seedhttps://github.com/ysilvestrov/angular-seed
@ysilvestrov, @valkovnet
Requiring Angular:what’s inside
Use domReady! plugin to start Angular bootstrap at a time
Requiring Angular:what’s inside
Do not use “define” for controllers – you’d to return too much
Use services to manage controllers dependencies
Questions?
???
@ysilvestrov, @valkovnet
Thank you! Waiting for your demos
