Wes Bos & Scott Tolinski - Full Stack JavaScrip...

Zpravodajství

Technologické zprávy

Technika

908: Storybook Has Evolved w/ Jeppe Reinhold

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

Wes and Scott talk with Jeppe Reinhold about Storybook 9’s powerful new features—including drastically reduced bloat, seamless Vite integration, and next-level component testing. They dive into visual regression testing, accessibility, performance, and best practices for writing robust, isolated UI components developers can actually enjoy testing and documenting. <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:40">01:40</a> What is Storybook?</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=03:48">03:48</a> How Storybook makes component design easier</li> <li class="has-line-data" data-line-start="7" data-line-end="11"> <a href="#t=04:41">04:41</a> Vite integration and compatibility with other tools <ul> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://vite.dev/">Vite</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://webpack.js.org/">webpack</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="https://rspack.rs/">RSpack</a></li> </ul> </li> <li class="has-line-data" data-line-start="11" data-line-end="14"> <a href="#t=06:50">06:50</a> Storybook’s significantly smaller bundle size <ul> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://e18e.dev/">e18e</a></li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="https://github.com/lukeed/polka">polka</a></li> </ul> </li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=13:31">13:31</a> Upgrading to Storybook 9</li> <li class="has-line-data" data-line-start="15" data-line-end="17"> <a href="#t=17:34">17:34</a> Testing components with Storybook <ul> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="https://vitest.dev/">Vitest</a></li> </ul> </li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=19:51">19:51</a> How do you write a component “story”?</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=24:29">24:29</a> Brought to you by <a href="https://sentry.io/">Sentry.io</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=24:54">24:54</a> How visual testing works</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=28:38">28:38</a> How Storybook makes money</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=29:33">29:33</a> Best practices for component design</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=32:24">32:24</a> Mocking and testing strategies</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=34:49">34:49</a> Accessibility testing</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=40:51">40:51</a> Add-ons and future features</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=44:43">44:43</a> Storybook’s documentation</li> <li class="has-line-data" data-line-start="26" data-line-end="28"> <a href="#t=46:33">46:33</a> Sick Picks + Shameless plugs</li> </ul> <h3 class="code-line" data-line-start="28" data-line-end="29"> <a id="Sick_Picks_28"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="30" data-line-end="32"> Jeppe: <a href= "https://www.jbl.com/wifi-speakers/BOOMBOX-3-WIFI.html">JBL Boombox 3 Wi-Fi</a></li> </ul> <h3 class="code-line" data-line-start="32" data-line-end="33"> <a id="Shameless_Plugs_32"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="34" data-line-end="36"> Jeppe: <a href="https://www.chromatic.com/">chromatic</a></li> </ul> <h3 class="code-line" data-line-start="36" data-line-end="37"> <a id="Hit_us_up_on_Socials_36"></a>Hit us up on Socials!</h3> Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: <a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

Wes and Scott talk with Jeppe Reinhold about Storybook 9’s powerful new features—including drastically reduced bloat, seamless Vite integration, and next-level component testing. They dive into visual regression testing, accessibility, performance, and best practices for writing robust, isolated UI components developers can actually enjoy testing and documenting.
 Show Notes  00:00 Welcome to Syntax!
 01:40 What is Storybook?
 03:48 How Storybook makes component design easier
 04:41 Vite integration and compatibility with other tools  Vite

 webpack

 RSpack

 06:50 Storybook’s significantly smaller bundle size  e18e

 polka

 13:31 Upgrading to Storybook 9
 17:34 Testing components with Storybook  Vitest

 19:51 How do you write a component “story”?
 24:29 Brought to you by Sentry.io

 24:54 How visual testing works
 28:38 How Storybook makes money
 29:33 Best practices for component design
 32:24 Mocking and testing strategies
 34:49 Accessibility testing
 40:51 Add-ons and future features
 44:43 Storybook’s documentation
 46:33 Sick Picks + Shameless plugs
  Sick Picks  Jeppe: JBL Boombox 3 Wi-Fi

  Shameless Plugs  Jeppe: chromatic

  Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott: X Instagram Tiktok LinkedIn Threads
 Randy: X Instagram YouTube Threads

Aplikace Youradio Talk

908: Storybook Has Evolved w/ Jeppe Reinhold

Poslechněte si podcast