DPAS web tech

A stack of modern tools

Theme

Small independent modules

Testable
Runnable
Mockable
Versioned
Trackable
Maintainable

Examples: underscore, moment, jquery,

and even angularJS itself

angularjs

“It is what HTML would have been,

had it been built for dynamic content.”

angularJS

why is angular so popular

Reduces boiler plate associated with updating the dom
Good separation of model and view ( MVVM )
Module system
Dependency injection
Testing support is built in
Just enough structure, yet flexible
Create your own html tags

<emc-graphic>, <emc-list>, <emc-guided-ui>, ...

Developed by Google to speed up development
Open-sourced in 2011

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

http://emc-ui.lss.emc.com

buttons
icons
menus
tabs
lists
forms
styles
more...

whole features = Modules

Skyline UI/Raptor UI are thin containers

for many AngularJS Modules

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

Example: Login

emc-login

install it
customize it
use it

example: raptor dashboard

many small repos

bower

A Package Manager for the Web

bower is like yum/apt-get

(but for browser development!)

manages client-side javascript dependencies
runs on nodeJS
talks to git
created by twitter ( open sourced )

which millions?

jquery
angularjs
underscore
28,000 + 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.x",
    "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

Node.js

What is node.js ?

Javascript runtime ( shell, utilities, apps, server )
Node.js on the server replaces Java running in Tomcat, for example
Made possible by Google's V8 javascript runtime

V8 is the engine inside Chrome browser

Project started in 2009, released in 2011 (MIT license)
Today it's very active open source project : 548 contributors on github
Written in C/C++ (downloadable binaries available for all popular OSes)
Small core, large number of libraries (175K libraries, 2 billion library downloads last month)

What can you do with NODE?

Basics (File IO, Network IO, TCP,UDP,HTTP, REST,...)
Database drivers (Mongo, Couch, Cassandra,...)
Message bus drivers (AMQP, JMS)
Execute java byte code (node java bridge)
Unit test frameworks (Mocha, Jasmine)
Code test coverage (Istanbul)
Static code analysis (JSHint)
Build automation (Grunt)
Robotics (NodeBots, Cylon.js)
Home Automation
much more...

Who is using node?

comparing web tech growth

Why is node so popular

For better or worse, javascript is the most popular programming language on the planet
Built-in HTTP server
Excellent package management (NPM)
Speed of development (quick development loop)

So says LinkedIn, Ebay, Walmart

Big active community

tons of on-line resources, community meetups, etc.

What node is really good at:

Basic web application plumbing : Handling HTTP requests, request parameters, manipulating JSON, sessions, ...
Building fast scalable network applications without thinking too hard
No threads to manage
As a programmer, you interact with the node.js runtime in a single-threaded way (i.e. every API is asynchronous)
Concurrency is handled by node.js kernel
Same technique as Nginx HTTP server

performance at walmart

performance at paypal

NodeJS vs Java at Paypal

how do we use node in skyline/raptor?

As a server-side runtime

As a proxy for various rest apis
To manipulate and munge JSON
To store and retrieve data in JSON database
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.JS

Is An API Adapter

And a Swiss Army Knife

NPM ( Node package manager )

NPM

175K total libraries and growing
2 billion library downloads last month
packages install into a node_modules directory
can interact directly with git
semver
npm private repo ( sinopia )
ucas-npm.lss.emc.com

dpad's private github

Currently has 100+ 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": {
     ....

The yeoman generator

The Web's Scaffolding Tool For Modern Webapps

webtier yeoman generator

Quickly scaffold a new gui module

Standardized build settings
Version and release support
Handles module integrations
AngularJS best practices baked in
NodeJS / Express routing
Karma, Mocha, JsHint, Sass
Module consistency
Follows very popular open-source
patterns and standards that should be
familiar to experienced web developers