Application in 24hQuick prototyping of application using JavaScript            by Yuriy V. Silvestrov, Mikhail Valkov
About usYuriy V. Silvestrov10+ years record in IT, 8+ years devoted to managingprojects. Now working for Ciklum, managing ...
About usMikhail Valkov10+ years record in IT. 2+ years devoted to systemarchitecture. Now working for   Ciklum.for more in...
   Based on our own       About lection    experience   Useful for startups    and pet projects   Divide and conquer 
⌛ < 60Time is counting
   Have tried to do a startup?   Have experience with JavaScript/HTML5?   Participated in Hakatons or similar    events...
   Startup mode ON    ◦ When do we need quick prototyping?    ◦ How to quick prototype an app?   JavaScript tricks    ◦ ...
   Alarm clocks with skinning and time    synchronization   See on BitBucket:    ◦ http://bitbucket.org/ysilvestrov/alar...
Plans                     Reality Write an app in max.       Spent 24h  4h                         Code is too complex...
   What is startup?   Act like startup!   Implement main idea only   Throw away everything elseStartup mode ON
   Lack of resources   Fast show results   If to fail at all – fail fast!Why quick prototyping?
   Choose platform   Download seed for chosen platform   Quick UI   Choose vital functionality to prototype   Find th...
   Client-Side JS & HTML5   Development perspective   Platform independencyClient-side JavaScript
   Use 3-rd party components   Existing online services    ◦ Prefer ones implementing REST interface   Use dependency m...
JavaScript MVC
   85% of WebApps made with jQuery   Pros    ◦   Modularity    ◦   Speed    ◦   Small footprint    ◦   Json    Visit htt...
   One of 20+ MVC JS frameworks   Supported by Google   Integrated    ◦   Templates    ◦   Directives and filters    ◦ ...
   Dependency isolation   Dependency management   Modules cashingVisit http://requirejs.org/ for detailsRequireJS
   AMD = Advanced Module Definition   CommonJSSee https://github.com/amdjs/amdjs-apiModules and AMD
   Use advanced CSS and JS   Throw away old browsers   Build one version of web app for all the    devices   Responsiv...
   Twitter bootstrap    http://twitter.github.com/bootstrap/    ◦ Made for everyone    ◦ Packed with featuresBootstrap us...
 Using media queries Mobile firstResponsive design
https://github.com/angular/angular-seedhttps://github.com/ysilvestrov/angular-seedAngular Seed
   Improve our skills   Select simpler task   Real-time coding demoWhat is next…
???Questions?
yuriy@silvestrov.comvalkov.net@gmail.comThank you!Waiting for your demos
Upcoming SlideShare
Loading in …5
×

Prototyping app using JS and HTML5 (Ciklum Kharkiv)

1,137 views

Published on

Published in: Technology
3 Comments
0 Likes
Statistics
Notes
  • @narakashi It means that once loaded, modules are stored in some kind of cache, built upon localStorage or similar. I.e. next time they will not be requested from server.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • What is Module Cashing?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Haven't found a way to reload fixed presentation, so please read 'AMD = Asynchronous Module Definition' instead of 'AMD = Advanced Module Definition'
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
1,137
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
3
Likes
0
Embeds 0
No embeds

No notes for slide

Prototyping app using JS and HTML5 (Ciklum Kharkiv)

  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.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 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? 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.  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
  9. 9. Plans Reality Write an app in max.  Spent 24h 4h  Code is too complex Rewrite JS code right to rewrite fast at the demo  Due to extra Show the code on complexity, we’re just screen to show some fragments; see the rest at BitBucketPlans VS Reality
  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 cashingVisit http://requirejs.org/ for detailsRequireJS
  19. 19.  AMD = Advanced 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.  Using media queries Mobile firstResponsive design
  23. 23. https://github.com/angular/angular-seedhttps://github.com/ysilvestrov/angular-seedAngular Seed
  24. 24.  Improve our skills Select simpler task Real-time coding demoWhat is next…
  25. 25. ???Questions?
  26. 26. yuriy@silvestrov.comvalkov.net@gmail.comThank you!Waiting for your demos

×