Jump to: navigation, search

OpenDaylight DLUX:Boron Proposal

Introduction

This is a proposal for changes who will need to be done during Boron cycle. This document will explain the reason of each change, the improvement provided and the impact of it. An example will follow each change to give a visual feedback.

Restructure the file tree

DLUX current file tree, describe it has a simple application with multiple modules. DLUX is not an application by itself. This new file tree put a line beetween DLUX and DLUX apps.

Benefit

  • Better distinction between DLUX Core an DLUX Apps
  • Improve the build process (i.e use compressed assets)

Impact

  • Drastic change of the building process
  • File location change so API change. (Can be easily fixed by adding alias in main.js)

Example

Current file tree Proposal
- Gruntfile.js
- src
 -- app
  --- app.module.js
  --- app.controller.js
  --- core
  --- topology
  --- yangui
 -- assets
 -- common
  --- general
  --- yangui
-- less
-- index.html
-- main.js
-- test-main.js
- Gruntfile.js /* become an aggregator */
- src
 -- apps
  -- app.gruntfile.js /* app logic, external for new because all apps are building as the same */
  -- node
  -- topology
  -- yangui
 -- dlux
  -- dlux.gruntfile.js /* dlux build logic*/
  -- app
   --- app.module.js
   --- app.controller.js
   --- components
    ---- core
    ---- general
    ---- layout
  -- index.html

Move DLUX Core to Typescript

Typescript is a javascript transpiler. It provide many advantage like a OOP design, an EmacScript 6 support, etc.
For more information, visit http://www.typescriptlang.org/

Benefit

  • Java like coding style. Will make the code easier to read for none Javascript developer.
  • Maybe it will help to attract people in DLUX. ODL community is mostly Java developer.
  • Will force us to create an API
  • DLUX module can still be coding in plain Javascript
  • TypeScript can be compile for Requirejs.

Impact

  • Change in the build process

Example

  • requirejs controller file
define(['jqurey'], function($) {
  'use strict';

  var RootNodeCtrl = function($rootScope) {
    $rootScope['section_logo'] = 'assets/images/logo_node.gif';
  };

  RootNodeCtrl.$inject = ['$rootScope'];

  var AllNodesCtrl = function($scope, NodeInventorySvc, $timeout) {
    NodeInventorySvc.getAllNodes().then(function(data) {
      $scope.data = data[0].node;
    });
    var tableRendered = false;
    $scope.$watch('nodeSearch.id', function() {
      if (tableRendered) {
        $timeout(function(){
          $('.footable').trigger('footable_redraw'); //force a redraw
        }, 20);
      }
    });

    $scope.$on('lastentry', function() {
      // Initialize footable table
      if (!tableRendered){
        $('.footable').footable();
        tableRendered = true;
      }
    });
  };
  AllNodesCtrl.$inject = ['$scope', 'NodeInventorySvc', '$timeout'];

  return {
    RootNodeCtrl: RootNodeCtrl,
    AllNodesCtrl: AllNodesCtrl
  };

});
  • Typescript controller file
/// <reference path="typing/angular/angulal.d.ts" />

import $ = require('jquery');

export class RootNodeCtrl {
  static $inject = ['$rootScope'];
  
  constructor (private $rootScope: ng.IRootScopeService) {
    $rootScope['section_logo'] = 'assets/images/logo_node.gif';
  }
}


export class AllNodesCtrl {
  static $inject = ['$scope', 'NodeInventorySvc', '$timeout'];
  constructor(private $scope: ng.IScope, private NodeInventorySvc: InventorySvc, private $timeout: ng.ITimeoutService) {
    NodeInventorySvc.getAllNodes().then(function(data) {
      $scope.data = data[0].node;
    });
    let tableRendered = false;
    $scope.$watch('nodeSearch.id', function() {
      if (tableRendered) {
        $timeout(function(){
          $('.footable').trigger('footable_redraw'); //force a redraw
        }, 20);
      }
    });

    $scope.$on('lastentry', function() {
      // Initialize footable table
      if (!tableRendered){
        $('.footable').footable();
        tableRendered = true;
      }
    });
  }
}

Use bundle instead of lazy load each file

Benefit

  • Performance improvement
  • Good use of assets
  • Remove Loading Bottleneck

Impact

  • Change in the build process
  • External projects MUST have a bundle logic inside their UI feature

Example

<script src="vendor-bundle.js">
<script src="dlux-bundle.js">
<!-- apps bundle -->
<script src="node-bundle.js">
<script src="yangui-bundle.js">
<!-- ends bundle -->
<script src="dlux-bootstraper.js"> <!-- file to embed everything into angularjs context -->