Frontend First

Creating a background gradient from an image

sam@samselikoff.com (Frontend First) — Thu, 12 Dec 2024 18:33:54 +0000

Ryan talks to Sam about reproducing iOS's new image background treatment for his Open Graph Preview tool, opengraph.ing. They talk about different approaches for generating gradients from images, including finding the vibrant color of an image, luminosity-weighted averages, k-means clustering, and more.

Timestamps:

0:00 - Intro
3:07 - Apple's new OG image gradient
10:06 - Luminosity-weighted average
14:22 - Finding the vibrant color of an image
21:41 - Contrast ratios on favicons
32:21 - K-means clustering
41:25 - Refactoring UI tip about rotating the hue

Links:

Exploring useActionState

sam@samselikoff.com (Frontend First) — Thu, 14 Nov 2024 19:47:04 +0000

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

Cloudflare Tunnel | React Compiler | refs during render

sam@samselikoff.com (Frontend First) — Thu, 31 Oct 2024 15:58:05 +0000

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:

useAnimatedText | Events vs. State Changes | Catalyst

sam@samselikoff.com (Frontend First) — Thu, 24 Oct 2024 15:09:56 +0000

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:

Can you self-host Next.js?

sam@samselikoff.com (Frontend First) — Thu, 10 Oct 2024 16:26:06 +0000

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

Tom Occhino on the future of React

sam@samselikoff.com (Frontend First) — Wed, 18 Sep 2024 17:43:46 +0000

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:

Render props

sam@samselikoff.com (Frontend First) — Thu, 5 Sep 2024 19:13:06 +0000

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:

Controlled and uncontrolled components

sam@samselikoff.com (Frontend First) — Wed, 28 Aug 2024 14:00:17 +0000

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:

Unstyled React components

sam@samselikoff.com (Frontend First) — Thu, 15 Aug 2024 03:11:11 +0000

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:

What is a framework?

sam@samselikoff.com (Frontend First) — Thu, 1 Aug 2024 14:40:54 +0000

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:

Crossover: Declaring War Against the Frontend

sam@samselikoff.com (Frontend First) — Thu, 25 Jul 2024 16:52:52 +0000

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

Blog Post Club: Queueing - An interactive study of queueing strategies

sam@samselikoff.com (Frontend First) — Thu, 18 Jul 2024 17:19:18 +0000

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:

SPAs in React 19

sam@samselikoff.com (Frontend First) — Thu, 11 Jul 2024 16:05:50 +0000

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

High floor, high ceiling

sam@samselikoff.com (Frontend First) — Wed, 3 Jul 2024 14:07:15 +0000

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

Technical Cost vs. Product Benefit

sam@samselikoff.com (Frontend First) — Thu, 20 Jun 2024 14:06:35 +0000

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:

View Transitions in React

sam@samselikoff.com (Frontend First) — Wed, 12 Jun 2024 18:02:19 +0000

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:

CodeMirror | Radix Themes

sam@samselikoff.com (Frontend First) — Wed, 17 Apr 2024 14:38:22 +0000

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:

Throw is about control flow – not error handling

sam@samselikoff.com (Frontend First) — Wed, 10 Apr 2024 16:31:00 +0000

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:

The Philosophy of Next.js

sam@samselikoff.com (Frontend First) — Fri, 22 Mar 2024 18:50:38 +0000

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

Beyond Data Fetching with RSCs

sam@samselikoff.com (Frontend First) — Wed, 13 Mar 2024 21:07:51 +0000

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:

Blog Post Club: React Labs – What We’ve Been Working On

sam@samselikoff.com (Frontend First) — Fri, 1 Mar 2024 19:16:06 +0000

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:

Instant URL search params in Next.js

sam@samselikoff.com (Frontend First) — Wed, 21 Feb 2024 15:09:44 +0000

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

React Deep Dive: useOptimistic

sam@samselikoff.com (Frontend First) — Wed, 14 Feb 2024 18:37:59 +0000

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:

React Deep Dive: cache

sam@samselikoff.com (Frontend First) — Wed, 7 Feb 2024 15:30:46 +0000

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

Advanced Radix UI | Blog Post Club: React Server

sam@samselikoff.com (Frontend First) — Thu, 1 Feb 2024 18:32:06 +0000

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:

The SQL Injection Slide

sam@samselikoff.com (Frontend First) — Mon, 6 Nov 2023 15:51:58 +0000

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:

The Remix Architecture

sam@samselikoff.com (Frontend First) — Sat, 14 Oct 2023 18:06:14 +0000

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:

Implementing RSC, Part 2: Server Actions

