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.

Quick prototyping apps using JS - Ciklum, Vinnitsa

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

  • Login to see the comments

  • 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

×