Quick prototyping apps using JS - Ciklum, Vinnitsa

26
Application in 24h Quick prototyping of application using JavaScript by Yuriy V. Silvestrov, Mikhail Valkov

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

Transcript of Quick prototyping apps using JS - Ciklum, Vinnitsa

Page 1: Quick prototyping apps using JS - Ciklum, Vinnitsa

Application in 24hQuick prototyping of application using JavaScript

by Yuriy V. Silvestrov, Mikhail Valkov

Page 2: Quick prototyping apps using JS - Ciklum, Vinnitsa

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

Page 3: Quick prototyping apps using JS - Ciklum, Vinnitsa

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: Quick prototyping apps using JS - Ciklum, Vinnitsa

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

Page 5: Quick prototyping apps using JS - Ciklum, Vinnitsa

Time is counting

⌛ < 60

Page 6: Quick prototyping apps using JS - Ciklum, Vinnitsa

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

Page 7: Quick prototyping apps using JS - Ciklum, Vinnitsa

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: Quick prototyping apps using JS - Ciklum, Vinnitsa

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

Page 9: Quick prototyping apps using JS - Ciklum, Vinnitsa

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 10: Quick prototyping apps using JS - Ciklum, Vinnitsa

Startup mode ON

What is startup?

Act like startup!

Implement main idea only

Throw away everything else

Page 11: Quick prototyping apps using JS - Ciklum, Vinnitsa

Why quick prototyping?

Lack of resources

Fast show results

If to fail at all – fail fast!

Page 12: Quick prototyping apps using JS - Ciklum, Vinnitsa

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: Quick prototyping apps using JS - Ciklum, Vinnitsa

Client-side JavaScript

Client-Side JS & HTML5

Development perspective

Platform independency

Page 14: Quick prototyping apps using JS - Ciklum, Vinnitsa

Component development

Use 3-rd party components

Existing online services◦Prefer ones implementing REST interface

Use dependency managers to integrate

Page 15: Quick prototyping apps using JS - Ciklum, Vinnitsa

JavaScript MVC

Page 16: Quick prototyping apps using JS - Ciklum, Vinnitsa

jQuery and plugins

85% of WebApps made with jQuery

Pros◦Modularity◦Speed◦Small footprint◦Json

Visit http://jquery.com/ for more details

Page 17: Quick prototyping apps using JS - Ciklum, Vinnitsa

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: Quick prototyping apps using JS - Ciklum, Vinnitsa

RequireJS

Dependency isolation

Dependency management

Modules loading and cashing

Visit http://requirejs.org/ for details

Page 19: Quick prototyping apps using JS - Ciklum, Vinnitsa

Modules and AMD

AMD = Asynchronous Module Definition

CommonJS

See https://github.com/amdjs/amdjs-api

Page 20: Quick prototyping apps using JS - Ciklum, Vinnitsa

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: Quick prototyping apps using JS - Ciklum, Vinnitsa

Bootstrap usage

Twitter bootstrap http://twitter.github.com/bootstrap/◦Made for everyone

◦Packed with features

Page 22: Quick prototyping apps using JS - Ciklum, Vinnitsa

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

Page 23: Quick prototyping apps using JS - Ciklum, Vinnitsa

Responsive design

Using media queriesMobile first

Page 24: Quick prototyping apps using JS - Ciklum, Vinnitsa

Angular Seed

https://github.com/angular/angular-seedhttps://github.com/ysilvestrov/angular-seed

Page 25: Quick prototyping apps using JS - Ciklum, Vinnitsa

Questions?

???