Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

The enterprise UI landscape is often disjointed and full of inconsistencies. There will often be multiple design and development teams working independently with little visual or functional reuse. In this session you’ll learn some strategies and best practices for designing and building robust enterprise-wide UI components that can be leveraged in both prototypes and production. You’ll learn how to leverage UX best practices to test design patterns before they get built and then how to maintain the usability of those components as they evolve across the enterprise. Bring your laptop for guided exercises using Angular.js to illustrate the concepts.

Presented by Matt Kesler

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

  1. 1. Enterprise UI Frameworks Matt Kesler | March 2015
  2. 2. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Introductions CapTech  Digital  Solutions   http://capte.ch/digital Matt  Kesler   Engineering  Lead
  3. 3. #EnterpriseComponents Copyright © 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” 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 firms. Employment Over 500 salaried employees, with an average of 9+ years consulting experience
  4. 4. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Agenda
  5. 5. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Agenda Large  Scale  Front  End  Development
  6. 6. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Agenda Enterprise  Components Large  Scale  Front  End  Development
  7. 7. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Agenda Large  Scale  Front  End  Development Angular  Example Enterprise  Components
  8. 8. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Current State
  9. 9. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Current State The  Web  is  Evolving
  10. 10. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Current State The  Web  is  Evolving One  Design  —>  Multiple  Implementations
  11. 11. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Current State The  Web  is  Evolving One  Design  —>  Multiple  Implementations Hard  to  Share  Things  Intelligently  Across  Teams
  12. 12. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Sharing is Hard Challenges
  13. 13. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Sharing is Hard Communication Challenges
  14. 14. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Sharing is Hard Communication Organization Challenges
  15. 15. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Sharing is Hard Communication TechnologyOrganization Challenges
  16. 16. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Sharing is Hard Communication TechnologyOrganization Challenges
  17. 17. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Which Leads To
  18. 18. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Which Leads To Visual  Inconsistencies
  19. 19. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Which Leads To Visual  Inconsistencies Functional  Differences
  20. 20. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Which Leads To Visual  Inconsistencies Functional  Differences Wasted  Development  Time  /  Resources
  21. 21. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Which Leads To Visual  Inconsistencies Functional  Differences Wasted  Development  Time  /  Resources Multiple  Architectures  &  Approaches
  22. 22. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Which Leads To Visual  Inconsistencies Functional  Differences Wasted  Development  Time  /  Resources Multiple  Architectures  &  Approaches Increased  Maintenance  Cost
  23. 23. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Existing Solutions
  24. 24. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Existing Solutions Enterprise  Style  Guide
  25. 25. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Existing Solutions Enterprise  Style  Guide Pattern  Lab  /  Atomic  Design
  26. 26. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Existing Solutions Enterprise  Style  Guide UI  Frameworks  (Bootstrap,  etc) Pattern  Lab  /  Atomic  Design
  27. 27. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Existing Solutions Enterprise  Style  Guide UI  Frameworks  (Bootstrap,  etc) Good  Starting  Point Pattern  Lab  /  Atomic  Design
  28. 28. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Sharing has Advantages
  29. 29. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Sharing has Advantages Consistent  Look  and  Feel
  30. 30. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Sharing has Advantages Consistent  Look  and  Feel Code  Reuse
  31. 31. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Sharing has Advantages Consistent  Look  and  Feel Ease  of  Implementation Code  Reuse
  32. 32. #EnterpriseComponents Copyright © 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
  33. 33. #EnterpriseComponents Copyright © 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
  34. 34. #EnterpriseComponents Copyright © 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
  35. 35. #EnterpriseComponents Copyright © 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
  36. 36. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Anatomy of a Component
  37. 37. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Anatomy of a Component HTML,  CSS,  JS
  38. 38. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Anatomy of a Component HTML,  CSS,  JS Written  and  packaged  to  be  self  contained  and  stand  alone
  39. 39. #EnterpriseComponents Copyright © 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
  40. 40. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Component Dependencies Components  can  depend  on  other  components
  41. 41. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Component Dependencies Style Alerts Components  can  depend  on  other  components Style Buttons
  42. 42. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Smart vs. Dumb
  43. 43. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Smart vs. Dumb Components  will  often  need  to  “do  stuff”
  44. 44. #EnterpriseComponents Copyright © 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
  45. 45. #EnterpriseComponents Copyright © 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  from JSON  Data  Model
  46. 46. #EnterpriseComponents Copyright © 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  from JSON  Data  Model Most  components  will  probably  be  a  little  of  both
  47. 47. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Component Governance
  48. 48. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Components  are  a  suggestion Component Governance
  49. 49. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Components  are  a  suggestion Implementor  is  free  to  override  CSS Component Governance
  50. 50. #EnterpriseComponents Copyright © 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
  51. 51. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. UX Testing
  52. 52. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. UX Testing User  Experience  activities  can  quantify  user  performance  metrics  before   components  are  deployed.
  53. 53. #EnterpriseComponents Copyright © 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
  54. 54. #EnterpriseComponents Copyright © 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
  55. 55. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Enterprise Component Library Set  of  self-contained  reusable  UI  components  
  56. 56. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Enterprise Component Library Set  of  self-contained  reusable  UI  components   In  Practice
  57. 57. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Enterprise Component Library Set  of  self-contained  reusable  UI  components   Repository   (GitHub) In  Practice
  58. 58. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Enterprise Component Library Set  of  self-contained  reusable  UI  components   Package  Manager   (Bower) Repository   (GitHub) In  Practice
  59. 59. #EnterpriseComponents Copyright © 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
  60. 60. #EnterpriseComponents Copyright © 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
  61. 61. #EnterpriseComponents Copyright © 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)
  62. 62. #EnterpriseComponents Copyright © 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
  63. 63. #EnterpriseComponents Copyright © 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)
  64. 64. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Angular Example
  65. 65. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Angular Example
  66. 66. #EnterpriseComponents Copyright © 2015 CapTech Ventures, Inc. All rights reserved. Angular Example Marvel  Character  List
  67. 67. #EnterpriseComponents Copyright © 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
  68. 68. #EnterpriseComponents Copyright © 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
  69. 69. 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

×