Thank You
Red Hat is the world’s leading provider of enterprise open source software solutions. Award-winning support, training, and consulting services make Red Hat a trusted adviser to the Fortune 500.
PatternFly Elements
Catching up on collaboration
- Benny Powers
- Principal UX Engineer
PatternFly Elements
In this presentation
- Web components - what and why?
- Catch up on PatternFly Elements work
- Red Hat Design System
- A collaborative future
Web components
Web components are the web's native component model. They are part of the HTML and DOM specification and are implemented in all major browsers.
Web components
<template>
- Apps (SPAs or MPAs)
- Design systems
- Micro-frontends
Web components
PatternFly Elements
DX ❤️
PatternFly Elements - <pf-card>
<pf-card rounded>
<h3 slot="header">PatternFly Card</h3>
<p>Has slots for header, body, and footer,
and attributes (<code>rounded</code>,
<code>size</code>) for variation.</p>
<pf-button slot="footer">OK</pf-button>
<pf-button slot="footer" danger>
Cancel
</pf-button>
</pf-card>PatternFly Card
Has slots for header, body, and footer,
and attributes (rounded,
size) for variation.
PatternFly Elements - <pf-accordion>
<pf-accordion single>
<pf-accordion-header expanded>
<h3>Freedom 0: To Run</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>The freedom to run the program
as you wish, for any purpose.</p>
</pf-accordion-panel>
...
</pf-accordion>Freedom 0: To Run
The freedom to run the program as you wish, for any purpose.
Freedom 1: To Study
The freedom to study how the program works, and change it so it does your computing as you wish. Access to the source code is a precondition for this.
Freedom 2: To Redistribute
The freedom to redistribute copies so you can help others
Freedom 3: To Change
The freedom to distribute copies of your modified versions to others. By doing this you can give the whole community a chance to benefit from your changes. Access to the source code is a precondition for this.
PatternFly Elements - <pf-modal>
<pf-button id="trigger">Open</pf-button>
<pf-modal trigger="trigger">
<h2 slot="header">Modal with a header</h2>
<p>Link button and modal through the
<code>trigger</code> attribute,
without JavaScript</p>
<a slot="footer" href="https://patternflyelements.org">
Learn more
</a>
</pf-modal>Modal with a header
Link button and modal through the
trigger attribute,
without JavaScript
PatternFly Elements - development
Using PatternFly Elements
PatternFly Elements work in any web browser, in any framework or none. You don't have to adopt our framework or drop your own to use them.
PatternFly Elements - installation
Import Maps
<script type="importmap">
{ "imports": { "@patternfly/elements/":
"https://redhatstatic.com/dx/v1-alpha/@patternfly/elements@2.3.2/" } }
</script>
<script type="module">
import '@patternfly/elements/pf-button/pf-button.js';
import '@patternfly/elements/pf-card/pf-card.js';
</script>PatternFly Elements - react wrappers
stress that react wrappers is a react problem
Red Hat Design System
Why two design systems?
- PatternFly Elements
-
- Upstream
- Unbranded
- Multipurpose (focused on web apps)
- Red Hat Design System
-
- Downstream
- Branded
- Digital experiences (works in apps as well)
Red Hat Design System
Red Hat Design Tokens
#title {
grid-area: title;
color: var(--rh-color-brand-red-on-light);
padding:
var(--rh-space-3xl)
var(--rh-space-7xl);
}Red Hat Design System
The future
- Form controls (FACE)
- Declarative shadow DOM (SSR)
- CDN optimizations
Building out the library, optimizing the workflows.
Advantages
Organizations
- Interoperability
- Future-proofing
- Performance
It's about increasing collaboration, reducing duplication of effort, and breaking down silos.
Advantages
Teams
- Reduce churn
- Avoid The Big Rewrite™
- Frameworks allowed, not required
Using shared APIs across common interfaces and enabling piecemeal migration.
Advantages
Developers
- Knowledge transfer
- Reduce tooling complexity
- Standards-aligned development
Training up web developers, not framework developers.
A collaborative future
Design collaboration
DX designers could participate in PatternFly upstream design work
| More eyes | |
| More resources | |
| + | More contributors |
| More PatternFly |
A collaborative future
Engineering collaboration
Work towards upstreaming PatternFly Elements as a framework-agnostic, standards-based core for all web-based integrations.
- More use cases, more users
- Fewer tech restrictions
- One standard across products / sites / apps
A collaborative future
Open questions
-
Native integrations?
- Electron
- PWA
- Adwaita / OS native
-
Downstream projects?
- Framework wrappers
- Federated libraries (e.g.
@cpelements)
-
Design alignment?
- DPO collaboration
- Themability via css-custom properties,
::part, etc. - Design tooling integrations