Successfully reported this slideshow.

Quick prototyping apps using JS - Ciklum, Vinnitsa

766 views

Published on

How to fast prototype an application? Why to do it at all? Which components to use?
Presentation have been taken 16.11 at Ciklum, Vinnitsa

  • Be the first to comment

  • Be the first to like this

Quick prototyping apps using JS - Ciklum, Vinnitsa

  1. 1. Application in 24hQuick prototyping of application using JavaScript by Yuriy V. Silvestrov, Mikhail Valkov
  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.
  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.
  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 
  5. 5. ⌛ < 60Time is counting
  6. 6.  Have tried to do a startup? Have experience with JavaScript/HTML5? Participated in Hakatons or similar events? Is AngularJS/RequireJS expert? We’ll try to adaptHow many of you
  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
  8. 8.  A way to write something useful and not to spend years on it Fits to Minimum Valuable Product approach ◦ 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
  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
  10. 10.  What is startup? Act like startup! Implement main idea only Throw away everything elseStartup mode ON
  11. 11.  Lack of resources Fast show results If to fail at all – fail fast!Why quick prototyping?
  12. 12.  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
  13. 13.  Client-Side JS & HTML5 Development perspective Platform independencyClient-side JavaScript
  14. 14.  Use 3-rd party components Existing online services ◦ Prefer ones implementing REST interface Use dependency managers to integrateComponent development
  15. 15. JavaScript MVC
  16. 16.  85% of WebApps made with jQuery Pros ◦ Modularity ◦ Speed ◦ Small footprint ◦ Json Visit http://jquery.com/ for more detailsjQuery and plugins
  17. 17.  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
  18. 18.  Dependency isolation Dependency management Modules loading and cashingVisit http://requirejs.org/ for detailsRequireJS
  19. 19.  AMD = Asynchronous Module Definition CommonJSSee https://github.com/amdjs/amdjs-apiModules and AMD
  20. 20.  Use advanced CSS and JS Throw away old browsers Build one version of web app for all the devices Responsive design and mobile firstDesign tips
  21. 21.  Twitter bootstrap http://twitter.github.com/bootstrap/ ◦ Made for everyone ◦ Packed with featuresBootstrap usage
  22. 22.  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
  23. 23.  Using media queries Mobile firstResponsive design
  24. 24. https://github.com/angular/angular-seedhttps://github.com/ysilvestrov/angular-seedAngular Seed
  25. 25. ???Questions?
  26. 26. yuriy@silvestrov.comvalkov.net@gmail.comThank you!Waiting for your demos

×