Exploring Predix UI seed

GE China Predix Bootcamp - Day 5

Shanghai foundry front-end team

Required Environment

• Devbox
• CloudFoundry CLI
• NodeJS
• Git
• Sublime Text (or any code editor)

what does seed app offer

• Polymer web app-shell scaffold
• Example Predix UI Components usages
• Express web server connect to Predix services and APIs
• Built-in support of Predix UAA

seed-app overview

BFF - Backend for front-end

• NodeJS
• bower/npm
• Express Web Server

bower vs npm

• non-blocking I/O
• Express middleware
• http-proxy middleware

Express Server

(request) blocking I/O

(request) non-blocking I/O

Middleware functions

• Execute any code
• Make changes to request/response
• End the request-response cycle
• Call the next middleware in stack

Express "hello world"

Express routes

HTTP Proxy Middleware

JSON-Server Middleware

Enable UAA in seed app

• Config UAA for authentication
• Secure Express routes
• Credentials in manifest file for Deploy

  app.use('/login', {...});
  app.use('/api', {...});

  //Use this route to make the entire app secure.  This forces login for any path in the entire app.
  app.use('/', passport.authenticate('main', {
      noredirect: false //Don't redirect a user to the authentication page, just show an error
    }),
    // other middleware
  );

Authenticating All Routes

---
applications:
  - name: predix-ui-seed
    memory: 64M
    buildpack: nodejs_buildpack
    command: node server/app.js
    path: dist
#services:
 # - <your-name>-secure-uaa-instance
 # - <your-name>-timeseries-instance
 # - <your-name>-asset-instance
env:
    node_env: cloud
    uaa_service_label: predix-uaa
    # Add these values for authentication in the cloud
    #clientId: {Enter client ID, e.g. app-client-id, and place it here}
    #base64ClientCredential: {Get clientID:clientSecret then base64 encode and place it here}
    #windServiceURL: "{URL of the microservice <your-name>-winddata-timeseries-service}, e.g.  https://your-name-winddata-timeseries-service.run.asw-usw02-pr.predix.io"

Config manifest

Px UI components
(used in seed app)

• px-app-nav
• px-context-browser
• px-simple-line-chart
• px-simple-horizontal-bar-chart
• px-vis-timeseries
• px-data-table

Time-series chart

• px-rangepicker
• px-vis-data-convertor
• chart features

time-series chart

two time-series format

UI dashboard

• view service hierarchy
• context-browser
• deck-selector

dashboard view hierarchy

dashboard elements

• View – Visual summary of the information displayed in a web application. It consists of one or more decks.
• Deck – Component that supplies simple one-dimensional layout control for cards and components arranged in a specified order.
• Card – Smallest functional unit of the page. You can create interactions between components within an individual card, as well as interactions with other cards based on user context.
• Component – User-interface element that allows you to add concrete features or access services.

dashboard & assets

Application Shell

• Web components
• HTML Import
• Polymer

HTML Import - linking

App Shell - structure

App Shell - bundling

layers of Polymer application

Polymer Web Component

<dom-module id="element-name">

  <template>
    <style>
      /* CSS rules for your element */
    </style>

    <!-- local DOM for your element -->

    <div>{{greeting}}</div> <!-- data bindings in local DOM -->
  </template>

  <script>
    // element registration
    Polymer({
      is: "element-name",
      // add properties and methods on the element's prototype
      properties: {
        // declare properties for the element's public API
        greeting: {
          type: String,
          value: "Hello!"
        }
      }
    });
  </script>

</dom-module>

Predix CSS Framework

• Sass Lang
• Predix Design
• InuitCSS - BEM/ITCSS

SASS - Preprocessing CSS

Predix Design system

ITCSS - Inverted Triangle Cascading Style Sheet

• Objects – class-based selectors which define undecorated design patterns, for example media object known from OOCSS
• Components – specific UI components. This is where majority of our work takes place and our UI components are often composed of Objects and Components
• Trumps – utilities and helper classes with ability to override anything which goes before in the triangle, eg. hide helper class

• Settings – used with preprocessors and contain font, colors definitions, etc.
• Tools – globally used mixins and functions. It’s important not to output any CSS in the first 2 layers.
• Generic – reset and/or normalize styles, box-sizing definition, etc. This is the first layer which generates actual CSS.
• Elements – styling for bare HTML elements (like H1, A, etc.). These come with default styling from the browser so we can redefine them here.

Law of ITCSS

BEM style convention

example: starter-kit-design-demo

example: predix-button-design

Scoped Styling

• Shadow DOM & Scoped Styling
• Shared styles module
• Custom CSS Variables & Mix-ins
• Document-wide Styling

<dom-module id="my-element">

  <template>

    <style>
      :host {
        display: block;
        border: 1px solid red;
      }
      #child-element {
        background: yellow;
      }
      /* styling elements distributed to content (via ::content) requires */
      /* selecting the parent of the <content> element for compatibility with */
      /* shady DOM . This can be :host or a wrapper element. */
      .content-wrapper ::content > .special {
        background: orange;
      }
    </style>

    <div id="child-element">In local DOM!</div>
    <div class="content-wrapper"><content></content></div>

  </template>

  <script>

      Polymer({
          is: 'my-element'
      });

  </script>

</dom-module>

component isolated local styles

<dom-module id="my-toolbar">

  <template>

    <style>
      :host {
        padding: 4px;
        background-color: gray;
      }
      .title {
        color: var(--my-toolbar-title-color);
      }
    </style>

    <span class="title">{{title}}</span>

  </template>

  <script>
    Polymer({
      is: 'my-toolbar',
      properties: {
        title: String
      }
    });
  </script>

