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
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
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
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
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.
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!
Using The Platform: A Tiered Approach To Using Web Components In A Design System
By Cory Brown
