Enterprise UI FrameworksMatt Kesler | March 2015

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Introductions

CapTech  Digital  Solutions  http://capte.ch/digital

Matt  Kesler  Engineering  Lead

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Locations Richmond Charlotte Philadelphia Washington, D.C. National

CapTech

Results Multi-digit revenue growth since start in 1997 Focus on Fortune 500 and state government A Top 10 “Best Firm to Work For” byConsulting Magazine (2013) Solutions across Financial Services,Healthcare, State Government,and Retail sectors

At CapTech, we design, manage and integrate information technology solutions for America’s most respected businesses. With practice areas in IT management consulting, systems integration, data management, and customer experience, we possess all the expertise of better-known national firms.

Employment Over 500 salaried employees, with an average of 9+ years consulting experience

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Agenda

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Agenda

Large  Scale  Front  End  Development

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Agenda

Enterprise  Components

Large  Scale  Front  End  Development

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Agenda

Large  Scale  Front  End  Development

Angular  Example

Enterprise  Components

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Current State

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Current State

The  Web  is  Evolving

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Current State

The  Web  is  Evolving

One  Design  —>  Multiple  Implementations

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Current State

The  Web  is  Evolving

One  Design  —>  Multiple  Implementations

Hard  to  Share  Things  Intelligently  Across  Teams

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Sharing is Hard

Challenges

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Sharing is Hard

Communication

Challenges

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Sharing is Hard

Communication Organization

Challenges

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Sharing is Hard

Communication TechnologyOrganization

Challenges

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Sharing is Hard

Communication TechnologyOrganization

Challenges

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Which Leads To

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Which Leads To

Visual  Inconsistencies

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Which Leads To

Visual  Inconsistencies

Functional  Differences

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Which Leads To

Visual  Inconsistencies

Functional  Differences

Wasted  Development  Time  /  Resources

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Which Leads To

Visual  Inconsistencies

Functional  Differences

Wasted  Development  Time  /  Resources

Multiple  Architectures  &  Approaches

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Which Leads To

Visual  Inconsistencies

Functional  Differences

Wasted  Development  Time  /  Resources

Multiple  Architectures  &  Approaches

Increased  Maintenance  Cost

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Existing Solutions

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Existing Solutions

Enterprise  Style  Guide

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Existing Solutions

Enterprise  Style  Guide

Pattern  Lab  /  Atomic  Design

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Existing Solutions

Enterprise  Style  Guide

UI  Frameworks  (Bootstrap,  etc)

Pattern  Lab  /  Atomic  Design

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Existing Solutions

Enterprise  Style  Guide

UI  Frameworks  (Bootstrap,  etc)

Good  Starting  Point

Pattern  Lab  /  Atomic  Design

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Sharing has Advantages

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Sharing has Advantages

Consistent  Look  and  Feel

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Sharing has Advantages

Consistent  Look  and  Feel

Code  Reuse

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Sharing has Advantages

Consistent  Look  and  Feel

Ease  of  Implementation

Code  Reuse

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Sharing has Advantages

Consistent  Look  and  Feel

Ease  of  Implementation

One  Team  Making  Decisions  and  Controlling  the  Important  Stuff

Code  Reuse

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Sharing has Advantages

Consistent  Look  and  Feel

Ease  of  Implementation

One  Team  Making  Decisions  and  Controlling  the  Important  Stuff

Accessibility

Code  Reuse

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Sharing has Advantages

Consistent  Look  and  Feel

Ease  of  Implementation

One  Team  Making  Decisions  and  Controlling  the  Important  Stuff

Accessibility Functionality

Code  Reuse

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Sharing has Advantages

Consistent  Look  and  Feel

Ease  of  Implementation

One  Team  Making  Decisions  and  Controlling  the  Important  Stuff

Accessibility Functionality Responsive

Code  Reuse

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Anatomy of a Component

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Anatomy of a Component

HTML,  CSS,  JS

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Anatomy of a Component

HTML,  CSS,  JS

Written  and  packaged  to  be  self  contained  and  stand  alone

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Anatomy of a Component

HTML,  CSS,  JS

Written  and  packaged  to  be  self  contained  and  stand  alone

