A podcast about modern UI development on the web. Hosted by Sam Selikoff and Ryan Toronto.
The podcast Frontend First is created by Sam Selikoff, Ryan Toronto. The podcast and the artwork on this page are embedded on this page using the public podcast feed (RSS).
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:
Links:
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:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Link:
Sam and Ryan read and discuss a fantastic interactive blog post about queueing in HTTP written by Sam Rose.
Timestamps:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
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:
Links:
Sam and Ryan read and discuss the latest update from React Labs.
Topics include:
Links:
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:
Ryan and Sam discuss the purpose and usage of the useOptimistic() hook, a new experimental API from React.
Topics include:
Links:
Ryan and Sam discuss the purpose and usage of the cache() function, a new experimental API from React.
Topics include:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
Craft Scalable, Custom-Made Interfaces with Tailwind CSS
Tailwind CSS v3.0
React 18 Keynote
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.
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
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:
Links:
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:
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:
Links:
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:
Links:
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:
Links:
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:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
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:
Links:
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:
Links:
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:
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:
Links:
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
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:
Links:
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:
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:
Links:
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
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:
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 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)
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)
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)
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
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/)
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/)
Topics include:
Links:
Topics include:
Links:
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)
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)
Topics include:
Links:
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)
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)
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)
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)
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)
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)
Topics include:
Links:
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)
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)
Topics include:
Links:
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
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/)
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)
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)
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)
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)
Topics include:
Sponsors:
Links:
Topics include:
Sponsors:
Links:
Topics include:
Links:
Topics include:
Listener questions:
Sponsors:
Links:
Topics include:
Sponsors:
Links:
Topics include:
Sponsors:
Links:
Topics include:
Sponsors:
Links:
Topics include:
Links:
Topics include:
0:00 – Playing with React JS
15:44 – Micro Frontends
47:56 – Call for conversation: Ember-turned-React dev
Links:
Topics include:
Links:
Topics include:
Links:
Topics include:
Links:
Topics include:
Links:
Topics include:
Links:
Topics include:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
Topics include:
0:00 - Module unification
9:35 - SPAs should do everything a server app can do
23:50 - Fetching data
49:45 - Dependabot workflow
Links:
Topics include:
0:00 - Refreshing an Ember app when a new version is deployed
11:05 - When SPAs become too difficult
40:20 - Beginners should use the same tools as experts
Links:
Topics include:
Links:
Topics include:
dependencies
key & ember-auto-import
for most of their dependenciesaddPackagesToProject
to put the burden on host app.Links:
Topics include:
Links:
Topics include:
Links:
Topics include:
Links:
Topics include:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
Links:
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:
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:
Links:
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:
Links:
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:
Questions:
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:
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
7:53 – Managing product
Links:
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
12:14 – Ember Octane
Links:
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:
Links:
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:
Links:
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:
Links:
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:
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:
Links:
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:
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:
Questions:
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:
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:
Q&A:
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
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:
Links:
Sam and Ryan chat about Ember at Microconf, two-way bindings, and TDD vs. "Test before commit".
Topics:
Links:
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:
Links:
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
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:
We also answers some listener questions:
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
Questions
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:
Alex also answers some listener questions:
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:
Listener questions:
Sam and Ryan talk about
They also answer some listener questions:
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.
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 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.
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.
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.
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.
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.
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.
Sam and Ryan discuss community feedback on Ember Data's pain points, including asynchronous relationships, store forking and batch saving.
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.
Special guest Luke Melia chats with Sam and Ryan about styleguides, CSS patterns, Ember Freestyle and more.
Links from the episode:
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.
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.
En liten tjänst av I'm With Friends. Finns även på engelska.