Upload
fitc
View
174
Download
0
Embed Size (px)
Citation preview
Flexible UI ComponentsUI Development For a Multi-Framework World
@[email protected]://zendev.com
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?
Thank you!
@[email protected]://zendev.com