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 yuriy@silvestrov.com.

About us

Mikhail Valkov10+ years record in IT. 2+ years devoted to system architecture. Now working for Ciklum.

for more info contact me at valkov.net@gmail.com.

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

yuriy@silvestrov.com

valkov.net@gmail.com