Fast prototyping apps using AngularJS, RequireJS and Twitter Bootstrap

Embed Size (px)

DESCRIPTION

Presentation have been taken at KyivJS conference, 2012

Text of Fast prototyping apps using AngularJS, RequireJS and Twitter Bootstrap

  • 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 atyuriy@silvestrov.com. @ysilvestrov, @valkovnet
  • 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
  • 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? Well 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 youll fail, it would be fast If not, youll 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: http://bitbucket.org/ysilvestrov/alarm-clock See online demo: http://jayostudio.net/app/Demo application:what weve 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 were 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 http://angularjs.org 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 http://requirejs.org/ for detailsRequireJS @ysilvestrov, @valkovnet
  • AMD = Asynchronous Module Definition CommonJSSee https://github.com/amdjs/amdjs-apiModules and AMD @ysilvestrov, @valkovnet
  • Twitter bootstrap http://twitter.github.com/bootstrap/ Made for everyone Packed with featuresBootstrap usage @ysilvestrov, @valkovnet
  • 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
  • https://github.com/angular/angular-seedhttps://github.com/ysilvestrov/angular-seedAngular Seed @ysilvestrov, @valkovnet
  • Use domReady! plugin to start Angular bootstrap at a timeRequiring Angular:whats inside
  • Do not use define for controllers youd to return too much Use services to manage controllers dependenciesRequiring Angular:whats inside
  • ???Questions? @ysilvestrov, @valkovnet
  • yuriy@silvestrov.comvalkov.net@gmail.comThank you!Waiting for your demos