Flexible UI ComponentsUI Development For a Multi-Framework World

@kbal11kball@zendev.comhttps://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!

@kbal11kball@zendev.comhttps://zendev.com