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

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

http://capte.ch/digital


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


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 fromJSON Data Model


Smart vs. Dumb




Dumb - expect only data - don’t care where it came fromJSON 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

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

Comparing new designs against existing components


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


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

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

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

Thanks!

Matt Kesler @MonkeyLamp Senior Manager [email protected]

Jason Snook @JasonSnook Director [email protected]

http://capte.ch/digital

mailto:[email protected]?subject=

mailto:[email protected]

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

Design

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