Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fast prototyping apps using AngularJS, RequireJS and Twitter Bootstrap

18,079 views

Published on

Presentation have been taken at KyivJS conference, 2012

  • Be the first to comment

Fast prototyping apps using AngularJS, RequireJS and Twitter Bootstrap

  1. 1. Application in 24h Fast prototyping of rich UI applications using AngularJS, RequireJS, jQuery by Yuriy V. Silvestrov, Mikhail Valkov @ysilvestrov, @valkovnet
  2. 2. 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 atyuriy@silvestrov.com. @ysilvestrov, @valkovnet
  3. 3. About usMikhail Valkov10+ years record in IT. 2+ years devoted to systemarchitecture. Now working for Ciklum.for more info contact me atvalkov.net@gmail.com. @ysilvestrov, @valkovnet
  4. 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. 5. ⌛ < 30Time is counting @ysilvestrov, @valkovnet
  6. 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 adaptHow many of you @ysilvestrov, @valkovnet
  7. 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&AContent @ysilvestrov, @valkovnet
  8. 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 usePrototyping @ysilvestrov, @valkovnet
  9. 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. 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. 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 … PROFITHow to prototype @ysilvestrov, @valkovnet
  12. 12.  Plain, vanilla Client-Side JS & HTML5 No CoffeeScript No node.jsClient-side JavaScript @ysilvestrov, @valkovnet
  13. 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 integrateComponent development @ysilvestrov, @valkovnet
  14. 14. jQuery and plugins @ysilvestrov, @valkovnet
  15. 15.  One of 20+ MVC JS frameworks Supported by Google Integrated ◦ Templates ◦ Directives and filters ◦ Module systems ◦ Resources ◦ Asynchronous programmingVisit http://angularjs.org for detailsAngular JS @ysilvestrov, @valkovnet
  16. 16.  Template ControllerAngularJS:template and controller @ysilvestrov, @valkovnet
  17. 17.  Routes EventsAngularJS:routes and events @ysilvestrov, @valkovnet
  18. 18.  Dependency isolation Dependency management Modules loading & cashingVisit http://requirejs.org/ for detailsRequireJS @ysilvestrov, @valkovnet
  19. 19.  AMD = Asynchronous Module Definition CommonJSSee https://github.com/amdjs/amdjs-apiModules and AMD @ysilvestrov, @valkovnet
  20. 20.  Twitter bootstrap http://twitter.github.com/bootstrap/ ◦ Made for everyone ◦ Packed with featuresBootstrap usage @ysilvestrov, @valkovnet
  21. 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 themesTwitter bootstrap extensions @ysilvestrov, @valkovnet
  22. 22. https://github.com/angular/angular-seedhttps://github.com/ysilvestrov/angular-seedAngular Seed @ysilvestrov, @valkovnet
  23. 23.  Use domReady! plugin to start Angular bootstrap at a timeRequiring Angular:what’s inside
  24. 24.  Do not use “define” for controllers – you’d to return too much Use services to manage controllers dependenciesRequiring Angular:what’s inside
  25. 25. ???Questions? @ysilvestrov, @valkovnet
  26. 26. yuriy@silvestrov.comvalkov.net@gmail.comThank you!Waiting for your demos

×