Angular  -  directives  and  services

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Component Dependencies

Components  can  depend  on  other  components

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Component Dependencies

Style

Alerts

Components  can  depend  on  other  components

Style

Buttons

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Smart vs. Dumb

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Smart vs. Dumb

Components  will  often  need  to  “do  stuff”

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Smart vs. Dumb

Components  will  often  need  to  “do  stuff”

Smart  -  ship  with  the  parts  that  do  the  stuff

Services,  controllers

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Smart vs. Dumb

Components  will  often  need  to  “do  stuff”

Smart  -  ship  with  the  parts  that  do  the  stuff

Services,  controllers

Dumb  -  expect  only  data  -  don’t  care  where  it  came  fromJSON  Data  Model

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Smart vs. Dumb

Components  will  often  need  to  “do  stuff”

Smart  -  ship  with  the  parts  that  do  the  stuff

Services,  controllers

Dumb  -  expect  only  data  -  don’t  care  where  it  came  fromJSON  Data  Model

Most  components  will  probably  be  a  little  of  both

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Component Governance

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Components  are  a  suggestion

Component Governance

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Components  are  a  suggestion

Implementor  is  free  to  override  CSS

Component Governance

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Components  are  a  suggestion

Implementor  is  free  to  override  CSS

Use  versioning  and  have  a  process  for  change

Component Governance

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

UX Testing

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

UX Testing

User  Experience  activities  can  quantify  user  performance  metrics  before  components  are  deployed.

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

UX Testing

User  Experience  activities  can  quantify  user  performance  metrics  before  components  are  deployed

Comparing  new  designs  against  existing  components

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

UX Testing

User  Experience  activities  can  quantify  user  performance  metrics  before  components  are  deployed.

Comparing  new  designs  against  existing  components

Regression  testing  the  UX  of  new  components

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Enterprise Component Library

Set  of  self-contained  reusable  UI  components  

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Enterprise Component Library

Set  of  self-contained  reusable  UI  components  

In  Practice

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Enterprise Component Library

Set  of  self-contained  reusable  UI  components  

Repository  (GitHub)

In  Practice

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Enterprise Component Library

Set  of  self-contained  reusable  UI  components  

Package  Manager  (Bower)

Repository  (GitHub)

In  Practice

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Enterprise Component Library

Set  of  self-contained  reusable  UI  components  

Package  Manager  (Bower)

Repository  (GitHub)

Components

In  Practice

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

GitHub

Collaborative  source  code  hosting  

GitHub  Enterprise  /  GitLab  /  Atlassian  Stash

http://git-­‐scm.com/book/en/v2/Getting-­‐Started-­‐Installing-­‐Git

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Bower

Package  manager  for  the  web

Fetches,  installs,  and  manages  components  

npm  install  -­‐g  bower(requires  node  -  nodejs.org/download)

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Gulp

Streaming  build  system

Used  for  local  web  server  (gulp-­‐connect)

npm  install  -­‐-­‐global  gulp

npm  install  -­‐-­‐save-­‐dev  gulp

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Install

http://git-­‐scm.com/book/en/v2/Getting-­‐Started-­‐Installing-­‐Git

npm  install  -­‐-­‐global  gulp

npm  install  -­‐-­‐save-­‐dev  gulp

npm  install  -­‐g  bower(requires  node  -  nodejs.org/download)

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Angular Example

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Angular Example

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Angular Example

Marvel  Character  List

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Angular Example

Marvel  Character  List

Enhance  with  Angular  Alerts  Component

https://github.com/matthewkesler/character-list

https://github.com/matthewkesler/angular-alerts

#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.

Extension Ideas

Modify  Alert  component  to  fade  in  using  CSS  opacity

Create  a  tooltip  component  and  add  to  app

Get  Marvel  API  Key  &  Use  Real  API

Copyright © 2015 CapTech Ventures, Inc. All rights reserved.#EnterpriseComponents

Thanks!

Matt Kesler @MonkeyLamp Senior Manager mkesler@captechconsulting.com

Jason Snook @JasonSnook Director jsnook@captechconsulting.com

http://capte.ch/digital