sam@samselikoff.com (Frontend First) — Wed, 4 Oct 2023 18:18:33 +0000

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

Implementing RSC, Part 1: Rendering

sam@samselikoff.com (Frontend First) — Fri, 29 Sep 2023 14:03:12 +0000

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:

Should a navigation and a refresh show the same page?

sam@samselikoff.com (Frontend First) — Wed, 20 Sep 2023 17:06:02 +0000

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:

Tim Neutkens on the Next.js App Router

sam@samselikoff.com (Frontend First) — Wed, 16 Aug 2023 18:35:32 +0000

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:

Understanding prop passing from RSC to Client Components

sam@samselikoff.com (Frontend First) — Wed, 9 Aug 2023 14:34:29 +0000

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

Server-side rendering vs. Server Components

sam@samselikoff.com (Frontend First) — Wed, 12 Jul 2023 17:03:01 +0000

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

Reusable pending UI for forms with Server Actions

sam@samselikoff.com (Frontend First) — Wed, 5 Jul 2023 13:20:01 +0000

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:

How Suspense led to Server Components (React Roundtable reaction)

sam@samselikoff.com (Frontend First) — Wed, 7 Jun 2023 18:51:04 +0000

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:

Learning by copy-paste

sam@samselikoff.com (Frontend First) — Wed, 24 May 2023 14:57:33 +0000

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:

What problems do React Server Components solve?

sam@samselikoff.com (Frontend First) — Wed, 17 May 2023 10:00:00 +0000

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:

Implicit time zones and the TZ environment variable

sam@samselikoff.com (Frontend First) — Thu, 11 May 2023 14:16:21 +0000

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:

React email previews and radial gradients

sam@samselikoff.com (Frontend First) — Wed, 3 May 2023 14:00:36 +0000

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:

Blending modes and secure redirects

sam@samselikoff.com (Frontend First) — Wed, 26 Apr 2023 10:00:00 +0000

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:

React Aria Components

sam@samselikoff.com (Frontend First) — Thu, 20 Apr 2023 11:53:37 +0000

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:

JavaScript needs a model layer

sam@samselikoff.com (Frontend First) — Wed, 12 Apr 2023 10:00:00 +0000

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

Server Components and the React paradigm

sam@samselikoff.com (Frontend First) — Wed, 15 Mar 2023 15:00:21 +0000

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:

HTML, HTTP, and React

sam@samselikoff.com (Frontend First) — Wed, 8 Mar 2023 08:00:00 +0000

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, whether the frontend community has overcomplicated web development, the problem with progressive enhancement, React Server Components, how server-centric approaches to building rich web experiences like Phoenix LiveView compare to the approaches in the React ecosystem, 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

Caching strategies

sam@samselikoff.com (Frontend First) — Wed, 1 Mar 2023 14:04:04 +0000

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:

Saying goodbye to static generation

sam@samselikoff.com (Frontend First) — Wed, 22 Feb 2023 11:00:00 +0000

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 solution: run-time server rendering
35:44 - Why we left static
39:55 - Details and challenges of moving to getServerSideProps

Links:

Build UI

Building user search with React Server Components

sam@samselikoff.com (Frontend First) — Wed, 15 Feb 2023 21:12:02 +0000

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

Ship Small, Ship Fast

sam@samselikoff.com (Frontend First) — Wed, 8 Feb 2023 11:00:00 +0000

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:

Lying in TypeScript

sam@samselikoff.com (Frontend First) — Thu, 26 Jan 2023 16:14:21 +0000

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:

Animating a Stable Diffusion side project

sam@samselikoff.com (Frontend First) — Thu, 19 Jan 2023 11:00:00 +0000

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

Lessons from stitching GraphQL services with Hasura

sam@samselikoff.com (Frontend First) — Wed, 11 Jan 2023 11:00:00 +0000

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:

How to solve a SSR/CSR mismatch using the DOM

sam@samselikoff.com (Frontend First) — Thu, 29 Dec 2022 13:24:37 +0000

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:

Why we’re adding a CMS to Build UI

sam@samselikoff.com (Frontend First) — Fri, 2 Dec 2022 16:54:30 +0000

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:

Testing is inescapable

sam@samselikoff.com (Frontend First) — Fri, 16 Sep 2022 19:42:58 +0000

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

Type safety from Hasura to SWR

sam@samselikoff.com (Frontend First) — Fri, 2 Sep 2022 20:22:28 +0000

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:

Playing with Server Components in Vercel’s Edge Runtime

sam@samselikoff.com (Frontend First) — Mon, 22 Aug 2022 16:44:42 +0000

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:

The problem with buttons on the web

