Coding Design Systems | ep05 | SolidJS · Part 1 with Ryan Carniato

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 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

0:00 - Intro 1:52 - Starting to code for the Web 3:18 - Ebay Marko JavaScript Framework and the Islands Pattern 6:12 - SolidJS birth and ecosystem 10:35 - From KnockoutJS to SolidJS: the Reactive Model 14:31 - Reactive Primitives and Performances 17:25 - Backlight Design System Editor 18:44 - Storybook CSF for SolidJS 21:48 - Branching, JSX Fragments, and SolidJS Control Flow for components 34:14 - Styling in SolidJS 40:10 - From React to SolidJS 44:26 - Handling CSS variables in SolidJS States 50:07 - MDX within SolidJS for documentation 55:34 - Outro 🎁

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

This week we’re pleased to welcome Ryan Carniato (@RyanCarniato) on the show! An occasion to talk about SolidJS Primitives and fundamentals, and creating a new Tech Sample Starter Kit for it in Backlight.

We discuss the reactivity mental model in SolidJS, the control flow, styling and handling CSS variables, supporting CSS Modules and MDX for documentation, and way more about the SolidJS ecosystem itself.

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

• SolidJS: https://www.solidjs.com/

• SolidJS Starter Kit in Backlight: https://backlight.dev/doc/Wl0L6jPiDG6dsFnKufaV/?utm_campaign=sessions%3Acds

• SolidJS Open Source Design System Starter Kit: https://github.com/divriots/starter-solidjs?utm_campaign=sessions%3Acds

• Solid-marked, a MDX/Markdown compiler for SolidJS: https://github.com/LXSMNSYC/solid-marked

• Using mdx in SolidJS: https://github.com/high1/solid-jsx

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

• 🐥 Ryan Carniato: https://twitter.com/RyanCarniato | https://dev.to/ryansolid

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

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