</dom-module>

cross-scope styling - variables

<!-- usage -->
<style>
my-toolbar {
  --my-toolbar-theme: {
    /* rules */
  };
  --my-toolbar-title-theme: {
    /* rules */
  };
}
</style>


<dom-module id="my-toolbar">
  <template>
    <style>
      :host {
        padding: 4px;
        background-color: gray;
        /* apply a mixin */
        @apply(--my-toolbar-theme);
      }
      .title {
        @apply(--my-toolbar-title-theme);
      }
    </style>
    <span class="title">{{title}}</span>
  </template>
</dom-module>

cross-scope styling - mixins

<!-- shared-styles.html -->
<dom-module id="shared-styles">
  <template>
    <style>
      .red { color: red; }
    </style>
  </template>
</dom-module>








<!-- import the module  -->
<link rel="import" href="../shared-styles/shared-styles.html">
<dom-module id="x-foo">
  <template>
    <!-- include the style module by name -->
    <style include="shared-styles"></style>
    <style>:host { display: block; }</style>
    Hi
  </template>
  <script>Polymer({is: 'x-foo'});</script>
</dom-module>

shared style module

Data binding (MVVM)

• Declarative data-binding
• Observers v.s. Computed Property
• Control flow in data-binding

<dom-module id="user-view">
  <template>
    <div>[[name]]</div>
  </template>

  <script>
    Polymer({
      is: 'user-view',
      properties: {
        name: String
      }
    });
  </script>
</dom-module>

<!-- usage -->
<user-view name="Samuel"></user-view>

<dom-module id="main-view">

  <template>
    <user-view first="{{user.first}}" 
       last="{{user.last}}"></user-view>
  </template>

  <script>
    Polymer({
      is: 'main-view',
      properties: {
        user: Object
      }
    });
  </script>

</dom-module>

text-binding v.s. property binding

Polymer({

  is: 'x-custom',

  properties: {
    disabled: {
      type: Boolean,
      observer: '_disabledChanged'
    },
    highlight: {
      observer: '_highlightChanged'
    }
  },

  _disabledChanged: function(newValue, oldValue) {
    this.toggleClass('disabled', newValue);
    this.highlight = true;
  },

  _highlightChanged: function() {
    this.classList.add('highlight');
    this.async(function() {
      this.classList.remove('highlight');
    }, 300);
  }

});

Simple Property Observer

Polymer({

  is: 'x-custom',

  properties: {
    preload: Boolean,
    src: String,
    size: String
  },

  observers: [
    'updateImage(preload, src, size)'
  ],

  updateImage: function(preload, src, size) {
    // ... do work using dependent values
  }

});

Complex Property Observer

<dom-module id="x-deep-observer">
  <template>
    <input value="{{user.name.first::input}}"
           placeholder="First Name">
    <input value="{{user.name.last::input}}"
           placeholder="Last Name">
  </template>
  <script>
    Polymer({
      is: 'x-deep-observer',
      properties: {
        user: {
          type: Object,
          value: function() {
            return {'name':{}};
          }
        }
      },
      observers: [
        'userNameChanged(user.name.*)'
      ],
      userNameChanged: function(changeRecord) {
        console.log('path: ' + changeRecord.path);
        console.log('value: ' + changeRecord.value);
      },
    });
  </script>
</dom-module>

Deep Property Observer

<dom-module id="name-card">
  <template>
    <div>[[name.first]] [[name.last]]</div>
  </template>
  <script>Polymer({ is: 'name-card' });</script>
</dom-module>

Data flow within element itself

<dom-module id="user-profile">
  <template>
    …
    <address-card
        address="{{primaryAddress}}"></address-card>
  </template>
  …
</dom-module>

Data flow between elements

routing & page-flow

• app-location & app-route
• px-view 
• HTML5 history API

URL and View Routing

<!-- proxy to window.location -->
<app-location
  route="{{_route}}">
</app-location>

<!-- match URL segment and convert to data -->
<app-route
  route="[[_route]]"
  pattern="/:page"
  data="{{routeData}}">
</app-route>

<!-- select the view that matches route to display -->
<template is="dom-repeat" items="[[_routePages]]">
  <px-view
    active="[[_equals(routeData.page, item.page)]]"
    element-href="[[item.elementHref]]">
  </px-view>
</template>

Build the seed app

• build system
• gulp-sass
• gulp-vulcanizer

build system

gulp-sass task

gulp-vulcanizer

gulp.task('vulcanize', function() {
  return gulp.src('app/elements/elements.html')
    .pipe(vulcanize({
      stripComments: true,
      inlineScripts: true,
      inlineCss: true
    }))
    .pipe(gulp.dest('dist/elements'));
});

Deploy the seed app

• CF Deploy
• Jenkins CI integration

---
applications:
  - name: predix-ui-app
    memory: 64M
    buildpack: nodejs_buildpack
    command: node server/app.js

#services:
 # - <your-name>-secure-uaa-instance
 # - <your-name>-timeseries-instance
 # - <your-name>-asset-instance
env:
    node_env: cloud
    uaa_service_label : predix-uaa
    # Add these values for authentication in the cloud
    #clientId: {Enter client ID, e.g. app-client-id, and place it here}
    #base64ClientCredential: dWFhLWNsaWVudC1pZDp1YWEtY2xpZW50LWlkLXNlY3JldA==
    #windServiceURL: "{URL of the microservice <your-name>-winddata-timeseries-service}, e.g.  https://your-name-winddata-timeseries-service.run.asw-usw02-pr.predix.io"

http://docs.cloudfoundry.org/buildpacks/node

Nodejs buildpack

Jenkins CI build

Jenkins CI build log

Q & A