flexible ui components for a multi-framework world
TRANSCRIPT
Implementing UI is Easier Than Ever
Let’s remember how it used to be…
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
Photo Credit: http://dullneon.com/randomnotes/2016/07/goodbye-yahoo.html
Yahoo
GeoCities
Photo Credit: http://geocitiessites.com/soho/veranda/4103/
When I first learned about Grid 960…
When I first learned about Grid 960…
We’ve come a long way…
Modern UI Frameworks
[ bootstrap image ]
But We’re Still Doing It Wrong
JS Ecosystem When Modern Frameworks Emerged
(Pre 1.0!) (Barely 1.0!)
JS Ecosystem Today
UI Libraries Are Done Two Ways
The Bootstrap Way
• Naive to JS Frameworks
• Provide “Vanilla” Implementation
• Every JavaScript Framework gets its own “port” (rewrite)
The Material Way
• Pick a JavaScript Framework
• Deep Integration with that JS
• Rewrite if needed for other frameworks
The Result Is The Same
[ image of visual inconsistencies]
Photo Credit: https://www.thisiswhyimbroke.com/warping-mirrors/
Marketing Site
Web App MobileApp
Environments Are Not Consolidating
Marketing Site Web App Mobile
App
Wordpress + jQuery
MobileAppWeb App
Wordpress + jQuery
MobileApp
React +Redux
Wordpress + jQuery
Ionic(Angular)
React + Redux
Environments Have
• Different DOM manipulation paradigms
• Different “natural” markup structures
• Different approaches to state
Environments Don’t Have
• Different User Expectations
• Different Branding Needs
We Can Do Better
About Me
• Lead of ZURB Foundation project
• Founder & President ZenDev, LLC
• Known to get a bit over-excited about CSS and JavaScript
Photo Credit: ZURB
Just a little over-excited
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
ZURB Foundation 7
ZURB Foundation 7
• Design Language Agnostic
• JavaScript Framework Agnostic
• “Flexible UI Components”
Design Goals
Flexible UI Components
Flexible UI Components
Components designed to be adapted to any JS framework
Principles of Flexible UI Components
• Components Should Be State Driven
• Coupling Should Be Event Driven
• Components Should Be “DOM Flexible”
• Components Should Be State Driven
• Coupling Should Be Event Driven
• Components Should Be “DOM Flexible”
Principles of Flexible UI Components
The 2 Component Programming Models
• Imperative Manipulation
• State-driven implicit manipulation
Imperative manipulation is like telling your kids what to do
• 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
Photo Credit: My Wife
Imperative Manipulation Example
elem.setAttribute(‘aria-selected’: ‘active’);elem.classList.add(‘selected’);
Paradigms Using Imperative Manipulation
• Native JavaScript
• jQuery
• Polymer/Web Components
State driven manipulation is like me taking my car to the shop
• This car should be more awesome. Make it happen.
State driven manipulation is like me taking my car to the shop
Photo Credit: http://www.mycarconnector.com/pimp-my-ride-was-a-big-fat-lie/
Photo Credit: https://www.pinterest.com/pin/431219733043180678/
Photo Credit: http://www.carsut.com/pimped-out-cars/
State Driven Example
component.setState({‘selected’: true});
Examples of State Driven
• Angular
• React
• Vue
• Ember
State => Imperative is easy.
Imperative => State is HARD.
Implication: Treat EVERYTHING as State
EVERYTHING as State
• Application State
• UI State
• User entered content
• ARIA attributes
• Components Should Be State Driven
• Coupling Should Be Event Driven
• Components Should Be “DOM Flexible”
Principles of Flexible UI Components
Coupling Should Be Event Driven
• Loose Coupling > Tight Coupling
• Enables Different Models of State
Loose Coupling > Tight Coupling
Photo Credit: https://gfycat.com/gifs/detail/abandonedsizzlinghatchetfish
Challenges of Tight Coupling
Loose Coupling
• Allows multitude of component relationship models
• Enables multitude of programming models
Multiple Models of State
• Redux: event === dispatch
• RxJS: Components => observables
• Native: event => update local state imperatively
Redux
myComponent.on(‘core.event’, (e, stateChange) => { dispatch(‘MY_COMPONENT_CHANGE’, stateChange)});
RXJS
myComponent.subscribe(‘core.event’, (stateChange) => { doSomethingWithIt();});
Flexible UI Components
• Components Should Be State Driven
• Coupling Should Be Event Driven
• Components Should Be “DOM Flexible”
What does “DOM Flexible” Mean?
• Explicit over Implicit
• Classes and Attributes over Elements
• Can still facilitate common cases via opt-in
Class and Attributes Over Elements
<ulclass="dropdownmenu"data-dropdown-menu><li><ahref="#">Item1</a><ulclass="menu"><li><ahref="#">Item1A</a></li></ul></li><li><ahref="#">Item2</a></li></ul>
Class and Attributes Over Elements
<ulclass="dropdownmenu"data-dropdown-menu><liclass="dropdown-menu-item"data-dropdown-menu-item><ahref="#">Item1</a><uldata-dropdown-submenuclass=“menu”><liclass="dropdown-menu-item"data-dropdown-menu-item><ahref="#">Item1A</a></li></ul></li><liclass="dropdown-menu-item"data-dropdown-menu-item><ahref="#">Item2</a></li></ul>
Class and Attributes Over Elements
• Allows Finer Control
• Allow More Variation
• More Verbose
More Verbose: Too Much Typing?
Facilitate Common Cases
Facilitate Common Cases
<ulclass="dropdownmenu"data-dropdown-menu><li><ahref="#">Item1</a><ulclass="menu"><li><ahref="#">Item1A</a></li></ul></li><li><ahref="#">Item2</a></li></ul>
Facilitate Common Cases
<ulclass="dropdownmenus-dropdown-menu"data-dropdown-menudata-dropdown-menu-implicit><li><ahref="#">Item1</a><ulclass="menu"><li><ahref="#">Item1A</a></li></ul></li><li><ahref="#">Item2</a></li></ul>
Lets Review
Flexible UI Components
• Components Should Be State Driven
• Coupling Should Be Event Driven
• Components Should Be “DOM Flexible”
Re-imagining the model of UI Frameworks
Component Libraries are Developer Utilities
The Old Model
Component Libraries are Developer Utilities
The Old Model
The New Model
• Put User Experience First
• Enable Shared Language Between Design & Development
• Enable Consistency Across All Brand Faces
Component Libraries…
How Do We Get There?
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?
Questions?
