Flexible UI Components for a Multi-Framework World
0 likes758 views
Slides from Flexible UI Components talk given at Web Unleashed 2017 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. Lessons learned from work on ZURB Foundation 7.
![[ 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)
Ad
More Related Content
What's hot (19)
Similar to Flexible UI Components for a Multi-Framework World (20)
Ad
More from Kevin Ball (6)
Ad
Recently uploaded (19)
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?