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.

Flexible UI Components for a Multi-Framework World

257 views

Published on

Presented at Web Unleashed 2017. More info at www.fitc.ca/webu

Presented by Kevin Ball, ZenDev, LLC

Overview

Learn to build UI components that work seamlessly in every JavaScript Framework.

Your core UI elements shouldn’t have to be different for your marketing site than they are in your application just because the former uses jQuery while the latter is built using Angular or React. In this talk, Kevin will teach you how to architect and build an interactive component that works seamlessly across multiple JavaScript Frameworks.

Objective

Raise the bar for reusable UI components and teach the audience how to build them.

Target Audience

Front-end developers
Assumed Audience Knowledge
Some understanding of JavaScript, and knowledge of at least what JavaScript Frameworks are

Five Things Audience Members Will Learn

The value for your business from creating a framework of portable UI components
The challenges and problems with simply rebuilding UI components from scratch for each environment
The difference between state-driven and imperative approaches to interactive UI components
How to build a multi-framework UI component
How version 7 of ZURB Foundation is using this approach to reimagine its interactive components

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Flexible UI Components for a Multi-Framework World

  1. 1. Flexible UI Components UI Development For a Multi-Framework World @kbal11 kball@zendev.com https://zendev.com
  2. 2. Implementing UI is Easier Than Ever
  3. 3. Let’s remember how it used to be…
  4. 4. How It Used To Be • Tables for layout • Hand-coded CSS IF YOU WERE LUCKY • Spend a week on a site, and then another week getting it to work on Internet Explorer
  5. 5. Photo Credit: http://dullneon.com/randomnotes/2016/07/goodbye-yahoo.html Yahoo
  6. 6. GeoCities Photo Credit: http://geocitiessites.com/soho/veranda/4103/
  7. 7. When I first learned about Grid 960…
  8. 8. When I first learned about Grid 960…
  9. 9. We’ve come a long way…
  10. 10. Modern UI Frameworks
  11. 11. [ bootstrap image ]
  12. 12. But We’re Still Doing It Wrong
  13. 13. JS Ecosystem When Modern Frameworks Emerged (Pre 1.0!) (Barely 1.0!)
  14. 14. JS Ecosystem Today
  15. 15. UI Libraries Are Done Two Ways
  16. 16. The Bootstrap Way • Naive to JS Frameworks • Provide “Vanilla” Implementation • Every JavaScript Framework gets its own “port” (rewrite)
  17. 17. The Material Way • Pick a JavaScript Framework • Deep Integration with that JS • Rewrite if needed for other frameworks
  18. 18. The Result Is The Same
  19. 19. [ image of visual inconsistencies] Photo Credit: https://www.thisiswhyimbroke.com/warping-mirrors/
  20. 20. Marketing Site Web App Mobile App
  21. 21. Environments Are Not Consolidating
  22. 22. Marketing Site Web App Mobile App
  23. 23. Wordpress + jQuery Mobile App Web App
  24. 24. Wordpress + jQuery Mobile App React + Redux
  25. 25. Wordpress + jQuery Ionic (Angular) React + Redux
  26. 26. Environments Have • Different DOM manipulation paradigms • Different “natural” markup structures • Different approaches to state
  27. 27. Environments Don’t Have • Different User Expectations • Different Branding Needs
  28. 28. We Can Do Better
  29. 29. About Me • Lead of ZURB Foundation project • Founder & President ZenDev, LLC • Known to get a bit over-excited about CSS and JavaScript
  30. 30. Photo Credit: ZURB Just a little over-excited
  31. 31. About ZenDev • Frontend Consulting - Strategy, Architecture, and all things ZURB Foundation • Team Training - ZURB Foundation • Publishing Friday Frontend newsletter: 
 https://zendev.com/friday-frontend.html
  32. 32. ZURB Foundation 7
  33. 33. ZURB Foundation 7 • Design Language Agnostic • JavaScript Framework Agnostic • “Flexible UI Components” Design Goals
  34. 34. Flexible UI Components
  35. 35. Flexible UI Components Components designed to be adapted to any JS framework
  36. 36. Principles of Flexible UI Components • Components Should Be State Driven • Coupling Should Be Event Driven • Components Should Be “DOM Flexible”
  37. 37. • Components Should Be State Driven • Coupling Should Be Event Driven • Components Should Be “DOM Flexible” Principles of Flexible UI Components
  38. 38. The 2 Component Programming Models • Imperative Manipulation • State-driven implicit manipulation
  39. 39. Imperative manipulation is like telling your kids what to do
  40. 40. • Go to your room • Pick out one pair of underwear • Pick out one pair of pants • Pick out one shirt Imperative manipulation is like telling your kids what to do
  41. 41. Photo Credit: My Wife
  42. 42. Imperative Manipulation Example elem.setAttribute(‘aria-selected’: ‘active’); elem.classList.add(‘selected’);
  43. 43. Paradigms Using Imperative Manipulation • Native JavaScript • jQuery • Polymer/Web Components
  44. 44. State driven manipulation is like me taking my car to the shop
  45. 45. • This car should be more awesome. Make it happen. State driven manipulation is like me taking my car to the shop
  46. 46. Photo Credit: http://www.mycarconnector.com/pimp-my-ride-was-a-big-fat-lie/
  47. 47. Photo Credit: https://www.pinterest.com/pin/431219733043180678/
  48. 48. Photo Credit: http://www.carsut.com/pimped-out-cars/
  49. 49. State Driven Example component.setState({‘selected’: true});
  50. 50. Examples of State Driven • Angular • React • Vue • Ember
  51. 51. State => Imperative is easy. Imperative => State is HARD.
  52. 52. Implication: Treat EVERYTHING as State
  53. 53. EVERYTHING as State • Application State • UI State • User entered content • ARIA attributes
  54. 54. • Components Should Be State Driven • Coupling Should Be Event Driven • Components Should Be “DOM Flexible” Principles of Flexible UI Components
  55. 55. Coupling Should Be Event Driven • Loose Coupling > Tight Coupling • Enables Different Models of State
  56. 56. Loose Coupling > Tight Coupling
  57. 57. Photo Credit: https://gfycat.com/gifs/detail/abandonedsizzlinghatchetfish Challenges of Tight Coupling
  58. 58. Loose Coupling • Allows multitude of component relationship models • Enables multitude of programming models
  59. 59. Multiple Models of State • Redux: event === dispatch • RxJS: Components => observables • Native: event => update local state imperatively
  60. 60. Redux myComponent.on(‘core.event’, (e, stateChange) => { dispatch(‘MY_COMPONENT_CHANGE’, stateChange) });
  61. 61. RXJS myComponent.subscribe(‘core.event’, (stateChange) => { doSomethingWithIt(); });
  62. 62. Flexible UI Components • Components Should Be State Driven • Coupling Should Be Event Driven • Components Should Be “DOM Flexible”
  63. 63. What does “DOM Flexible” Mean? • Explicit over Implicit • Classes and Attributes over Elements • Can still facilitate common cases via opt-in
  64. 64. Class and Attributes Over Elements <ul class="dropdown menu" data-dropdown-menu> <li> <a href="#">Item 1</a> <ul class="menu"> <li><a href="#">Item 1A</a></li> </ul> </li> <li><a href="#">Item 2</a></li> </ul>
  65. 65. Class and Attributes Over Elements <ul class="dropdown menu" data-dropdown-menu> <li class="dropdown-menu-item" data-dropdown-menu-item> <a href="#">Item 1</a> <ul data-dropdown-submenu class=“menu”> <li class="dropdown-menu-item" data-dropdown-menu-item> <a href="#">Item 1A</a> </li> </ul> </li> <li class="dropdown-menu-item" data-dropdown-menu-item> <a href="#">Item 2</a> </li> </ul>
  66. 66. Class and Attributes Over Elements • Allows Finer Control • Allow More Variation • More Verbose
  67. 67. More Verbose: Too Much Typing?
  68. 68. Facilitate Common Cases
  69. 69. Facilitate Common Cases <ul class="dropdown menu" data-dropdown-menu> <li> <a href="#">Item 1</a> <ul class="menu"> <li><a href="#">Item 1A</a></li> </ul> </li> <li><a href="#">Item 2</a></li> </ul>
  70. 70. Facilitate Common Cases <ul class="dropdown menu s-dropdown-menu" data- dropdown-menu data-dropdown-menu-implicit> <li> <a href="#">Item 1</a> <ul class="menu"> <li><a href="#">Item 1A</a></li> </ul> </li> <li><a href="#">Item 2</a></li> </ul>
  71. 71. Lets Review
  72. 72. Flexible UI Components • Components Should Be State Driven • Coupling Should Be Event Driven • Components Should Be “DOM Flexible”
  73. 73. Re-imagining the model of UI Frameworks
  74. 74. Component Libraries are Developer Utilities The Old Model
  75. 75. Component Libraries are Developer Utilities The Old Model
  76. 76. The New Model • Put User Experience First • Enable Shared Language Between Design & Development • Enable Consistency Across All Brand Faces Component Libraries…
  77. 77. How Do We Get There?
  78. 78. 1. Recognize UI/UX as a primary concern. 2. Advocate against JS Framework elitism 3. UI Frameworks need more JavaScript experts involved. 4. JavaScript Frameworks need more designers involved. How Do We Get There?
  79. 79. Questions?
  80. 80. Thank you! @kbal11 kball@zendev.com https://zendev.com

×