JS FAST Prototyping with AngularJS & RequireJS

Application in 24h
Fast prototyping of rich UI applications using
AngularJS, RequireJS, jQuery

by Yuriy V. Silvestrov, Mikhail Valkov

@ysilvestrov, @valkovnet

About us

Yuriy V. Silvestrov
10+ 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.com
for more info or contact me at

yuriy@silvestrov.com.


About us

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

for more info contact me at

valkov.net@gmail.com.


 Based on our own About lection
experience

 Useful for startups
and pet projects

 Not the right way, not
the best way, but the
fast one.

 Divide and conquer 


⌛ < 30

Time is counting

 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

How many of you

 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

Content

 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

Prototyping

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

Marketplace challenge

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

Promotion template:
what we’re to use it for

 Choose platform
 Download seed for chosen platform
 Quick UI
 Choose vital functionality to prototype
 Find the frameworks/solutions realizing
the functionality
 Compose all together
 …
 PROFIT

How to do it FAST

 Plain, vanilla Client-Side JS & HTML5

 No CoffeeScript

 No node.js

Client-side JavaScript

 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

Component development

jQuery and plugins

 One of 20+ MVC JS frameworks
 Supported by Google
 Integrated
◦ Templates
◦ Directives and filters
◦ Module systems
◦ Resources
◦ Asynchronous programming

Visit http://angularjs.org for details

Angular 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

<div class="body row scroll-y" data-bind="
visible: isCurrent,
attr: { id: 'content' + id },
template: { name: id, 'if': isLoaded, afterRender:
afterRender }">
</div>


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


 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


 Integration with Twitter Bootstrap
 Companion AngularUI library

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

Angular JS pros

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

Angular JS cons

 Dependency isolation

 Dependency management

 Modules loading & cashing

Visit http://requirejs.org/ for details

RequireJS

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

◦ Packed with features

Bootstrap usage

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

Bootstrap usage

 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

Twitter bootstrap extensions

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

Angular Seed

 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']);
 });
 });

Requiring Angular:
what’s inside

 Do not use “define” for controllers – you’d
to return too much
 Use services to manage controllers
dependencies

Requiring Angular:
practical advices

 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

Requiring Angular: cons

 Twitter have had the same problem this
year
 It’s rather architectural then framework
one
 Standard approach
1. Load common GUI template
2. Make series of requests to server
3. Load required data (pictures etc.)
4. Parse the data
5. Present it to user

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 shown
 Solution:
◦ Prerender some data on server side and
present it to user right away
◦ Redraw data on client side when it’s available

Rich JS UI approach – twitter trap

???

Questions?

yuriy@silvestrov.com

valkov.net@gmail.com

Thank you!
Waiting for your demos

JS FAST Prototyping with AngularJS & RequireJS

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to JS FAST Prototyping with AngularJS & RequireJS (20)

More from Yuriy Silvestrov (8)

JS FAST Prototyping with AngularJS & RequireJS