JS FAST Prototyping with AngularJS & RequireJS. From #kharkivjs conference

1. Application in 24h
Fast prototyping of rich UI applications using
AngularJS, RequireJS, jQuery
by Yuriy V. Silvestrov, Mikhail Valkov
@ysilvestrov, @valkovnet

2. 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.
@ysilvestrov, @valkovnet

3. 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.
@ysilvestrov, @valkovnet

4.  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 
@ysilvestrov, @valkovnet

5. ⌛ < 30
Time is counting
@ysilvestrov, @valkovnet

6.  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
@ysilvestrov, @valkovnet

7.  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
@ysilvestrov, @valkovnet

8.  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
@ysilvestrov, @valkovnet

9.  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
@ysilvestrov, @valkovnet

10.  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
@ysilvestrov, @valkovnet

11.  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
@ysilvestrov, @valkovnet

12.  Plain, vanilla Client-Side JS & HTML5
 No CoffeeScript
 No node.js
Client-side JavaScript
@ysilvestrov, @valkovnet

13.  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
@ysilvestrov, @valkovnet

14. jQuery and plugins
@ysilvestrov, @valkovnet

15.  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
@ysilvestrov, @valkovnet

16.  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 -->
Angular JS vs Knockout JS
@ysilvestrov, @valkovnet

17.  Then, it is faster:
 According to jsPerf tests, bindings in
Angular 1.6 to 3 times faster than
Knockout ones
Angular JS vs Knockout JS
@ysilvestrov, @valkovnet

18.  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
Angular JS vs Knockout JS
@ysilvestrov, @valkovnet

19.  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
@ysilvestrov, @valkovnet

20.  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
@ysilvestrov, @valkovnet

21.  Dependency isolation
 Dependency management
 Modules loading & cashing
Visit http://requirejs.org/ for details
RequireJS
@ysilvestrov, @valkovnet

22.  Twitter bootstrap
http://twitter.github.com/bootstrap/
◦ Made for everyone
◦ Packed with features
Bootstrap usage
@ysilvestrov, @valkovnet

23.  Creates a lingua franca for developers and
designers, provides a common language
telling how the components should
behave and look
Bootstrap usage
@ysilvestrov, @valkovnet

24.  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
@ysilvestrov, @valkovnet

25. https://github.com/angular/angular-seed
https://github.com/ysilvestrov/angular-seed
Angular Seed
@ysilvestrov, @valkovnet

26.  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
@ysilvestrov, @valkovnet

27.  Do not use “define” for controllers – you’d
to return too much
 Use services to manage controllers
dependencies
Requiring Angular:
practical advices
@ysilvestrov, @valkovnet

28.  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
@ysilvestrov, @valkovnet

29.  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
@ysilvestrov, @valkovnet

30.  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
@ysilvestrov, @valkovnet

31. ???
Questions?
@ysilvestrov, @valkovnet

32. yuriy@silvestrov.com
valkov.net@gmail.com
Thank you!
Waiting for your demos