designing and building (your own) ui frameworks for the enterprise
TRANSCRIPT
![Page 1: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/1.jpg)
Enterprise UI FrameworksMatt Kesler | March 2015
![Page 2: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/2.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Introductions
CapTech Digital Solutions http://capte.ch/digital
Matt Kesler Engineering Lead
![Page 3: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/3.jpg)
#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
![Page 4: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/4.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Agenda
![Page 5: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/5.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Agenda
Large Scale Front End Development
![Page 6: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/6.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Agenda
Enterprise Components
Large Scale Front End Development
![Page 7: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/7.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Agenda
Large Scale Front End Development
Angular Example
Enterprise Components
![Page 8: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/8.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Current State
![Page 9: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/9.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Current State
The Web is Evolving
![Page 10: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/10.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Current State
The Web is Evolving
One Design —> Multiple Implementations
![Page 11: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/11.jpg)
#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
![Page 12: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/12.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Sharing is Hard
Challenges
![Page 13: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/13.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Sharing is Hard
Communication
Challenges
![Page 14: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/14.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Sharing is Hard
Communication Organization
Challenges
![Page 15: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/15.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Sharing is Hard
Communication TechnologyOrganization
Challenges
![Page 16: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/16.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Sharing is Hard
Communication TechnologyOrganization
Challenges
![Page 17: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/17.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Which Leads To
![Page 18: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/18.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Which Leads To
Visual Inconsistencies
![Page 19: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/19.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Which Leads To
Visual Inconsistencies
Functional Differences
![Page 20: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/20.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Which Leads To
Visual Inconsistencies
Functional Differences
Wasted Development Time / Resources
![Page 21: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/21.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Which Leads To
Visual Inconsistencies
Functional Differences
Wasted Development Time / Resources
Multiple Architectures & Approaches
![Page 22: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/22.jpg)
#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
![Page 23: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/23.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Existing Solutions
![Page 24: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/24.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Existing Solutions
Enterprise Style Guide
![Page 25: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/25.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Existing Solutions
Enterprise Style Guide
Pattern Lab / Atomic Design
![Page 26: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/26.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Existing Solutions
Enterprise Style Guide
UI Frameworks (Bootstrap, etc)
Pattern Lab / Atomic Design
![Page 27: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/27.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Existing Solutions
Enterprise Style Guide
UI Frameworks (Bootstrap, etc)
Good Starting Point
Pattern Lab / Atomic Design
![Page 28: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/28.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Sharing has Advantages
![Page 29: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/29.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Sharing has Advantages
Consistent Look and Feel
![Page 30: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/30.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Sharing has Advantages
Consistent Look and Feel
Code Reuse
![Page 31: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/31.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Sharing has Advantages
Consistent Look and Feel
Ease of Implementation
Code Reuse
![Page 32: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/32.jpg)
#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
![Page 33: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/33.jpg)
#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
![Page 34: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/34.jpg)
#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
![Page 35: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/35.jpg)
#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
![Page 36: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/36.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Anatomy of a Component
![Page 37: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/37.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Anatomy of a Component
HTML, CSS, JS
![Page 38: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/38.jpg)
#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
![Page 39: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/39.jpg)
#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
![Page 40: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/40.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Component Dependencies
Components can depend on other components
![Page 41: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/41.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Component Dependencies
Style
Alerts
Components can depend on other components
Style
Buttons
![Page 42: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/42.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Smart vs. Dumb
![Page 43: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/43.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Smart vs. Dumb
Components will often need to “do stuff”
![Page 44: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/44.jpg)
#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
![Page 45: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/45.jpg)
#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
![Page 46: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/46.jpg)
#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
![Page 47: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/47.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Component Governance
![Page 48: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/48.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Components are a suggestion
Component Governance
![Page 49: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/49.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Components are a suggestion
Implementor is free to override CSS
Component Governance
![Page 50: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/50.jpg)
#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
![Page 51: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/51.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
UX Testing
![Page 52: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/52.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
UX Testing
User Experience activities can quantify user performance metrics before components are deployed.
![Page 53: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/53.jpg)
#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
![Page 54: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/54.jpg)
#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
![Page 55: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/55.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Enterprise Component Library
Set of self-contained reusable UI components
![Page 56: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/56.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Enterprise Component Library
Set of self-contained reusable UI components
In Practice
![Page 57: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/57.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Enterprise Component Library
Set of self-contained reusable UI components
Repository (GitHub)
In Practice
![Page 58: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/58.jpg)
#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
![Page 59: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/59.jpg)
#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
![Page 60: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/60.jpg)
#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
![Page 61: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/61.jpg)
#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)
![Page 62: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/62.jpg)
#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
![Page 63: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/63.jpg)
#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)
![Page 64: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/64.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Angular Example
![Page 65: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/65.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Angular Example
![Page 66: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/66.jpg)
#EnterpriseComponentsCopyright © 2015 CapTech Ventures, Inc. All rights reserved.
Angular Example
Marvel Character List
![Page 67: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/67.jpg)
#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
![Page 68: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/68.jpg)
#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
![Page 69: Designing and Building (Your Own) UI Frameworks For the Enterprise](https://reader038.vdocuments.net/reader038/viewer/2022103117/55a676c11a28abc7758b45b6/html5/thumbnails/69.jpg)
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