Your SlideShare is downloading. ×
Quick prototyping apps using JS - Ciklum, Vinnitsa
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Quick prototyping apps using JS - Ciklum, Vinnitsa


Published on

How to fast prototype an application? Why to do it at all? Which components to use? …

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

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Application in 24hQuick prototyping of application using JavaScript by Yuriy V. Silvestrov, Mikhail Valkov
  • 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
  • 3. About usMikhail Valkov10+ years record in IT. 2+ years devoted to systemarchitecture. Now working for Ciklum.for more info contact me
  • 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. ⌛ < 60Time is counting
  • 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.  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.  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.  Alarm clocks with skinning and time synchronization See on BitBucket: ◦ See online demo: ◦ application
  • 10.  What is startup? Act like startup! Implement main idea only Throw away everything elseStartup mode ON
  • 11.  Lack of resources Fast show results If to fail at all – fail fast!Why quick prototyping?
  • 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.  Client-Side JS & HTML5 Development perspective Platform independencyClient-side JavaScript
  • 14.  Use 3-rd party components Existing online services ◦ Prefer ones implementing REST interface Use dependency managers to integrateComponent development
  • 15. JavaScript MVC
  • 16.  85% of WebApps made with jQuery Pros ◦ Modularity ◦ Speed ◦ Small footprint ◦ Json Visit for more detailsjQuery and plugins
  • 17.  One of 20+ MVC JS frameworks Supported by Google Integrated ◦ Templates ◦ Directives and filters ◦ Module systems ◦ Resources ◦ Asynchronous programmingVisit for detailsAngular JS
  • 18.  Dependency isolation Dependency management Modules loading and cashingVisit for detailsRequireJS
  • 19.  AMD = Asynchronous Module Definition CommonJSSee and AMD
  • 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.  Twitter bootstrap ◦ Made for everyone ◦ Packed with featuresBootstrap usage
  • 22.  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
  • 23.  Using media queries Mobile firstResponsive design
  • 24. Seed
  • 25. ???Questions?
  • 26. you!Waiting for your demos