Flexible UI Components for a Multi-Framework World
•
1 like•611 views
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
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (8)
Similar to Flexible UI Components for a Multi-Framework World
Similar to Flexible UI Components for a Multi-Framework World (20)
More from FITC
More from FITC (20)
Recently uploaded
Recently uploaded (20)
Flexible UI Components for a Multi-Framework World
- 1. Flexible UI Components UI Development For a Multi-Framework World @kbal11 kball@zendev.com https://zendev.com
- 2. Implementing UI is Easier Than Ever
- 3. Let’s remember how it used to be…
- 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
- 7. When I first learned about Grid 960…
- 8. When I first learned about Grid 960…
- 9. We’ve come a long way…
- 11. [ bootstrap image ]
- 15. But We’re Still Doing It Wrong
- 16. JS Ecosystem When Modern Frameworks Emerged (Pre 1.0!) (Barely 1.0!)
- 18. UI Libraries Are Done Two Ways
- 19. The Bootstrap Way • Naive to JS Frameworks • Provide “Vanilla” Implementation • Every JavaScript Framework gets its own “port” (rewrite)
- 20. The Material Way • Pick a JavaScript Framework • Deep Integration with that JS • Rewrite if needed for other frameworks
- 21. The Result Is The Same
- 22. [ image of visual inconsistencies] Photo Credit: https://www.thisiswhyimbroke.com/warping-mirrors/
- 29. Environments Have • Different DOM manipulation paradigms • Different “natural” markup structures • Different approaches to state
- 30. Environments Don’t Have • Different User Expectations • Different Branding Needs
- 31. We Can Do Better
- 32. About Me • Lead of ZURB Foundation project • Founder & President ZenDev, LLC • Known to get a bit over-excited about CSS and JavaScript
- 33. Photo Credit: ZURB Just a little over-excited
- 34. 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
- 36. ZURB Foundation 7 • Design Language Agnostic • JavaScript Framework Agnostic • “Flexible UI Components” Design Goals
- 38. Flexible UI Components Components designed to be adapted to any JS framework
- 39. Principles of Flexible UI Components • Components Should Be State Driven • Coupling Should Be Event Driven • Components Should Be “DOM Flexible”
- 40. • Components Should Be State Driven • Coupling Should Be Event Driven • Components Should Be “DOM Flexible” Principles of Flexible UI Components
- 41. The 2 Component Programming Models • Imperative Manipulation • State-driven implicit manipulation
- 42. Imperative manipulation is like telling your kids what to do
- 43. • 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
- 44. Photo Credit: My Wife
- 45. Imperative Manipulation Example elem.setAttribute(‘aria-selected’: ‘active’); elem.classList.add(‘selected’);
- 46. Paradigms Using Imperative Manipulation • Native JavaScript • jQuery • Polymer/Web Components
- 47. State driven manipulation is like me taking my car to the shop
- 48. • This car should be more awesome. Make it happen. State driven manipulation is like me taking my car to the shop
- 53. Examples of State Driven • Angular • React • Vue • Ember
- 54. State => Imperative is easy. Imperative => State is HARD.
- 55. Implication: Treat EVERYTHING as State
- 56. EVERYTHING as State • Application State • UI State • User entered content • ARIA attributes
- 57. • Components Should Be State Driven • Coupling Should Be Event Driven • Components Should Be “DOM Flexible” Principles of Flexible UI Components
- 58. Coupling Should Be Event Driven • Loose Coupling > Tight Coupling • Enables Different Models of State
- 59. Loose Coupling > Tight Coupling
- 60. Photo Credit: https://gfycat.com/gifs/detail/abandonedsizzlinghatchetfish Challenges of Tight Coupling
- 61. Loose Coupling • Allows multitude of component relationship models • Enables multitude of programming models
- 62. Multiple Models of State • Redux: event === dispatch • RxJS: Components => observables • Native: event => update local state imperatively
- 63. Redux myComponent.on(‘core.event’, (e, stateChange) => { dispatch(‘MY_COMPONENT_CHANGE’, stateChange) });
- 64. RXJS myComponent.subscribe(‘core.event’, (stateChange) => { doSomethingWithIt(); });
- 65. Flexible UI Components • Components Should Be State Driven • Coupling Should Be Event Driven • Components Should Be “DOM Flexible”
- 66. What does “DOM Flexible” Mean? • Explicit over Implicit • Classes and Attributes over Elements • Can still facilitate common cases via opt-in
- 67. 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>
- 68. 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>
- 69. Class and Attributes Over Elements • Allows Finer Control • Allow More Variation • More Verbose
- 70. More Verbose: Too Much Typing?
- 74. Lets Review
- 75. Flexible UI Components • Components Should Be State Driven • Coupling Should Be Event Driven • Components Should Be “DOM Flexible”
- 76. Re-imagining the model of UI Frameworks
- 77. Component Libraries are Developer Utilities The Old Model
- 78. Component Libraries are Developer Utilities The Old Model
- 79. The New Model • Put User Experience First • Enable Shared Language Between Design & Development • Enable Consistency Across All Brand Faces Component Libraries…
- 80. How Do We Get There?
- 81. 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?
- 82. Questions?