Coding Design Systems - ep15 - Design Systems and State Management, with Juho Vepsäläinen

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 Juho Vepsäläinen 00:05:01 - State Management in Webapps overview 00:07:45 - App State, Partial Hydration, and Islands Architecture 00:10:23 - State Management Patterns 00:11:36 - Sidewind: State engine for modern Webapps 00:14:43 - Creating a Design System based on Web Components and Sidewind 00:20:49 - Splitting components to cascade state using props 00:42:33 - Using Sidewind to manage state cascade in design systems components 01:09:02 - Outro: a statement for the next session to improve the cascade

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

Helped by the creator of Sidewind, a modern state engine for Webapps, we create a new Backlight’s Starter Kit based on Web Components and Sidewind to demo how to expose stateful components from your design system, ready to handle state coming from your top-level app.

In this episode, we make the first steps in defining the basics of state management in stateful components.

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

• 🐥 @bebraw: https://twitter.com/bebraw
• 🐥 @survivejs: https://twitter.com/survivejs
• https://survivejs.com/
• 🐥 @ReactFinland: https://twitter.com/ReactFinland
• https://sidewind.js.org/
• https://gustwind.js.org/

Picks:

• Xstate JavaScript State Machine: https://xstate.js.org/
• Deno: https://deno.land/
• Cloudflare workers with Deno: https://denoflare.dev/
• Astro Beta Launch Week: https://astro.build/blog/launch-week/
• Rocket SSG engine: https://rocket.modern-web.dev/

Previous episodes you may be interested in:

• Web Components design system, with Thomas Allmer: https://backlight.dev/sessions/coding-design-systems-web-components-design-system-with-thomas-allmer?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