Ptoceti's SPA

Deploy on ...

Deploy on ...

What does it do ?

Open Building Infomation eXchange

• an OASIS standard since 2006
• IBM provide an implementation in Tivoli Power management suite
• in Tridium Niagara AX framwork ...
• Dubai airport, Olympic village & district at Beijing...

Obix: a web service ...

.. inspired from Rest and HATEOAS

• Small object model that can be combined to describe the domain
• Resources identified by URL
• Links between resources
• No fixed url, resources are navigated thought links and hypermedia

Root entry point: the Lobby

/about/ leads to :

Using Backbone: challenge 1

No support for parsing nested models

Backbone provides only for Models or Collection of Models structures.

1. override model : function(attrs, option) in Backbone.Collection
2. and override parse() & implements initialise() in Backbone.Collection

Why do we need nested models ?

Obix responses are structured by Entities :

We map each entity to a model, that allows us to define and use helper functions :

							
								var aboutRef = this.lobby.getAbout().getHref());
							
						

For each Model of known type, re-assigne proper Obix Model

							
								var Objs = Backbone.Collection.extend({
									...
								    model : function(attrs, option) {
								        switch (attrs.type) {
								             case "abstime":
								                 return new Abstime(attrs, option);
								             ...
								        }
								    }
									...
								})
							
						

By default parse() convert response to a hash of attributes, here, we convert it into a Model when appropriate.

							
								var Obj = Backbone.Model.extend({
								    ...
								    parse : function(response, options) {
								       if (response !== null) {
								            ...
								            if (response.childrens !== null)
								               response.childrens = new Objs(response.childrens, {
								               urlRoot : _.result(this, 'urlRoot'),
								               parent : this
								            });
								            ...
								        }
								        return response;
								    },
								    ...
								})
							
						

Using Backbone: challenge 2

No support for nested models event

Events are not generated on nested attributes

1. uses backbone-deep-model
2. or override set() in Backbone.Model

last solution chosen because of the nested nature of Obix models

For each attribute property that is an Model, invoke set() to generate the events.

							
								var Obj = Backbone.Model.extend({
									set: function(key, val, options) {
										...
										 // For each `set` attribute, update or delete the current value.
									     for (attr in attrs) {
									        val = attrs[attr];
									        
									        var type = Object.prototype.toString.call(current[attr]);
									        if( current[attr] instanceof Objs && val instanceof Objs){
									            current[attr].set(val.models,options);
									        } else {
										       ...
									        }
									     }
									     ...
									}
								})
							
						

Using Backbone: challenge 3

Two-way binding

No binding mechanism for generated events betwen DOM element and model

1. Backbone let it to you to install your handlers
2. Many plugins availables from Epoxy.js
3. to Bacbone.ModelBinder to ease the pain

On model initialisation, create a new binder.

							
							initialize : function() {
							    ...
							    // initialize Backbone.ModelBinder for dual binding
							    this.modelbinder = new ModelBinder();
							    ...
							}
							
						

once the view is rendered, bind models attributes to dom elements

							
							onRender : function() {
						        this.modelbinder.bind(this.model, this.el, {
							        count: {selector: '[name=count]'},
							    });
							    ...
							},
							
						

Templating handled by ..

Support expressions, helpers, model attribute mappings, ...

							
								

									

										
{{displayName}}
									
									

									
									

										

									
								
							
						

