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.

of

Flexible UI Components for a Multi-Framework World Slide 1 Flexible UI Components for a Multi-Framework World Slide 2 Flexible UI Components for a Multi-Framework World Slide 3 Flexible UI Components for a Multi-Framework World Slide 4 Flexible UI Components for a Multi-Framework World Slide 5 Flexible UI Components for a Multi-Framework World Slide 6 Flexible UI Components for a Multi-Framework World Slide 7 Flexible UI Components for a Multi-Framework World Slide 8 Flexible UI Components for a Multi-Framework World Slide 9 Flexible UI Components for a Multi-Framework World Slide 10 Flexible UI Components for a Multi-Framework World Slide 11 Flexible UI Components for a Multi-Framework World Slide 12 Flexible UI Components for a Multi-Framework World Slide 13 Flexible UI Components for a Multi-Framework World Slide 14 Flexible UI Components for a Multi-Framework World Slide 15 Flexible UI Components for a Multi-Framework World Slide 16 Flexible UI Components for a Multi-Framework World Slide 17 Flexible UI Components for a Multi-Framework World Slide 18 Flexible UI Components for a Multi-Framework World Slide 19 Flexible UI Components for a Multi-Framework World Slide 20 Flexible UI Components for a Multi-Framework World Slide 21 Flexible UI Components for a Multi-Framework World Slide 22 Flexible UI Components for a Multi-Framework World Slide 23 Flexible UI Components for a Multi-Framework World Slide 24 Flexible UI Components for a Multi-Framework World Slide 25 Flexible UI Components for a Multi-Framework World Slide 26 Flexible UI Components for a Multi-Framework World Slide 27 Flexible UI Components for a Multi-Framework World Slide 28 Flexible UI Components for a Multi-Framework World Slide 29 Flexible UI Components for a Multi-Framework World Slide 30 Flexible UI Components for a Multi-Framework World Slide 31 Flexible UI Components for a Multi-Framework World Slide 32 Flexible UI Components for a Multi-Framework World Slide 33 Flexible UI Components for a Multi-Framework World Slide 34 Flexible UI Components for a Multi-Framework World Slide 35 Flexible UI Components for a Multi-Framework World Slide 36 Flexible UI Components for a Multi-Framework World Slide 37 Flexible UI Components for a Multi-Framework World Slide 38 Flexible UI Components for a Multi-Framework World Slide 39 Flexible UI Components for a Multi-Framework World Slide 40 Flexible UI Components for a Multi-Framework World Slide 41 Flexible UI Components for a Multi-Framework World Slide 42 Flexible UI Components for a Multi-Framework World Slide 43 Flexible UI Components for a Multi-Framework World Slide 44 Flexible UI Components for a Multi-Framework World Slide 45 Flexible UI Components for a Multi-Framework World Slide 46 Flexible UI Components for a Multi-Framework World Slide 47 Flexible UI Components for a Multi-Framework World Slide 48 Flexible UI Components for a Multi-Framework World Slide 49 Flexible UI Components for a Multi-Framework World Slide 50 Flexible UI Components for a Multi-Framework World Slide 51 Flexible UI Components for a Multi-Framework World Slide 52 Flexible UI Components for a Multi-Framework World Slide 53 Flexible UI Components for a Multi-Framework World Slide 54 Flexible UI Components for a Multi-Framework World Slide 55 Flexible UI Components for a Multi-Framework World Slide 56 Flexible UI Components for a Multi-Framework World Slide 57 Flexible UI Components for a Multi-Framework World Slide 58 Flexible UI Components for a Multi-Framework World Slide 59 Flexible UI Components for a Multi-Framework World Slide 60 Flexible UI Components for a Multi-Framework World Slide 61 Flexible UI Components for a Multi-Framework World Slide 62 Flexible UI Components for a Multi-Framework World Slide 63 Flexible UI Components for a Multi-Framework World Slide 64 Flexible UI Components for a Multi-Framework World Slide 65 Flexible UI Components for a Multi-Framework World Slide 66 Flexible UI Components for a Multi-Framework World Slide 67 Flexible UI Components for a Multi-Framework World Slide 68 Flexible UI Components for a Multi-Framework World Slide 69 Flexible UI Components for a Multi-Framework World Slide 70 Flexible UI Components for a Multi-Framework World Slide 71 Flexible UI Components for a Multi-Framework World Slide 72 Flexible UI Components for a Multi-Framework World Slide 73 Flexible UI Components for a Multi-Framework World Slide 74 Flexible UI Components for a Multi-Framework World Slide 75 Flexible UI Components for a Multi-Framework World Slide 76 Flexible UI Components for a Multi-Framework World Slide 77 Flexible UI Components for a Multi-Framework World Slide 78 Flexible UI Components for a Multi-Framework World Slide 79 Flexible UI Components for a Multi-Framework World Slide 80 Flexible UI Components for a Multi-Framework World Slide 81 Flexible UI Components for a Multi-Framework World Slide 82 Flexible UI Components for a Multi-Framework World Slide 83
Upcoming SlideShare
Building Your First iOS App with Xamarin for Visual Studio
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Flexible UI Components for a Multi-Framework World

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all
  • 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

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

Views

Total views

568

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

15

Shares

0

Comments

0

Likes

0

×