Feasgar Math!

Good evening

Is mise Cory Brown

I'm Cory Brown

Tha mi air mo dhoigh a bhi an seo

I am delighted to be here

beagan mu mo dheidhinn,

a little about me,

tha mi ag ionnsachadh Gàidhlig

I am learning Scottish Gaelic

agus a nis, mar sin tha sibhse!

and now, you are too!

Using The Platform

Cory Brown, Sr Lead Architect

A Tiered Approach To Using Web Components In A Design System

@ Aumni - a JPM company

Design System

A unifying set of principles, guidelines, and components for building applications unique to your organization.

1. Principles & guidelines

2. Component library

Accessibility

Strive to enable all individuals of diverse needs and in varied circumstances to be able to use our products

1.

2.

Simplicity

We provide clarity by reducing complexity in the development process and the user experience

3.

Collaborative

We foster collaboration through a shared language and shared patterns streamlining workflows for designers and devlopers.

PRINCIPLES

Accessibility

Strive to enable all individuals of diverse needs and in varied circumstances to be able to use our products

1.

These principles led us to choose to hew as close to the web platform as we can.

2. The Web is responsive (visually accessible on all devices) by default

1. HTML has Accessibility as a first class consideration

3. Knowledge of the Web platform is a prerequisite for Web development

4. Knowledge of the Web platform is transferable from previous experience and to new roles.

5. Using the language of the Web platform provides a built in, well established, generally understood, and well documented language

7. Answers to questions are very searchable.

6. Documentation already exists

8. HTML is highly composable.

9. Current and emerging APIs make JS solutions less necessary

10. Polyfills can bridge the gaps

In practice

2. Elements can be progressively enhanced by extending native elements as Web Components

1. Much of our component library are plain HTML elements styled in a global stylesheet

3. More complex components can be framework agnostic using Web Components

4. Shadow DOM hides implementation details & Declarative Shadow DOM make SSR more meaningful.

5. Slots and :part() help us control access to specific parts of the internals

Tiers

Tier 1

Just HTML/CSS

Teir 2

Augmented Native Elements

Tier 3

Native Element Enhancers

Tier 4

Proper Web Components

Web Component Walkthrough

Web Component Walkthrough #2?

Tier 1

Plain Semantic HTML elements

Handling the in-betweens

How does a design system live side-by-side with legacy design systems or no design system?

 

<button class="arc-button">ARC Button</button>
<button>Not an ARC Button</button>
[is^="arc-"] {

  button& {
    --color: var(--arc-primary);
    
    background-color: var(--color);
    
    &:hover {
      background-color: oklch(from var(--color) calc(l * .95) c h);
    }
  }
}
<button is="arc-button">ARC Button</button>
<button>Not an ARC Button</button>

advantages

  • forcing function for semantic markup
  • forcing function for understanding web tech
  • built in accessibility
  • pre-written documentation
  • lots of familiarity

disadvantages

  • limited functionality
  • over abundance of bad information
  • too many element options
  • insufficient for all needs

Tier 2

Enhanced Semantic HTML elements

Elements++

Enhanced Native Elements allows one to extend the native functionality and semantics of native elements with additional features.

 

Useful for when only light modification is desired.

advantages

  • Mostly familiar API
  • Only additive to Tier 1
  • Elements retain their native accessibility features, functionality and roles

disadvantages

  • Is not and will not be supported in Safari 
  • Will forever require a polyfill

Tier 3

Enhancer Web Components

Fallback Friendlies

Enhancer Web Components augment native elements in a way that does not interfere with the native functionality. They are like a layer on top of native elements

advantages

  • Progressively Enhances
  • Components function reasonably well without them.
  • Favors composition

disadvantages

  • DOM can get very deep if used extensively.
  • More writting for the consumer.
  • Doesn't cover all needed cases.

Tier 4

Custom Web Components

Customized, for you pleasure

The sky's the limit. Web Components are very versatile, from the simple, to the very complex; from light augmentation, to entire applications; web components can do it all... for a price.

 

The DX for creating Web Components is... not great. What makes it appealing though is it's ability to create great DX for consumers of Web Components.

advantages

  • Very versatile
  • Universal
  • Framework agnostic
  • Familiar paradigms
  • Can have great DX for consumers

disadvantages

  • Not great DX for creators
  • No traditional forms of state management
  • Pretty low level
  • Have to consider 
    • Aria
    • Keyboard controls
    • Form participation

A Web Component Tutorial

Plain code block

Codeblock Web Component

Another Web Component Tutorial?

Tapadh leaibh!

Tha mi an dòchas gun robh deagh àm agaibh!