Prototyping app using JS and HTML5 (Ciklum Kharkiv)

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 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

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

yuriy@silvestrov.com

valkov.net@gmail.com