Designing and Building (Your Own) UI Frameworks For the Enterprise

Enterprise UI Frameworks
Matt Kesler | March 2015

#EnterpriseComponents
Copyright © 2015 CapTech Ventures, Inc. All rights reserved.
Introductions
CapTech Digital Solutions
http://capte.ch/digital
Matt Kesler
Engineering Lead

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” by 
Consulting 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
ﬁrms.
Employment
Over 500 salaried
employees, with an
average of 9+
years consulting
experience

Agenda

Agenda
Large Scale Front End Development

Agenda
Enterprise Components

Agenda
Angular Example
Enterprise Components

Current State

Current State
The Web is Evolving

Current State
The Web is Evolving
One Design —> Multiple Implementations

Current State
The Web is Evolving
One Design —> Multiple Implementations
Hard to Share Things Intelligently Across Teams

Sharing is Hard
Challenges

Sharing is Hard
Communication
Challenges

Sharing is Hard
Communication Organization
Challenges

Sharing is Hard
Communication TechnologyOrganization
Challenges

Which Leads To

Which Leads To
Visual Inconsistencies

Which Leads To
Functional Differences

Which Leads To
Wasted Development Time / Resources

Which Leads To
Multiple Architectures & Approaches

Which Leads To
Multiple Architectures & Approaches
Increased Maintenance Cost

Existing Solutions

Existing Solutions
Enterprise Style Guide

Existing Solutions
Pattern Lab / Atomic Design

Existing Solutions
UI Frameworks (Bootstrap, etc)

Existing Solutions
UI Frameworks (Bootstrap, etc)
Good Starting Point

Sharing has Advantages

Consistent Look and Feel

Code Reuse

Ease of Implementation
Code Reuse

One Team Making Decisions and Controlling the Important Stuff
Code Reuse

Accessibility
Code Reuse

Accessibility Functionality
Code Reuse

Accessibility Functionality Responsive
Code Reuse

Anatomy of a Component

HTML, CSS, JS

HTML, CSS, JS
Written and packaged to be self contained and stand alone

HTML, CSS, JS
Written and packaged to be self contained and stand alone
Angular - directives and services

Component Dependencies
Components can depend on other components

Component Dependencies
Style
Alerts
Components can depend on other components
Style
Buttons

Smart vs. Dumb

Smart vs. Dumb
Components will often need to “do stuff”

Smart vs. Dumb
Smart - ship with the parts that do the stuff
Services, controllers

Smart vs. Dumb
Dumb - expect only data - don’t care where it came from
JSON Data Model

Smart vs. Dumb
Dumb - expect only data - don’t care where it came from
JSON Data Model
Most components will probably be a little of both

Component Governance

Components are a suggestion

Implementor is free to override CSS

Implementor is free to override CSS
Use versioning and have a process for change

UX Testing

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

UX Testing
components are deployed
Comparing new designs against existing components

UX Testing
components are deployed.
Comparing new designs against existing components
Regression testing the UX of new components

Enterprise Component Library
Set of self-contained reusable UI components

In Practice

Repository
(GitHub)
In Practice

Package Manager
(Bower)
Repository
(GitHub)
In Practice

Package Manager
(Bower)
Repository
(GitHub)
Components
In Practice

GitHub
Collaborative source code hosting
GitHub Enterprise / GitLab / Atlassian Stash
http://git-‐scm.com/book/en/v2/Getting-‐Started-‐Installing-‐Git

Bower
Package manager for the web
Fetches, installs, and manages components
npm
install
-‐g
bower
(requires node - nodejs.org/download)

Gulp
Streaming build system
Used for local web server (gulp-‐connect)
npm
install
-‐-‐global
gulp
npm
install
-‐-‐save-‐dev
gulp

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)

Angular Example

Angular Example
Marvel Character List

Angular Example
Marvel Character List
Enhance with Angular Alerts Component
https://github.com/matthewkesler/character-list
https://github.com/matthewkesler/angular-alerts

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

Thanks!
Matt Kesler
@MonkeyLamp
Senior Manager
mkesler@captechconsulting.com
Jason Snook
@JasonSnook
Director
jsnook@captechconsulting.com
http://capte.ch/digital

Designing and Building (Your Own) UI Frameworks For the Enterprise

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (8)

Similar to Designing and Building (Your Own) UI Frameworks For the Enterprise

Similar to Designing and Building (Your Own) UI Frameworks For the Enterprise (20)

More from ExoLeaders.com

More from ExoLeaders.com (18)

Recently uploaded

Recently uploaded (20)

Designing and Building (Your Own) UI Frameworks For the Enterprise