sam@samselikoff.com (Frontend First) — Wed, 20 Jul 2022 12:24:05 +0000

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:

Should you use merge commits or rebase when working on large codebases?

sam@samselikoff.com (Frontend First) — Mon, 6 Jun 2022 18:54:15 +0000

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:

Read and discuss: Next.js Layouts RFC

sam@samselikoff.com (Frontend First) — Tue, 31 May 2022 23:32:29 +0000

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:

All about useEvent

sam@samselikoff.com (Frontend First) — Thu, 12 May 2022 16:17:24 +0000

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:

Strict Mode Behaviors in React 18

sam@samselikoff.com (Frontend First) — Fri, 6 May 2022 18:03:00 +0000

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:

Reacting to Remix!

sam@samselikoff.com (Frontend First) — Fri, 25 Mar 2022 19:19:27 +0000

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:

Client apps, server apps, and the real reason DX matters

sam@samselikoff.com (Frontend First) — Thu, 17 Mar 2022 14:38:52 +0000

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:

Auth-based route guards in Next.js and debugging in production

sam@samselikoff.com (Frontend First) — Tue, 8 Mar 2022 16:39:24 +0000

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:

What’s the link between Server Components and Suspense for Data Fetching?

sam@samselikoff.com (Frontend First) — Fri, 25 Feb 2022 17:33:14 +0000

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:

Internal apps vs. public websites

sam@samselikoff.com (Frontend First) — Thu, 17 Feb 2022 01:26:10 +0000

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)

How to bridge the gap from module scope to React rendering

sam@samselikoff.com (Frontend First) — Fri, 4 Feb 2022 17:05:25 +0000

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:

Is Suspense “backwards compatible”, and thoughts on Remix & web standards

sam@samselikoff.com (Frontend First) — Sat, 29 Jan 2022 16:20:58 +0000

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:

Transitions and Data Fetching with Suspense in React 18

sam@samselikoff.com (Frontend First) — Wed, 19 Jan 2022 16:17:40 +0000

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:

Transitive Dependencies and Suspending After Initial Render

sam@samselikoff.com (Frontend First) — Tue, 11 Jan 2022 15:27:44 +0000

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:

Suspense and the React 18 Keynote

sam@samselikoff.com (Frontend First) — Tue, 21 Dec 2021 14:04:57 +0000

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

Pages are new entry points

sam@samselikoff.com (Frontend First) — Tue, 26 Oct 2021 14:16:39 +0000

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

The benefits of smarter form components

sam@samselikoff.com (Frontend First) — Tue, 21 Sep 2021 15:30:27 +0000

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

Module side effects and import order