• {{#if ... }} {{/if}} -> expression with if helper
• {{displayname}} -> mapping of attached model's 'displayName' attribute.

Integration with Marionnette

• Marrionette provides a template cache for compiled templates
• Templates are compiled on demand on the browser and stored in the cache
• Facilitate development, as just need to do refresh on the browser to get a new compiled template

Event driven architecture

Reactive programming

Favor loose coupling between the application components

• Use a event mediator to handle application messages
• use Publish / Subscribe event communication
• One main controller for booting up and application level control
• Lighter messaging using Courier between nested views
• Ease scalability

Example

In header subview, generate event to go to history display ...

							
								var HeaderView = Marionette.ItemView.extend({
								...
								    historyMenuClicked : function() {
								        this.ui.lobbyMenu.parent().removeClass('active');
								        this.ui.watchesMenu.parent().removeClass('active');
								        this.ui.historyMenu.parent().addClass('active');
								        ventAggr.trigger("app:goToHistory");
								...
								});
							
						

... in main app, event is caught and we ask the controller to do something in response

							
								var app = new Marionette.Application();
								
								app.on('start', function() {
								    ...
								    ventAggr.on("app:goToHistory", function() {
								        if( Backbone.history.fragment != "history" ) {
								            Backbone.history.navigate("history", {});
								            app.controller.goToHistory();
								        }
								    });
								    ...
								});
	
							
						

Modular Application

All components (views, controllers, ..) are AMD modules

Require.js used to link them at runtime and optimization phase

• Application loaded peace-meal
• Most important first - user don't have to wait too long
• Resilience

Modular Application

Example: module declaration

							
								define(['backbone', 'marionette', 'underscore', 'eventaggr', 'views/obixview','models/obix', 'models/watcheslocal', 'models/watches'], function(
		Backbone, Marionette, _, ventAggr, ObixView, Obix, WatchesLocal, Watches) {

								    var AppController = Marionette.Controller.extend({
								    ...
								    });

								    return AppController;
								});
							
						

Modular Application

Example: loading a module asynchronously

							
								goToHistory : function() {
								    var controller = this;
								    require(['views/historyview'], function(HistoryView) {
								        controller.obixView.content.show(new HistoryView());
								    });
								}
							
						

AMD loading

Redefine your modules contents

Enter your modules definitions in require.js config inside your grunt.js file (if your are using Grunt)

							
								requirejs: {
								    compile_build: {
								        options: {
								            optimize:"uglify",
								            optimizeCss: "standard",
								            modules : [
								                {name: 'main', include: ["i18n", "text",'courier','moment','mediaenquire','jquery.enterkeyevent']},
								                {name:'views/headerview', exclude: [...]},
								                {name:'views/footerview', exclude: [...]},
								                ...
								            ]
								        }
								    }
								}
							
						

Make the application responsive

• Bootstrap 3 handle responsive grid and css
• Modernizr detect device capabilities ( svg,mq,websocket...) and provides polyfil in some case
• Javascript media queries ( enquire.js) gives the application opportunites to present alternatives components

Example: using Modernizer to test for svg support

							
								if( Modernizr.svg) {
								    var region = this.historyRegion;
								    require(['views/historyrollupchartview'], function(HistoryRollupChartView){
								        ...
								    });
								}
							
						

This avoid sending d3.js + xcharts.js + xcharts.css to the browser if it can't use it.

Project building

we use:

Project layout

Build in a CI environment

We make use of a Jenkins platform at

Simply need to add and configure the NodeJS plugin in 'Administer Jenkins'

Develoment, debugging ...

• Locally Osgi server is started with pax runner
• Embedded Jetty is configured to serve dev portion of js application ( build is minified )
• Then we use Chrome dev tools to map application to source folder. Development and debugging made in Chrome

Develoment, debugging on remote

Server is deployed on target using

• see docker-felix
• and docker-ptoceti

Application js served with npm serve on developemnt machine, make access through CORS to remote server.

Summary

Positive sides of a Backbone stack:

• Communauty around it still vibrant
• Plenty of choices for plugins
• Lightweight library does not get into your way -> very flexible
• Force you to build your application structure
• Integrate well with an AMD structure
• Imperative style vs Declarative (depends where you stand)

Summary

Not so positive sides of a Backbone stack:

• Needs to select your plugins depending on your need ( or use yeoman for a standard stack)
• Backbone force 1 Model per View structure; ( With Angular you can have N Controller/Model per View)
• Model.toJson() used for serialisation to view and to server ( via REST ). Difficulties to display extrat attributes
• No separation between Models and provider. Would be nice to have disconnected Models
• Backbone is not RAD ( if you are in this kind of thing).

Summary

Compare to Angular ?

• Main advantage here is the possibility to load modules asynchronously and on demand.
• Angular actually does not support if ( see Angular.js 2 with Durandal), you need to define new provider: Lazy Loading In AngularJS and Load a module on demand with AngularJS