Frontend First: Recent Episodes

View Details

Sam and Ryan talk about React 19's useActionState hook. They discuss how adding async functions to a plain React app introduces lots of in-between states that developers must grapple with, and how useActionState allows React to collapse and eliminate these states, bringing the simplicity of React's sync mental model to our async code.

Timestamps:

• 0:00 - Intro
• 1:51 - How React normally eliminates state in synchronous apps
• 8:20 - How useActionState lets React eliminate state in asynchronous apps
• 18:17 - Why you shouldn't just pass server actions into useActionState
• 23:00 - TCP/IP and UDP analogy
• 26:39 - Thinking of useActionState like enqueue
• 34:55 - Why the term "reducer" is too loaded for best understanding useActionState
• 51:07 - How useActionState helps you build a Todo app that stays responsive during pending actions

View Details

Sam and Ryan talk about using Cloudflare Tunnel for local development, the new React Compiler beta release, and why reading or writing refs during render violates the rules of React.

Timestamps:

• 0:00 - Intro
• 1:42 - Cloudflare Tunnel
• 7:06 - React Compiler
• 14:21 - Reading or writing refs during render

Links:

• Cloudflare Tunnel
• React Compiler Beta release
• React Docs Pitfall on refs

View Details

Sam and Ryan talk about building a useAnimatedText hook that can animate streaming text. They also discuss how React code that uses state changes to approximate events can be simplified, and the benefits of having escape hatches when building UI with Catalyst.

Timestamps:

• 0:00 - Intro
• 1:22 - Catalyst and escape hatches
• 16:03 - Building a useAnimatedText hook (aka useBufferedText)
• 54:10 - Avoiding using state changes to approximate events

Links:

• Catalyst
• Sam's Tweet about useBufferedText and AnimatedScroller
• useAnimatedText recipe
• Intl.Segmenter on MDN
• David K's Tweet on events
• Ricky's Tweet on Intersection Observer
• Build UI's new course

View Details

Sam and Ryan talk about how frameworks and infrastructure evolve with each other, using Next.js as a representative example. They discuss how hosting providers like Heroku have always imposed certain constraints on apps, what features those constraints enable hosting providers to support, how burdensome those constraints are across different frameworks, and how frameworks that add infra-specific APIs can best communicate the costs of those APIs and benefits they enable.

Timestamps:

