Embed Size (px)
DESCRIPTION
Citation preview
Application in 24hQuick prototyping of application using JavaScript
by Yuriy V. Silvestrov, Mikhail Valkov
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].
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].
About lectionBased on our own experience
Useful for startups and pet projects
Divide and conquer
Time is counting
⌛ < 60
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
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
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/
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
Startup mode ON
What is startup?
Act like startup!
Implement main idea only
Throw away everything else
Why quick prototyping?
Lack of resources
Fast show results
If to fail at all – fail fast!
How to prototype
Choose platformDownload seed for chosen platformQuick UIChoose vital functionality to prototype Find the frameworks/solutions realizing
the functionalityCompose all together…PROFIT
Client-side JavaScript
Client-Side JS & HTML5
Development perspective
Platform independency
Component development
Use 3-rd party components
Existing online services◦Prefer ones implementing REST interface
Use dependency managers to integrate
JavaScript MVC
jQuery and plugins
85% of WebApps made with jQuery
Pros◦Modularity◦Speed◦Small footprint◦Json
Visit http://jquery.com/ for more details
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
RequireJS
Dependency isolation
Dependency management
Modules cashing
Visit http://requirejs.org/ for details
Modules and AMD
AMD = Advanced Module Definition
CommonJS
See https://github.com/amdjs/amdjs-api
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
Bootstrap usage
Twitter bootstrap http://twitter.github.com/bootstrap/◦Made for everyone
◦Packed with features
Responsive design
Using media queriesMobile first
Angular Seed
https://github.com/angular/angular-seedhttps://github.com/ysilvestrov/angular-seed
What is next…
Improve our skills
Select simpler task
Real-time coding demo
Questions?
???
Thank you! Waiting for your demos
