Flexible UI Components for a Multi-Framework World
0 likes761 views
The document discusses the evolution of UI component development in a multi-framework environment, highlighting the shift from traditional layout methods and hand-coded CSS to modern UI frameworks. It emphasizes principles for flexible UI components, including state-driven design, event-driven coupling, and DOM flexibility, and suggests improvements for integrating user experience into UI/UX practices. The author advocates for collaboration between JavaScript experts and designers to enhance component libraries and ensure consistency across different platforms.
![[ bootstrap image ]](https://image.slidesharecdn.com/flexibleuicomponents-170926154219/85/Flexible-UI-Components-for-a-Multi-Framework-World-11-320.jpg)
![[ image of visual
inconsistencies]
Photo Credit: https://www.thisiswhyimbroke.com/warping-mirrors/](https://image.slidesharecdn.com/flexibleuicomponents-170926154219/85/Flexible-UI-Components-for-a-Multi-Framework-World-22-320.jpg)
Flexible UI Components for a Multi-Framework World
- 1. Flexible UI Components UI Development For a Multi-Framework World @kbal11 [email protected] 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?