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. At the beginning of December have left Ciklum

to run a PromoRepublic startup as CTO and cofounder.

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?◦Our “marketplace” challenge

JavaScript DSL◦MVC in JavaScript◦AngularJS◦RequireJS, Modules and AMD

Design DSL◦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

Marketplace challenge

In PromoRepublic, we’re creating promos like contests, lotteries etc.

Our backend is complex .NET application based on Azure services

We’d like to open marketplace to sell the promo templates from independent developers

So we need to simplify the process for them, and need simple but powerful way to write the rich UI templates.

@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 do it FAST

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◦Or having JS SDKs

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

Angular JS vs Knockout JS

First of all, it is simpler:<li ng-repeat="tab in tabs" ng-class="isActive(tab.path)"> <a href="#/{{tab.path}}">{{tab.name}}</a></li>vs<!-- ko foreach: navigation.pages --><div class="body row scroll-y" data-bind=" visible: isCurrent, attr: { id: 'content' + id }, template: { name: id, 'if': isLoaded, afterRender: afterRender }"></div><!-- /ko -->

@ysilvestrov, @valkovnet

Angular JS vs Knockout JS

Then, it is faster:

According to jsPerf tests, bindings in Angular 1.6 to 3 times faster than Knockout ones

@ysilvestrov, @valkovnet

Angular JS vs Knockout JS

AngularJS has some nice features right from the box that I haven’t found in knockout

◦Directives, which could be used to create widgets

◦Integrated end to end test framework◦Filters and formatters

@ysilvestrov, @valkovnet

Angular JS pros

Integration with Twitter BootstrapCompanion AngularUI library

AngularJS allows to create an “HTML-based DSL”, which include specific tags to solve specific tasks

@ysilvestrov, @valkovnet

Angular JS cons

Load time◦Load angular + require + jquery + all the

plugins, then load server data, then e.g. sign in to facebook and loaf it’s data – takes some time

Databinding takes place right away, but services are deferred◦If to bind a GUI visible variable to a service

result directly, user will see {{template}} while data loads, so that “double buffering” is needed.

@ysilvestrov, @valkovnet

RequireJS

Dependency isolation

Dependency management

Modules loading & cashing

Visit http://requirejs.org/ for details

@ysilvestrov, @valkovnet

Bootstrap usage

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

◦Packed with features

@ysilvestrov, @valkovnet

Bootstrap usage

Creates a lingua franca for developers and designers, provides a common language telling how the components should behave and look

@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

define(['require', 'lib/angular/angular', 'app', 'lib/angular/angular-ui'],

function(require, angular) { 'use strict'; return require(['lib/require/domReady!'],

function(document) { return angular.bootstrap(document, ['TwitContest']); }); });

@ysilvestrov, @valkovnet

Requiring Angular:practical advices

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

Use services to manage controllers dependencies

@ysilvestrov, @valkovnet

Requiring Angular: cons

The speed of first-time loading is not perfect; so in production minifying and compressing became the must

However, RequireJS needs NodeJS for minification process, which is still not the common part of most architectures

@ysilvestrov, @valkovnet

Rich JS UI approach – twitter trap

Twitter have had the same problem this year

It’s rather architectural then framework one

Standard approach1. Load common GUI template2. Make series of requests to server3. Load required data (pictures etc.)4. Parse the data5. Present it to user

@ysilvestrov, @valkovnet

Rich JS UI approach – twitter trap

Straightforward approach fails because of:◦User doesn’t want to wait seconds while

application is loading data◦If something goes wrong (i.e. one of the

requests fail, or JS error) – nothing is shownSolution:

◦Prerender some data on server side and present it to user right away

◦Redraw data on client side when it’s available

@ysilvestrov, @valkovnet

Questions?

???

@ysilvestrov, @valkovnet

Thank you! Waiting for your demos

yuriy@silvestrov.com

valkov.net@gmail.com