sam@samselikoff.com (Frontend First) — Wed, 18 Aug 2021 16:51:49 +0000

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](https://github.blog/2021-08-11-githubs-engineering-team-moved-codespaces/)

Mocking services

sam@samselikoff.com (Frontend First) — Wed, 4 Aug 2021 10:04:06 +0000

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

Shared reactive data without context or effects

sam@samselikoff.com (Frontend First) — Mon, 19 Jul 2021 14:40:28 +0000

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:

The Costs of SSR in Next.js

sam@samselikoff.com (Frontend First) — Tue, 13 Jul 2021 05:23:02 +0000

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:

Sync code, async UI

sam@samselikoff.com (Frontend First) — Tue, 6 Jul 2021 19:25:10 +0000

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:

Using Suspense

sam@samselikoff.com (Frontend First) — Mon, 21 Jun 2021 13:02:18 +0000

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:

Talkin’ Bout Suspense

sam@samselikoff.com (Frontend First) — Mon, 14 Jun 2021 14:21:51 +0000

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:

Building headlessui.dev (fixed)

sam@samselikoff.com (Frontend First) — Mon, 7 Jun 2021 14:09:56 +0000

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:

Should frontend development drive backend design?

sam@samselikoff.com (Frontend First) — Fri, 28 May 2021 21:21:14 +0000

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:

Is Tailwind really an alternative to Bootstrap?

sam@samselikoff.com (Frontend First) — Thu, 18 Mar 2021 07:26:57 +0000

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:

Does server-side generation make loading states more complex?

sam@samselikoff.com (Frontend First) — Tue, 23 Feb 2021 00:21:28 +0000

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:

Best Practices for Imperative APIs in React

sam@samselikoff.com (Frontend First) — Fri, 5 Feb 2021 18:36:34 +0000

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:

Auth: The Momentum Killer

sam@samselikoff.com (Frontend First) — Fri, 22 Jan 2021 18:34:17 +0000

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:

Gestures and Animations with React Use Gesture and Framer Motion

sam@samselikoff.com (Frontend First) — Thu, 14 Jan 2021 11:00:00 +0000

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:

Bundling client-server communication with packages for Next.js

sam@samselikoff.com (Frontend First) — Wed, 18 Nov 2020 14:19:32 +0000

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

Is GraphQL an implementation detail?

sam@samselikoff.com (Frontend First) — Wed, 11 Nov 2020 18:36:06 +0000

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?

The convergence of frontend and backend frameworks

sam@samselikoff.com (Frontend First) — Wed, 4 Nov 2020 14:43:52 +0000

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:

Key props vs. effects

sam@samselikoff.com (Frontend First) — Wed, 28 Oct 2020 10:00:00 +0000

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:

How to test apps built on third-party services

sam@samselikoff.com (Frontend First) — Thu, 15 Oct 2020 17:36:53 +0000

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

Singleton components

sam@samselikoff.com (Frontend First) — Thu, 17 Sep 2020 20:42:23 +0000

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

Next.js vs. Gatsby, revisited

sam@samselikoff.com (Frontend First) — Wed, 26 Aug 2020 14:29:44 +0000

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

Adventures with Amplify

sam@samselikoff.com (Frontend First) — Wed, 12 Aug 2020 18:27:49 +0000

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

Does code splitting negate the benefits of building an SPA?

sam@samselikoff.com (Frontend First) — Wed, 29 Jul 2020 14:04:29 +0000

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

Stop Energy

sam@samselikoff.com (Frontend First) — Thu, 16 Jul 2020 13:34:02 +0000

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:

Tech debt vs. platform risk

sam@samselikoff.com (Frontend First) — Thu, 2 Jul 2020 18:01:19 +0000

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

Safety and idempotence

sam@samselikoff.com (Frontend First) — Wed, 24 Jun 2020 15:56:53 +0000

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

Drew Powers on How Pika's Making the Web Faster

sam@samselikoff.com (Frontend First) — Fri, 19 Jun 2020 11:22:25 +0000

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:

Tom Preston-Werner on Architecture Decisions in Redwood JS

sam@samselikoff.com (Frontend First) — Wed, 10 Jun 2020 10:00:07 +0000

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](https://redwoodjs.com/)

- [Tom on Twitter](https://twitter.com/mojombo)

Why the browser is the most complex runtime environment

sam@samselikoff.com (Frontend First) — Thu, 28 May 2020 13:38:31 +0000

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](https://youtu.be/5F_k9q9HbAc)

- [Guillermo Rauch on Static First using Serverless Frontends](https://www.serverlesschats.com/50)

- [Excalidraw](https://excalidraw.com)

Read and Discuss: "Second-guessing the modern web"

sam@samselikoff.com (Frontend First) — Wed, 20 May 2020 10:00:10 +0000

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](https://macwright.org/2020/05/10/spa-fatigue.html)

- [Dan Abramov's thoughts on Twitter](https://twitter.com/dan_abramov/status/1259614150386425858)

- ["In defense of the modern web" by Rich Harris](https://dev.to/richharris/in-defense-of-the-modern-web-2nia)

Everyone's sidestepping useEffect. Is everyone wrong, or is it React?

sam@samselikoff.com (Frontend First) — Thu, 14 May 2020 10:00:12 +0000

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

When APIs get misused, who's to blame?

sam@samselikoff.com (Frontend First) — Thu, 7 May 2020 10:00:19 +0000

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](https://changelog.com/gotime/128)

- [AWS Amplify](https://aws.amazon.com/amplify/)

- [Begin.com learn](https://learn.begin.com/)

WTF is the JAMstack?

sam@samselikoff.com (Frontend First) — Fri, 1 May 2020 10:00:05 +0000

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](https://egghead.io/lessons/react-optimistically-update-swr-s-cache-with-client-side-data?pl=create-an-optimistic-ui-in-react-with-swr-1024)

- [SWR on GitHub](https://github.com/zeit/swr)

- [The Twelve Factor App](https://12factor.net/)

Introducing: Frontend First

sam@samselikoff.com (Frontend First) — Fri, 24 Apr 2020 10:00:03 +0000

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:

Coming soon: Frontend First

sam@samselikoff.com (Frontend First) — Mon, 20 Apr 2020 15:05:58 +0000

What's the fastest way to deliver an app?

sam@samselikoff.com (Frontend First) — Thu, 16 Apr 2020 10:00:09 +0000

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:

What's been the primary driver of JavaScript adoption?

sam@samselikoff.com (Frontend First) — Wed, 8 Apr 2020 13:57:12 +0000

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](https://www.youtube.com/watch?v=nqNIy8HkEQ8)

- [JavaScript Deployments with Brian LeRoux](https://softwareengineeringdaily.com/2020/03/04/javascript-deployments-with-brian-leroux/)

- [SWR, Zeit's data-fetching library for React](https://github.com/zeit/swr)

Does route-based code splitting make UX worse?

sam@samselikoff.com (Frontend First) — Wed, 1 Apr 2020 11:56:35 +0000

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](https://www.youtube.com/watch?v=lfDBb0Ar-rc)

- [Mirage JS Inspector Livestream 1](https://www.youtube.com/watch?v=WTDj7MXzejc)

- [Mirage JS Inspector Livestream 2](https://www.youtube.com/watch?v=odcfQAwYGrc)

- [Mirage JS Inspector Livestream 3](https://www.youtube.com/watch?v=knSI60CTZ-U)

We can't stop talking about edge deploys

sam@samselikoff.com (Frontend First) — Wed, 25 Mar 2020 14:49:22 +0000

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:

Yehuda Katz on Thinking Long Term about Experimentation vs. Fragmentation in OSS

sam@samselikoff.com (Frontend First) — Fri, 20 Mar 2020 13:42:49 +0000

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](https://yehudakatz.com/2020/02/19/together-the-merb-story/), Yehuda Katz

- ["We're the Together Framework"](https://yehudakatz.com/2020/03/09/the-together-framework/), Yehuda Katz

- [Coronavirus will also cause a loneliness epidemic](https://www.vox.com/2020/3/12/21173938/coronavirus-covid-19-social-distancing-elderly-epidemic-isolation-quarantine)

Mike Perham on Sustaining Open Source with Sidekiq and Faktory

sam@samselikoff.com (Frontend First) — Wed, 11 Mar 2020 10:00:11 +0000

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](https://github.com/contribsys/faktory)

- [Sidekiq](https://sidekiq.org)

- [Mike on Twitter](https://twitter.com/getajobmike)

- [Mike's blog](https://www.mikeperham.com)

- [Building a $1 Million Business Solo with Mike Perham of Sidekiq](https://www.indiehackers.com/podcast/016-mike-perham-of-sidekiq)

What's the best SPA architecture for edge deploys?

sam@samselikoff.com (Frontend First) — Wed, 19 Feb 2020 14:35:10 +0000

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](https://en.wikipedia.org/wiki/CAP_theorem)

- [Tweet from Guillermo: "Most use cases of SSR are better served by SSG"](https://twitter.com/rauchg/status/1226353359759634432)

Declarative Code and DevOps

sam@samselikoff.com (Frontend First) — Wed, 12 Feb 2020 11:00:13 +0000

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](https://www.react-spring.io)

- [Framer Motion](https://www.framer.com/motion/)

- [Dependabot](https://dependabot.com)

- [GitHub Actions](https://github.com/features/actions)

Launching Mirage JS!

sam@samselikoff.com (Frontend First) — Wed, 29 Jan 2020 11:00:04 +0000

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](https://miragejs.com)

When UI isn't a function of state

sam@samselikoff.com (Frontend First) — Wed, 22 Jan 2020 11:00:22 +0000

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](https://www.react-spring.io)

- [Small, Sharp Tools](https://brandur.org/small-sharp-tools)

How should we style the stuff in between components?

sam@samselikoff.com (Frontend First) — Wed, 8 Jan 2020 11:00:04 +0000

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:

Which concepts should a framework teach?

sam@samselikoff.com (Frontend First) — Fri, 20 Dec 2019 11:00:01 +0000

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](https://vue-composition-api-rfc.netlify.com)

- [MobX](https://mobx.js.org/README.html)

An ORM by any other name

sam@samselikoff.com (Frontend First) — Thu, 5 Dec 2019 11:00:18 +0000

Topics include:

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

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

Links:

- [URQL](https://formidable.com/open-source/urql/)

- [Formik](https://jaredpalmer.com/formik)

- [Reach Dialog](https://reacttraining.com/reach-ui/dialog)

- [Dan Abramov's tweet on controlled/uncontrolled components](https://twitter.com/dan_abramov/status/1200436185426006017)

- [React to the Future - Jordan Walke](https://www.youtube.com/watch?v=5fG_lyNuEAw)

- [Let's Program Like It's 1999 - Lee Byron](https://www.youtube.com/watch?v=vG8WpLr6y_U)

- [Functional Programming in 40 Minutes - Russ Olsen](https://www.youtube.com/watch?v=0if71HOyVjY)

- [Reason ML](https://reasonml.github.io)

When composability is not the answer

sam@samselikoff.com (Frontend First) — Wed, 27 Nov 2019 11:00:18 +0000

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

Yehuda Katz on Paradigms vs. Abstractions in UI Development

sam@samselikoff.com (Frontend First) — Wed, 13 Nov 2019 11:00:26 +0000

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](http://worrydream.com/refs/Brooks-NoSilverBullet.pdf), by Fred Books

- [React Hook Pitfalls](https://www.youtube.com/watch?v=VIRcX2X7EUk), by Kent C. Dodds

React is hard!

sam@samselikoff.com (Frontend First) — Thu, 31 Oct 2019 10:00:09 +0000

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](https://softwareengineeringdaily.com/2019/10/21/dark-lang-with-ellen-chisa-and-paul-biggar/), on the Software Engineering Daily podcast

- [The Dark language + editor](https://darklang.com/)

Does technology get popular for the right reasons?

sam@samselikoff.com (Frontend First) — Wed, 23 Oct 2019 10:00:28 +0000

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](https://bikeshed.fm/episodes/215)

Imports are not code – they're declarations

sam@samselikoff.com (Frontend First) — Fri, 11 Oct 2019 18:09:47 +0000

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)](https://blog.emberjs.com/2019/09/25/ember-3-13-released.html)

- [How to upgrade an Ember App or Addon](https://embermap.com/video/how-to-upgrade-an-ember-app-or-addon)

- [Rich Harris and Edward Faulkner Twitter thread about ES module design](https://twitter.com/Rich_Harris/status/1176509180951322624)

- [Twitter thread about ES module execution order](https://twitter.com/samselikoff/status/1182485014815993856)

- [Sam Selikoff on Twitter](https://twitter.com/samselikoff)

- [Ryan Toronto on Twitter](https://twitter.com/ryantotweets)

Server-side state means global resource identity

sam@samselikoff.com (Frontend First) — Fri, 4 Oct 2019 10:00:06 +0000

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](https://www.nextrelease.io/ember/), mention EmberMap when you sign up for a trial and get 10% off

Links:

- [Mirage JS at ReactNYC S3:E8, Nov 7](https://www.meetup.com/ReactNYC/events/264933125/)

- [Mirage JS](https://miragejs.com)

- [Ember NYC September 2019 - Octane, Blockchain & Concurrency, Compiling Ember](https://www.youtube.com/watch?v=QClGEoHdQKk)

- [Sam Selikoff on Twitter](https://twitter.com/samselikoff)

- [Ryan Toronto on Twitter](https://twitter.com/ryantotweets)

The Weekend Warrior Adoption Hypothesis

sam@samselikoff.com (Frontend First) — Thu, 19 Sep 2019 10:00:10 +0000

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](https://www.nextrelease.io/ember/), mention EmberMap when you sign up for a trial and get 10% off

Links:

- [Hasura](https://hasura.io)

- [graphql-js](https://graphql.org/graphql-js/)

- [darklang](https://darklang.com)

Side effects aren't declarative. What if they were?

sam@samselikoff.com (Frontend First) — Wed, 11 Sep 2019 10:00:07 +0000

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:

What should be abstracted?

sam@samselikoff.com (Frontend First) — Wed, 28 Aug 2019 10:00:14 +0000

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:

APIs are about Policy

sam@samselikoff.com (Frontend First) — Wed, 21 Aug 2019 12:59:11 +0000

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

Object references considered helpful

sam@samselikoff.com (Frontend First) — Wed, 7 Aug 2019 10:00:14 +0000

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:

You gotta feel the pain

sam@samselikoff.com (Frontend First) — Wed, 31 Jul 2019 10:00:03 +0000

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:

The burden of high-level APIs

sam@samselikoff.com (Frontend First) — Thu, 18 Jul 2019 16:14:25 +0000

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:

Are staging environments an anti-pattern?

sam@samselikoff.com (Frontend First) — Thu, 11 Jul 2019 10:00:11 +0000

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

When libraries go unmaintained

sam@samselikoff.com (EmberMap) — Wed, 26 Jun 2019 10:00:12 +0000

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:

Microscopic Frontends

sam@samselikoff.com (EmberMap) — Wed, 19 Jun 2019 10:00:09 +0000

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

Open source isn't free

sam@samselikoff.com (EmberMap) — Wed, 5 Jun 2019 10:00:15 +0000

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:

Katie Gengler on the tech and processes that power the Ember community

sam@samselikoff.com (EmberMap) — Wed, 29 May 2019 10:00:09 +0000

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

Stateless development environments

sam@samselikoff.com (EmberMap) — Wed, 22 May 2019 10:00:08 +0000

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:

Nathan Selikoff on Omnimodal's real-time tech stack

sam@samselikoff.com (EmberMap) — Wed, 8 May 2019 10:00:08 +0000

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:

Frontend developers like us do things like this

sam@samselikoff.com (EmberMap) — Wed, 1 May 2019 10:00:02 +0000

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:

Hark! The Halting problem sings

sam@samselikoff.com (EmberMap) — Wed, 24 Apr 2019 10:00:03 +0000

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:

Edward Faulkner on Embroider, Ember CLI's modern build system

sam@samselikoff.com (EmberMap) — Wed, 17 Apr 2019 10:00:16 +0000

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:

Derrick Reimer on SPA architecture with Elm and GraphQL

sam@samselikoff.com (EmberMap) — Wed, 10 Apr 2019 10:00:00 +0000

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:

Do you trust your test suite?

sam@samselikoff.com (EmberMap) — Thu, 4 Apr 2019 10:00:00 +0000

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 on Ember Octane

sam@samselikoff.com (EmberMap) — Wed, 13 Mar 2019 14:26:00 +0000

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:

SPAs should do more than server-rendered apps, not less

sam@samselikoff.com (EmberMap) — Wed, 6 Mar 2019 11:00:00 +0000

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:

You still have to build two apps

sam@samselikoff.com (EmberMap) — Wed, 27 Feb 2019 11:00:00 +0000

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:

From build-time to run-time

sam@samselikoff.com (EmberMap) — Wed, 13 Feb 2019 11:00:00 +0000

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:

Lenient libraries, strict applications

sam@samselikoff.com (EmberMap) — Wed, 6 Feb 2019 11:00:00 +0000

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:

Mirage, meet Addon Docs!

sam@samselikoff.com (EmberMap) — Wed, 30 Jan 2019 11:00:00 +0000

Topics include:

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

Links:

There's a bug in my FastBoot

sam@samselikoff.com (EmberMap) — Wed, 23 Jan 2019 11:00:00 +0000

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:

The forgotten middle class

sam@samselikoff.com (EmberMap) — Wed, 16 Jan 2019 11:00:00 +0000

Topics include:

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

Links:

Grab bag: Web vs Native, stale data, and build environments

sam@samselikoff.com (EmberMap) — Wed, 9 Jan 2019 11:31:00 +0000

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:

Thoughts on tracked properties

sam@samselikoff.com (EmberMap) — Wed, 19 Dec 2018 11:00:00 +0000

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:

Incremental Ember upgrades

sam@samselikoff.com (EmberMap) — Wed, 12 Dec 2018 11:00:00 +0000

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:

The elephant in the room

sam@samselikoff.com (EmberMap) — Wed, 5 Dec 2018 13:00:00 +0000

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:

Going all in on "outside in"

sam@samselikoff.com (EmberMap) — Wed, 28 Nov 2018 13:50:00 +0000

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:

A less constrained environment

sam@samselikoff.com (EmberMap) — Wed, 21 Nov 2018 13:00:00 +0000

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:

Recursive partial application

sam@samselikoff.com (EmberMap) — Wed, 14 Nov 2018 13:00:00 +0000

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

Compose wisely

sam@samselikoff.com (EmberMap) — Tue, 6 Nov 2018 13:17:00 +0000

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:

A dropdown nest

sam@samselikoff.com (EmberMap) — Tue, 30 Oct 2018 18:10:00 +0000

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?

Your frontend is ready for production

sam@samselikoff.com (EmberMap) — Fri, 19 Oct 2018 19:13:00 +0000

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:

Scope down!

sam@samselikoff.com (EmberMap) — Fri, 12 Oct 2018 19:16:00 +0000

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

Can small libraries be conventional?

sam@samselikoff.com (EmberMap) — Wed, 3 Oct 2018 18:08:00 +0000

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)

The Product Gap

sam@samselikoff.com (EmberMap) — Thu, 27 Sep 2018 10:53:00 +0000

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

80% done, 80% to go

sam@samselikoff.com (EmberMap) — Wed, 12 Sep 2018 17:47:00 +0000

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

Ember Octane

sam@samselikoff.com (EmberMap) — Wed, 29 Aug 2018 18:42:00 +0000

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:

Melanie Sumner on empowering JavaScript engineers

sam@samselikoff.com (EmberMap) — Wed, 22 Aug 2018 15:11:00 +0000

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

I am a lighthouse

sam@samselikoff.com (EmberMap) — Wed, 15 Aug 2018 11:14:00 +0000

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

Jonathan Jackson on FastBoot Rehydration and Codemods

sam@samselikoff.com (EmberMap) — Thu, 9 Aug 2018 14:28:00 +0000

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

Provide this!

sam@samselikoff.com (EmberMap) — Fri, 20 Jul 2018 16:01:00 +0000

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

Jen Weber on imaginary bars

sam@samselikoff.com (EmberMap) — Fri, 13 Jul 2018 22:11:00 +0000

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

Mirage, meet Node

sam@samselikoff.com (EmberMap) — Fri, 6 Jul 2018 13:24:00 +0000

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

Let's be optimistic

sam@samselikoff.com (EmberMap) — Sat, 30 Jun 2018 15:37:00 +0000

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?

A man can dream

sam@samselikoff.com (EmberMap) — Sat, 23 Jun 2018 01:02:00 +0000

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

Wrapping libraries reponsibly

sam@samselikoff.com (EmberMap) — Fri, 15 Jun 2018 14:05:00 +0000

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.

Bugs vs. features

sam@samselikoff.com (EmberMap) — Thu, 7 Jun 2018 19:28:00 +0000

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.

Toran Billups on Hot Reloading

sam@samselikoff.com (EmberMap) — Tue, 29 May 2018 18:44:00 +0000

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:

Test before commit

sam@samselikoff.com (EmberMap) — Fri, 18 May 2018 14:24:00 +0000

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

Adam Wathan on Tailwind CSS

sam@samselikoff.com (EmberMap) — Fri, 11 May 2018 19:29:00 +0000

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

Robert Jackson and Tom Dale on Ember at LinkedIn

sam@samselikoff.com (EmberMap) — Thu, 3 May 2018 20:44:00 +0000

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

Concretions and abstractions

sam@samselikoff.com (EmberMap) — Thu, 26 Apr 2018 11:58:00 +0000

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

Sketch Prototyping and Amazon Workspaces

sam@samselikoff.com (EmberMap) — Thu, 19 Apr 2018 13:25:00 +0000

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)

Alex Matchneer on Routing Patterns

sam@samselikoff.com (EmberMap) — Thu, 12 Apr 2018 19:28:00 +0000

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?

Steelman vs. strawman

sam@samselikoff.com (EmberMap) — Thu, 5 Apr 2018 14:51:00 +0000

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

Making the impossible, impossible

sam@samselikoff.com (EmberMap) — Fri, 30 Mar 2018 14:12:00 +0000

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?

Oli Griffiths on the Benefits of Static Typing and How Broccoli Works

sam@samselikoff.com (EmberMap) — Wed, 7 Mar 2018 17:42:00 +0000

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.

JSONAPI Operations, Caching in FastBoot, and Ember's Strengths

sam@samselikoff.com (EmberMap) — Thu, 22 Feb 2018 19:24:00 +0000

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.

Tom Dale on Static Analysis, Upstreaming Glimmer, and Ember in 2018

sam@samselikoff.com (EmberMap) — Wed, 31 Jan 2018 20:58:00 +0000

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.

Babel Plugins, Compile-time Components, and Extending Integration Tests

sam@samselikoff.com (EmberMap) — Wed, 24 Jan 2018 17:20:00 +0000

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.

Avoiding Imperative APIs and Expired Data

sam@samselikoff.com (EmberMap) — Wed, 17 Jan 2018 14:34:00 +0000

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

Breaking Production, Functional CSS and UI Components, and Testing Async Errors

sam@samselikoff.com (EmberMap) — Wed, 10 Jan 2018 16:59:00 +0000

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.

Declarative Data Fetching, Disposable Code, Easier Upgrades, and the Upfront Cost of Ember

sam@samselikoff.com (EmberMap) — Thu, 7 Dec 2017 15:57:00 +0000

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.

Photo Uploads, Server Errors in Ember Data, NPM Dependencies and Ember CLI Addon Docs

sam@samselikoff.com (EmberMap) — Wed, 8 Nov 2017 15:47:00 +0000

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.

Async Relationships, Store Forking, and Batch Saving in Ember Data

sam@samselikoff.com (EmberMap) — Fri, 27 Oct 2017 14:52:00 +0000

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

Forms, Authentication, Ember 3.0, and Liquid Tether

sam@samselikoff.com (EmberMap) — Fri, 6 Oct 2017 21:05:00 +0000

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.

Luke Melia on Styleguides

sam@samselikoff.com (EmberMap) — Thu, 14 Sep 2017 17:44:00 +0000

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

Links from the episode:

FastBoot, Structural Components and Ember Data Transactions

sam@samselikoff.com (EmberMap) — Tue, 29 Aug 2017 17:16:00 +0000

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.

Glimmer, Ember's reputation and Tachyons

sam@samselikoff.com (EmberMap) — Fri, 2 Jun 2017 18:00:00 +0000

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.