quick prototyping apps using js - ciklum, vinnitsa
DESCRIPTION
How to fast prototype an application? Why to do it at all? Which components to use? Presentation have been taken 16.11 at Ciklum, VinnitsaTRANSCRIPT
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; also I am CTO in PromoRepublic startup.
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
Not the right way, not the best way, but the fast one.
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?
Is AngularJS/RequireJS expert?
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
Prototyping
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 use
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/
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 loading and cashing
Visit http://requirejs.org/ for details
Modules and AMD
AMD = Asynchronous 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
Twitter bootstrap extensions
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 themes
@ysilvestrov, @valkovnet
Responsive design
Using media queriesMobile first
Angular Seed
https://github.com/angular/angular-seedhttps://github.com/ysilvestrov/angular-seed
Questions?
???
Thank you! Waiting for your demos