Fast prototyping apps using AngularJS, RequireJS and Twitter Bootstrap

Application in 24hFast prototyping of rich UI applications using

AngularJS, RequireJS, jQuery

by Yuriy V. Silvestrov, Mikhail Valkov

@ysilvestrov, @valkovnet

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.

@ysilvestrov, @valkovnet

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.

@ysilvestrov, @valkovnet

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

@ysilvestrov, @valkovnet

Time is counting

⌛ < 30

@ysilvestrov, @valkovnet

How many of you

Have tried to do a startup?

Participated in Hakatons or similar events?

Is JavaScript/HTML5 expert?

Is AngularJS/RequireJS expert?

We’ll try to adapt

@ysilvestrov, @valkovnet

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

@ysilvestrov, @valkovnet

Prototyping

A way to write something useful and not to spend years on it

Prototyping = Minimum Viable Product creation◦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

@ysilvestrov, @valkovnet

Demo application:what we’ve started with

Alarm clocks with skinning and time synchronization

See on BitBucket:◦http://bitbucket.org/ysilvestrov/alarm-clock

See online demo:◦http://jayostudio.net/app/

@ysilvestrov, @valkovnet

Promotion template:what we’re to use it for

An ability to quickly alter UI (or create totally new one) leaving the promotion mechanic unchanged

One app to rule them all: from mobiles to tablets and desktops

< 24 hours to make it

@ysilvestrov, @valkovnet

How to prototype

Choose platformDownload seed for chosen platformQuick UIChoose vital functionality to prototype Find the frameworks/solutions realizing

the functionalityCompose all together…PROFIT

@ysilvestrov, @valkovnet

Client-side JavaScript

Plain, vanilla Client-Side JS & HTML5

No CoffeeScript

No node.js

@ysilvestrov, @valkovnet

Component development

Use 3-rd party components

Existing online services◦Prefer ones implementing REST interface

If to create new ones – create them with REST

Use dependency managers to integrate

@ysilvestrov, @valkovnet

jQuery and plugins@ysilvestrov, @valkovnet

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

@ysilvestrov, @valkovnet

AngularJS: template and controller

Template

Controller

@ysilvestrov, @valkovnet

AngularJS:routes and events

Routes

Events

@ysilvestrov, @valkovnet

RequireJS

Dependency isolation

Dependency management

Modules loading & cashing

Visit http://requirejs.org/ for details

@ysilvestrov, @valkovnet

Modules and AMD

AMD = Asynchronous Module Definition

CommonJS

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

@ysilvestrov, @valkovnet

Bootstrap usage

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

◦Packed with features

@ysilvestrov, @valkovnet

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

Angular Seed

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

@ysilvestrov, @valkovnet

Requiring Angular:what’s inside

Use domReady! plugin to start Angular bootstrap at a time

Requiring Angular:what’s inside

Do not use “define” for controllers – you’d to return too much

Use services to manage controllers dependencies

Questions?

???

@ysilvestrov, @valkovnet

Thank you! Waiting for your demos

yuriy@silvestrov.com

valkov.net@gmail.com