prototyping app using js and html5 (ciklum kharkiv)
DESCRIPTION
TRANSCRIPT
![Page 1: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/1.jpg)
Application in 24hQuick prototyping of application using JavaScript
by Yuriy V. Silvestrov, Mikhail Valkov
![Page 2: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/2.jpg)
About us
Yuriy V. Silvestrov10+ 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.comfor more info or contact me at [email protected].
![Page 3: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/3.jpg)
About us
Mikhail Valkov10+ years record in IT. 2+ years devoted to system
architecture. Now working for Ciklum.
for more info contact me at [email protected].
![Page 4: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/4.jpg)
About lectionBased on our own experience
Useful for startups and pet projects
Divide and conquer
![Page 5: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/5.jpg)
Time is counting
⌛ < 60
![Page 6: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/6.jpg)
How many of you
Have tried to do a startup?
Have experience with JavaScript/HTML5?
Participated in Hakatons or similar events?
We’ll try to adapt
![Page 7: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/7.jpg)
Content
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
![Page 8: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/8.jpg)
Demo application
Alarm clocks with skinning and time synchronization
See on BitBucket:◦http://bitbucket.org/ysilvestrov/alarm-clock
See online demo:◦http://jayostudio.net/app/
![Page 9: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/9.jpg)
Plans VS Reality
Plans Reality
Write an app in max. 4h
Rewrite JS code right at the demo
Show the code on screen
Spent 24hCode is too complex
to rewrite fastDue to extra
complexity, we’re just to show some fragments; see the rest at BitBucket
![Page 10: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/10.jpg)
Startup mode ON
What is startup?
Act like startup!
Implement main idea only
Throw away everything else
![Page 11: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/11.jpg)
Why quick prototyping?
Lack of resources
Fast show results
If to fail at all – fail fast!
![Page 12: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/12.jpg)
How to prototype
Choose platformDownload seed for chosen platformQuick UIChoose vital functionality to prototype Find the frameworks/solutions realizing
the functionalityCompose all together…PROFIT
![Page 13: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/13.jpg)
Client-side JavaScript
Client-Side JS & HTML5
Development perspective
Platform independency
![Page 14: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/14.jpg)
Component development
Use 3-rd party components
Existing online services◦Prefer ones implementing REST interface
Use dependency managers to integrate
![Page 15: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/15.jpg)
JavaScript MVC
![Page 16: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/16.jpg)
jQuery and plugins
85% of WebApps made with jQuery
Pros◦Modularity◦Speed◦Small footprint◦Json
Visit http://jquery.com/ for more details
![Page 17: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/17.jpg)
Angular JS
One of 20+ MVC JS frameworksSupported by GoogleIntegrated
◦Templates◦Directives and filters◦Module systems◦Resources◦Asynchronous programming
Visit http://angularjs.org for details
![Page 18: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/18.jpg)
RequireJS
Dependency isolation
Dependency management
Modules cashing
Visit http://requirejs.org/ for details
![Page 19: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/19.jpg)
Modules and AMD
AMD = Advanced Module Definition
CommonJS
See https://github.com/amdjs/amdjs-api
![Page 20: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/20.jpg)
Design tips
Use advanced CSS and JS
Throw away old browsers
Build one version of web app for all the devices
Responsive design and mobile first
![Page 21: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/21.jpg)
Bootstrap usage
Twitter bootstrap http://twitter.github.com/bootstrap/◦Made for everyone
◦Packed with features
![Page 22: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/22.jpg)
Responsive design
Using media queriesMobile first
![Page 23: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/23.jpg)
Angular Seed
https://github.com/angular/angular-seedhttps://github.com/ysilvestrov/angular-seed
![Page 24: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/24.jpg)
What is next…
Improve our skills
Select simpler task
Real-time coding demo
![Page 25: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/25.jpg)
Questions?
???
![Page 26: Prototyping app using JS and HTML5 (Ciklum Kharkiv)](https://reader036.vdocuments.net/reader036/viewer/2022081516/54b539774a79594f358b468a/html5/thumbnails/26.jpg)
Thank you! Waiting for your demos