Fast prototyping apps using AngularJS, RequireJS and Twitter Bootstrap
Upcoming SlideShare
Loading in...5

Fast prototyping apps using AngularJS, RequireJS and Twitter Bootstrap



Presentation have been taken at KyivJS conference, 2012

Presentation have been taken at KyivJS conference, 2012



Total Views
Views on SlideShare
Embed Views



6 Embeds 96 50 18 13 10 4 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Fast prototyping apps using AngularJS, RequireJS and Twitter Bootstrap Fast prototyping apps using AngularJS, RequireJS and Twitter Bootstrap Presentation Transcript

  • Application in 24h Fast prototyping of rich UI applications using AngularJS, RequireJS, jQuery by Yuriy V. Silvestrov, Mikhail Valkov @ysilvestrov, @valkovnet
  • About usYuriy V. Silvestrov10+ years record in IT, 8+ years devoted to managingprojects. Now working for Ciklum, managing a teamof 30+ persons making different software for Danishfinancial organizations; also I am CTO inPromoRepublic startup.Twitter: @ysilvestrovPlease visit my websitehttp://yuriy.silvestrov.comfor more info or contact me @ysilvestrov, @valkovnet
  • About usMikhail Valkov10+ years record in IT. 2+ years devoted to systemarchitecture. Now working for Ciklum.for more info contact me @ysilvestrov, @valkovnet
  •  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
  • ⌛ < 30Time is counting @ysilvestrov, @valkovnet
  •  Have tried to do a startup? Participated in Hakatons or similar events? Is JavaScript/HTML5 expert? Is AngularJS/RequireJS expert? We’ll try to adaptHow many of you @ysilvestrov, @valkovnet
  •  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&AContent @ysilvestrov, @valkovnet
  •  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 usePrototyping @ysilvestrov, @valkovnet
  •  Alarm clocks with skinning and time synchronization See on BitBucket: ◦ See online demo: ◦ application:what we’ve started with @ysilvestrov, @valkovnet
  •  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
  •  Choose platform Download seed for chosen platform Quick UI Choose vital functionality to prototype Find the frameworks/solutions realizing the functionality Compose all together … PROFITHow to prototype @ysilvestrov, @valkovnet
  •  Plain, vanilla Client-Side JS & HTML5 No CoffeeScript No node.jsClient-side JavaScript @ysilvestrov, @valkovnet
  •  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 integrateComponent development @ysilvestrov, @valkovnet
  • jQuery and plugins @ysilvestrov, @valkovnet
  •  One of 20+ MVC JS frameworks Supported by Google Integrated ◦ Templates ◦ Directives and filters ◦ Module systems ◦ Resources ◦ Asynchronous programmingVisit for detailsAngular JS @ysilvestrov, @valkovnet
  •  Template ControllerAngularJS:template and controller @ysilvestrov, @valkovnet
  •  Routes EventsAngularJS:routes and events @ysilvestrov, @valkovnet
  •  Dependency isolation Dependency management Modules loading & cashingVisit for detailsRequireJS @ysilvestrov, @valkovnet
  •  AMD = Asynchronous Module Definition CommonJSSee and AMD @ysilvestrov, @valkovnet
  •  Twitter bootstrap ◦ Made for everyone ◦ Packed with featuresBootstrap usage @ysilvestrov, @valkovnet
  •  Jasny bootstrap( ◦ Row links, Input mask, File upload ◦ … and much more Kickstrap ( ◦ Bootstrap with blackjack and hookers ◦ actually, with apps and themesTwitter bootstrap extensions @ysilvestrov, @valkovnet
  • Seed @ysilvestrov, @valkovnet
  •  Use domReady! plugin to start Angular bootstrap at a timeRequiring Angular:what’s inside
  •  Do not use “define” for controllers – you’d to return too much Use services to manage controllers dependenciesRequiring Angular:what’s inside
  • ???Questions? @ysilvestrov, @valkovnet
  • you!Waiting for your demos