Downloaded 18 times
Uploaded byYuriy Silvestrov
Prototyping app using JS and HTML5 (Ciklum Kharkiv)
The document discusses quick prototyping of applications using JavaScript within 24 hours, providing an overview of the speakers' backgrounds and experiences and outlining topics like startup mode, JavaScript techniques including MVC, modules and responsive design, and demonstrating a sample alarm clock application created using these techniques. The presentation discusses plans to develop the demo within 4 hours that did not come to fruition due to additional complexity, instead showing code fragments and the full code on BitBucket.
Prototyping app using JS and HTML5 (Ciklum Kharkiv)
- 1. Application in 24h Quickprototyping of application using JavaScript by Yuriy V. Silvestrov, Mikhail Valkov
- 2. About us Yuriy V.Silvestrov 10+ years record in IT, 8+ years devoted to managing projects. Now working for Ciklum, managing a team of 30+ persons making different software for Danish financial organizations. Twitter: @ysilvestrov Please visit my website http://yuriy.silvestrov.com for more info or contact me at yuriy@silvestrov.com.
- 3. About us Mikhail Valkov 10+years record in IT. 2+ years devoted to system architecture. Now working for Ciklum. for more info contact me at valkov.net@gmail.com.
- 4. Based on our own About lection experience Useful for startups and pet projects Divide and conquer
- 5. ⌛ < 60 Timeis counting
- 6. Have tried to do a startup? Have experience with JavaScript/HTML5? Participated in Hakatons or similar events? We’ll try to adapt How 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&A Content
- 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. 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 BitBucket Plans VS Reality
- 10. What is startup? Act like startup! Implement main idea only Throw away everything else Startup 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 … PROFIT How to prototype
- 13. Client-Side JS & HTML5 Development perspective Platform independency Client-side JavaScript
- 14. Use 3-rd party components Existing online services ◦ Prefer ones implementing REST interface Use dependency managers to integrate Component development
- 15.
- 16. 85% of WebApps made with jQuery Pros ◦ Modularity ◦ Speed ◦ Small footprint ◦ Json Visit http://jquery.com/ for more details jQuery and plugins
- 17. One of 20+ MVC JS frameworks Supported by Google Integrated ◦ Templates ◦ Directives and filters ◦ Module systems ◦ Resources ◦ Asynchronous programming Visit http://angularjs.org for details Angular JS
- 18. Dependency isolation Dependency management Modules cashing Visit http://requirejs.org/ for details RequireJS
- 19. AMD = Advanced Module Definition CommonJS See https://github.com/amdjs/amdjs-api Modules 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 first Design tips
- 21. Twitter bootstrap http://twitter.github.com/bootstrap/ ◦ Made for everyone ◦ Packed with features Bootstrap usage
- 22. Using mediaqueries Mobile first Responsive design
- 23.
- 24. Improve our skills Select simpler task Real-time coding demo What is next…
- 25.
- 26.