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?
- jquery
- angularjs
- underscore
- 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