• 0:00 - Intro
• 3:03 - Heroku and the Twelve-Factor App
• 7:39 - GitHub Pages and static sites
• 13:57 - Serverless and JAMstack
• 17:30 - Vercel and CDNs, self-hosting, and Next.js
• 19:00 - How framework APIs can nudge an app towards a particular hosting solution
• 23:09 - What constraints does Next.js impose on your app (e.g. middleware doesn't run node), and what benefits do those constraints give you?
• 36:13 - How Next.js APIs are motivated by wanting to tease apart static and dynamic code, in an attempt to support the needs of any web app with a single stack
• 40:33 - What is the relationship between frameworks and infra?
• 47:37 - How can frameworks that add infra-specific APIs best communicate the costs of those APIs and the benefits they enable?

Links:

• The Twelve-Factor App

View Details

Tom Occhino, Chief Product Officer at Vercel and former Engineering Director at Facebook, joins Sam to talk about the pivotal moments in React's history. He talks about how React popularized the ideas of declarative rendering and unidirectional data flow, how GraphQL furthered React's goal of co-locating all the concerns of a particular piece of UI, the problems that GraphQL led to at Facebook and how Relay solved them, and how Suspense, Server Components, and PPR are the generalized spiritual successors to the stack used at Facebook.

Timestamps:

• 0:00 - Intro
• 2:53 - Declarative rendering as React's legacy
• 8:12 - How GraphQL enabled complex components to be fully self-contained
• 20:12 - How React's goal has always been to co-locate all the concerns of a particular piece of UI
• 22:58 - The problem with co-locating GraphQL with components, and how Relay solved it
• 26:28 - How RSC is the generalized spiritual successor to BigPipe and GraphQL
• 34:46 - What PPR is, and how it and Suspense fit into this story
• 55:55 - The general paradigm shift of getting static code to the device as soon as possible

Links:

• Tom Occhino with Ben Dunphy
• React: The Documentary
• React Roundtable with Andrew Clark and Sebastian Markbåge
• Tom Occhino on Twitter

View Details

Sam and Ryan talk about render props in React. They discuss where they came from, how Hooks superseded them for sharing stateful logic, how data attributes compare to them for customizing styling, and how for certain complex components like forms they're still a great solution for accessing slices of internal state.

Timestamps:

• 0:00 - Intro
• 3:40 - Where did render props come from?
• 6:01 - How hooks replaced many use cases for render props
• 8:14 - Using render props for custom styling
• 10:32 - Data attributes vs. render props for custom styling
• 16:43 - Using render props to peek into an uncontrolled component's internal state
• 21:05 - Forms example and using render props for a smaller public API
• 24:10 - React docs mention of render props
• 25:48 - Where render props shine

Links:

• Headless UI Menu
• Radix Forms
• React Aria Forms
• React docs - Render props
• Our upcoming course on React Component Patterns
• Email Sam
• Email Ryan

View Details

Sam and Ryan discuss controlled and uncontrolled components in React. They talk about how uncontrolled components can be thought of as components that manage their own internal state, why you should model your complex React components after the simpler APIs of native HTML elements like inputs, why you shouldn't try to make components that are both controlled and uncontrolled, and why making a new component boundary is sometimes all you need to make your custom components behave more predictably.

Timestamps:

• 0:00 - Intro
• 1:41 - What are controlled and uncontrolled components?
• 6:11 - How to change a component from uncontrolled to controlled
• 8:48 - How do you decide when to use a controlled or uncontrolled component?
• 12:00 - Sortable table example and a single source of truth
• 15:27 - Is it always either controlled or uncontrolled?
• 21:09 - Color picker example and not exposing internal state
• 28:46 - Sortable list example with Framer Motion
• 39:45 - Component boundaries and wearing two hats: the library author vs. library consumer
• 41:43 - How do you know if you are using the wrong approach?

Links:

• New course: Advanced React Component Patterns
• React docs: Controlled and uncontrolled components
• React docs: Storing state from previous renders
• Email Sam
• Email Ryan
• Frontend First on Twitter

View Details

Sam and Ryan talk about the pattern of building unstyled components with React. They discuss why unstyled components were created, how they improve upon composition patterns from UI libraries like Bootstrap, how they can be used to share behavior and logic without prescribing any styling opinions, and how they fit into a larger collection of React patterns that can be used to build more powerful components that avoid premature abstractions.

Timestamps:

• 0:00 - Intro
• 1:36 - What are unstyled components?
• 2:24 - How do unstyled components improve upon earlier patterns?
• 6:44 - Why would you want to use an unstyled component?
• 9:58 - How can you compose an unstyled component with a styled component?
• 16:41 - How to decide which pattern is best suited for the code you want to share
• 19:36 - Using patterns that preserve React's locality of behavior
• 24:49 - How do you know if an abstraction is good?
• 32:54 - Build UI's upcoming course on Advanced React Component Patterns

Links:

• Build UI's newest course: Advanced React Component Patterns
• Sam's YouTube video on Recursive Components
• Email Sam
• Email Ryan

View Details

Sam and Ryan talk about what sorts of capabilities a tool should have to be considered a web framework. They discuss how frameworks tackle the complexity of getting different systems to communicate with each other, how good frameworks embrace the strengths and patterns of the language they're written in, and why frameworks and services are not in opposition to each other.

Timestamps:

• 0:00 - Intro
• 3:58 - Adapter pattern and cohesive boundaries
• 9:43 - Rails is Omakase
• 13:47 - Configurable, but still cohesive
• 17:04 - Frontend frameworks try to “work with everything”
• 21:42 - Does composition mean a React framework will look different than Rails?
• 29:29 - Why taste still matters
• 34:20 - A framework is a shell of adapters and a brain that coordinates them
• 35:16 - When using services, complexity still exists in the in-between
• 37:59 - A fullstack dev is someone who acknowledges and understands how all the parts come together
• 44:06 - Tweets about the hard problems that Laravel tackles, and the deep design it took to get there
• 49:15 - Frameworks should embrace the strengths and patterns of their language and ecosystem
• 50:35 - Why RSCs and Server Actions mean the “Rails for JS” may end up looking nothing like Rails
• 52:11 - Why users of a “fullstack framework” shouldn’t even care about where the code is running
• 55:31 - Why libraries or services that are easy to install and set up are not a replacement for frameworks

Links:

• Sam's BigSkyDevCon talk
• Rails is omakase
• Povilas' Laravel tweet
• Mary's Laravel tweet
• Build UI's upcoming React Component Patterns course
• Email Sam
• Email Ryan

View Details

Sam joins Lane Wagner in a crossover episode with the Backend Banter podcast. They talk about abstractions in frontend and backend frameworks, what JavaScript is doing differently from other languages and frameworks, why the frontend should drive the backend even if you're building in a server-side framework, and what's so special about React Server Components.

Timestamps:

• 0:00 - Intro
• 2:12 - When abstractions leak
• 6:37 - Recap of Sam's BigSky talk
• 10:51 - What is JavaScript doing differently?
• 19:10 - Why frontend frameworks should have more backend features
• 24:04 - Strong opinions on a library level
• 30:29 - Shipping more standardized interfaces
• 37:06 - The frontend should be driving everything in the backend
• 39:12 - Your types should flow from the database to the frontend, but not your product decisions
• 46:53 - React Server Components

Link:

• Backend Banter

View Details

Sam and Ryan read and discuss a fantastic interactive blog post about queueing in HTTP written by Sam Rose.

Timestamps:

• 0:00 - Intro
• 6:57 - Queueing: An interactive study of queueing strategies
• 9:05 - Why do we need queues?
• 13:16 - FIFO and timing out
• 17:55 - LIFO
• 20:58 - Priority queues
• 25:21 - Active queue management
• 29:08 - Comparing queues
• 36:32 - Conclusion

Links:

• Queueing: An interactive study of queueing strategies
• Up and Down the Ladder of Abstraction

View Details

Sam and Ryan discuss the new features in React 19 that will specifically benefit developers building single-page applications. They talk about how Suspense and Transitions let developers "teach" React about when their apps are in a loading or a pending state, how Client Actions improve upon using events in React 18 to handle data mutations, and how Actions enable React Components to automatically render and discard optimistic updates without any knowledge of the application's data layer. They also discuss several new Hooks like useOptimistic, useFormStatus, useActionState, and useOptimistic.

Timestamps:

• 0:00 - Intro
• 2:19 - How SPAs are built in React 18
• 5:29 - How Suspense made loading a first-class concept in React
• 7:48 - The problem with data writes in React 18
• 10:37 - What are Client Actions?
• 12:05 - What does it look like to use Actions?
• 14:13 - What are the benefits of Actions?
• 18:46 - How does React 19 change the Optimistic UI story?
• 29:40 - Working with Transitions outside of Actions
• 36:06 - The useActionState Hook
• 37:51 - Using Transitions to keep the old UI rendered and responsive
• 41:25 - How Transitions enable better composition patterns in third-party libraries
• 43:55 - Building a SortableList that flips between being controlled and uncontrolled

Links:

• React Unpacked: A Roadmap to React 19

View Details

Sam tells Ryan about a recent talk he gave at BigSkyDevCon. They chat about how backend frameworks are raising the ceiling of what UIs they’re capable of delivering, how frontend frameworks are raising the floor of what backend features they come bundled with, and what each community can learn from the other.

Timestamps:

• 0:00 - Intro
• 4:23 - Recap of Ryan Florence’s talk
• 6:49 - Overview of "High floor, high ceiling"
• 10:02 - Cohesion is the biggest strength of backend frameworks
• 17:10 - Why doesn’t Rails for JavaScript exist?
• 23:48 - Locality of behavior is the biggest strength of frontend frameworks
• 33:14 - The use of lexical scope in React
• 50:27 - Which community is raising both the floor and ceiling the most?

Links:

• "High floor, high ceiling" talk

View Details

Sam and Ryan talk about the difference between the costs of building a feature and the benefits that feature brings to our end users. They discuss how libraries and frameworks can lower the technical cost of building a given feature, how Ryan Florence framed this calculation in his talk at Big Sky Dev Con, and how sometimes developers’ opinions and tastes about tech can smuggle their way from the cost side of the equation into the benefit side.

Topics include:

• 0:00 - Intro
• 6:53 - How Ryan Florence framed the problem in his talk “Mind the Gap”
• 14:38 - How frontend frameworks and backend frameworks both have their own ways of crossing the network gap
• 19:11 - How Network-Sensitive Interactions force technologies to grapple with both server and client environments
• 23:02 - How React is trying to lower the cost of moving interactions between the server and client with Server Components and Server Actions
• 26:53 - Why “Use the right tool for the job” doesn’t capture the dynamic requirements of living software
• 31:53 - How discussions about the product benefits of a feature and the technical costs of that feature are often conflated with each other
• 34:08 - A thought experiment from economics that highlights how uncertainty plays a role in the estimation of product benefits
• 56:54 - How to think about tech choice independently of the estimation of product benefits

Links:

• "Mind the Gap" by Ryan Florence
• Zero-JavaScript View Transitions in Astro

View Details

Ryan tells Sam about his experiments with using the new View Transitions API in a React photo gallery app. He talks about how he likes the flexibility of the API, how to think about integrating it into any client-rendered app regardless of the framework, and how he used a Promise with an Effect to tie a View Transition to a React Transition.

Topics include:

• 0:00 - Intro
• 1:11 - What it’s like to integrate View Transitions with React
• 7:30 - How View Transitions work
• 16:09 - Building a gallery that animates photos across page navigations
• 19:38 - How to use startViewTransition for enter/update/exit animations
• 26:52 - Using a Promise to link a View Transition to a React Transition
• 43:02 - Do View Transitions replace framework-specific animation libraries?
• 45:17 - Using DevTools to preview and tweak transitions

Links:

• easings.net
• Ionic Framework's animation curves
• Shu’s next-view-transitions library

View Details

Sam tells Ryan about his experience setting up an in-browser code editor with CodeMirror that he plans on using for blog posts and code recipes, as well as what he thought about using Radix Themes for the first time in earnest on a side project of his currently styled with Tailwind.

Topics include:

• 0:00 - Intro
• 4:01 - Building an authoring tool with CodeMirror
• 18:47 - Refactoring Tailwind to Radix Themes

Links:

• CodeMirror
• Sam’s YouTube video on Radix Themes
• Radix Themes docs

View Details

Sam and Ryan talk about why it’s better to think of throw as a general-purpose JavaScript language feature rather than something that should only be used for error handling. They discuss the ambiguity around the phrase “error handling”, situations that call for dealing with errors locally vs. globally, and how throw can be useful for non-error control flow. They also discuss the problems with trying to shoehorn dynamic features into a static site.

Topics include:

• 0:00 - Intro
• 4:07 - Error handling vs. throw-try/catch
• 23:34 - Errors vs. Exceptions
• 31:52 - How Next.js uses throw for non-error control flow
• 40:44 - Adding a dynamic feature to a static site

Links:

• Global progress in Next.js
• What color is your function

View Details

Sam and Ryan discuss the core values of the Next.js framework, and how those values motivate several of the framework’s design decisions. They talk about caching, why layouts don’t have access to the URL, and why the router doesn’t expose navigation events, as well as how developers should think about extending Next’s functionality with their own application code.

Topics include:

• 0:00 - Intro
• 2:58 - Why don’t layouts re-render in Next.js?
• 7:10 - Push-based vs. pull-based rendering
• 8:56 - Thinking about re-renders in a pure React app
• 11:07 - Why Server Actions need to call the revalidate* APIs
• 12:26 - Why doesn’t Next.js pass the request to every page and layout?
• 31:40 - Immediate-mode rendering vs. “Do the least amount of work possible”
• 51:54 - Is opting-in to more re-renders framework fighting?
• 53:44 - Helping users by communicating the philosophy
• 56:25 - Why doesn’t Next.js expose global router events?
• 1:00:17 - Why it’s important to understand Next’s design decisions when choosing it for your next project

View Details

Sam talks to Ryan about refactoring an MDX blog post to a React Server Component. They discuss how RSC’s ability to render server-side content with “client-side holes” turns out to replace MDX for many uses cases. They also talk about other tools that are (surprisingly) a conceptual subset of the RSC architecture, such as custom Webpack loaders.

Topics include:

• 0:00 - Intro
• 5:05 - The Next.js happy path for MDX: Local files
• 11:15 - Exploring remote MDX content with mdx-remote
• 14:46 - Separating the serializable parts of MDX from the runtime imports
• 17:13 - Realizing that RSC covers the same problem space, and ditching MDX
• 26:50 - Exploring other APIs and plugin ecosystems that RSC could replace: Webpack loaders, next/image, and Liquid templates
• 32:11 - React’s vision for RSCs
• 35:18 - How RSCs could replace build-time plugin APIs
• 44:51 - Replacing MDX with Markdoc, Shiki, and custom node code during render

Links:

• Markdoc
• Shiki

View Details

Sam and Ryan read and discuss the latest update from React Labs.

Topics include:

• 0:00 - Intro
• 5:26 - Opening
• 6:18 - React Compiler
• 27:27 - Actions
• 51:44 - Asset loading
• 1:13:06 - Next Major Version of React
• 1:15:42 - Activity

Links:

• React Labs blog post
• Sam’s video on Strict Mode

View Details

Sam and Ryan discuss the intuition behind React Transitions, and why React’s new useOptimistic hook is a good fit for building a URL-driven filter panel that stays fully responsive to client interactions.

Topics include:

• 0:00 - Intro
• 1:12 - The problem: In a world of Server Components, URL updates are blocked by a server-side roundtrip
• 10:44 - Attempted solution: Use the browser’s Native History API (history.pushState)
• 15:03 - Realization: The source of truth flips from server to client during the transition – which is exactly what useOptimistic was designed for
• 17:54 - Unwinding our mental model of client-first React apps by thinking about how HTML-only checkout forms work
• 21:44 - The intuition behind React Transitions, and how they put our UI into a state of preparation
• 30:39 - How Transitions improve upon default browser behavior by keeping our current UI 100% responsive, and how useOptimistic solves the checkbox filter panel
• 37:46 - Ryan’s take: It’s a bonus when tools make you feel smart, but it’s more important for them to not make you feel dumb

View Details

Ryan and Sam discuss the purpose and usage of the useOptimistic() hook, a new experimental API from React.

Topics include:

• 0:00 - Intro
• 2:18 - Problem: RSCs require a server roundtrip before the UI can be updated
• 10:13 - Solution: useOptimistic() lets you merge ephemeral client-side state with server-side data so you can update the UI during a Server Action or Transition
• 14:03 - How useOptimistic() avoids the notion of identity by discarding the ephemeral state after the app settles
• 21:17 - How useOptimistic() lets you safely “fork” state that eventually syncs with the server
• 27:32 - Handling error states
• 29:26 - Differences between useOptimistic() and Remix fetchers
• 34:57 - How useOptimistic() lets you avoid managing a long-lived client-side cache

Links:

• Ryan’s useOptimistic tweet
• Ryan’s video on React Cache: Part 2

View Details

Ryan and Sam discuss the purpose and usage of the cache() function, a new experimental API from React.

Topics include:

• 0:00 - Intro
• 2:29 - Caching in Next.js vs. React cache()
• 8:11 - Why React invalidates the cache for each server request
• 14:43 - How cache() enables colocation of data-fetching code
• 16:14 - Using cache() to share CPU-heavy or I/O-bound tasks between components
• 19:31 - Why cache() obviates the need for context in Server Components
• 23:19 - The danger of module scope on the server
• 27:54 - Why cache() is implemented with AsyncLocalStorage
• 41:04 - Why cache() is part of React
• 48:27 - Why Server Components don’t support cache()
• 53:04 - How cache() eliminates waterfalls

Links:

• Ryan’s YouTube video on React Cache

View Details

Sam and Ryan talk about Advanced Radix UI, Build UI’s newest course. They also read and discuss a blog post that describes the RSC architecture in terms of two processes: React Server and React Client.

Topics include:

• 0:00 - Intro
• 0:49 - Ceilingless libraries + Advanced Radix UI
• 21:02 - Read and discuss: “RSC is React Server + Component”

Links:

• Advanced Radix UI course
• Radix UI
• RSC is React Server + Component

View Details

Ian Landsman & Aaron Francis join Sam to discuss React Server Actions & Server Components, why it's important to have one set of opinions, and yes, the infamous SQL Injection Slide at NextConf.

This is a crossover episode with the excellent podcast Mostly Technical.

Topics include:

• 0:00 - The Most Memed Man on the Internet
• 09:06 - High Floor vs. High Ceiling
• 19:20 - What the Hell Is Next?
• 23:22 - The Third Phase of React
• 29:09 - Your App Is Not Unique
• 35:23 - Server Actions & Server Components
• 51:33 - CallYourMom.Com
• 01:00:56 - Fat Models, Skinny Controllers
• 01:14:16 - One Set of Opinions

Links:

• Sam’s Next.js Conf talk
• React is a programming language for UIs

View Details

Sam and Ryan talk about the key parts of Remix’s architecture in the context of the Work Journal app from Build UI’s latest course. They discuss how Remix’s conventions around Links, Forms, Actions, and Loaders allow developers to eliminate boilerplate and take advantage of the best HTTP has to offer, while still providing a seamless way to enhance their UIs using the full power of client-side React.

Topics include:

• 0:00 - Intro
• 0:31 - The Work Journal app
• 2:20 - Making dynamic pages with Loaders
• 8:00 - How Remix relies on HTTP for routing
• 12:30 - Making backend changes using Forms and Actions
• 19:41 - How Remix’s comprehension of Loaders and Actions eliminates boilerplate
• 25:20 - How Remix layers the full power of React on top of web fundamentals

Links:

• Sign up for the Build UI Newsletter
• Video on HTTP Session Cookies

View Details

Ryan continues to share the details behind his custom RSC implementation. He talks with Sam about how Server Actions allow the client to reference server-side code (in the same way client components allow the server to reference client-side code), how Server Actions are bundled and invoked, and the security concerns associated with blurring the lines between the server and the client.

Topics include:

• 0:00 - Intro
• 0:52 - Ryan’s course on React Server Components
• 3:06 - Motivating Server Actions, how to bundle them, and how to invoke them
• 27:38 - Sending arguments via hidden inputs or closures, and security concerns

Links:

• Ryan’s React Server Components course

View Details

Ryan shares how building his own RSC implementation from scratch helped him better understand React’s new paradigm. He and Sam talk about how a client React app can fetch an RSC Payload from a server endpoint to update the UI, how an RSC server renders and bundles Client code that’s part of a Server Component tree, and how a client-side Router can be used to fetch new RSC trees based on the URL.

Topics include:

• 0:00 - Intro
• 2:48 - Making a server endpoint that a client React app can use to re-render the UI
• 15:42 - How the bundling step shims Client Components during a server render with a reference that the client app can later use to execute browser code
• 35:16 - How the React Component API unifies server and client functionality in a single composable interface
• 38:54 - How a client-side router can render different server trees based on the URL
• 49:09 - Reference projects used

Links:

• Simple RSC
• Tangle
• Vite RSC
• Next.js

View Details

Ryan and Sam talk about how to invalidate Next.js’ client-side cache when a different session makes changes to backend data, and ultimately discuss whether clicking a link to a URL vs. hitting refresh on that same URL should render the same page if no backend data has changed.

Topics include:

• 0:00 - Intro
• 1:00 - Suspense boundary identity and the Await component
• 11:07 - How to refresh RSC using a Server Action
• 27:17 - The difference between a navigation and a page refresh

Links:

• Ryan’s Data Fetching with RSC course
• Refresh App Router code recipe

View Details

Tim joins Sam to talk about his work on the new app router in Next.js 13. He explains how the app router leverages Server Components and React’s new cache API to bring a new level of composability to server-side code, how Server Actions are being designed to enable partial revalidation in a single round trip to the server, and how to think about UI updates as a result of server-side state changes.

Topics include:

• 0:00 - Intro
• 2:53 - Rendering Server Components and the RSC payload
• 21:49 - Composition vs. top-down data flow and the React cache
• 53:35 - Revalidation after a user event and Server Actions
• 1:06:37 - Revalidation after a server-side state change
• 1:14:02 - Back and forward navigation
• 1:21:43 - Caching layers
• 1:30:53 - Current focus on stability, performance, education, and TurboPack

Links:

• Tim’s deep dive on caching and revalidating
• Next.js docs on Caching

View Details

Sam and Ryan discuss how TypeScript helped them understand the mechanics of how props get passed from Server Components to Client Components, and how to properly type client component props if the prop starts out as a rich data type on the server. They also clarify some points from last episode’s discussion about the RSC payload.

Topics include:

• 0:00 - Intro
• 0:40 - Clarifying what the RSC Payload actually is
• 10:12 - Understanding prop serialization when passing props from Server Components to Client Components
• 23:38 - How to define TypeScript types for serialized props, and Remix’s SerializeFrom helper

Links:

• Ryan’s RSC course on Build UI

View Details

Sam and Ryan explore different ways to think about the RSC architecture, including what problems RSC solve, why RSC are valuable even in a world without server-side rendering, and how React’s reconciliation phase enables RSC to make partial updates to the UI as a result of server-side events.

Topics include:

• 0:00 - Intro
• 5:45 - What if RSC were introduced before SSR?
• 10:54 - What does it mean to render RSC?
• 25:41 - Why SSR does not apply to Server Components
• 35:31 - Server-driven UI updates

View Details

Ryan shares his thoughts on how Server Actions and the useFormStatus hook are letting him build reusable pending UI for any form in his Next.js side project. Sam talks about how TypeScript prevents an entire class of data-loading bugs that have plagued single-page applications built with a client-side cache.

Topics include:

• 0:00 - Tailwind Connect
• 2:38 - Using TypeScript to prevent data-loading errors
• 19:27 - Building reusable form UI with Server Actions and useFormStatus

Links:

• Server Actions in Next.js
• Styling a Radix Dialog with Tailwind CSS

View Details

Sam and Ryan share their thoughts on the recent React Roundtable with core team members Sebastian Markbåge and Andrew Clark. They talk about the evolution of Server Components from the perspective of solving the problem of fetching data in React apps, how SPAs have a lower baseline but higher ceiling in terms of the user experience they can deliver, and what they’d like to see from frameworks that are built on the RSC architecture.

Topics include:

• 0:00 - Intro
• 0:36 - Recap of Server Components as a solution to data fetching in React
• 11:47 - How Server Components improve the baseline user experience of React apps while also letting us layer in SPA-like enhancements
• 20:11 - What features we give up with server-driven data fetching, and how can we get them back?
• 29:13 - How RSC and Actions bring the setState-and-diff model across the network
• 31:59 - What opinions are left to frameworks that are built on the constraints of RSC, and what would we like to see from them?

Links:

• React Roundtable with Sebastian and Andrew
• Build UI Newsletter

View Details

Sam and Ryan use some recent Twitter discussion on copying + pasting code (instead of abstracting it for reuse) as a springboard for a discussion about how their thinking on low-level UI components and design systems has changed over the years.

Topics include:

• 0:00 - Intro
• 2:16 - Copy-paste vs. creating abstractions
• 11:43 - How we used to build shared UI components
• 15:34 - How we use UI components today
• 22:42 - Is copy-paste the easiest way for developers to implement consistent design?
• 27:41 - When should we create abstractions?
• 37:15 - Designing copy-pasteable APIs

Links:

• Dan’s tweet
• Build UI Newsletter
• Sam’s Server Actions video on YouTube

View Details

Sam and Ryan share their learnings from working with Server Components in earnest over the past week. They talk about how Server Components can simplify client components by passing them props, why it makes sense for a component that can run everywhere to be a Server Component by default, whether RSC is causing unnecessary churn in the ecosystem, and how to think about choosing Server Components vs. client components for a given task.

Topics include:

• 0:00 - Intro
• 0:48 - Lessons learned from building a D3 chart as a React Server Component
• 22:04 - Are Server Components causing unnecessary churn in the JavaScript ecosystem?
• 32:14 - Do Server Components replace Client Components?
• 40:13 - Ryan’s thoughts on rewriting some client-side data fetching code with Server Components

Links:

• Ryan’s Build UI course on Server Components
• Sam’s D3 Chart video on YouTube

View Details

Sam shares some recent learnings around hydration mismatches when rendering time zoned dates on the server and the client. He talks about using the TZ environment variable to reproduce the issue locally, and how he solved his problem by avoiding impure format and transformation functions from date-fns.

Topics include:

• 0:00 - Intro
• 0:50 - Sever vs. client time zone mismatches, and the TZ environment variable
• 14:34 - Which date-fns functions are impure?
• 23:56 - Using intervals and comparison to remove impurities

Links:

• date-fns
• date-fns-tz

View Details

Sam and Ryan talk about using MJML to design, build and send transactional emails with React directly in the browser. They also chat about how to use Framer Motion to get a CSS radial gradient to follow the mouse cursor and the differences between React state, refs, Motion Values, and external stores.

Topics include:

• 0:00 - Intro
• 1:10 - Building in-browser email previews with MJML
• 18:50 - Using radial gradients and Motion Values to build a moving spotlight treatment

Links:

• MJML
• React Email
• Maizzle
• Sam’s Spotlight video on YouTube
• Spotlight code recipe

View Details

Sam and Ryan talk about building an animated tabs component with CSS’s mix-blend-mode property and Framer Motion’s layout animations. They also talk about how to use the URL constructor in JavaScript to help implement secure arbitrary redirects, as well as their initial reactions to new framework APIs that blur the lines between server and client code.

Topics include:

• 0:00 - Intro
• 0:35 - Animated tabs with mix-blend-mode exclusion and Framer Motion’s layoutId
• 14:26 - Using the URL constructor for arbitrary redirects after login
• 27:12 - Reacting to Rich Harris’ discussion on how new framework APIs are exposing hidden API routes

Links:

• Dan Hollick’s thread on blending modes
• Animated Tabs recipe
• Animated Tabs YouTube video
• URL constructor
• Rich Harris’ talk

View Details

Sam tells Ryan about his experience building an animated toggle with React Aria Components. He gives his first impressions of the new library and discusses some of functionality included from the lower-level React Aria hooks. Ryan also talks about his recent use of GitHub Copilot.

Topics include:

• 0:00 - Intro
• 1:15 - Using GitHub Copilot to keep you working at higher levels of abstraction
• 8:15 - react aria components toggle. pressed state. When to use browser defaults vs headless for form inputs.

Links:

• React Aria Components
• Sam’s YouTube video on building an animated toggle
• Build UI Recipe: iOS Animated Switch

View Details

Sam and Ryan talk about updating Build UI to support lifetime memberships. They chat about the site’s current architecture, the strengths and weaknesses of objects vs. functions, how the full stack JavaScript community could benefit from a proper model layer like ActiveRecord, the challenges of using GraphQL on the backend, Prisma, and more.

Topics include:

• 0:00 - Intro
• 1:09 - Current architecture + single purchase
• 6:30 - Rails model layer. OOP vs functional
• 13:55 - What are classes good at, what are functions good at
• 23:53 - Composition vs. inheritance
• 31:44 - graphql. overfetching is not a problem on the backend. prisma.

Links:

• Go Ahead, Make a Mess by Sandi Metz

View Details

Ryan and Sam use some recent Twitter conversation to guide a discussion about the design and purpose of React Server Components. They talk about how client trees and rendered on the server today, why a server-side rendered prepass is wasteful in light of RSC, how hydration of a client tree works, why RSC are never hydrated, how RSC is a purely additive technology, how server and client components can be interleaved, how RSC can be refreshed in-place without loss of any client state, how RSC fits into the React paradigm despite having a unique syntax and set of capabilities, and other topics.

Topics include:

• 0:00 - Intro
• 4:39 - How server-side rendering and hydration work today
• 14:51 - How RSC works, and why they’re never hydrated
• 24:48 - What is the React paradigm, and how RSC fits into it
• 27:54 - How RSC are revalidated
• 33:52 - Why the goal is not to eliminate Client components
• 38:53 - What it means for Server components and Client components to compose with each other

Links:

• Dan Abramov’s RSC AMA thread
• Illustration of server and client trees

View Details

Sam and Ryan share their thoughts on the latest server-centric developments taking place among React frameworks like Remix and Next.js. They discuss the declarative nature of HTML and HTTP, the evolution of frontend development from imperative libraries like jQuery to declarative libraries like React, why developers started creating SPAs in the first place, the power and limitations of server-side links and forms, how server-centric approaches to building rich web experiences like Phoenix LiveView compare to the approaches in the React ecosystem, whether the frontend community has overcomplicated web development, the problem with progressive enhancement, React Server Components, and other topics.

Topics include:

• 0:00 - Intro
• 3:02 - The strengths of HTML and HTTP
• 11:28 - Is frontend development overcomplicated?
• 21:18 - Progressive enhancement
• 33:33 - The nervous system of a web app
• 46:00 - React Server Components
• 53:46 - Server-side approaches

Links:

• My first Remix app on Build UI

View Details

Sam and Ryan have an open-ended conversation about different caching APIs and what kinds of benefits they might afford app developers. They discuss transparent caching layers, cache keys and surrogate keys in systems like Fastly, how SSG is effectively a high-level caching solution, Next.js 13.2’s cache API, Russian doll caching in Rails, whether a fetch cache is too high-level of an abstraction, and other topics.

They also have a retro on choosing to use Hygraph as Build UI’s CMS, discussing some surprises they encountered including the fact that Hygraph favors high availability over consistency (stale reads, which can cause issues with serverless) and rate limits (which causes issues with SSG).

Topics include:

• 0:00 - Intro
• 1:18 - Retro on Hygraph
• 16:27 - Caching conversation

Links:

• Build UI
• Hygraph

View Details

Sam and Ryan chat about their recent work migrating Build UI from a statically generated site to a run-time server-rendered app using Next.js. They talk about their past experience working on server-rendered apps, the problems that static sites were created to solve, and the tradeoffs involved within the static-to-dynamic continuum.

Topics include:

• 0:00 - Intro
• 2:05 - How we built EmberMap with SSR + caching buckets with Redis
• 8:36 - How we launched Build UI as a static site with dynamic workarounds
• 13:15 - The problem with static only sites
• 14:50 - First potential solution: client-side rendering of dynamic data
• 18:01 - Second potential solution: multiple versions of each page
• 25:25 - Third potential option: run-time server rendering
• 35:44 - Why we left static
• 39:55 - Details and challenges of moving to getServerSideProps

Links:

• Build UI

View Details

Ryan talks about a demo he built in Next.js 13 with React Server Components. He explains how RSC driven by the URL eliminated client-side states, how he used React 18 Transitions to enhance the UI, and how he was able to fine-tune the experience differently for the initial render vs. subsequent client-side navigations.

Topics include:

• 0:00 - Intro
• 1:37 - Overview of Ryan’s user search page
• 14:06 - React 18 Transitions and how RSC eliminates client states
• 28:25 - How to change the UX for initial server navigations vs. in-app client navigations while still having one entry point for your data
• 37:01 - Why Next.js 13 encourages you to learn about the Suspense and Transition primitives
• 43:33 - What would a simple boilerplate for RSC look like?
• 49:18 - Do the benefits of backends-as-a-service go away with RSC?

Links:

• Ryan’s demo on Twitter

View Details

Ryan and Sam read a recent article by Derrick Reimer called “Ship Small, Ship Fast” and offer their thoughts on it. They discuss how implementation details can lead to reductions in scope, the relationship between shipping small and agile, and why quickly getting the first steps of a user flow into production is a good protocol for software teams to follow.

Topics include:

• 0:00 - Intro
• 2:06 - Ship Small, Ship Fast read-a-long
• 7:22 - Reactions

Links:

• Ship Small, Ship Fast by Derrick Reimer
• Derrick Reimer on SPA architecture with Elm and GraphQL

View Details

Sam and Ryan talk about seams in TypeScript programs where lies can sneak in. They chat about how API calls, form inputs, and URLs all relate to this problem, the similarity between drifting types and service mocks in testing, zod, and how type-safe languages like Elm eliminate this problem entirely.

Topics include:

• 0:00 - Intro
• 2:41 - Lying in Typescript

Links:

• Zod
• Elm language

View Details

Ryan tells Sam about a side project of his that involves running the text-to-image deep learning model Stable Diffusion on his laptop in response to web requests. Ryan asks Sam questions about animating this UI, including how to animate indeterminate progress, how to avoid unintentional layout animation, and how to automatically repeat a set of items while scrolling rather than stopping at the end.

Topics include:

• 0:00 - Intro
• 0:24 – Overview of Ryan’s Stable Diffusion project -
• 9:36 – Strategies for animating partially indeterminate progress -
• 18:25 – Brainstorm of the API for the headless version of a partially indeterminate progress Hook -
• 25:32 – Unintentional layout animation during window resize -
• 28:29 – Infinite scrolling of a finite array of items -
• 38:52 – Discussion of the need for more high-level Framer Motion examples -

Links:

• Framer Motion docs

View Details

Ryan talks about the pros and cons of exposing Build UI’s environment-independent CMS from Hasura via schema stitching. He also talks about writing a Postgres function to add a derived field to a database model. Sam shares a debugging story about fixing his personal website due to a breaking change in a minor version of npm.

Topics include:

• 0:00 - Intro
• 1:50 - Debugging Sam’s personal website due to a breaking change in npm related to peer dependencies
• 18:00 - Pros and cons of using a Postgres function to derive the active status of a Build UI subscription
• 28:42 - Exposing a Hygraph CMS through Hasura via schema stitching, and the fantastic TypeScript DX that came as a result

Links:

• Hasura
• Hygraph

View Details

Sam and Ryan chat about how to avoid a flicker of content on initial render due to mismatched server/client rendering. They also chat about the pros and cons of React Hooks, and using StackBlitz containers to debug OSS issues.

Topics include:

• 0:00 – Intro
• 1:46 – Ryan Florence’s tweets about Hooks, useEffect and refs
• 18:12 – How to avoid SSR/CSR rendering mismatches when your initial render depends on client-side APIs
• 37:40 – Using StackBlitz for reproduction in open source
• 45:17 – Isolated app development environments with JavaScript containers

Links:

• Ryan Florence’s tweets on Hooks
• Dan Abramov’s reply
• React beta docs on bugs found from double rendering
• React beta docs on bugs found from re-running Effects
• StackBlitz
• Changelog episode with Ryan Dahl about Deno Deploy as a platform

View Details

Sam and Ryan chat about issues they’ve run into in the past when building media sites that store content alongside other dynamic data like user accounts, and how they’re using a CMS to alleviate these problems in Build UI. They also talk about the approach they’ll be using for access control to the CMS.

Topics include:

• 0:00 – Intro
• 0:27 – Unintentional security attack vectors
• 11:20 – Environment-specific vs. environment-independent data
• 23:43 – Architecture discussion for an environment-independent CMS
• 34:39 – Added complexity for testing

Links:

• Framer Motion Recipes on Build UI
• Hacker News post on TeamViewer

View Details

Sam and Ryan chat about building their new site using services, and how they’re thinking about testing it. They talk about how testability is one of the biggest costs of using third-party hosted services, why they continue to like services in spite of this downside, and the fact that you always end up testing your app whether you eventually automate it or not.

Topics include:

• 0:00 - Intro
• 0:59 - How to run automated integration tests against a site that’s built with services

View Details

Ryan shares his experience getting end-to-end type safety from a Hasura backend into a React application. He tells Sam about the different ways GraphQL codegen can be used to generate types, and how he ultimately landed on a solution that combines the TypedDocumentNode type and the zod library.

Topics include:

• 0:00 - Intro
• 2:51 - Using GraphQL Language Server to get autocomplete + linting
• 13:05 - Getting type information on the return object from a query passed to SWR
• 24:06 - Generating TypedDocumentNode objects with GraphQL codegen
• 33:33 - Using zod for run-time validation

Links:

• GraphQL Tag / gql
• GraphQL codegen
• GraphQL codegen over the years
• Ryan’s Tweet with TypedDocumentNode
• Zeus
• Hasura
• Zod

View Details

Ryan tells Sam about some experiments he’s been running using Server Components in Vercel’s new edge runtime. He talks about how components that suspend in the node runtime cause the static build of your Next.js app to wait until they unsuspend, while components that suspend in the edge runtime stream back fallback responses as data is being fetched. Ryan also tells Sam about a blocking JS trick he learned to alter the initial render of your clientside app based on client-specific data, like whether their theme preference is dark or light mode.

Topics include:

• 0:00 - Intro
• 1:00 - Running synchronous JS before React’s initial render of build-time generated HTML
• 17:03 - Using getServerSideProps on the edge in Next.js for run-time generated HTML
• 32:15 - Behavior of Server Components that suspend in edge runtime vs. node runtime

Links:

• Josh Comeau’s post on dark mode
• Next.js discussion on switchable runtime

View Details

Sam and Ryan chat about issues with default HTML buttons on the web across different devices and browsers. They talk about the Extensible Web Manifesto, how the React Aria library helps standardize button behavior across platforms, and the difference between state-based and event-based animations.

Topics include:

• 0:00 - Intro
• 2:09 – The problem with default buttons on the web -
• 17:26 – How we got here, and the Extensible Web Manifesto -
• 26:22 – React Aria’s unified Press interface -
• 32:26 – Getting consistent Focus styling -
• 40:30 – Event-based vs. state-based animations -

Links:

• Sam’s video on building an animated button
• React Aria useButton
• Building a Button Part 1: Press Events
• Building a Button Part 2: Hover Interactions
• Building a Button Part 3: Keyboard Focus Behavior
• The Extensible Web Manifesto

View Details

Sam and Ryan talk about whether you should use merge commits or you should rebase commits in your PRs when working on large, fast-moving codebases. They also talk about implementing build-time client-side search with Stork, and why layering in animation code shouldn’t materially affect your existing React code.

Topics include:

• 0:00 - Intro
• 1:48 – How to use D3 with React elements -
• 9:14 – Why you should unmount Modals and Dialogs when they’re not visible -
• 24:36 – Using Stork to implement build-time, client-side search -
• 36:03 – Merge commits vs. rebasing in large codebases -

Links:

• Sam’s D3 and Framer Motion video
• Stork on GitHub
• Framer Motion course

View Details

Sam and Ryan read and discuss the first two sections of the new Next.js Layouts RFC, Nested Layouts and Server Components. They also reflect on their experience using nested layouts in other frameworks.

Topics include:

• 0:00 – Intro -
• 10:21 – Layouts and creating UI (Apple Music example) -
• 33:40 – React Server Components -

Links:

• Layouts RFC
• Framer Motion Course update

View Details

Sam and Ryan talk about the new useEvent RFC, and how useEvent lets you extract event logic from your side effects. They also read and discuss Dan Abramov’s recent Twitter thread on how useEvent addresses the problems people are encountering with React 18’s Strict Mode behavior around running effects twice on mount.

Topics include:

• 0:00 - Intro
• 0:34 - How useEvent relates to the changes to Strict Mode in React 18
• 12:04 - Dan Abramov’s thread on how useEvent relates to “fixing” useEffect
• 37:37 - What’s the correct mental model for useEvent
• 53:55 - How useEvent is different from useCallback

Links:

• useEvent RFCS in the React repo
• Dan Abramov’s thread on how useEvent relates to “fixing” useEffect
• Dan’s RFC comment on why useEvent is not just a “nicer” useCallback

View Details

Sam and Ryan talk about the motivation behind the changes to Strict Mode in React 18, and in particular why React simulates an immediate unmount and remount by re-running component effects. They also talk about the tradeoff between database consistency and speed.

Topics include:

• 0:00 - Intro
• 1:12 - The tradeoff between data that’s fast but stale, vs. data that’s slow but consistent
• 11:55 - Strict mode in React 18, the proposed Offscreen API, and the implications for internal vs. external state in Concurrent React

Links:

• Xata
• New Strict Mode behaviors in React 18

View Details

Sam and Ryan share their experiences building with Remix for the very first time. Sam built a simple exercise tracking app using the Indie starter stack, and Ryan built a blog using server rendering in both Remix and Next.js, and talks about the differences between the two frameworks. They both discuss what the larger React community can learn from the ideas that Remix has to offer.

Topics include:

• 0:00 - Intro
• 2:33 - Sam’s Remix app
• 6:34 - The Indie stack
• 19:36 - Creating the data model in Prisma, a form, and an index route
• 25:48 - Ryan building the same Blog app in Remix and Next.js
• 32:33 - Using onSubmit vs. posting an HTML Form
• 39:15 - Remix’s fetcher API
• 46:46 - Borrowing declarative abstractions
• 56:18 - What did we give up when we left the PHP model of building websites? Did we throw the baby out with the bathwater?

Links:

• Remix
• Sam’s YouTube video on Remix
• Kent C Dodds on JS Party
• Fly.io
• Hasura guide on Remix and Firebase

View Details

Sam and Ryan chat about Remix and the differences between data fetching and mutations on the client vs. the server. They also talk about whether a framework’s APIs or the actual apps it enables developers to build are more important when choosing which tool to use.

Topics include:

• 0:00 - Intro
• 2:17 - What matters more to developers when choosing a framework: their experience using the APIs, or what they can build with it?
• 18:38 - Remix and data fetching on the client vs. the server
• 36:36 - Does running code on the edge really matter for day-to-day developers?

Links:

• Ryan Florence’s tweet on speakers vs. music
• Sam’s video on building an iOS scaled background modal effect

View Details

Sam and Ryan chat about adding authentication-based route guards to Next.js, tradeoffs between one-shot data loading vs. reactive pages in React apps, and instrumenting errors with Sentry.

Topics include:

• 0:00 - Intro
• 8:07 - Auth-based route guards and synchronized spinners in Next.js
• 26:34 - Tradeoffs of loading once on render vs. fully reactive pages
• 42:30 - Ryan’s video on Deploy notifications
• 47:45 - Errors + stale auth + Sentry

Links:

• Fixing Twitter's loading screen using Synchronized Animations in React
• SWR
• Sentry

View Details

Sam and Ryan talk about why Suspense for Data Fetching isn’t ready yet, and how both it and the Server Components feature of React 18 rely on the ability to evict a cache that’s internal to React. They also talk about Transitions.

Topics include:

• 0:00 - Intro
• 5:19 - Using startTransition with a router
• 9:36 - How React 18 yields
• 21:37 - Why both Suspense for Data Fetching and Server Components need a way to invalidate React’s cache
• 37:24 - How Server Components can remove the need for explicit API calls without sacrificing any of React’s composability
• 1:01:00 - Real-world problems concurrent features address
• 1:03:20 - Moving state from React to the URL

Links:

• Sam’s video: How to remove loading spinners in Next.js
• Ryan’s video: Transitions that Suspend
• React Server Components
• React Working Group - React 18
• React Server Components and Remix

View Details

Sam and Ryan chat about the differences between building internal apps vs. public websites, and why public sites get talked about more on forums like Twitter. They also talk more about their experiments with Suspense and Transitions in React 18.

Topics include:

• 0:00 - Intro
• 2:35 - How to trigger Suspense by accessing an unresolved promise
• 11:04 - Tension between flexibility of Transitions and Suspense vs. best practices around data fetching
• 21:00 - Semantics of React APIs when using Concurrent features
• 24:12 - How internal tools differ from public websites
• 43:24 - Sam’s next vid: Reducing loading spinners on route transitions in Next.js
• 45:28 - Ryan’s next vid: Demo of startTransition

Links:

• Concurrent UI Patterns (Experimental)

View Details

Sam and Ryan talk about using Promises and state libraries like Valtio to cross the bridge from changing module scope to React component state. Ryan also talks about writing an end-to-end Cypress test that verifies image uploads to S3.

Topics include:

• 0:00 - Intro
• 1:50 - Using Promises and state libraries to bridge the gap from module scope to React rendering
• 23:05 - How to test image file uploads given the security constraints of the browser

Links:

• Valtio
• Removing State and Effects with Suspense!
• Reactive State and Built-In Suspense with Valtio
• Testing images with Cypress
• SVG supports JavaScript
• SleepSort

View Details

Sam and Ryan chat about how Suspense lets you remove defensive and confusing useEffect code from your React components. They also share some initial thoughts about how Remix is positioning itself in the frontend dev space.

Topics include:

• 0:00 - Intro
• 4:53 - How compatible are non-Suspense APIs with Suspense, and how can we bridge these two worlds?
• 33:35 - Impressions about Remix’s positioning around web standards

Links:

• Sam’s video for this week
• Remix
• The Cursed Computer Iceberg Meme
• Coding Machines
• Flappy Bird in Super Mario World

View Details

Sam and Ryan continue their discussions around React 18 and the in-progress work on data fetching with Suspense. They talk about the useTransition hook and how it helps eliminate inconsistent states from your application. They also talk about

Topics include:

• 0:00 - Intro
• 4:13 - What does Suspense for Data Fetching mean?
• 15:00 - How Transitions allow us do work outside of render
• 39:43 - Dealing with Timezone-dependent tests
• 46:45 - Modal routing in Next.js
• 48:15 - Snapshotting form data

Links:

• Sam’s video on SuspenseAfterInitialRender
• suspend-react by pmndrs
• Sam’s thread on suspend-react
• Built-in suspense cache discussion
• Concurrent mode transitions
• Reddit example
• React forms

View Details

Happy New Year! Sam and Ryan are back from the holidays, talking about transitive dependencies in node and the browser in the context of Ryan’s next-s3-upload library. They also discuss a SuspenseAfterInitialRender component, speed vs. testability in services and monoliths, and a thought-provoking tweet from Dan Abramov on tests vs. source code.

Topics include:

• 0:00 - Would you want tests or source code
• 11:20 - Suspense, SuspenseAfterInitialRender, unstable_avoidThisFallback
• 19:05 - Value of having a reproducible test suite for a dynamic app
• 22:12 - Speed vs. testability of services vs. monolith
• 26:24 - How to import different versions of dependencies in libraries. Module resolution in node vs. browser.

Links:

• Dan Abramov’s tweet on tests vs. source code
• A Quick Intro to Suspense in React 18
• React PR for unstable_avoidThisFallback
• How Serverless Saved Money on My Heating Bill
• next-s3-upload, Ryan’s Next.js package for uploading images

View Details

Sam and Ryan talk about how the React 18 Keynote told the story of Suspense. They discuss how Suspense resolves the tension between encapsulated data-fetching components on the one hand, and coordinated loading UI on the other. They also talk about Sam’s Tailwind course on Egghead and Ryan’s experience upgrading to Tailwind 3.

Topics include:

• 0:00 - Intro
• 1:14 - Sam’s Tailwind Course on Egghead
• 3:44 - Upgrading to Tailwind 3
• 6:57 - React Conf + Suspense

Links:
Craft Scalable, Custom-Made Interfaces with Tailwind CSS
Tailwind CSS v3.0
React 18 Keynote

View Details

Sam and Ryan talk about some tricky page configurations they ran into while working on a Next.js project, and how to deal with multiple dynamic router segments when some are known at build time and others at run time. They also talk about how non-reactive data can simplify your form components.

Topics include:* 0:00 - Intro * 4:30 - Dealing with partially known dynamic router segments in Next.js * 25:23 - Struggling with nested layouts in Next.js * 31:00 - Why you should consider passing non-reactive snapshots of data into your form components * 52:07 - How to use a seed when generating dynamic test data for predictable values

Links:* Using useState to create nonreactive snapshots of a form component’s props

View Details

Sam and Ryan talk about the tradeoffs between smart and dumb form components, and toss around ideas for passing draft state into forms. They also talk about reimplementing Tailwind UI’s Modal animations using Framer Motion.

Topics include:
- 0:00 - Intro
- 5:33 - Smart vs. dumb forms, and lazy initial props
- 32:03 - Replacing Headless UI’s Transition component with Framer Motion’s AnimatePresence

Links:
The Universe is Hostile to Computers
Headless UI’s Transition component
Framer Motion’s AnimatePresence component

View Details

Sam and Ryan talk about how module side effects can expose order-dependent code, and why its worth ensuring your modules work regardless of import order. They also talk about different UI patterns for forms in modals, and some tips for working with Mirage in Cypress.

Topics include:

• 0:00 – Intro
• 4:04 – Keeping imports order-independent when modules have side effects
• 25:02 – Using Mirage with Hasura
• 32:00 – Cypress helpers for mocking auth and data
• 46:37 – UI patterns for modal actions
• 56:26 – Organizing shared query code

Links:

• GitHub Codespaces

View Details

Sam and Ryan chat about the pros and cons of using third-party services, focusing on how they affect your application’s testing strategy.

Topics include:

0:00 - Intro

0:43 – If services don’t provide testing utils, you have to write library code just to test your app. What was the mocking story like for popular Rails services?

11:59 – Adding seams to service integrations so they can be used locally, offline and in testing

28:18 – How are people testing their service code today?

48:02 – Mocking vs. end-to-end testing

Links:

• Stefan Penner’s tweet about how critical it is for services to making testing easy

View Details

Sam and Ryan talk about whether stores in module scope are a better alternative to Context for sharing global state in React apps.

Topics include:

• 0:00 – Intro
• 3:21 – Using Zustand to refactor a useAuth hook
• 34:08 – Module scope vs. context for shared state
• 58:52 – 7 GUI tasks

Links:

• Zustand
• Sebastian’s tweet on default context values
• Sam’s Auth Provider using Zustand, SWR and Suspense
• 7 GUIs

View Details

Sam and Ryan talk about how Next.js places an upfront cost on app teams for the sake of scalability and server-side rendering, and how to avoid this cost when building apps with user-specific data where SSR is not a priority. They also talk about avoiding Context for global state in React apps.

Topics include:

• 0:00 – Intro
• 1:51 – Avoiding Context for global state in React
• 22:22 – Safeguarding _app in Next.js & dynamic segments in the router

Links:

• Sebastian’s tweet on not using context for global state
• Zustand

View Details

Sam and Ryan continue to put some more pieces of the Suspense puzzle together as they talk about how throwing promises enables devs to write synchronous code while still building asynchronous (non-blocking) UI. They also talk about sharing state across pages in Next.js.

Topics include:

• 0:00 – Intro
• 1:08 – Sharing state across pages in Next.js
• 9:03 – Confronting JS object identity up-front in React, and buiding consistent trees of different versions of your UI in parallel
• 25:55 – How Suspense lets you represent async UI with sync code
• 42:00 – Interruptibility and push vs. pull
• 49:20 – The problem of invalidation, and the Suspense cache

Links:

• Suspense’s contract
• New Suspense SSR Architecture in React 18
• Built-in Suspense Cache

View Details

Sam tells Ryan about his experience adding Suspense to his Fitness app and how it improved the app’s UX. They also discuss some problems with skeleton screens and the pros and cons of nested routing.

Topics include:

• 0:00 - Intro
• 3:50 - URLs and nested routing
• 13:48 - Suspense, skeletons, and data fetching

Links:

• Design Details podcast
• React Suspense
• Next.js

View Details

Prompted by the new React 18 alpha release, Sam and Ryan chat about Suspense and what data-fetching issues they’re excited about it solving. They also talk about some Twitter conversation around premature optimization.

Topics include:

• 2:05 – Suspense and data-fetching
• 31:05 – Tweets of the week: Preoptimzation

Links:

• Sam on Twitter
• Ryan on Twitter
• Sam’s tweet about routing in Next.js
• Guillermo Rauch’s tweet on scalable APIs
• Gary Bernhardt’s tweet on premature optimization

View Details

Sam and Ryan talk about their experience building the headlessui.dev website with the folks from Tailwind Labs. They chat about the team’s deadline-driven development process, some new Figma workflow tips when implementing a design that was built with Tailwind CSS in mind, and some tech takeaways from building a docs site with Next.js. They also chat about some testing conversation that was happening on Twitter this week.

Topics include:

• 1:46 – The power of shipping with a deadline
• 12:22 – What is Headless UI?
• 16:39 – Design / dev handoff tips with Figma and Tailwind
• 28:00 – Tech learnings from building a docs site with Next.js
• 52:47 – Tweets of the Week: Unit vs. Integration testing

Links:

• Sam on Twitter
• Ryan on Twitter
• Headless UI
• Jeffrey Way’s testing tweet
• Gary Bernhardt’s testing tweet

View Details

Sam and Ryan talk about how visual design typically drives frontend app development, and whether or not this implies that frontend development should drive backend development in a similar way. They also discuss a tricky UI issue involving keeping a React app consistent with both the URL and server-side auth state.

Topics include:

• 2:02 - How the URL makes it hard to keep your app consistent with changes to server-side state
• 34:20 - Pros and cons of uncontrolled forms
• 37:51 - Whether frontend development should drive backend design

Links:

• Sam on Twitter
• Ryan on Twitter
• Uncontrolled Components in React

View Details

Sam and Ryan discuss building a library with TSDX, as well as some hiccups they ran into with node’s module resolution algorithm. They also talk about how even though Tailwind and Bootstrap are both considered CSS frameworks, they’re actually used to solve very different problems.

Topics include:

• 0:00 Intro
• 2:55 Building a library with TSDX
• 11:56 Writing docs with MDX
• 21:15 Node resolutions with npm link
• 37:50 Tweet of the week: Redux
• 43:54 Tweet of the week: Feature flags
• 46:35 Tailwind vs Bootstrap

Links:

• TSDX
• TSDX monorepo
• Changesets
• MDX
• Tailwind typography
• Pete Hunt on redux
• Dave Wilson on release and deployment
• Sam’s Twitter

View Details

Sam and Ryan discuss how loading states, data fetching, and skeleton screens can change the architecture of an SSG application. They also talk about Apollo’s cache and various query re-fetching strategies.

Topics include:

• 0:00 - Intro
• 2:35 - Image cropper dampening
• 4:00 - Learning library abstractions
• 10:00 - Loading states with SSG
• 28:00 - Server side cache
• 38:30 - Tweet of the week
• 46:00 - Apollo’s cache
• 58:50 - Stale while revalidate

Links:

• Sam’s Image cropper dampening video
• Next.js
• Fan out on write
• Tweet of the week
• State of CSS survey
• Apollo
• URQL
• SWR

View Details

Ryan shares his first impressions using Supabase and talks about a new app he’s building to manage users in Hasura. Sam talks about how to responsibly go outside of React’s rendering cycle when using imperative APIs.

Topics include:

• 0:00 - Intro
• 3:40 - Supabase first thoughts
• 13:50 - Building an auth layer for Hasura
• 30:40 - Apollo server
• 37:50 - Framer Motion’s MotionValue and imperative APIs

Links:

• Sam’s snow photos
• Image Cropper Ep. 4
• Supabase
• Netlify’s GoTrue User management
• Hasura
• Google Cloud Platform
• Apollo Server
• Framer Motion

View Details

Ryan shares his experience setting up authentication in a new project with Sam. They also discuss some of the tradeoffs that client apps face when consuming raw JSON vs. passing data through a model layer like an ORM.

Topics include:

• 0:00 - Intro
• 1:00 - Visual programming in the video game Factorio
• 9:00 - Setting up auth in a new project
• 22:40 - Checking out Supabase
• 30:00 - Consuming APIs

Links:

• Factorio
• Firebase
• Supabase
• Hasura

View Details

Sam tells Ryan about what he’s been learning using the React Use Gesture and Framer Motion libraries to build an Image Cropper for his YouTube series. They also chat about their first impressions of React’s new Server Components, as well as the Tailwind 2.0 launch.

Topics include:

• 1:40 - First impressions of React server components
• 12:10 - Tailwind 2 launch
• 16:15 - React gesture with framer motion

Links:

• React UseGesture
• Framer Motion
• Tailwind
• Pan and Pinch to Zoom with React Use Gesture – Image Cropper, Ep. 1
• Sam’s YouTube channel

View Details

Ryan tells Sam about an image uploading solution he built for one of his Next.js apps. They discuss how Next.js's integrated frontend and backend allow for much more convenient packages, and they brainstorm other packages that would fit well within Next's architecture. Ryan also shares how parser combinators helped him write robust text-parsing code for his poker app.

Topics include:

• 0:54 – Server and client image uploading in Next.js
• 21:19 – Other packages that cross the client/server divide for Next.js
• 32:18 – Parser combinators

Links:

• Parsimmon

View Details

Sam and Ryan talk about whether GraphQL affects the architecture of an app, and what sort of UI code a well-implemented GraphQL server can replace. They also talk about Sam's experience working on a new side project using Next, Hasura, GraphQL and SWR.

Topics include:

• 2:34 – Finally feeling good about our tech stack. How easy GraphQL makes it to get or update aggregate data.
• 13:42 – Giving frontend developers a query language
• 19:46 - Does GraphQL encourage your JavaScript frontend to become more of a dumb view layer?
• 35:22 – Should you worry about unnecessary requests if they're abstracted behind your data-fetching library?
• 51:58 – Is GraphQL an implementation detail?

View Details

Sam and Ryan talk about how frontend and backend frameworks are converging towards similar UI patterns and developer experiences, even though they're coming at it from different starting points. They also talk about the new Next.js 10 release and whether React should document more opinions held by the core team.

Topics include:

• 3:22 – New features in Next.js 10
• 20:40 – How frontend and backend frameworks are converging
• 28:47 – Opinions in React that fall outside of its API
• 35:33 – Next.js' new Image component
• 49:00 – Q: Why is SASS not trendy? How can you replace it with PostCSS?
• 52:12 – Q: How do you edit your videos?

Links:

• Simon Peyton Jones - Haskell is useless
• Sebastian Markbage's Gist: The Rules of React
• Full Stack Radio episode on Screencasting Tips

View Details

Sam and Ryan talk about how both the key prop and useEffect can be used to solve similar problems, and discuss which approach is better. They also talk about the difference between handling data using models with methods vs. using POJOs with pure functions.

Topics include:

• 0:34 – Model with methods vs POJOs with functions
• 16:44 – Comparing explicit, verbose code in React vs. other frameworks
• 29:34 – Dumb vs. smart components, and using keys vs. effects
• 47:47 – If a high-level API misses enough use cases, should it even exist?

Links:

• Sebastian's tweet about using the key prop
• Sam and Ryan's video hacking on the REPL

View Details

Sam and Ryan talk more about their recent experience using Hasura and Amplify, and more generally how best to test apps that are built on third-party services. They also talk about Mirage JS GraphQL.

Topics include:

• 7:39 – Testing a Hasura-backed app with Mirage
• 16:03 – Modeling and querying data with Amplify and Dynamo
• 31:09 – Auth, Amplify and Hasura, and testing services

View Details

Sam and Ryan talk about a tricky integration between some asynchronous third-party JavaScript code and React's render cycles. They also talk about how powerful the getStaticProps hook from Next.js is, and share some thoughts on whether Firebase's features justify the fact that by using it you lose out on the GraphQL community's standard libraries and tooling.

Topics include:

• 0:50 – How to robustly integrate 3rd-party async code into React's render cycles
• 38:08 – How Next.js lets you easily prioritize consistency or availability
• 57:45 – Reflecting on Firebase

Links:

• 168 AWS Services in 2 minutes

View Details

Sam talks about his recent experience working with Next.js on his personal site. He and Ryan also compare Gatsby and Next, and discuss how much Next's updates over the past year have curbed Gatsby's advantages. They also talk about the best way to make frontend developers more autonomous.

Topics include:

• 8:30 - Working on moving samselikoff.com to Next.js

• 39:04 – The best way to make frontend teams more autonomous

View Details

Sam and Ryan talk about Ryan's recent experience using Amplify on a side project. They chat about the tradeoffs between using services and writing your own backend code, and how backend services let you do more at the cost of not understanding as much about how the system works.

Topics include:

• 9:10 – Why Gatsby's content mesh is so good
• 23:00 – How much of your backend is your product
• 35:00 – Auth in Amplify
• 44:00 – Using Mirage with an Amplify app
• 56:00 – Firebase/Amplify/Hasura comparison

Links:

• Ryan's Amplify tweet

View Details

Sam and Ryan talk about how route-based code splitting makes SPAs more like traditional server-rendered apps, potentially negating many of their benefits. They also talk about how the intrinsic width of text affects flexbox-based layouts.

Topics include:

• 4:20 – Flexbox and intrinsic width

• 27:40 – Does route splitting negate the benefits of an SPA?

Links:

• Daniel Schiffer on YouTube

• Sam's YouTube video on building a Twitter clone

• Rich Harris on Full Stack Radio

View Details

Sam and Ryan talk about a post from 2002 discussing Stop Energy, which the author defines as a certain kind of feedback that is thoughtless and can halt forward motion on a project. They also talk about Ryan's adventures with Amplify, and brainstorm how to automate Sam's work journal.

Topics include:

• 6:05 – Stop Energy
• 27:55 – Amplify
• 44:27 – Automating a Work Journal

Links:

• What is Stop Energy
• Amplify
• Substack
• Sam's work journal

View Details

Sam and Ryan talk about adding an authenticated backend to miragejs.com using Hasura, Heroku and Netlify. They also talk about the differences in risk between using paid third-party services vs. depending on open-source libraries.

Topics include:

• 3:47 – Adding a backend to miragejs.com

• 13:03 – Environment variables in frontend apps

• 20:48 – Adding privileges to the anonymous role

• 28:00 – Should Hasura let you configure permissions for unauthenticated requests?

• 31:36 – Setting up a webhook using Netlify cloud function

• 37:19 – Risk profile of paid services vs. OSS libraries

Links:

• Hasura

• URQL

• Netlify Functions

View Details

Sam and Ryan talk – again – about the best way to write side effects in React applications. Ryan shares his approach based on his recent work in several React apps, and talks about the pitfalls of using useEffect's dependency array as a mechanism for control flow. Sam also talks about his recent video on React Router and why it's important to use the entire route hierarchy when determining whether a link is active.

Topics include:

• 0:00 – Processes, workflow and deadlines

• 12:00 – How should you think of useEffect's dependency array

• 38:00 – Routing in React Router v6

Links:

• Sam's YouTube video on React Router v6

View Details

Drew Powers, one of two full-time engineers working at Pika, joins Sam to talk about Pika's mission to make the web faster. Drew talks about how Pika is focused on building tools that meet developers where they're at, his work on Snowpack, and the company's vision for Pika CDN.

Topics include:

• 0:00 – What do you do at Pika?
• 4:54 – What is Pika's mission and where is it coming from?
• 10:45 – What does speed mean from Pika's perspective?
• 13:50 – What are some ideas for Pika's sustainability model?
• 17:20 – What's going on in Snowpack?
• 21:43 – What does it look like to use or migrate to Snowpack today?
• 24:50 – How does Snowpack actually work?
• 36:44 – How do you deal with dependencies that can't be deduplicated?
• 48:14 – Snowpack's React App template
• 49:49 – Can you migrate off of Snowpack if you need to fall back to something like Webpack?
• 53:09 – How do ES modules affect dependency resolution?
• 1:05:50 – What's in your roadmap?

Links:

• Drew on Twitter
• Snowpack
• Arborist Deep Dive
• ESNEXT Conf
• Pika pack

View Details

Tom Preston-Werner joins Sam and Ryan to talk about some of the architecture decisions behind Redwood JS, a recently released full-stack JS framework he's been working on for more than a year. Tom talks about how Redwood's Services provide a first-class layer of abstraction on top of your backend data models for your application's business logic, why Redwood went all-in on GraphQL, and how the framework is poised to take advantage of future improvements coming to serverless infrastructure.

Topics include:

• 0:00 – Rails' influence on Redwood

• 8:00 – How Redwood Services keep your backend code organized

• 12:04 – The decisions driven by the desire to write React on the frontend

• 22:57 – Deep dive into Redwood Services

• 30:58 – Why Redwood uses GraphQL

• 44:37 – Caches & invalidation

• 55:52 – Why Cells are more than Hooks

• 1:07:02 – How databases can make their way into the JAMStack

Links:

• Redwood JS

• Tom on Twitter

View Details

Sam and Ryan talk about the unique aspects of ES modules that have driven the recent explosion of innovation in the frontend build tooling space, giving rise to tools like Snowpack and Vite. They also chat about their desire for a more integrated frontend ecosystem that would make adding things like auth to frontend apps easier, as well the impressive web-based drawing tool Excalidraw.

Topics include:

• 1:16 – ES modules

• 14:09 – Why do we bundle?

• 20:47 – Modules are stateful singletons, and the benefits of dependency injection

• 35:12 – Desire for an integrated JS environment

• 50:41 – Excalidraw

Links:

• Sam's video on ES modules

• Guillermo Rauch on Static First using Serverless Frontends

• Excalidraw

View Details

Sam and Ryan read and discuss Tom MacWright's recent article "Second-guessing the modern web," as well as Rich Harris's response "In defense of the modern web." The articles respectively argue against and for the JavaScript-centric approach to building websites that has taken root over the past ten years and debate issues of performance, architectural complexity, and user experience.

Topics include:

• 6:30 – "Second-guessing the modern web" by Tom MacWright

• 52:27 – Dan Abramov's thoughts on Twitter

• 58:50 – "In defense of the modern web" by Rich Harris

Links:

• "Second-guessing the modern web" by Tom MacWright

• Dan Abramov's thoughts on Twitter

• "In defense of the modern web" by Rich Harris

View Details

Sam and Ryan grapple with the way useEffect nudges you to build UIs. They discuss whether JavaScript object identity is a good proxy to use for business logic equivalence, whether useEffect leads to more correct code, and then they chat about some of the ways React developers sidestep useEffect when the declarative programming model that Hooks impose upon them is not a good fit with their app's business logic.

Topics include:

• 11:39 – JavaScript identity vs. business logic identity when working with useEffect

View Details

Sam and Ryan chat about how and why framework APIs get used and abused. Ryan also shares his experience working with AWS Amplify on a side project.

Topics include:

• 3:17 – How useEffect can be confusing in high-level app code

• 21:05 – Immediate mode GUIs

• 32:40 – Who's responsible when developers misuse framework APIs?

• 46:40 – AWS Amplify

• 1:14:25 – Our ideal stack

Links:

• Immediate mode GUIs - Go Time #128

• AWS Amplify

• Begin.com learn

View Details

Sam and Ryan try to unpack the meaning of JAMstack. They discuss the constraints of the architecture, why it's confusing to think of it as an application stack, the implications it has for app cachability, and whether the Twelve Factor App that Heroku introduced in the Rails-dominated era of web development might be a better way to think about this new paradigm.

Topics include:

• 0:00 – Building Optimistic UIs

• 13:45 – Immutable assets vs. mutable HTML

• 36:05 – JAMstack, Twelve Factor Apps, and leveraging CDNs

Links:

• Sam's Free Egghead Collection: Create an Optimistic UI in React with SWR

• SWR on GitHub

• The Twelve Factor App

View Details

Topics include:

• 5:30 - Gatsby, six months later
• 8:10 - Mirage REPL
• 11:50 - Next Link
• 15:10 - Render props vs. Hooks
• 24:05 - Vercel
• 27:47 - Twin.macro
• 38:50 - Learning CSS grid through Tailwind
• 48:59 - Node deps, devDeps, and peerDeps

Links:

• Mirage REPL
• Next Link API docs
• Vercel
• Twin.macro
• Tailwind CSS grid

View Details

View Details

Topics include:

• 6:00 – Adding Cypress tests to the Mirage Inspector
• 14:00 – Lazy page generation, incremental rebuilds and cache stampedes with Next.js
• 24:51 – CDNs & surrogate keys
• 38:00 – Will global databases obviate the need for CDNs?
• 42:23 – Gatsby Cloud's ability to build surrogate keys from GraphQL queries
• 48:48 – Gatsby Cloud's Preview Mode
• 50:30 – Will hosting-only platforms like Netlify and Heroku become too generic?
• 53:43 – Is there a tension between Next/Gatsby's per-page model and SPAs?

Links:

• Working on the Mirage Inspector Apr 7, 2020
• Working on the Mirage Inspector Apr 14, 2020
• FullStack Radio #137: Tim Neutkens - Continuing to Innovate with Next.js 9.3
• JS Party #122: What's new and what's Next.js with Guillermo Rauch from ZEIT
• JS Party #117: Catching up with Gatsby with Dustin Schau

View Details

Sam and Ryan discuss what has driven JavaScript adoption on the web over the past 5-10 years, and what implications those drivers have had for the tools and frameworks we work with today. They also talk about why it's still so hard to build good SPA experiences on the web.

Topics include:

• 5:10 – Finding real-world pain points

• 8:44 – Mirage Inspector's serverless backend

• 15:30 – Not being happy with our stack

• 18:38 – Why on SPAs on the web tend to be so awful?

• 30:37 – What has driven JS adoption?

• 45:42 - GraphQL vs Rails 5 years in

• 49:10 – SWR and a useResource hook

Links:

• Tailwind CSS Tips, Tricks + Best Practices

• JavaScript Deployments with Brian LeRoux

• SWR, Zeit's data-fetching library for React

View Details

Sam and Ryan talk about the tradeoffs between shipping a single bundle of code vs. the route-based code splitting approach used by many tools like Gatsby and Next. They also talk about their recent experiences building with React, and whether web developers should compete with native experiences or embrace what the web has to offer.

Topics include:

• 2:38 – In React, there are no components

• 13:45 – The feeling of momentum in React

• 23:33 – SPA bundles vs. per-page code splitting

• 45:33 - Conceptual code splitting, and web experiences vs. native experiences

• 1:06:30 – React.Children utilities

Links:

• Domain Modeling with Mirage JS training

• Mirage JS Inspector Livestream 1

• Mirage JS Inspector Livestream 2

• Mirage JS Inspector Livestream 3

View Details

Topics include:

• 0:44 - Tailwind UI
• 4:27 - Framework-agnostic tools
• 11:44 - Logux
• 33:31 - Next, code on the edge, static websites, and caching

Links:

• Software Engineering Daily
• Tailwind UI
• Logux
• Next.js 9.3

View Details

Yehuda Katz joins Sam to talk about the strategies Ember's developed to keep the majority of the community on recent versions of the framework for more than 8 years. He talks about lessons learned from the 1.13 upgrade, how the core team thinks about API experimentation vs. community fragmentation, and the approach Octane is taking to enable frontend developers that know HTML and CSS to ship interactive sites with Ember.

Topics include:

• 5:15 – What experiences led Ember to prioritize bringing the entire community along for upgrades and changes to the programming model

• 21:22 – Why open source libraries shouldn't couple breaking changes to conceptual changes

• 31:30 – How to think about the tradeoff between fragmentation and experimentation

• 40:00 – How Ember is exposing more low-level primitives while still emphasizing its higher-level APIs

• 45:01 – What mattered to Yehuda when he became a programmer, and how he's bringing that to the Ember community

• 1:02:20 – Why Octane embraces HTML

• 1:12:04 – What type of developer Octane targets

• 1:24:22 – What the modern version of Rails' blog in 15 minutes could look like

Links:

• Together: The Merb Story, Yehuda Katz

• "We're the Together Framework", Yehuda Katz

• Coronavirus will also cause a loneliness epidemic

View Details

Topics include:

• 0:00 - What is Faktory?

• 2:28 – Why might I need a background job?

• 13:26 – Why did you make Sidekiq?

• 16:15 – What lead to Faktory?

• 24:02 – Why'd you use Go to implement Faktory's server?

• 25:36 – Who is Faktory for?

• 31:58 – What's the most interesting thing you've learned about architecting background job systems?

• 36:24 – How do you see job queuing work in a serverless world?

• 41:23 – What are some of your thoughts on open source sustainability?

• 46:48 – What makes a library productizable?

• 48:30 – Were you thinking entrepreneurially when starting Sidekiq?

• 53:30 – Could open source sustainability be solved by a marketplace or middleman?

• 55:14 – How has your business model and financial incentives affected the development of your open source libraries?

• 1:00:30 – How do you think about API additions and feature requests to Sidekiq?

Links:

• Faktory

• Sidekiq

• Mike on Twitter

• Mike's blog

• Building a $1 Million Business Solo with Mike Perham of Sidekiq

View Details

Topics include:

• 6:00 - Exploring Next.js's architecture

• 22:33 - Is runtime SSR an antipattern?

• 44:04 - Are there any downsides to this architecture?

• 1:11:25 - React's single shot SSR vs. Ember's asynchronous FastBoot rendering

Links:

• CAP theorem

• Tweet from Guillermo: "Most use cases of SSR are better served by SSG"

View Details

Topics include:

• 3:33 – Is usePrevious a bad hook?

• 14:13 – Does declarative code make sense for app logic that's about state transitions, like animations?

• 40:04 – Dependabot shifts some of the app maintenance burden from the app developer to the ops team. How might CI providers help solve these new devops issues?

• 51:43 – GitHub actions

Links:

• React Spring

• Framer Motion

• Dependabot

• GitHub Actions

View Details

Topics include:

• 2:46 – Launching Mirage JS!

• 10:17 – Feeling empowered bringing Mirage to the wider JS ecosystem, and what's next for Mirage

• 19:40 – A Mirage tutorial + video series

• 19:30 – GraphQL support in Mirage

• 30:13 – TypeScript support in Mirage

• 37:25 – Node support in Mirage

Links:

• Mirage's new homepage

View Details

Topics include:

• 4:45 - Building out Mirage's new homepage. SVG positioning.

• 15:42 - CSS Grid for layouts

• 19:36 - Update on launching Mirage JS. Adding types to Mirage.

• 24:09 - Learning about idempotence through React Spring. What to do when UI isn't a function of state.

• 52:40 - Sharp tools vs. high-level APIs

Links:

• React Spring

• Small, Sharp Tools

View Details

Topics include:

• 3:17 - Refactoring to Tailwind defaults
• 11:17 - What exactly are Container components?
• 17:35 - Marginless components
• 23:40 - Grids
• 25:50 - What you can learn by using Tailwind defaults
• 41:00 - Using Mirage tests to re-create development scenarios
• 50:45 - Frontend First

Links:

• Tailwind CSS
• ReactiveConf 2019 - Mark Dalgleish: Rethinking Design Practices
• Frontend First Development

View Details

Topics include:

• 0:40 – Which concepts should a framework be responsible for teaching?

• 7:20 – What does it actually take for someone to start using a framework? And Vue's multiparadigm approach.

• 16:32 – What if Ember Data wasn't part of Ember?

• 29:50 – Functional digression

• 37:00 – Back to Ember Data!

• 43:34 – When paradigms conflict with each other

• 49:46 – Back to Ember Data, again!

Links:

• Vue composition API

• MobX

View Details

Topics include:

• 5:41 – Hasura, React, URQL + Formik = Nutrition app

• 44:51 – React to the Future by Jordan Walke

Links:

• URQL

• Formik

• Reach Dialog

• Dan Abramov's tweet on controlled/uncontrolled components

• React to the Future - Jordan Walke

• Let's Program Like It's 1999 - Lee Byron

• Functional Programming in 40 Minutes - Russ Olsen

• Reason ML

View Details

Topics include:

• 0:00 – Livable code with Ember
• 3:09 – Speeding up Ember builds, and bugs with React rebuilds
• 7:09 – Undoing bad abstractions
• 11:30 – Building a mobile nav with React Spring + Reach Modal
• 18:48 – Documentation: Guides vs. How-tos vs. Examples
• 34:40 – Composability, and awareness of React's children vs. Ember's yield
• 38:30 – Structural vs. reusable components
• 54:54 – UI Testing
• 1:03:04 – Does advice for building good libraries transfer to buiding good apps?

Links:

• What nobody tells you about documentation, by Daniele Procida
• React Spring
• Using Composition in React to Avoid "Prop Drilling", by Michael Jackson
• Mirage and Cypress Quickstart

View Details

Topics include:

• 1:46 – Exploring the React paradigm

• 11:45 – How have your opinions on UI dev changed since starting Ember?

• 16:00 – How React's render functions and Ember's templates both solve the same problem: how to restrict the rendering code that users write

• 34:03 – JavaScript's multiparadigm approach: OOP + functional

• 40:13 - Hooks and the importance of lifecycle entanglement

• 46:15 – Do Hooks succeed in bringing the ideas of declarative rendering to our JavaScript code?

• 53:58 – The ES module spec, ES imports, and ES modules vs. CJS modules

• 1:04:55 – Are TypeScript users at risk of the same kinds of syntax collisions that CoffeeScript users once were?

• 1:10:10 – TypeScript now doesn't ship unstable features. (e.g. Optional chaining is stage 3)

• 1:15:35 – Yehuda's take on stage 0 through stage 4 ECMAScript proposals

• 1:23:39 – What's missing from UI development? And the difference between paradigms and abstractions.

• 1:31:00 – Ember's original sin was push-based reactivity. Pull-based is how programs work.

• 1:40:30 – Ember needs a new lifecycle entanglement primitive, that borrows concepts from both Hooks and Ember Concurrency tasks

• 1:57:07 – How do you feel about UI development in 2019?

Links:

• No Silver Bullet, by Fred Books

• React Hook Pitfalls, by Kent C. Dodds

View Details

Topics include:

• 0:32 – React is hard!

• 7:55 – Should we be thinking about render cycles while writing React?

• 30:08 – How much objective coding advice is there?

• 39:23 – The Dark language + platform, and how concurrent languages can work against serverless architecture

• 57:57 – Deployless architecture

• 1:02:25 – Auth in Hasura

Links:

• Dark Lang with Ellen Chisa and Paul Biggar, on the Software Engineering Daily podcast

• The Dark language + editor

View Details

Topics include:

• 0:57 – Wanting to learn more about GraphQL

• 14:41 – Constraints, theory and reality in GraphQL and REST APIs

• 21:54 – What matters when choosing technology?

• 35:06 – Can GraphQL queries and types replace traditional ORMs?

• 48:47 – Why did Rails and other technologies become popular? Does it matter?

• 1:00:48 – Is there objectively true advice in programming?

Links:

• The Bike Shed # 215: Start With People

View Details

Topics include:

• 2:31 – Tailwind, PostCSS, and low-level vs. high-level tools

• 13:12 – Mirage JS and Cypress

• 13:55 – Ember 3.13 and Octane

• 15:28 – Ryan's experiencing upgrading EmberMap from 3.4 to 3.12

• 20:19 - ES Modules, and learning that imports are not code

• 42:12 – React and useEffect, and the difference between reads and writes vs. rendering and event handlers

• 1:00:50 – Object-oriented vs. functional programming in JavaScript

Links:

• Ember 3.13 Release (Octane Preview)

• How to upgrade an Ember App or Addon

• Rich Harris and Edward Faulkner Twitter thread about ES module design

• Twitter thread about ES module execution order

• Sam Selikoff on Twitter

• Ryan Toronto on Twitter

View Details

Topics include:

• 0:00 – Dealing with asynchrony and persistence in Vue

• 8:56 – Thoughts on Vue's APIs, and how they compare with React and Ember

• 22:20 – "Magic" in UI frameworks vs. server-side frameworks

• 27:17 – Build work in Mirage JS, and a new passthrough API

• 38:26 - How opinionated should project documentation be?

• 50:40 - Edward Faulkner's talk on compilers, abstractions, ES modules, and Embroider

Sponsors:

• Next Release, mention EmberMap when you sign up for a trial and get 10% off

Links:

• Mirage JS at ReactNYC S3:E8, Nov 7

• Mirage JS

• Ember NYC September 2019 - Octane, Blockchain & Concurrency, Compiling Ember

• Sam Selikoff on Twitter

• Ryan Toronto on Twitter

View Details

Topics include:

• 0:39 – The "Weekend Warrior" technology adoption hypothesis

• 6:55 – Gatsby as a soft intro to GraphQL

• 8:55 – Building a GraphQL backend with Hasura

• 18:08 – GraphQL mutations

• 21:47 – Mocking out GraphQL in Mirage

• 45:03 – Gotchas when using backends as a service

• 49:47 – DX and user success vs. "correct" technology choices

Sponsors:

• Next Release, mention EmberMap when you sign up for a trial and get 10% off

Links:

• Hasura

• graphql-js

• darklang

View Details

Topics include:

• 0:53 – Metaphysics and JavaScript by Rich Harris, and declarative side effects
• 15:26 – An Ember example that would be improved by hooks and declarative side effects
• 23:46 – Pitfalls and escape hatches when using hooks
• 35:40 – Rich's argument that rendering isn't even a declarative function of state, let alone side effects
• 41:42 – Deeper dive into useEffect docs
• 1:01:41 – Thought experiment on effects that sync with different data stores

Sponsors:

• Next Release, mention EmberMap when you sign up for a trial and get 10% off

Links:

• Metaphysics and JavaScript, by Rich Harris
• React's useEffect

View Details

Topics include:

• 2:41 – Playing with Typescript
• 10:13 – Thoughts on Ember's decision to expose Properties vs. Attributes
• 32:09 – "How long will this take?"
• 45:15 – Debugging slow Mirage factories

Sponsors:

• Next Release, mention EmberMap when you sign up for a trial and get 10% off

Links:

• Shape Up
• Copy, Paste, Repeat Podcast

View Details

Topics include:

• 1:37 – APIs are about Policy, by Steven Wittens
• 5:47 – Part 1: RESTless API
• 49:16 – Part 2: Regressive Web Apps
• 1:08:19 – Part 3: GraftQL

Links:

• APIs are about Policy, by Steven Wittens

View Details

Topics include:

• 0:00 – Unique keys for lists in React and Ember
• 8:40 – Why Handlebars feels safe
• 9:34 – Solving a stale state React hooks bug, and how Ember avoids this via object references
• 24:29 – ESPN's website and self-imposed technical constraints
• 28:10 – React in Codesandbox
• 36:53 – Tradeoffs between "magic" in a framework vs. learning how to wire things up yourself - especially in a fast-moving ecosystem like JavaScript
• 50:35 – Hooks vs. components, and clarity in boundaries
• 53:29 – Pairing with Tuple experience

Listener questions:

• 55:43 – How can you limit FastBoot from turning user-specific bugs into bugs that take down your entire production app? (@davewasmer)
• 1:10:47 – What's the future of web components? (selbyk)

Sponsors:

• TrueCoach, check out their engineering culture and hiring pages

Links:

• Sam's tweet on list keys in React
• Codesandbox
• StaticKit.com
• Tuple, an app for remote pairing
• Stencil.js
• APIs are about policy

View Details

Topics include:

• 5:26 – Bringing Mirage to a wider JavaScript audience
• 17:14 – Setting up tests in Gatsby, and why wiring up boilerplate code is not always bad
• 28:56 – React's children API, MDX, and template imports in Ember
• 39:17 – How extracting things in React feels compared to extracting things in Ember
• 42:30 – React's children, and constraints vs. flexibility
• 1:05:52 – API design, and letting someone feel the pain rather than telling them they can't do something
• 1:23:16 - Dynamic vs. static children

Sponsors:

• TrueCoach, check out their engineering culture and hiring pages

Links:

• Mirage.js
• Tom Dale's tweet on web components

View Details

Topics include:

• 2:45 – Using Gatsby to build miragejs.com
• 12:05 – Tradeoffs between low-level and high-level APIs
• 30:21 – Writing Gatsby data providers, and using GraphQL to query Gatsby's content mesh
• 41:33 – GraphQL vs. REST is wrong
• 44:16 – API design
• 58:45 – What's the best architecture for building modern UIs on the web?

Sponsors:

• TrueCoach, check out their engineering culture and hiring pages

Links:

• Mirage.js
• Gatsby
• GraphQL

View Details

Topics include:

• 1:35 – The benefit of no staging environments
• 10:14 – Using FastBoot without a runtime dependency, and pre-rendered SPAs
• 17:30 – Sponsor: TrueCoach is hiring!
• 23:02 – UI feedback, and Designing Fluid Interfaces by Apple
• 39:24 – Working with custom fonts, and typography lessons learned

Sponsors:

• TrueCoach, check out their engineering culture and hiring pages

Links:

• Percy Visual Regression Testing
• Launch Darkly
• Designing Fluid Interfaces, from Apple, WWDC 2018
• The Inter typeface
• Refactoring UI

View Details

Topics include:

• 2:44 – What to do if your app depends on an unmaintained addon
• 26:15 – The workflow of designers who are also coders
• 32:31 – Why the status quo of web tooling is insufficient for multi-app workflows
• 41:46 – Side effects in React and Ember, and how Hooks help authors avoid making API mistakes

Links:

• Ember CLI Deprecation Workflow
• Adopted Ember Addons
• Matthew Beale's tweet on improving library APIs

View Details

Topics include:

• 0:00 – Playing with React JS

  • Using React after working with Ember for 5 years
  • React's onboarding experience
  • Why early success matters for OSS adoption

  • 15:44 – Micro Frontends

  • Comparison with service-oriented architecture

  • Our experience using micro frontends at TED
  • The tradeoffs that matter most to us
  • 47:56 – Call for conversation: Ember-turned-React dev

Links:

• Micro Frontends, by Cam Jackson

View Details

Topics include:

• 3:50 – Opinions on DHH's 2019 RailsConf keynote about sustainable open source
• 23:28 – Keeping tests dumb, dynamic tests, and TDD workflow tradeoffs
• 36:31 – Octane is not ready, and our conservative approach to adopting new tech
• 47:50 – Tailwind 1.0
• 53:23 – New series: Ember Animated

Links:

• DHH's 2019 RailsConf keynote
• Crash Log podcast
• Robert Jackson's #EmberJS2019 blog post
• EmberMap's new series on Ember Animated series

View Details

Topics include:

• 2:26 - Ember's 2019 Call for Blog Posts, and a retro on last year's call
• 7:50 - Why Katie's looking forward to Embroider, Ember Data, and updates to the Router
• 10:52 - What the process is for "finishing" Octane
• 14:37 - Katie's experience on the Steering Committee
• 18:02 - The infrastructure behind Ember Try and Ember Observer
• 34:18 - Common anti-patterns in apps, like deeply nested components
• 39:18 - Katie's preference for acceptance tests over unit tests in UI development
• 42:50 - Katie's stack of choice for a brand new app
• 44:58 - A look into Ember Observer's Code Search feature
• 58:06 - How much test coverage there is across Ember's OSS Addons

Links:

• Katie on Twitter
• Code All Day, Katie's consultancy
• Ember's 2019 Roadmap: Call for Blog Posts
• Ember Observer
• Ember Observer's Code Search by Michelle Santarsiero
• google/codesearch

View Details

Topics include:

• 4:25 – Causes of burnout other than overwork
• 9:02 – Finalizing Mirage 1.0
• 10:42 – Keeping your development environment stateless
• 21:00 - Unified APIs for backend and frontend data queries
• 42:28 – Tailwind 1.0

Links:

• Copy Paste Repeat Ep. 18
• Twitter conversation between Trek and Sam on shared UI models
• Sam on Twitter
• Ryan on Twitter

View Details

Topics include:

• 4:23 – Overview of Omnimodal's tech stack
• 6:38 – Omnimodal's mission: to help cities manage transportation demand
• 16:10 – How to ingest open transportation data and present it in real time
• 21:43 – How graphics-heavy OpenGL and C++ apps can benefit from web tooling
• 31:06 – Why state machines are used in both video game and web development
• 34:55 – How JavaScript UI development compares to other paradigms
• 38:46 – Why Ember and Rails were chosen for Omnimodal's technology needs
• 42:09 – Using a prediction engine to improve on transportation schedules
• 44:56 - How Omnimodal gets data from its hardware trackers to the Rails server
• 50:55 – How services like Heroku and PubNub, custom AWS code, and the concept of a Data Lake help address scalability issues
• 56:40 – How deploys are coordinated across multiple services
• 59:47 - What the development process looks like for a multi-service tech stack
• 1:02:10 – What the complexity breakdown is between Omnimodal's frontend and backend
• 1:04:07 – Lessons learned on authentication while using Auth0
• 1:09:31 - Lessons learned on data modeling
• 1:12:21 – Tech choices, escape hatches, what's worked, and what hasn't
• 1:20:15 – Things Nathan loves about Ember, and things that are challenging

Links:

• Nathan on Twitter
• Omnimodal.io
• PubNub
• GTFS feed specification
• Amazon Kinesis
• Amazon ElastiCache
• AWS AppSync
• Auth0

View Details

Topics include:

• 3:12 – Getting Mirage 1.0 out the door, Mirage's roadmap, and how other communities treat domain modeling
• 15:18 – Seth Godin's blog post on tribal marketing
• 27:08 – Sustainability and project management in open source
• 48:06 – What benefits do products actually unlock?

Links:

• Ember CLI v1.0.0-beta.1 released
• "People like us do things like this" by Seth Godin
• Justin Jackson on Full Stack Radio
• Transistor.fm

View Details

Topics include:

• 0:00 – Letting your yes be yes, following through on your commitments, and paying attention to opportunity cost
• 6:40 – When Ember releases actually become LTS versions
• 9:13 – Why we need "test apps" when developing Addons
• 16:50 – How to use newer syntax when authoring Addons that support older Ember versions
• 22:07 – How angle brackets change our component implementations
• 31:46 – How to make the APIs of our domain components more portable
• 38:45 – How to reuse code that has implicit data dependencies, and the Halting problem

Links:

• Mirage's example test apps
• Ember CLI Tailwind's example test apps
• Nested Angle Bracket video
• Ember Collapsible Panel

View Details

Edward Faulkner joins Sam and Ryan to chat about his work on Embroider, a new three-stage architecture that will power the next generation of the Ember CLI ecosystem. They also talk about myriad other topics, including Yarn Plug'n'Play, the benefits of debugging other people's code, how Ember is embracing the larger JavaScript ecosystem, and more.

Topics include:

• 0:00 – What's hard about programming, why schools are bad at teaching math, and more
• 10:47 – Why computers should empower ordinary people, and how we can close the gap that exists between the technologically skilled and unskilled
• 22:12 – How the experience level of the median JavaScript developer affects tech choices made by the community
• 27:54 - The npm dependency graph and Yarn plug-n-play
• 36:24 – How to avoid making too big of a leap when improving software
• 41:58 – What Embroider is, and what problems it's focused on solving
• 46:10 – The three stages of Embroider and the V2 Addon format
• 1:00:15 – What Embroider enables, like tree-shaking unused Addon modules and route-level code splitting
• 1:21:08 – How to try Embroider out in your projects today
• 1:34:39 – How Ember is embracing the larger JavaScript ecosystem
• 1:39:35 - Why debugging other people's code is a great way to level up as a developer
• 1:48:28 - What Embroider's next steps are

Links:

• Ed on Twitter
• Embroider
• Yarn Plug'n'Play

View Details

Derrick Reimer joins Sam and Ryan to chat about building his new real-time chat product Level as an SPA using Elm, Phoenix and GraphQL. He covers domain modeling in Phoenix, his experience building his first GraphQL API, type safety in Elm, and the data fetching patterns he's using to support his application's real-time functionality.

Topics include:

• 2:01 – What is Level? What tech stack are you using to build it?
• 14:34 – Building the GraphQL API with Phoenix and Absinthe
• 37:40 – Building the frontend with Elm

Links:

• Derrick on Twitter
• Level
• The Phoenix framework
• GraphQL
• Absinthe, GraphQL for Elixir
• The Elm language

View Details

Sam and Ryan continue their discussion from the end of Episode 54 about how much we actually rely on our test suites versus how much implicit trust we place in semver. They also talk about some new Ember Octane features as well as a data-fetching issue.

Topics include:

• 2:00 – Do we trust our test suites?
• 10:00 – Breaking APIs in a changelog vs. in code
• 20:27 – Modifiers – they're kinda like mixins
• 37:17 – Named blocks
• 38:29 – Ember Octane & EmberConf trainings
• 43:15 – Fetching user-specific data in EmberMap's Video Views series

Links:

• Chris Garrett's post on Modifiers
• Yehuda's Yieldable named blocks RFC
• Our Real-world Animations training repo
• Our Robust Data Fetching training repo

View Details

Chris Garrett joins Sam and Ryan to chat about what's coming to Ember in Octane, its first edition. Chris talks about how module unification, decorators, ES6 classes, named args, angle-bracket components, template imports, modifiers, and Glimmer components offer a cohesive new programming model for Ember.js developers.

Topics include:

• 1:18 – De-scoping Module Unification from Octane
• 2:25 – Run-time APIs are coming to Octane, build-time APIs are being worked on
• 5:04 – What's the vision behind Ember Editions, and Octane in particular?
• 9:41 – What's the state of decorators?
• 15:43 – What can't you do with static decorators that you can with dynamic decorators?
• 19:18 – Why do we need decorators to use ES6 classes in Ember?
• 20:50 – Is it possible to lint for correct usage of named args and this-dot property access?
• 29:30 – How did Modifiers come about, and how do they obviate the need for lifecycle methods?
• 38:00 – Are you concerned that a player as big as React has abandoned ES6 Classes in favor of functions? Do you think there's anything to their argument that classes are fundamentally confusing?
• 43:49 – What's the thinking behind the Modifier Manager API that just landed?
• 52:04 - Could you expand on a point you made in your blog post about how Ember.set leaks state management all across your app?
• 58:50 – What's the status of Glimmer components?

Links:

• Chris Garrett on Twitter
• Chris's blog
• Modifier managers RFC
• Decorators for JavaScript TC39 proposal
• ember-on-modifier

View Details

Topics include:

• 0:00 - Module unification

  • 1:20 - Component resolution
  • 5:45 - Why we don't use angle brackets

  • 9:35 - SPAs should do everything a server app can do

  • 10:15 - Ember's Router

  • 11:00 - Replicating the server's "fresh data" behavior
  • 17:15 - Reloading stale data

  • 23:50 - Fetching data

  • 23:50 - Getting Mirage working with React and Vue

  • 26:10 - Data loading components
  • 29:41 - Knowing what queries are currently rendered
  • 32:15 - Using cache keys to track what data is loaded
  • 35:00 - Pushing data into the client with web sockets
  • 39:00 - Describing Twitter's UI in queries
  • 44:00 - When will data loading be abstracted away?

  • 49:45 - Dependabot workflow

  • 50:20 - Can you merge a PR from a bot if all the tests pass?

  • 53:20 - Trust, but verify

Links:

• Ember Community Survey
• ember-template-component-import
• Sam Selikoff on Twitter
• Ryan Toronto on Twitter

View Details

Topics include:

• 0:00 - Refreshing an Ember app when a new version is deployed

• 11:05 - When SPAs become too difficult

  • 14:50 - Building an SPA never got as quick as we'd hoped
  • 19:20 - You're now responsible for two applications
  • 28:00 - Integration costs
  • 32:00 - Architecture is easier within a single monolith

  • 40:20 - Beginners should use the same tools as experts

  • 40:50 - Rolling advanced solutions back into the framework

  • 47:41 - Services that are used by both beginners and experts
  • 52:32 - Can you start an SPA without making an API server decision?

Links:

• Rails PR for multi database support
• Sam Selikoff on Twitter
• Ryan Toronto on Twitter

View Details

Topics include:

• 01:15 - Implementing Mirage's AddonDocs blog with GitHub issues
  • 15:30 - Discussion forum vs. GitHub issues vs. blog comments
  • 18:18 - Moving the blog post source to a GitHub issue
  • 23:30 - Dynamic vs. static data, and implications for changing build-time data to run-time data.
  • 27:40 - Downsides of run-time data
• 37:00 - SPA architecture and distributed systems. How does React/Vue "happy path" architecture differ from Ember's?
• 41:45 - Testing is the only true way to know if your dependencies work.
• 43:31 - Where does Ember pass the Celery Test, and where does it fail?

Links:

• Artsy Engineering's blog post on using GitHub issues for blog post comments
• Utterances
• Tailwind's discussion forum
• Basecamp's vocabulary doc, from their handbook

View Details

Topics include:

• 04:01: Welcome to Node Dependency Hell.
• 14:00: How should the way we declare dependencies change if an addon is an implementation detail of another addon?
• 21:45: Can Ember CLI address these problems a layer above Yarn/npm?
• 23:25: Is JavaScript's fractured module ecosystem (CommonJS in node vs. ES6 modules in the frontend) contributing to the problem?
• 26:21: Someone's app broke when they installed their dependencies due to a Mirage dependency changing. How can we reliably solve this for users?
• 35:05: Even if the tooling were better, there's a cultural problem where JS library authors don't consider the dependencies they bring in.
• 39:04: Lessons learned:
  • apps should specify strict dependencies, libraries (including addons) should specify lenient dependencies
  • apps should use lockfiles
  • ember-dependency-lint & yarn resolutions are a good top-level escape hatch
  • addons should use the dependencies key & ember-auto-import for most of their dependencies
• 41:12: Ember Auto Import attempts some deduplication of dependencies. If you're writing an addon that has a dependency the host app cares a lot about, you can use addPackagesToProject to put the burden on host app.
• 48:33: Would you build Ember CLI Tailwind the same if you were building it from scratch today?
• 54:55: Call for input. What are any best practices that we've missed? What did we get wrong?
• 59:20: Mirage blog using GitHub issues teaser

Links:

• Ember Auto Import
• Discourse topic on conflicting dependencies
• Dependency Lint
• Ember CLI Addon Docs
• Ember CLI Tailwind

View Details

Topics include:

• 01:17: Mirage's new Addon Docs site
• 35:55: Ember Bind Helper
• 45:23: Why start with Acceptance Tests?

Links:

• EmberCLI Mirage
• Ember Bind Helper
• Sam Selikoff on Twitter
• Ryan Toronto on Twitter

View Details

Topics include:

• 0:00 Housekeeping: Upgrades, trainings, and nested dropdowns
• 12:24: FastBoot bug 1: How HTML responses turn into DOM nodes
• 37:22: FastBoot bug 2: XMLHTTPRequest and redirects

Links:

• Sam Selikoff on Twitter
• Ryan Toronto on Twitter

View Details

Topics include:

• 03:16: Incidental complexity in SPA development
• 33:04: Dealing with undocumented but relied-upon behavior in OSS libraries

Links:

• Sam Selikoff on Twitter
• Ryan Toronto on Twitter

View Details

Topics include:

• 0:00: Making movies
• 05:08: Ryan Florence's tweet about Twitter App
• 18:08: Ember Data stores across browsers
• 32:58: Laravel's ascending option
• 35:51: YouTube transition to UI pattern
• 42:15: Ember's build environments

Links:

• Sam's Star Wars movie
• Ryan Florence on Twitter's PWA

View Details

Sam and Ryan discuss the wording behind the proposed "@tracked" syntax and how it shapes their understanding of Ember's new programming model. They also talk about 404 pages, data ownership, and their upcoming EmberConf trainings.

Topics include:

• 0:00: Tracked properties
• 13:27: 404 pages
• 26:38: Smart components
• 41:00: EmberConf trainings

Links:

• Ember Conf
• Component Side Effects
• EmberData Storefront
• Ember Animation
• Liquid Fire

View Details

Sam and Ryan discuss a new process for upgrading Ember apps and Sam's experience using it on EmberMap's codebase. They also talk about leadership in Open Source projects and lessons learned from Mirage.

Topics include:

• 04:45: What is a leader's job?
• 13:17: Step-by-Step: Upgrading EmberMap

Links:

• Most leaders don't even know the game they are in
• ember-cli-update
• Dependabot

View Details

Sam and Ryan discuss the difficulty of working with a design system that doesn't have good escape hatches, how implementing HTML and CSS can be more complex and time-consuming than coding user behavior, and some creative approaches to ensuring JSON:API payloads represent canonical server-side state.

Topics include:

• 04:15: Design systems and when they break down
• 22:38: The complexity of implementing designs in HTML and CSS
• 34:38: JSON:API mutations. How incomplete response payloads can put your Ember app into an impossible state.

Links:

• Forms
• JSON API Spec
• Conway’s Law

View Details

Sam and Ryan discuss getting Mirage and Ember to work in CodeSandbox, how FastBoot affects different approaches to rendering responsive content, and different ways an outside-in mindset can benefit product teams and open-source software projects.

Topics include:

• 2:50: Getting Ember and Mirage working on CodeSandbox. Coding in the browser.
• 10:30: How FastBoot affects the use of screen width services
• 24:40: Going all-in on outside-in development. Starting at the end.

Links:

• CodeSandbox
• Mirage boilerplate in CodeSandbox
• EmberMap Email Course
• Conway's Law

View Details

Sam and Ryan discuss new videos on async testing and declarative form validations. They also talk about why it's so hard to create good abstractions in Ember, or more generally the front-end landscape. They discuss constraints versus flexibility, and how the size of a library's problem space affects the likelihood of arriving at a good abstraction.

Topics include:

• 01:14: Lessons learned from the Async Testing series
• 06:20: Forms: declarative validations, building blocks & escape hatches
• 12:56: Why building forms in UI libraries is hard – unconstrained environments
• 30:45: Philosophical differences, and over- vs. under-abstracting

Links:

• EmberMap's premium series on Async Testing
• Andrew Clark on Twitter

View Details

Sam and Ryan discuss an elegant solution to the async nested dropdown problem, a FastBoot success story regarding inlined CSS, pre-warming FastBoot's cache, and implementing a new design alongside an existing design language.

Topics include:

• 01:11: Solving the nested dropdown by recursively currying an action
• 25:00: Inlined CSS and caching with FastBoot
• 40:22: Challenges implementing a new design in an existing design language

Links:

• PurgeCSS

View Details

Sam and Ryan chat about the challenges of testing custom asynchronous code. They also talk about React's new Hooks API, and discuss situations where hooks might be more composable than yields and contextual components.

Topics include:

• 00:00 – Testing custom asynchronous code, like an animated bar chart
• 25:23 – React's new Hooks API

Links:

• EmberMap Async testing series
• API docs for Ember's testing helpers
• Overview of React Hooks with Dan Abramov and Sophie Alpert
• 90% Cleaner React with Hooks – Ryan Florence
• Sam Selikoff on Twitter
• Ryan Toronto on Twitter

View Details

Sam and Ryan talk about the challenges of building nested dropdowns, whether a component reading data from its children is an anti-pattern, how angle-bracket syntax encourages new components, and whether “CSS best practices” exist.

Topics include:

• 00:40 – Thinking through a nested drop-down navigation menu
• 35:15 – Building an component & angle-bracket syntax
• 45:00 – Layout UI primitives
• 46:35 – What are CSS best practices? How might Tailwind encourage these?
• 52:17 – "Semantic" classes. Should developers have to name every UI element, if designers don't?

View Details

Sam and Ryan talk about their upcoming email course on Ember component patterns, wrapping up their EmberMap series on Functional CSS, refactoring some FastBoot code in Node, and how Mirage might be useful if it could run as a real server.

Topics include:

• 0:30 - Email course in Ember Component Design
• 8:00 - EmberMap course on Functional CSS with Ember
  • Do you have a preferred API for styled component variants? See Sam's tweet below.
• 14:00 - FastBoot, and refactoring and testing Node code
• 31:10 - Pushing Mirage to run as a non-production server

Links:

• Using Functional CSS with Ember
• Sam's tweet on styled variants
• Art of Product Podcast

View Details

Sam and Ryan talk about lessons from Jason Fried's Q&A about scoping down product features, and how that applies to our open-source work. They also talk about inlining critical-path CSS with FastBoot.

Topics include:

• Inlining CSS with FastBoot (0:08)
• Scoping down (14:26)
  • Jason Fried's Q&A at Laracon
  • Scoping down at work and in OSS
  • How to handle OSS contributors who add scope
  • How bugs indicate a larger-than-expected problem space
  • How to say no to new features you can't commit to supporting
  • Are there projects that can't be scoped down?
  • Using OSS checkpoints to avoid burnout

Links:

• Jason Fried Q&A at Laracon

View Details

Sam and Ryan chat about two new EmberMap series, Forms and Async testing, as well as Sam's keynote at EmberCamp and the best way to avoid product gaps in open-source software. They also answer some listener questions.

Topics include:

• Forms (1:18)
• Splitting forms into containers and presenters
• Avoiding premature abstractions (7:03)
• Which components do you carry from project to project?
• Asynchronous testing (14:47)
• Testing animations
• Sam's keynote at EmberCamp on Product gaps (19:04)
• Product gaps at companies vs. in OSS
• Are small packages and convention over configuration at odds with each other?
• Convention over configuration that decomposes well
• The risk of bad high-level abstractions in OSS
• How to "finish" an OSS project

Questions:

• What's the state of TypeScript support in Ember? (48:15)
• When are observers actually appropriate to use? (54:57)
• Any tips on refactoring async relationships? (59:34)

View Details

Sam and Ryan continue their discussion about the role of product in an engineer's daily working life. They talk about what product gaps are, the symptoms of product gaps on tech teams, and what you can do about product gaps if you're on a team with no product manager.

Topics:

• 2:05 – All about product
  • More product responsibilities fall on engineers than ever before
  • Coders can help surface valuable info to business teams about the tradeoffs of their product decisions
  • Learning product makes coders better because it influences what they code, it increases their chance of building software that will actually be used, and it helps them focus at work
  • The symptoms of a product gap drives engineers to think that they need to code more
  • Product gaps often creep up on medium-size teams that don't have dedicated product managers
  • Symptoms of a product gap:
    • Having three number one priorities
    • Coding after hours
    • Tons of work being done, but feeling like you're moving an inch in every direction
    • Hard time estimating
    • You finish a sprint, and you're not sure what the value was
    • "We just need more engineers"
  • If you're on a team with no product manager, and you have a product gap, what can you do?
    • Ask a lot of questions, and push the product decisions up.
    • Let the whole organization feel the pain of the product decisions that aren't being made.
    • Surface the tradeoffs being made.
  • "But this is not my job, I'm an engineer! I just want to code."
    • If you ignore this stuff, your "just coding" won't be sustainable
  • How to get your engineers out of meetings and firing on all cylinders: a product roadmap
    • Make sure your product cards are not about implementation details
  • How to recognize which decisions you can make as an engineer, and which you can't
  • Why you shouldn't say yes to every work request
  • How doubling your estimates can surface product issues

View Details

Sam and Ryan talk about the cost of using engineering as discovery, the consequences of embedding product decisions throughout the design and development phases of a project, and other lessons that software engineers can learn from product developers. They also chat about how they categorize Github issues.

Topics:

• 0:00 – GitHub issue categorization

  • The importance of issue triage
  • Prioritizing bugs over features
  • Getting Things Done

  • 7:53 – Managing product

  • 7:53 - Engineering issues as a symptom of product/process issues

  • 13:05 - The 3 phases of a software feature: product, design, engineering
  • 16:04 - What happens when you embed product decisions in the design/engineering phases of a project
  • 29:27 – Who's the head of product? Design? Engineering? Who is the decision-maker?
  • 31:22 – Falsely believing that all decisions are final. Stakeholder PTSD.
  • 34:07 – Product and marketing decisions are getting made, whether you are making them explicitly or not.
  • 37:00 – If we care about people being successful with Ember, we need to understand the product decisions that are being made on behalf of Ember. In OSS, we are making product decisions whether we realize it or not. Are we making them as a side effect of our work? If so, we could create better software by thinking explicitly about these decisions.
  • 41:04 - What do you do when you've gone through this phase and you learn something new?
  • 41:55 - Small batches (Lean startup). Envelope example. Unknown complexity at the end of software projects.
  • 45:28 - Getting a cross-discipline team in the same room. Having a decision-maker to avoid design by committee.

Links:

• The Lean Startup by Eric Ries

View Details

Sam and Ryan talk about the Ember 2018 Roadmap RFC and its focus on improving communication, completing in-progress work, and shipping Ember Octane. They also talk about how to verify complex addon behavior by using full-blown test apps and addons.

Topics:

• 0:00 – Test apps

  • Using full apps and addons in a subdirectory of an addon to facilitate testing complicated scenarios
  • Avoiding implementation details of the build pipeline in testing

  • 12:14 – Ember Octane

  • The Ember 2018 Roadmap RFC

  • The concept of Ember Editions & the first edition, Ember Octane
  • Discussing the areas of focus from the RFC: better communication, shipping a ton of in-progress work, shipping Ember Octane
  • Discussing non-goals for the year

Links:

• Ember 2018 Roadmap RFC
• Matthew Beale's MU RFC with the {{use}} helper

View Details

Mel chats with Sam about getting into Ember, lessons learned from collaborating at work an in open source, and how to make it easier for JavaScript engineers to use better UI patterns.

Topics:

• 0:00 – How Mel got into Ember at JPMorgan
• 4:45 – Feeling welcome in the Ember community
• 7:45 – Investing in Ember for the long-term
• 9:00 – Communicating vision, removing our ego, and empowering others to do work
• 17:07 – Learning team projects
• 19:30 – Improving the native accessibility story for Ember
• 27:25 – Making it easier for JavaScript engineers to use better UI patterns
• 34:55 – Ember Styleguide and Ember OSS infrastructure
• 49:10 – EmberCamp Chicago
• 51:20 – Leveling up in the Ember community

Links:

• Melanie on Twitter: @melaniersumner
• EmberCamp, September 21, Chicago: http://embercamp.com
• Melanie's FizzBuzz in HBS
• How to talk so kids will listen & listen so kids will talk

View Details

Sam and Ryan chat (on new mics!) about Ryan's recent video on declarative keyboard events, changes to EmberMap's FastBoot architecture, and some of Ryan's recent work on FastBoot testing.

Topics:

• 0:00 – Ryan's video on declarative keyboard events; other declarative components that haven't been discovered
• 9:52 – Our evolving FastBoot architecture; which parts can be generalized; a high Lighthouse score; a long uncanny valley
• 29:11 – Sam's Mirage work, fixing bugs, approaching 1.0; Mirage as a tool to show off work; question for listeners, how do you show your work to your team?
• 34:51 – Ryan's work on FastBoot testing; how Mirage could work with FastBoot testing; the joy of ES6 classes and async/await in Node

Links:

• Ryan's video on Declarative keyboard navigation: https://embermap.com/video/declarative-keyboard-navigation
• Ryan's WIP FastBoot testing addon: https://github.com/embermap/ember-cli-fastboot-testing

View Details

Jon joins Sam and Ryan to talk about his recent work on rehydration in FastBoot and all the creative ways we can use Codemods to automate the routine parts of our jobs.

Topics:

• 0:00 – How Jon got into Ember at HashRocket
• 4:45 – Jon and Chase starting the EmberWeekend podcast
• 7:30 – Greenfield vs. brownfield projects at a consultancy
• 13:30 – Infrastructure complexities in Ember's ecosystem
• 18:07 – Jon's work on FastBoot rehydration
• 41:29 – Jon's work on Codemods & the new testing APIs

Links:

• Jon on Twitter https://twitter.com/rondale_sc
• Jon's podcast Ember Weekend https://emberweekend.com/episodes
• Codemod CLI https://github.com/rwjblue/codemod-cli

View Details

Sam and Ryan chat about provider components in Ember, including the first renderless components they wrote, the different types of data components can provide, and the patterns of template composition that providers unlock. They also talk about the need for a unified API for styling Ember components.

Topics:

• 0:40 – Our first provider components
• 10:12 – Using providers to isolate the business logic for a form
• 27:35 – Patterns of composition in templates
• 34:35 – How to constrain more flexible interfaces
• 39:55 – APIs for styling components

View Details

Jen talks to Sam and Ryan about her journey learning from and giving back to Ember, and how she keeps her community contributions sustainable by tying them back to personal goals and rewards.

Topics:

• 7:00 – Learning Ember at General Assembly
• 9:00 – How did you go from learner to contributor?
• 13:25 – Thoughts on Slack, Stack Overflow and Discourse
• 18:12 – What advice do you have for folks looking to contribute back to Ember?
• 24:66 – What are some things you'd like to see change about Ember?
• 30:39 – What personal projects are you working on right now?
• 35:10 – Why do you think someone should start using Ember today?

Links:

• Jen on Twitter: @jwwweber(https://twitter.com/jwwweber)
• The Ember Times: site

View Details

Sam and Ryan talk about their initial attempts to get Mirage running in Node, the benefits and workflows that it will unlock, some different approaches for using code in both the browser and Node, and how we might test FastBoot apps in the future.

Topics:

• 4:28 – Getting Mirage to run in Express
• 21:58 – How to use addons like Mirage work in Node
• 42:53 – Testing FastBoot apps

View Details

Sam and Ryan talk about how to deal with building non-optimistic UIs using Ember and Ember Data, and how constrained visual design tools might help us build better UIs. They also answer some questions and talk about their current series on Functional CSS and Rendering tests.

Topics:

• 0:00 – What's new on EmberMap
• 8:06 – Options for non-optimistic UI in Ember Data
• 22:34 – Visual programming

Questions:

• 34:08 – What techniques do you have for authorization (not authentication)?
• 40:42 - How might you improve the developer experience of working with Ember Data?
• 50:14 – When can we get TypeScript in Mirage?

View Details

Sam and Ryan talk about bringing the ideas of declarative rendering over to our data layers, how easy it is for data to become stale in SPAs, and more stories from their recent adventures in FastBoot land.

Topics:

• 0:00 – Declarative data fetching
• 18:50 – Stale data in SPAs
• 30:46 – FastBoot

View Details

Sam and Ryan chat about what to do when a node module breaks in FastBoot, how to best wrap 3rd-party libraries in an Ember Addon, and how to test the filesystem. They also answer some listener questions.

Topics:

• 0:00 – Node modules in FastBoot
• 13:55 – Ember Addons that wrap 3rd-party libraries
• 19:07 – Testing the filesystem with Broccoli Test Helpers

Q&A:

• 32:11 – How can I speed up my Ember CLI build times?
• 38:31 – What do you think about the Angle Bracket Polyfill? Would you use it?
• 42:08 – I'm building an app and I need to build it with skeleton screens. Do I use a model hook with loading states, do I use Ember Concurrency tasks? What approach should I take?
• 46:44 – I'm building a table, and each row has a bunch of CRUD actions – edit, delete, view. What are the best UI patterns for this? A few I'm considering: a cog that you click that exposes a dropdown menu; icons in the row; buttons in the row.

View Details

Sam and Ryan chat about some ideas around caching in FastBoot, different ways of prioritizing work, and the difference between easy things and hard things in Ember.

Topics

• 0:00 – Caching & FastBoot
• 16:18 – Project process, workflow, bugs, features, and issue urgency
• 37:47 – Easy vs. hard things in Ember. Ember focusing on its strengths.

View Details

Toran talks to Sam and Ryan about his project Ember CLI Hot Loader, which is an implementation of component-based hot module reloading for Ember apps.

Topics:

• 0:00 – Losing hot reloading when moving from handwritten CSS to functional css
• 2:16 – Why Toran wrote the Hot Reloader
• 4:45 – How the hot reloader leverages Ember CLI to reload components
• 8:31 – The need for hot reloading
• 14:56 – Are there situations where you don’t want to use the hot reloader?
• 19:05 – What’s the easiest way to try using the hot reloader today?
• 21:05 – Design vs. build mindset
• 22:30 – Engines aren’t currently supported
• 23:53 – How local state affects hot reloading
• 27:50 – Fast feedback is the primary motivation
• 34:05 – What are the next steps for Ember CLI Hot Reloader?
• 37:51 – What happens to a component’s transient state if it’s hot reloaded?
• 39:44 – How to help if you’re interested in hot reloading in Ember

Links:

• Ember CLI Hot Loader
• Toran’s side-by-side hot reloading demo
• Bret Victor, Inventing on Principle

View Details

Sam and Ryan chat about Ember at Microconf, two-way bindings, and TDD vs. "Test before commit".

Topics:

• 0:00 – When direct state mutations make sense
• 8:15 – Ember at MicroConf & how other communities think about Ember
• 29:42 – TDD versus “Test before commit”

Links:

• Pure UI by Guillermo Rauch

View Details

Adam joins Sam and Ryan to talk about coupling in HTML and CSS, different approaches to styling applications, and his popular open-source library Tailwind CSS.

Topics covered:

• 0:00 – Adam's motivation for creating Tailwind
• 3:20 – Reusability in CSS
• 8:20 – Semantics and coupling in HTML and CSS
• 16:05 – Messy templates in functional CSS
• 20:52 – CSS patterns in server-rendered apps
• 24:45 – Component classes in Tailwind
• 31:20 – CSS patterns in SPAs
• 39:31 – Experimental design tools
• 46:00 – What's next for Tailwind

Links:

• Tailwind CSS
• Advanced Vue Component Design, Adam's new course
• Modulz, the design tool

View Details

Robert and Tom join Sam and Ryan to chat about how LinkedIn uses Ember, when teams should use Engines, build optimizations that are coming to Ember CLI and more.

Topics:

0:00 – Engineering challenges of scale at LinkedIn

6:00 – Engines at LinkedIn

8:40 – When should teams use Engines?

15:25 – What are some of the downsides of Engines?

17:38 – Build-time versus AOT library transpilation

21:47 – How just-in-time compilation relates to code-splitting and importing node modules

29:50 – Ember’s philosophy on bringing new JS features to years-old apps

32:55 – How can the community be most helpful when contributing to Ember?

41:32 – Analytics and performance tracking at LinkedIn

46:07 – What are your thoughts on Vue.js? (Question from jamiewhite)

52:18 – How can we help improve the developer experience of using Handlebars templates (autocomplete, error correction, template linting, etc.)?

1:02:40 – Moving questions from Slack to the Discussion forum

View Details

Sam and Ryan chat about Tailwind and compilers (again), Ryan's EmberJS homepage teardown, and releasing with git tags. They also answer some listener questions.

Topics covered:

• 0:00 – Compilers, Tailwind, and APIs for styling components
• 17:00 – Ember.js Homepage teardown
• 30:48 – git tag for immutable gh references

We also answers some listener questions:

• 37:14 – Q: What's the deal with using websockets in Ember? Any good patterns beyond creating some kind of Ember service to listen to the socket and push data into the store? (@yohanishkin on Slack)
• 40:57 – Not sure if you’ve talked about it at all yet, but the this topic seems worth further exploration: [Should Ember better define its use of Slack?] @mattmcmanus

View Details

Sam and Ryan chat about Sketch’s new Prototyping feature, using Amazon Workspaces to develop Ember apps in a Windows environment on a Mac, and how to use git tag to ensure your project’s dependencies don’t disappear. They also answer some listener questions.

Topics

• Sketch prototyping + design
• Ember on Windows
• git tag for immutable gh references

Questions

• Q: with the latest Router service it’s possible to transition to another page from everywhere in the code. Before, we created specific actions in the route, just to transition to another page. Is transitioning to other pages from inside components considered a bad practise, or is it totally fine (My co workers feels it’s ‘dirty’ to transition from inside components.)? Do you have any guidelines when and where to transition with the new service? (edited) (@maarten from Slack)
• Can you use mirage for other applications as well? (ex: Rails app with same API dependencies as Ember.) (https://twitter.com/keystonelemur/status/979777292745363456)
• Can you talk about how to upgrade ember.js smoothly? I always have trouble bumping our ember version, mainly I think due to some add-ons. But the error message are not that useful. (https://twitter.com/tantantanmian/status/980662478374805505)

View Details

Alex Matchneer chats with Sam and Ryan about challenging routing patterns in Ember, his involvement with the Ember community, and what Ember’s next router might look like.

Topics covered:

• Routing patterns from mobile apps that are difficult with Ember
• Lessons learned from community involvement
• The concept of timespans
• Fighting community conventions
• Server-driven state changes
• Declarative routing

Alex also answers some listener questions:

• When are you going to release a full album?
• If you could improve one thing with Ember, what would it be and why?
• Do you have strategies for teaching ember-concurrency to someone who doesn't know about generator functions? Do you try to teach those separately first?
• What are some JavaScript patterns you don't see being used as often as you think they should?
• What are some concepts/design patterns you wish all developers would know about and internalize?
• How do non-ember-core members become more involved in ember-core? What are some ways to bridge the gap between basic contributions and the complicated RFC process? How do you drive community change from only addon code?

View Details

Sam and Ryan talk about their new series, “Declarative rendering,” and why we should use steelman arguments instead of strawman arguments when talking about technology. They also answer some listener questions.

Topics covered:

• Declarative rendering, their new series
• Steelman versus strawman arguments

Listener questions:

• I care about lazy loading ember code, like routes. My knowledge is that’s its only possible with ember engines, but I’m not sure. Thanks a lot – @sommer_gerrit on Twitter
• Podcast about ember-engines might be cool – @iflask on Twitter
• My question: is it time to pitch PWA instead of native apps for clients wanting a presence on mobile (re: the new Safari release) – @real_ate on Twitter
• Question for the show -> how might writing glimmer components be different in the coming months as we unlock that as first class (thru the eyes of a traditional ember 2 developer) – @toranb on #topic-embermap from Slack
• Ember Data can get complicated in a hurry when not using a JSON:API standard API. What are some strategies to work with these kinds of APIs assuming the API cannot be changed? – @localpcguy on #topic-embermap from Slack

View Details

Sam and Ryan talk about

• Functional CSS training at EmberConf
• Some ideas for hiding styling implementation details from templates
• A new setup for multiple staging environments
• An idea from data modeling called “Making the impossible, impossible”
• How to use data down actions up effectively in forms

They also answer some listener questions:

• When should I use polymorphic or reflexive relationships?
• When do I need to explicitly name a relationship’s inverse?
• When should I reference relationships and when should I embed them?

View Details

Oli Griffiths joins Sam and Ryan to talk about his experience using typed languages, what kinds of benefits static could bring to the Ember developer experience, and his upcoming EmberConf training on Broccoli.js.

View Details

Sam and Ryan talk about the upcoming Operations addition to the JSON:API spec, adding FastBoot support to Storefront, how to think about caching in Fastboot, and a thought experiment around how Ember might niche down and focus on its strengths.

View Details

Tom Dale chats with Sam and Ryan about static analysis and compilers, upstreaming learnings from Glimmer, and what sort of size and speed improvements Ember.js will see in 2018.

View Details

Sam and Ryan talk about writing Babel plugins, components that can be transformed to plain HTML at compile-time, the differences between run-time and compile-time error messaging, and one way to make integration tests more reusable and domain-specific.

View Details

Sam and Ryan chat about Sebastian Markbage’s 2015 React Europe talk “DOM as a Second-Class Citizen” and how to deal with stale data in an Ember app.

• Sebastian Markbage's talk DOM as a Second-Class Citizen

View Details

Sam and Ryan chat about all the different ways you can make sure your app is working, some of their latest thoughts on functional CSS and presenter components in Ember, and how to test asynchronous errors in an acceptance test.

View Details

Sam and Ryan talk about a new Storefront API and why routes should declare their data needs, patterns that make your code more disposable, how Ember CLI Update simplifies the process of upgrading your Ember apps, and what teams should consider when choosing Ember for their next project.

View Details

Sam and Ryan talk about uploading images to S3, a new Storefront API for dealing with server errors in Ember Data, how to be a good community citizen when it comes to publishing consumable libraries given that our package managers now use lockfiles, and some ongoing work on the Ember CLI Addon Docs addon.

View Details

Sam and Ryan discuss community feedback on Ember Data's pain points, including asynchronous relationships, store forking and batch saving.

View Details

Sam and Ryan discuss using contextual components to clean up forms, a unique authentication scenario using cookies and JWT, the release blog post about Ember 3.0, and building animations with the Liquid Tether addon.

View Details

Special guest Luke Melia chats with Sam and Ryan about styleguides, CSS patterns, Ember Freestyle and more.

Links from the episode:

• Luke Melia on Twitter
• Suit CSS
• Ember Freestyle
• Ember Prop Types
• Yapp Labs on Github
• Ember CLI Deploy

View Details

Sam and Ryan chat about adding FastBoot to EmberMap's codebase, the difference between reusable and structural components, and the road to adding transactions to Ember Data.

View Details

Listen to Sam and Ryan chat about their experience using Glimmer, how Ember is perceived in the larger front-end community, and their experience with Tachyons, the functional CSS library.