SKYLINE UI



Build Tools and Processes

Theme

Small independent modules

  • Testable
  • Runnable
  • Mockable
  • Versioned
  • Trackable
  • Maintainable

Examples: underscore, moment, jquery, 
and even angularJS itself


Angularjs modules



angular.js modules

  • Dependency injection at it's core
  • Applications are made up of modules
  • Modules can be component libraries
  • Modules can be whole features
  • Modules can even be whole applications 
  • Modules can be worked on separately
    • Separate repositories
    • Versioned
    • Testable
    • Mockable

EMC-ui = A module

  • buttons
  • icons
  • menus
  • tabs
  • lists
  • forms
  • styles
  • more...

 

whole features = Modules


Skyline UI is a thin container for various modules

  • Login
  • User Management
  • Dashboard
  • Search 
  • Monitoring
  • Cluster Management
  • Policy Management
  • many more ...

Example: Login

 
emc.angular.login
  • install it
  • customize it
  • use it


example: dashboard


many small repos


bower


A Package Manager for the Web

bower is like yum/apt-get

  • manages client-side javascript dependencies
  • installed through npm
  • runs on nodeJS
  • runs over git
  • created by twitter ( open sourced )

which millions?

  1. jquery
  2. angularjs
  3. underscore
  4. 14,700 registered gui packages

A look at bower.json

 {
  "name": "hyperv-flr",
  "version": "0.1.2",
  "dependencies": {
    "angular": "1.2.6",
    "jquery": "~1.10.2",
    "emc-ui": "http://stash.lss.emc.com/gui/emc-ui#0.1.12",
    "emc-angular-login": "http://stash.lss.emc.com:gui/emc-login#0.1.4"
  },
  "devDependencies": {
    "angular-mocks": "1.2.6",
    "angular-scenario": "1.2.6"
  }
}

install ALL the dependencies listed in bower.json
bower install 

grunt - build tool


overview

  • Runs on NodeJS
  • Grunt itself really useless
  • Plugins provide the functionality
  • JSON based config
  • Define tasks
  • Run tests
  • Aggregate and minify ( js, html, css, images )
  • Cache busting
  • Git Tagging
  • Upload to nexus
  • Build Mobile


grunt config example

Define a task within a plugin
karma: {
   unit: {
       configFile: 'karma.conf.js',
       singleRun: true
   },
   ...more task definitions...
> grunt karma:unit
Execute multiple tasks
grunt.registerTask('release', 
   [ 'clean', 'build', 'copy:release', 'ngtemplates', 'karma:release' ]
); 
> grunt release
An example GruntFile.js

Result of build ( for web )

built GUI code copied into /dist

release as bower module

Built files and other resources moved to /release
git tag uses semantic versioning  1.0.1
References to released files added to bower.json
{   "name": "emc-ui",
    "version": "1.0.0",
    "main": [
        "release/emc-ui.min.js",
        "release/styles/emc-ui-bootstrap.min.css"
    ],
            

Node.js modules



node.JS in skyline

  • Enables smaller more agile teams
    • The pattern is to build isolated testable, mockable, components
  • Build an internal library of small reusable components
    • Using the popular Github model
    • Really about the tools

how do we use node in skyline?

As a server
  • As a proxy for the public rest api(s)
  • To manipulate and munge JSON
  • To store and retrieve user preferences
  • To track the user's web session
  • WebSockets
As a development tool
  • GRUNT ( our build tool )
  • KARMA ( our test runner )
  • It's a mocking layer
  • It's our development server too

Node is already being used

Harmony HyperV FLR we use Node for REST

node.js build

Not necessary to aggregate, minify javascript for nodeJS
  • Run Mocha Tests ( Unit and REST )
  • Run JSHINT
  • Package.json is the module definition
  • semantic versioning 1.x.x
  • Tag is same as GUI release
  • Grunt keeps tags in synch


NPM ( Node package manager )


dpad's private github

Currently has 40+ modules
GUI Modules
  • emc-ui
  • emc-angular-login
  • emc-angular-utils
  • emc-hypervflr-gui
  • ...
Node Middleware
  • emc-base-server
  • emc-rest-login
  • emc-harmony-auth
  • emc-rest-hypervflr
  • ...

package.json

 {
  "name": "emc-rest-hypervflr",
  "private": true,
  "description": "REST for hypervflr",
  "version": "0.0.1",
  "dependencies": {
    "emc-base-server": "ucas-stash.lss.emc.com/raven/emc-base-server.git",
    "emc-rest-login": "ucas-stash.lss.emc.com/raven/emc-rest-login.git",
    "emc-harmony-auth": "ucas-stash.lss.emc.com/raven/emc-harmony-auth.git",
    "underscore": "~1.6.0",
    ...
  },
  "devDependencies": {
     ....

private npm registry

Installed behind the firewall
Caching from official npm registry



Many small git repos


git drives our workflow

  • Bower
  • Npm
  • Pull Requests
  • Tagged dependencies
  • Branch naming schemes
  • All development in branches
  • Branch away.  No approval necessary!
  • No down time - No single point of failure
  • Stash is approved by PSO

continuous integration


cI - Many small jobs

All gui modules have their own CI jobs




Triggers:

  • Merge request ( run pre-test )
  • Code change
  • Manual trigger

Tasks:

  • Build
  • Run tests ( Karma, Mocha, Protractor )
  • Check code coverage benchmarks ( 70% )
  • On success, publish to web server

gui module visibility

Once the build passes, they are published
Visible, Runnable, Reviewable!

Restore = http://skyline-ui-restore.lss.emc.com/
Dashboard = http://skyline-ui-dashboard.lss.emc.com/
Skyline UI = http://skyline-ui.lss.emc.com/
...many more to come...

our ci build monitor

Kiosk Soon Come


theme (reprise)

Small independent modules

  • Testable
  • Runnable
  • Mockable
  • Versioned
  • Trackable
  • Maintainable

the end

Build Advocacy Presentation

By Dehru Cromer

Build Advocacy Presentation

  • 832