PatternFly Elements - A Performant Design System

on YouTube ↗34m

" summary

PatternFly Elements 2.0 implements PatternFly visuals as web components so any stack can use them; components are authored with TypeScript + Lit and PatternFly design tokens, support slots and attributes, and aim for a one-to-one visual match with PatternFly React. A demo shows 222 KB vs 2.5 MB of JavaScript (web components vs CRA React) and pages render with no-JS. CDN + import maps distribution works; server-side rendering uses declarative Shadow DOM and form handling relies on form-associated custom elements; Red Hat Design System applies branding and microfrontends use elements successfully.

AI-written summary · about

" chapters (13)

1. 0:00Start
2. 0:36What are Web Components
3. 1:55Web Component Core Technologies
4. 3:50What can you Build with Web
5. 4:41Advantages of Web
6. 7:54A Brief History
7. 10:37PatternFly Elements 2.0
8. 13:39Making PatternFly Elements
9. 16:06Getting PatternFly Elements
10. 17:25Using Pattern Fly Elements
11. 20:39The Future
12. 22:57Why Two Design Systems?
13. 24:02Case Study

" related talks

• 39mStyling a design system based on Bootstrap 4 and Web ComponentsAndres Galante · Devoxx US 2017
• 21mComponent-based Design System and DevelopmentDávid Halász, Tereza Novotna · foss-north 2019
• 35mDesign system - From a Developer Point-of-ViewYael Oshri Balla · YGLF 2019: Code Camp
• 56mChasing the holy grail Reusable Web Components and Design TokensDuncan Hunter · NDC Melbourne 2022
• 26mComponents, Patterns and sh*t it’s Hard to Deal withMarco Cedaro · React Advanced 2021
• 41mHigh-Performance Web UI with Web ComponentsCory Rylan · Reliable Web Summit 2021
• 30mDesigning with ReactMark Dalgleish · React Amsterdam 2019
• 44mFostering Collaboration: Pattern Libraries / Rapid PrototypingBermon Painter · FITC Toronto 2015