Coding Design Systems - ep12 - A Web Components design system, with Thomas Allmer

Every Tuesday at 5:30PM UTC, join @Georges_Gomes, @m4d_z, and their guests in a new live coding session about design systems, on Backlight.dev!

⎯⎯⎯ In this episode ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

00:00:00 - Intro: Welcome Thomas Allmer (@daKmoR) 00:04:21 - The future of Web interfaces development: get rid of dependencies of hell 00:10:26 - Using Lit as a foundation for Web Components 00:12:29 - Single Page Application (SPA) trend: are the Multiple Pages Applications (MPA) dead 00:18:03 - Rocket: the modern Static Site Builder (SSG) with Web Components Server Side Rendering (SSR 00:26:44 - Frontend Devtools trend: how we’re moving from JS-based devtools to system languages-based devtools 00:30:17 - Dev performance vs End-users performance: split the targets 00:38:53 - Coding a Lit-based design system 00:59:41 - Backlight starter kits 01:03:47 - Outro: expecting from the scoped elements feature

⎯⎯⎯ Description ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

“Always Bet on Web Components!” In this episode, we cover the future of the Web development based on Web Components. From a design system perspective to static site generation (SSG), Web Components can and should be everywhere!

We also talk about Rocket, the server side rendering (SSR) toolkit to build static site using Web Components, and we start a new starter kit for Backlight, based on the Lit framework!

⎯⎯⎯ Resources ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

• 🐥 @daKmoR: https://twitter.com/daKmoR

• 🐥 @OpenWc: https://twitter.com/OpenWc

• https://open-wc.org/

• 🐥 @modern_web_dev: https://twitter.com/modern_web_dev

• https://modern-web.dev/

• Rocket - the modern Static Site Builder: https://next.rocket.modern-web.dev/

• ING Lion Design System: https://lion-web.netlify.app/

• Islands Architecture by Jason Miller: https://jasonformat.com/islands-architecture/

• Style Dictionary Playground by ‹div›RIOTS›: https://www.style-dictionary-play.dev/

• Lit Web Components framework: https://lit.dev/

• Web Copmonents Scoped Elements: https://open-wc.org/docs/development/scoped-elements/

• ‹Coding #DesignSystems› Open Props episode with Adam Argyle: https://backlight.dev/sessions/coding-design-systems-open-props-part-2-with-adam-argyle?utm_campaign=sessions%3Acds

• 🪄 Backlight Design Systems Editor: https://backlight.dev/?utm_campaign=sessions%3Acds

• 🐥 Georges Gomes: https://twitter.com/georges_gomes

• 🐥 m4dz: https://twitter.com/m4d_z