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

557
views

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


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
557
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 atyuriy@silvestrov.com.
  • 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.  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: ◦ http://bitbucket.org/ysilvestrov/alarm-clock See online demo: ◦ http://jayostudio.net/app/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 http://jquery.com/ 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 http://angularjs.org for detailsAngular JS
  • 18.  Dependency isolation Dependency management Modules loading and cashingVisit http://requirejs.org/ for detailsRequireJS
  • 19.  AMD = Asynchronous Module Definition CommonJSSee https://github.com/amdjs/amdjs-apiModules 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 http://twitter.github.com/bootstrap/ ◦ Made for everyone ◦ Packed with featuresBootstrap usage
  • 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.  Using media queries Mobile firstResponsive design
  • 24. https://github.com/angular/angular-seedhttps://github.com/ysilvestrov/angular-seedAngular Seed
  • 25. ???Questions?
  • 26. yuriy@silvestrov.comvalkov.net@gmail.comThank you!Waiting for your demos