A First Look at RedwoodJS with Anthony Campolo and Ryan Carniato

Episode Description

Ryan Carniato explores Redwood JS with Anthony Campolo, examining its full-stack React approach, tutorial-driven development, and the road to SSR and React Server Components.

Episode Summary

Ryan Carniato hosts Anthony Campolo, known as the "Bard of Redwood," for a deep exploration of Redwood JS, a full-stack React framework designed to give JavaScript developers a Rails-like experience. Anthony shares his journey from music education into web development through a boot camp and open source contribution, explaining how he discovered Redwood during the 2020 wave that also produced Blitz and Remix. The conversation traces Redwood's philosophy of tutorial-driven development, where the tutorial was written before the framework was built to ensure a coherent learning path from project initialization through authentication and deployment. They examine Redwood's architecture — a React frontend querying a GraphQL backend with Prisma for database access — and its opinionated choices around Storybook, Apollo, and Yarn. A live coding session reveals the framework's code generation, cell-based data fetching pattern, and the newly added Vite integration in version 6. The pair then investigates experimental SSR and React Server Component support targeting version 7, discussing the challenges of reconciling existing conventions with new rendering paradigms. The stream shifts to a broader "This Week in JavaScript" segment covering the TC39 signals proposal, Leptos achieving islands architecture in Rust/WASM, Million JS performance optimizations, Fresh 1.4 improvements, and the upcoming Bun 1.0 launch.

Chapters

00:00:00 - Stream Introduction and Preamble

Ryan opens the stream with casual banter while waiting for viewers to arrive, noting it has been a slow week for JavaScript news. He introduces the topic of Redwood JS and teases his guest Anthony Campolo, whom he has known for years as an early adopter of emerging web technologies. Ryan shares some fun props he prepared, including pine cones inspired by the Redwood branding.

He mentions that Redwood is one of the React frameworks he hasn't yet covered on stream, setting the stage for a thorough exploration. While killing time for the audience to join across Twitch and YouTube, he reflects on the quiet news cycle and mentions his kids going back to school.

00:04:41 - Waiting for Viewers and Setting the Stage

Ryan continues his pre-show banter, discussing the slow JavaScript news week and speculating that many developers are on late-summer vacations. He acknowledges the typical five-minute buffer for viewers to get past Twitch pre-roll ads before diving into content.

He jokes about the possibility of the stream running unexpectedly long despite having less material than usual, noting his tendency to fill time. The Twitch audience begins trickling in and Ryan prepares to bring Anthony on screen.

00:06:16 - Anthony Joins and Introductions Begin

Anthony Campolo officially joins the stream and Ryan opens with questions about his background. Anthony shares his unconventional path into tech, starting from a music degree that included touring, classical and jazz performance, and various teaching roles before becoming disillusioned with a music career.

He describes his early attempts to learn coding, including a premature foray into AI and neural networks in 2016-2017 when the field was dominated by academics using Python. After briefly exploring blockchain, he gravitated toward React and JavaScript due to the sheer volume of learning content available in that ecosystem.

00:10:15 - Boot Camp Experience and Lambda School

Anthony discusses attending Lambda School's income share agreement program, where students pay nothing upfront but give a percentage of income for the first two years after landing a job. Ryan shares his own experience interviewing boot camp graduates, noting how candidates from the same cohort would arrive with identical projects.

The conversation explores the tension between self-directed learning and structured programs. Anthony acknowledges that while he was motivated to learn independently, the boot camp provided directional focus that random tutorials couldn't — pointing him toward a coherent skill set rather than scattered progress in multiple directions.

00:12:44 - Dropping Out for Open Source

In a surprising twist, Anthony reveals he dropped out of his boot camp near completion to pursue open source work with Redwood full-time. He leveraged his performance and education skills to become the framework's unofficial developer advocate, doing numerous online meetup talks during the 2020 pandemic when all meetups went digital.

He credits connections like Brian Douglas and the Open Sauce community for giving him exposure to broader open source culture. Anthony's ability to explain technical concepts for extended periods proved to be a valuable skill for developer relations, compensating for coding skills that were still developing at the time.

00:14:04 - How Anthony Discovered Redwood

Anthony explains how his love of podcasts led him to discover Redwood when creator Tom Preston-Warner did a podcast circuit in early 2020, appearing on Software Engineering Daily, Frontend First, and JS Party among others. Listening to all the major web development podcasts gave him a unique vantage point on emerging frameworks.

He noticed that Blitz dropped in February, Redwood in March, and Remix in April 2020 — three full-stack React frameworks launching within three months. This cluster signaled a clear demand in the ecosystem, and Anthony chose Redwood for reasons he describes as hard to pinpoint but based on multiple converging factors.

00:16:10 - Creating FSJam Podcast and Community

Anthony describes how he and Christopher Burns, who was building a production Redwood app called Everfund, co-founded the FSJam podcast and community around the concept of "Full Stack Jamstack." Burns had been migrating his company from a bespoke Gatsby setup to Redwood and suggested creating a community around the broader movement.

They were intentional about not making it solely a Redwood podcast, bringing on Brandon Bayer from Blitz as early as episode six. The show expanded to cover databases, front-end frameworks like Marco and Solid, and general web development topics, becoming a hub for discovering emerging technologies.

00:19:31 - Research Mindset and Framework Discovery

Ryan and Anthony bond over their shared tendency to gravitate toward cutting-edge rather than established technology. Anthony articulates the difference between developers who want stable, reliable tools and those with a research mindset who track emerging solutions that aren't fully baked yet but will be eventually.

Ryan notes that FSJam and Pod Rocket were among the first podcasts to feature Solid JS, and became his favorites precisely because they looked at new technology rather than playing it safe. This mutual interest in the frontier of web development is what has kept them connected over the years.

00:20:10 - Why Redwood Exists: The Full-Stack Gap

The conversation turns to what makes Redwood unique. Anthony poses a thought experiment: if someone with Rails, Django, or Laravel experience asked for a JavaScript equivalent, what would you recommend? Ryan admits that JavaScript doesn't have a direct analog, which is exactly the gap Redwood aims to fill.

Anthony argues that most JavaScript meta-frameworks don't truly deliver full-stack capabilities, noting that even Next.js doesn't ship with database tooling or authentication. Redwood and Create T3 App stand apart by including Prisma and auth out of the box — the minimum viable definition of "full stack" in the JavaScript world.

00:24:19 - Redwood's Origin Story and Startup Focus

Anthony traces Redwood's origin to Tom Preston-Warner and Peter Pistorius building their startup Chatterbug with a React frontend querying a Ruby on Rails GraphQL backend — an experience they found painful but productive once configured. Tom's experience building GitHub with Rails informed the goal of bringing monolithic framework productivity to JavaScript.

The framework evolved from "Full Stack Jamstack" branding to "the JS framework for apps," dropping the Jamstack label after finding it confused more than helped. Anthony reveals that Tom, being independently wealthy, created an investment fund specifically for companies building on Redwood, offering checks to startups that commit to the framework.

00:28:23 - The Trade-offs of Being Opinionated

Ryan explores the tension between opinionated frameworks and flexibility, comparing Redwood's approach to Create T3 App. He identifies two key questions: how do you decide what gets included in the framework versus left out, and what are the downstream implications of those choices for future evolution?

Anthony explains that the Redwood core team's guiding principle was always "how do we make this as Rails-like as possible" — starting from the known-good developer experience of Rails and figuring out how to achieve it in JavaScript. The process is iterative, informed by real users building production apps alongside the framework's development.

00:31:28 - Storybook, Documentation, and Teaching

Ryan asks about Redwood's inclusion of Storybook and the broader challenge of documenting a framework that bundles many third-party tools. Anthony introduces the concept of tutorial-driven development, originated by Tom Preston-Warner, where the tutorial is written before the framework code to ensure a coherent learning path.

Redwood's tutorial has remained structurally consistent from version 0.1 through the current release, walking developers through project initialization, frontend pages, backend APIs, authentication, authorization, and deployment. Anthony notes he personally rewrote the tutorial as blog posts during his boot camp days, which became his first "first look" style content.

00:36:31 - Authentication vs Authorization in Tutorials

Ryan highlights how remarkable it is that Redwood's tutorial covers authorization — not just authentication — calling it one of the rarest and most valuable sections he's seen in any framework documentation. From his experience building complex role-based systems at a startup dealing with school photos, he knows authorization is the harder problem.

They discuss the common confusion between authentication and authorization, with Ryan sharing that he has personally implemented OAuth2, OpenID Connect, and SAML systems, but found the role-based authorization problem at his startup more challenging than any of the authentication protocols.

00:39:06 - The Case for Opinionated Frameworks

Ryan articulates what he considers the strongest argument for opinionated frameworks: when all the pieces are known and consistent, the framework can build sophisticated tutorials and patterns that guide developers to complete solutions. If you offer five options for each layer, it becomes much harder to provide that integrated guidance.

He contrasts this with how Ruby on Rails achieved a similar level of coherent developer experience through Active Record and its other conventions. The conversation acknowledges that not all full-stack frameworks think this deeply about the end-to-end learning path — some just assemble pieces without considering the narrative.

00:40:03 - Redwood v6, GraphQL, and Managing Change

Anthony details the Redwood v6 release highlights, including Vite integration, Prisma 5 upgrade, and suspense in the router. The upgrade path is minimal — mostly a configuration Toml change and running a single command. Ryan raises the challenge of being locked into dependencies like GraphQL when new paradigms like React Server Components emerge.

Anthony argues this is precisely where a framework team adds value: the developer's app stays the same while the team handles migrations under the hood. He cites the previous switch from Apollo Server to GraphQL Yoga, which required months of framework work but only a single line change for app developers — demonstrating Redwood's contract with its users.

00:44:05 - Cells, Suspense Router, and Data Fetching

The pair examines the upgrade guide's details on the suspense router, with Ryan explaining that "suspense in the router" typically means transitions are baked into navigation so concurrent rendering can work between routes. They explore the Redwood router documentation, noting its Rails-inspired declarative style without file-system routing.

Ryan investigates whether the router exposes transition state through hooks — a telltale sign of proper suspense integration — while Anthony shares that the team is also preparing experimental React Server Component support. The conversation touches on Tanner Linsley's frustration that every meta-framework builds its own router, making his standalone React Router less useful.

00:49:39 - Investigating SSR and Render Modes

Anthony reveals that Redwood's SSR support is still experimental, separate from the v6 release. They attempt to enable render modes in a fresh project, trying static, HTML, and stream options without success in dev mode. Ryan examines the routes file syntax where render mode can be set as a prop on individual routes.

This investigation reveals that Redwood historically never did SSR — a notable departure from other meta-frameworks. Ryan finds this fascinating, noting it made sense given Redwood's client-rendered GraphQL architecture but represents a significant gap the team is now working to close as they prepare for React Server Components.

00:53:30 - Cloning the SSR Example Repository

They clone Danny Chowdhury's example repository with render modes pre-configured, running through Prisma migrations and session secret setup. After some troubleshooting with environment variables and database initialization, they successfully get a server-rendered Redwood app running.

Ryan inspects the network response and confirms the HTML contains actual content rather than an empty div — a milestone moment. Anthony exclaims he's been waiting three years for this, referencing GitHub issue number 18 from January 2020 that first requested SSR support. They examine the entry server file and Ryan notes Redwood adopted Solid Start's convention rather than Remix's.

00:57:36 - Setting Up a Fresh Redwood Project

Switching gears to build from scratch, Anthony walks Ryan through scaffolding a new Redwood project with the CLI. They navigate Node version issues, with Ryan needing to switch from Node 16 to 18 using NVM — prompting Anthony's animated recommendation to use a different version manager.

The project creation process demonstrates Redwood's opinionated choice of Yarn 3, which Anthony acknowledges is a deeply baked legacy decision. They debate TypeScript versus JavaScript, with Ryan initially choosing JavaScript before switching to TypeScript, reasoning that Redwood's batteries-included approach benefits from type safety.

01:05:28 - Redwood Conference and Build Competition

Anthony announces the first-ever Redwood Conference in Oregon and a build competition offering ten thousand dollars in prizes, with four weeks to build and judging criteria including usefulness and "delightfulness." He shares a discount code for conference tickets and notes that Tom Preston-Warner's personal wealth funds these initiatives.

Ryan pulls up the conference and competition pages on screen, sharing links to both YouTube and Twitch chats. They work through some technical difficulties with Ryan's camera and a mysterious tapping sound coming through Anthony's microphone before getting everything sorted.

01:12:10 - Running the Project and Exploring Structure

With the fresh project running, they explore the default Redwood splash page and generate a home page using the CLI. Anthony explains the project structure with separate web and API directories, each with their own package.json — one being a React app running on Vite and the other a GraphQL server running on Node.

Ryan examines the entry points, routes file, and configuration, noting the Redwood Vite plugin setup. He investigates how code splitting works despite the routes file appearing to import all pages, discovering that Redwood auto-detects page references and creates lazy-loaded bundles without explicit imports — similar to Nuxt's auto-import behavior.

01:16:25 - GraphQL Playground and Backend Architecture

They open the GraphQL playground at port 8911 and run a basic query to verify the backend is operational. Anthony explains that the entire backend is a GraphQL API that generates its schema from Prisma models, with Redwood's own auth package managing calls to the server.

A viewer asks about GraphQL streaming directives and their compatibility with server-first meta frameworks. Anthony explains that Redwood uses live queries with a live directive rather than standard GraphQL stream and defer, pointing to David Thyresson's documentation on the topic. Ryan discusses the nuanced reasons streaming matters — primarily for service failure decoupling rather than data size in most applications.

01:21:02 - Examining Vite Config and Project Files

Ryan methodically reviews the project internals — the Vite configuration with Redwood's plugin, TypeScript config, Jest setup, public folder assets, and the component directory structure. He examines the entry client file and notes the hydrate-or-render pattern, then searches for an entry server file.

Anthony explains that SSR wasn't possible before Vite integration, making it a genuinely new capability. The discussion reveals that Redwood's previous reliance on Webpack and Babel — which Peter Pistorius described as "the core of the framework" — performed significant compilation magic to enable features like automatic code splitting.

01:24:05 - Attempting Render Modes in the Fresh Project

Ryan tries adding render mode attributes to routes in their newly created project, testing HTML and stream options. Neither produces server-rendered output, leading them to investigate whether experimental features need to be enabled or if dev mode behaves differently.

This leads to a broader discussion about the challenge of supporting both CSR and SSR from the same codebase. Ryan shares his frustrations with this exact problem in Solid Start, where index.html generation broke on Docker and meta tags couldn't be dynamically set per page in CSR mode. He compares approaches from SvelteKit, Next.js, and others.

01:29:00 - Danny's SSR Example and Server Rendering Success

They switch to Danny Chowdhury's pre-configured SSR example repository, running through dependency installation, Prisma migrations, and session secret generation. After configuring the environment file and running the development server, they load the app and Ryan spots the server-rendered content in the HTML response.

Ryan identifies React's server rendering markers in the HTML — dollar sign markers and hydration comments — confirming that SSR is working. This represents a significant milestone for Redwood. They explore the authenticated recipe app, signing up a test user and navigating through protected and public routes to test the auth integration.

01:39:34 - CSR vs SSR Entry Points and Framework Approaches

Ryan examines the SSR example's entry server and document files in detail, comparing the architecture to Solid Start, SvelteKit, and Next.js approaches. He explains the technical challenge of having the same entry point serve both client-rendered and server-rendered modes — particularly around HTML document generation and meta tags.

The discussion covers SvelteKit's approach of using a custom DSL in app.html, Next.js's server-component-forward app directory, and Solid Start's strategy of using capital-letter imports that no-op on the client. Ryan notes that almost no framework has successfully made CSR and SSR work from a single toggle configuration, though that's what Redwood's render modes aim to achieve.

01:44:01 - Exploring the SSR Demo App Features

Ryan navigates through the demo app's various pages — landing page, recipes, admin categories, and about page — testing authenticated and unauthenticated states. They encounter some expected rough edges in the experimental build, including layout shifts from hydration mismatches and missing route functionality.

Anthony shares his screen to show the working version on his machine, demonstrating the scaffold-generated CRUD interface for categories and the recipe creation flow. They examine how the GraphQL queries flow from the frontend cells through to the backend, with Anthony explaining the cell pattern's declarative handling of loading, empty, error, and success states.

01:49:27 - Cells and Data Fetching Patterns

Anthony demonstrates the cell pattern in detail, showing how a recipe cell contains a GraphQL query and exports separate components for each data state. Ryan raises concerns about implicit waterfalls in client-rendered mode, since JavaScript must load before queries execute — contrasting this with the loader pattern that hoists data fetching.

Ryan observes that the cell architecture resembles the cleanest React patterns from 2017, which Anthony confirms aligns with when the framework was designed. They discuss how Next.js 13's app directory introduced similar patterns with separate loading and error files, and how Redwood's single-file approach may be preferable to managing multiple files per route.

01:55:08 - Microphone Issues and Technical Difficulties

Anthony switches to his MacBook microphone to resolve audio quality issues, while Ryan troubleshoots his camera connection dropping. The pair works through several minutes of technical difficulties including a mysterious tapping sound and camera reconnection, demonstrating the realities of live streaming.

Once resolved, they briefly discuss Node version management frustrations, with Anthony strongly advocating for Volta over NVM after watching Ryan struggle with version persistence across terminal sessions. The comedic interlude provides a natural break in the technical content.

01:57:36 - Named Exports, Tree Shaking, and Code Organization

Ryan connects Redwood's use of named exports for cells to the broader pattern seen in Remix's loaders and Solid Start's server functions. He explains why Next.js and SvelteKit moved away from co-located server exports to separate files — the risk of server-side imports with side effects leaking into client bundles.

He notes that Redwood avoids this problem elegantly because the GraphQL query in a cell is just a string template, not an imperative import, and Prisma lives exclusively in the API directory. The clean separation between frontend and backend that Redwood established from the beginning positions it well for the new world where everyone else is figuring out the same boundary.

02:02:03 - React Server Components Implications

Ryan thinks through how React Server Components will interact with Redwood's existing conventions. He identifies that render modes on routes could naturally extend to an RSC mode, where pages become server components and layouts run on the server with client component islands inside them.

The conversation touches on how the meaning of existing concepts changes when RSCs enter the picture — client components gain "use client" directives, some pages become server-only, and the cell pattern's relationship to data fetching shifts. Ryan notes he's working through identical challenges for Solid Start, making this a shared frontier across frameworks.

02:07:11 - Experimental RSC Repository Exploration

They attempt to set up Toby's experimental React Server Components repository, working through Node version issues and running experimental setup commands. While they can't get the build running due to Vite compatibility issues, they examine the generated file structure.

Ryan reviews the minimal RSC setup — an app.tsx server component containing a client counter component — and notes the absence of router integration. He identifies this as the critical missing piece, since server components are fundamentally a routing technique. The conversation references Nikhil's work on Vite-compatible RSC builds.

02:17:22 - Inspecting RSC Network Payloads

Using Anthony's working version, they examine the network requests from the RSC example, finding the separate JSX serialization endpoint alongside the HTML document. Ryan explains the "double data problem" — every piece of data visible in the HTML gets serialized again in the RSC payload format.

He shares benchmark results: single page apps score around 48 on Lighthouse, RSCs around 60, while partial hydration frameworks like Astro, Marco, and Qwik score around 85. This leads to his assertion that RSCs only solve half the initial page load problem, reducing hydration JavaScript but not eliminating redundant data serialization.

02:25:05 - Redwood's Public Roadmap and Notion

Anthony shares Redwood's public Notion workspace where the team coordinates development, including task tracking for streaming SSR, suspense-enabled cells, and React Server Component integration. Ryan expresses admiration for the transparency, noting it's difficult to achieve this level of visibility with GitHub alone.

They review the streaming SSR planning document, which outlines goals around cell SSR where loading states stream from the server as data resolves. The "Bighorn Epoch" roadmap document confirms that SSR capabilities are targeting version 7, with React Server Components as the driving architectural change.

02:29:45 - The Double Data Problem and Solid's Approach

Ryan elaborates on his current research into solving the double data problem that RSCs leave unaddressed. He describes his process of writing extensive design documents in HackMD and sharing them with other framework authors, including one provocatively titled "What if Marco was right?"

He reveals that recent Chrome funding enabled Solid's team to revisit their server component islands routing solution, describing it as "what if we could take Astro and add client-side routing to it." Ryan teases that Matthew Phillips will be on next week's stream with a sneak peek at Astro 3 and its View Transition API integration.

02:34:36 - Publishing Research and Framework Author Conversations

Anthony encourages Ryan to publish more of his design thinking publicly, noting that framework authors benefit enormously from understanding each other's reasoning. Ryan admits he's been writing prolifically but sharing mostly through private channels and Discord rather than formal blog posts.

He mentions having a nearly complete article about two-way binding that's been sitting unpublished for four months, and reflects on the challenge of writing about experimental ideas when conclusions haven't solidified yet. The discussion highlights the small but influential community of framework authors who regularly exchange ideas.

02:35:35 - Signals Proposal and Meeting with Google Teams

Ryan describes a packed Wednesday where he met with people involved in the TC39 signal specification, then the Angular and Wiz core teams at Google, then Misko Hevery — all discussing the same fundamental problems. He reveals that Wiz is evolving rapidly internally as Google developers demand better DX.

The Angular and Wiz teams are working closely together since both use signals, seeking solutions that benefit everyone. Anthony finds humor in Ryan's position as an early signals advocate now watching the rest of the ecosystem catch up five years later. Ryan notes that his independent exploration of the design space led him to the same conclusions as the React team.

02:37:25 - Transitioning to This Week in JavaScript

Anthony decides to stick around for the news segment, and Ryan gathers his bookmarks while noting the sparse material. They briefly discuss Edgio, Anthony's employer, and his JavaScript Jam weekly Twitter space and newsletter before diving into the news.

Ryan starts with Solid ecosystem updates, highlighting growing interest from native mobile frameworks like Tauri and NativeScript that appreciate Solid's lightweight custom renderer support. He shares community posts showing enthusiasm for Solid in mobile development across multiple platforms.

02:48:12 - Leptos: Rust/WASM Framework Progress

Ryan showcases Leptos, a Rust-based framework that has implemented islands architecture in WASM. He demonstrates a Hacker News clone with only 49 kilobytes of WASM and 4.5 kilobytes of JavaScript, compared to the Next.js RSC version at roughly 90 kilobytes. The key insight is that Leptos applied the same island techniques used by JavaScript frameworks.

He explains that Leptos's server-side rendering is approximately 30 times faster than React — faster than any JavaScript framework. While WASM's larger baseline load size remains a concern, progressive enhancement and islands architecture mitigate this effectively, making the "Remix argument" of interactivity before full hydration quite compelling in the Rust ecosystem.

02:56:30 - RSC Islands Analysis and Code Comparison

Ryan performs a live comparison of the Next.js RSC Hacker News app, inspecting the network payloads to demonstrate how React Server Components function as islands from a code perspective. He searches for text content appearing in both the HTML and the RSC serialization payload, proving the double data problem exists.

He shows that while RSCs successfully avoid shipping component code for server-rendered sections — only the toggle component's JavaScript is sent to the client — the starting baseline of React plus Next.js is 84-85 kilobytes before any app code. Other island frameworks start at around 4-6 kilobytes, making the proportional benefit of islands dramatically different.

03:00:16 - Million JS and Block DOM Performance

The conversation turns to Million JS and Aiden's approach of bringing block DOM optimizations to React. Ryan explains that block DOM techniques have existed in the JS framework benchmark since 2018 but lacked good DX until recently. He notes the benchmark has reached its limits for distinguishing between approaches.

Ryan recounts a previous stream demonstration comparing Million's fine-grained updates with React's concurrent rendering, where Million completed actions in fractions of a second while concurrent React delayed actions by two to three seconds trying to maintain smoothness. He suggests combining block DOM with concurrent rendering could be powerful but notes React Forget may eventually make Million unnecessary.

03:08:06 - The Value of Performance Conversations

Ryan reflects on why projects like Million JS matter beyond their direct technical contribution. He argues that when developers try bolt-on performance solutions for React — whether Million, Preact Signals, or similar tools — they start understanding the performance gains possible with different approaches.

Even if they're satisfied enough on their current project, the experience plants a seed: their next greenfield project might use a framework where these optimizations are built in from the start. Ryan frames this as a narrative shift that either pushes React to improve or encourages exploration of alternatives, both of which benefit the ecosystem.

03:12:06 - TC39 Signals Specification Deep Dive

Ryan examines the growing momentum behind browser-native signals, listing the frameworks that now use them: Solid, Vue, Angular, Preact, Qwik, Svelte 5, and Alpine. He references Dominic Gannaway's vocal support for making signals a browser primitive and explains the potential benefits including framework interoperability and better debugging through reactive graph tracing.

He draws an analogy to how Chrome DevTools can walk through async/await call stacks even though they represent completely different execution contexts — imagining similar capability for reactive dependency graphs if signals were native. The key insight is that a pull-based primitive without effects or scheduling would satisfy all framework authors while leaving room for each to build their own effect system.

03:19:12 - Reactively Library and Minimal Signal Primitives

Ryan demonstrates Milo's Reactively library as an example of the minimal primitive that could serve as a browser specification foundation. The library has no effects — just signals and computed values using a pure pull-based system where updates only mark downstream values as stale until someone reads them.

He walks through the source code showing how Milo took this base to Bubble for their reactive system and simultaneously used it as a prototype for Solid 2.0's reactivity core. The key point is that effects are trivially layered on top by extending the base computation class and overriding the notify method to push to a scheduling queue.

03:30:53 - Scheduling, Batching, and Spec Challenges

Ryan addresses chat questions about batching strategies, explaining the difference between batching writes (React's approach) and batching effects (what most reactive frameworks do). He argues that if the spec only covers pull-based primitives without effects, batching becomes a non-issue for the specification since each framework handles its own effect scheduling.

He discusses the DOM integration proposal where signals could be passed directly to DOM properties, replacing elements reactively. While elegant, Ryan warns this implies scheduling behavior that conflicts with framework-level control over rendering — such as suspense boundaries, off-screen rendering, and transitions — making it potentially problematic despite its appeal.

03:41:00 - DOM Parts API and Reactive DOM Concerns

Ryan examines a proposal for binding signals directly to DOM elements, which would create implicit effects whenever a signal is assigned to a DOM property. He raises concerns about competing scheduling systems — if both the browser and the framework try to manage when DOM updates occur, inconsistencies arise.

Responses from spec advocates suggest the browser could use CSS properties or container queries to defer updates in occluded regions, but Ryan remains cautious. He argues the spec should stay on the pull-based primitive side and leave DOM integration to frameworks, comparing the risk to how web components combined too many concerns into a single specification.

03:44:25 - Fresh 1.4 and Ahead-of-Time Compilation

Anthony brings up Fresh 1.4's release featuring ahead-of-time compilation for 45-60x faster cold starts, custom HTML layouts, and async wrapper components. Ryan examines the async component pattern, noting it mirrors Astro's top-level awaits and is safe on the server but would cause problems in client-rendered contexts.

He discusses how Fresh's explicit separation between islands and server components makes async patterns less risky than in frameworks where third-party NPM packages might introduce hidden server-side waterfalls. They note Fresh is exploring SPA-like client navigation with view transitions for the next version.

03:52:26 - The Great Layouts Debate

A viewer comment about Fresh's layout request access triggers an extended debate about layouts as a concept. Ryan argues passionately that layouts are a "fictional creation" — mechanically just nested routing boundaries rebranded for better communication. He traces the concept back to Ember's invention of nested routing to avoid re-rendering page shells.

Anthony pushes back with a designer's perspective — a layout is where the logo, nav bar, and footer live. Ryan counters that when tab bars, modals, and other nested UI sections need the same non-re-rendering behavior, the distinction between "layout" and "route segment" breaks down. He demonstrates using Twitter's URL-driven modal pattern as an example of routing that defies the layout mental model.

04:00:07 - File System Routing Trade-offs

The layouts discussion expands into file system routing approaches. Ryan explains how the layout convention originated as a solution to the clunky pattern of matching folder names with file names to indicate nesting — the layout file simply moved inside the folder. He shares his preference for Remix's flat file routing as his second favorite system.

He describes recently removing layouts that a contributor added to Solid Start, demonstrating that everything expressible with layouts can be expressed without them using standard nested routing. The conversation highlights how different frameworks arrive at different conventions for the same underlying mechanical requirements.

04:08:58 - Bun 1.0 Announcement and Runtime Competition

Anthony shares the upcoming Bun 1.0 launch event on September 7th. Ryan discusses the significance of a 1.0 release, noting that developers will treat it as a signal of production readiness and hold the runtime to higher standards. He mentions a pending PR to add Bun as a Solid Start CLI option.

The conversation examines the competitive dynamics between Bun and Deno, with Ryan noting that Bun's creator Jared is not someone you want to play "technical chicken" with on performance. They discuss how Bun's Node compatibility approach — supporting it but not optimizing it — contrasts with Deno's journey of initially rejecting then embracing Node APIs.

04:15:18 - Edgio, JavaScript Jam, and Closing

Anthony showcases his employer Edgio, a deployment platform with its own edge network, and his JavaScript Jam community featuring a weekly newsletter, Twitter spaces every Wednesday, and video podcasts. He invites viewers to participate in the spaces where audience members can join the conversation live.

Ryan wraps up the stream by thanking Anthony for finally making it on after eight or nine months of scheduling attempts. He encourages viewers to check out Redwood as an opinionated full-stack alternative alongside Create T3 App, and teases next week's stream featuring Matthew Phillips with an Astro 3 sneak peek. The stream concludes at the four-hour-nineteen-minute mark.

Transcript

00:00:01 - Ryan Carniato

Hello and welcome to my stream. Today we are going to be talking with Anthony about Redwood JS today. That's the idea. Redwood, for those who aren't familiar, is another React framework, but it's, it's a little bit different as we're going to go over today. It's one of the React frameworks I haven't actually covered as of yet, but as you know, right now is where I just kill some time while stuff gets going. Maybe advertise the stream here for a minute. I don't know. I don't have as much preamble as I usually have, I think, because truthfully, this week's been kind of slow on the news front. I mean, I've been working, I've been heads down working a lot of stuff, but it, it, I don't know, maybe, maybe you all have some stuff that you've been doing. Come say hi in the chat as you join on, eh? All right, just. Let's see. Just getting that up. We're live. All right. I've known our guest today for quite some time. Anthony's always right at the front of the line when it comes to new technology. So he was one of the early people to discover the work that we're doing with Marco and with SolidJS.

00:01:50 - Ryan Carniato

So I've had plenty of conversations with him over the years, but this is the first time he's been on our stream. So I'm looking forward to that. Okay, what is redwood? Yeah, redwood. Well, I mean, I'm gonna have Anthony explain that probably better than I can explain that, but I mean, I definitely had some fun with, with this one, you know, in general, just getting, getting prepared. You know, every, every week is a new. Is a new challenge to kind of decide on, like how I'm going to, you know, come up with a cover or stuff. And as it turned out, I just happened to have these giant kind of like, what do you call them, pine cones sitting around in my house and, and you know, there we go. You know, I was very tempted to spend this whole stream, you know, with a nice redwood background, but I think, I think we probably overdoing it a little bit.

00:02:55 - Anthony Campolo

Where are we?

00:02:57 - Ryan Carniato

All right, now we've got some people coming in. Okay. Okay. Sip from the orange juice.

00:03:12 - Anthony Campolo

All right?

00:03:13 - Ryan Carniato

Yeah, yeah. First time we chatted. FSJam. Yeah. Yeah. So Anthony's already in the chat, so probably no point delaying this much longer. I just like, you know, taking as long I don't have. As I said before, we need to get some of that, you know, cool. Intro music and make you wait for 15 minutes, like, the stream will start soon. It's like, no. So this stream starts now. Yeah. But, yes, we're not. We're not here necessarily to talk about the trees. Although when I. When I did Google redwood js, let me actually, like, share my screen again here. Yeah, I did. I did see that. There's a lot of nice tree imagery. Their logo. Oh, this is the website. Sorry, Is there like a bigger version of the logo somewhere? Yeah, there we go. Yeah. See? So a lot of inspiration to be pulled from here. But, yeah, enough. Enough of that. I'm. I'm just gonna Redwood JS and orange juice. Great combo. Yeah, yeah, no, exactly. That's what I thought. Anyway, let's. Let's just get. How. How am I doing here? Yeah, it's been four minutes. See, I usually wait at least five minutes because that's like the magic number for people to both see that, join on and get past the stupid Twitch pre rolls.

00:04:41 - Ryan Carniato

How are we doing on Twitch? Let's see. Yeah, our Twitch audience is not here yet, but we probably need to get started because I'm. I'm. Honestly, I don't have as much today as I said. So I say that and then like, five hours later, you guys are all like, it's okay, Ryan, you can end the stream. All right, so anyway. Yes. I don't know. Did anything interesting happen to anyone else this week? All right, you know what? One more sip of the orange juice. Yeah, I guess. I guess this is just like the. Like the slow week. Even in JavaScript news, I felt like that it's just like smack. It's like getting towards. Like. It's actually funny. My kids went back to school this week, but I feel for a lot of other people, it's like the last two weeks of summer. So, like, if you were, like, holding off that summer vacation, you're taking it now. I've definitely noticed the downturn on traffic the last little bit. Yeah. Okay, fine. I'm done wasting all your time here. Let's. Let's just get this rolling. Okay? And we're gonna welcome Anthony onto the show. All right, here we go.

00:06:16 - Anthony Campolo

And.

00:06:18 - Ryan Carniato

Hey, Anthony. How you doing?

00:06:20 - Anthony Campolo

What's up, man?

00:06:22 - Ryan Carniato

As I said, surprisingly very little, which is unfortunate because I, you know, I can talk about anything, you know, for hours at a time. But right now I'm actually have.

00:06:31 - Anthony Campolo

Surprisingly. So I think we'll still get probably a solid 5 hours in either way. But, yeah, I mean, I think. I think it's okay if there's no big news. It just means it gives you time to work on your own thing or make news.

00:06:44 - Ryan Carniato

Well, yeah, that too.

00:06:45 - Anthony Campolo

But

00:06:47 - Ryan Carniato

obviously we're going to talk about Redwood JS today and part of that is that Redwood JS had a version 6 release not that long ago, right?

00:06:57 - Anthony Campolo

Yes. And it's very exciting release. It's something that we've been working on for multiple years now. It's by far the biggest, most consequential one since v1, which was the first time we're like, this is production ready, use this in production. But the highlight things are that we added vite and we're getting ready for react server components by implementing suspense.

00:07:19 - Ryan Carniato

Awesome. Yeah. So this is a good one. Good time to have you on. Good time to talk about Redwood. But actually what I do with all of my first time guests, before we even get into the great technology that they bring with you, I just want to know a little bit more about you. I think our audience would love to know a little bit more about you because you're involved in a lot of projects, right? Um, you've done everything from like, you call yourself the Bard of Redwood, which I take to mean like some kind of developer advocate kind of dev rel

00:07:49 - Anthony Campolo

kind of person, storyteller. And I didn't give myself that name. That was Peter Pistorius who created the framework with, with Tom. It'd be a bit presumptuous for me, I think, to call myself that, but that's what Peter, Peter calls me.

00:07:59 - Ryan Carniato

Okay. Okay. Well, and where I was going with that is you, you, you're, you've been involved with lots of projects and you've, you've also do pod streaming and all these different forms of media. Yeah, let's just get. How did you even get here a little bit. Like, what was your entry into web development world?

00:08:21 - Anthony Campolo

Yeah, there are many layers and many chapters to it. So I'll give the condensed version up to. When I got into web dev, I had a music degree and this is one of the things you and I really connect with. I toured, I did classical music, jazz. I was a teacher, like school teacher, private teacher, camp band, rock band leader. Like I did almost every type of music education and performance you could possibly name and think of. So I was really into it obviously and wanted to make a career out of it and that didn't end up happening. And I kind of got very disillusioned with it and then kind of transitioned into not necessarily web dev, but wanting to learn to code. I had this idea of like, coding is a thing that I will eventually enjoy once I learn how to do it, and that I can get paid to do it because it's like a valuable skill. And all of that was correct. But it took many years to figure out what to actually do with it. I tried actually to learn AI and neural nets back in 2017, 2016, which was a very hard time to do that if you were a brand new developer.

00:09:24 - Anthony Campolo

Like, mostly it was academics who were using Python to create these kind of models. And I didn't even know Python. I knew nothing. And so I tried that for a little bit. I tried even blockchain stuff a little bit. And I was like, I was way ahead of the curve of both of those, but I didn't have the technical chops to really do anything. So I just learned to code first. And then I realized, like, all right, well, I guess I should just like, I was seeing all these tutorials, I was watching YouTube videos and I saw there was like so much more material and so many more people doing react, JavaScript. It was just kind of obvious just looking at what was available to me as options to learn to code as content that taught you how to code was focusing on. So I'm like, well, I guess I'll just learn react. So I learned react. I then did a boot camp. I did an income share agreement. I don't know if you've ever heard of Lambda School. They rebranded to Boom to Bloom Tech. They're one of those schools where you don't pay anything when you start.

00:10:15 - Anthony Campolo

And then you give a certain. You sign a contract giving a certain percentage of your income for the first two years, which can be dicey. Some people have, like, criticisms with it. For, for me, it was actually, it was the right decision and it was the right option. You're making a face like, you know what I'm talking about.

00:10:32 - Ryan Carniato

No, I've heard of this once, but I, like, I never actually knew if anyone who actually went through that process. Like, I'm familiar with, like, typical boot camp model where people pay. And the problem is they, they get blasted through this thing. It's. And it's one of those, like, you. You only get as much as you put into it thing, and they work you hard. And then after 12 weeks, you know, I've interviewed countless dozens and dozens of those people for job positions. They come in, they're like, yep, fresh from boot camp. Okay, I know. And it's funny, we'd get like, people from the same, like, groups coming in, and you can Tell they work on the same project.

00:11:05 - Anthony Campolo

Well, this is the point where I use Redux, right?

00:11:08 - Ryan Carniato

So I could see an argument being made for, like, they only win if you succeed in that market. Which, I mean, I could, like, I could see. See that perspective. But on the other hand, like, when I think about how much developers make and I wonder, like, like, in my head, what their percentage is. I mean, this is a whole other topic. I just. That's why I was. I was like, huh? Because I guess it depends on the boot camp and the value of the bootcamp. And as you said, you felt like you got a lot of value from that, but it's like, it's challenging because, like, especially, I mean, maybe you have opinions on this and stuff. Like, a lot of times with stuff that's out in the open and with the web, it's harder, and it's harder to stay motivated, and it's harder to do that. But a lot of the materials and stuff are out there. If you could somehow motivate yourself and spend the time.

00:11:54 - Anthony Campolo

That's what I tried to do for a long time and wasn't able to get. Get anywhere. So it wasn't that I wasn't motivated, but it was the path to get you from total beginning to actually having the skills to do the job. Because that's the thing is you can learn things, you can make progress, but you're not always making progress in the right direction. So you're making progress multiple directions, but you need to actually be pointed a single direction that you can continue to make progress on. And that's the thing that hopefully a boot camp can give you. I would say I got value out of my boot camp. I wouldn't say I got a ton of value out of my boot camp. And an interesting twist here is that I dropped out of the boot camp to do redwood instead. This is something that you should. You'd almost never want to actually give this advice to your average boot camp student. Like, they're nine tenths of the way through the boot camp. They're like, you should quit now and then go do open source instead. And it's like, well, you should have done open source in the beginning.

00:12:44 - Anthony Campolo

And that's the thing that I was actually. I found a framework that I was passionate about that I had connections with that was actually getting exposure through by doing talks. So this is where I was like, okay, my coding chops can only get so good so fast. But something I do have is performance ability and education ability and the ability to get in front of a group of people and explain something for like multiple hours at a time, which is a useful skill for Devrel. So I assume the role of the Redwood dev rel essentially and started doing like all these meetup talks in 2020 when the pandemic happened, because at that point all the meetups went digital and they hadn't given up like they did in 2021, 2022. So everyone was doing online meetups. And then I was just able to do that. I met people like Brian Douglas, who. Connections. Yeah, Open Sauce. Like I. Open Sauce was already a thing back then. Actually it wasn't a company yet, but it was a side project he was doing. He got me involved in that and that gave me a lot of exposure to open source in general.

00:13:44 - Anthony Campolo

And.

00:13:44 - Ryan Carniato

Yeah, so, yeah, so this, that's, that's awesome. So this did. Actually Redwood did come in very much near the beginning of, of these things. How did you, like, how did you find this framework? I'm just saying Redwood is kind of not the most known react framework, so to speak. How did you end up there?

00:14:04 - Anthony Campolo

So something that I had a deep love for before I got into tech was podcasts. I used to have a music podcast that I did with my professor called Loose Filter. So I already created and hosted and edited podcasts, like 50 of them. Like you know, hour long podcasts with Buddy Stewart in like 2014, like a long, long time ago. So as I was getting into tech, I was also looking for podcasts to listen to. And there was, there's a ton of them. Like there's, you know, there's, you've been on many of them. And Tom, Tom Press and Warner, original CEO of GitHub, creator of Jekyll, creator of Toml. He created Redwood with Peter Pistorius and then they brought in David Price and Rob Cameron to work on it around 2019. And in 2020 he did the podcast circuit. So I actually heard him do like six podcasts back to back around March, February or March, April 2020. The, the big ones were like he did software engineering daily, front end first. Which other ones did he do? I just like used to have them all memorized. JS Party. Yeah. So I was listening to these podcasts and that's how I kind of heard about all these open source frameworks.

00:15:25 - Anthony Campolo

That's originally where I like heard about Solid because you're on Pod Rocket. And so once you kind of know the right podcast to listen to and there's kind of like 10 to 20 that most of like people who want to get stuff out in web dev go out and do. And I was just listening to all of them. So I would hear certain frameworks pop up and I noticed how Blitz, Redwood and Remix all popped up in a three month span. It was February Blitz dropped, March Redwood dropped, and then April Remix dropped. I was like, huh, this is interesting. There's something going on here at these React frameworks. Like clearly it's. People think there's a time to build a thing because three people just built almost the same thing all at the same time. There's like lots of nuanced differences between them, but they're all trying to create a Full Stack React framework, you know, that makes sense.

00:16:10 - Ryan Carniato

And you ended up, I guess, starting fsjam. Was that around that time period as well or.

00:16:16 - Anthony Campolo

Yep. So then we. So I got involved in Redwood like just a couple months after it came out. So it dropped in March and then by May I was already blogging about it because I looked at it and Blitz and Remix and I'm just like, you go with Redwood for reasons that can't really quite pinpoint because it was kind of based on a lot of different factors. But by the summer I started going to contributor meetups and it was like meeting people in the community and meeting the team. And Christopher Burns was another person doing the same thing. He has now one of the most like, longest running biggest production Redwood apps called Everfund, which was. Is a company now, it's in the Jamstack Innovation fund actually and it's for setting up like non profit websites with donation links and what's the point of making you.

00:17:13 - Ryan Carniato

Yeah, I know, we'll go there in a second.

00:17:15 - Anthony Campolo

Yeah, yeah, but so Chris, Chris Burns, he actually had a company he was like looking for tech to build on. He was looking for something to migrate his ridiculous bespoke Full Stack Gatsby app to. And so he saw Redwood and he was like, this is cool, I'm going to use this. And then started migrating his company to a Redwood stack. And then me and him just started to get to know each other and we were both interested in a lot of these other projects. He was also looking at things like Blitz and like stuff. So both me and him realized there's multiple projects out here trying to do something like this. And Redwood was using the term Full Stack Jamstack already kind of. They were saying their slogan was bringing Full Stack to the Jamstack. So we didn't invent that idea. But what Christopher Burns was like, we should just make something called Full Stack Jamstack like they haven't actually shortened it to just like Full Stack Jamstack yet. They would always say bringing Full Stack to the jamstack. And so he always says he invented fsjam, like kind of, you know. But so he had mentioned that he wanted to create like a community.

00:18:19 - Anthony Campolo

Basically, he started like a discord. And I had already been talking to him about how we should do a podcast. So I'm like, okay, this should be our podcast. Like, let's bring in people from Redwood and people in the community and then people. Other people doing interesting things and just kind of grew out from there, you know, started with just Redwood people. But then we brought on Brandon very, very early up episode six to talk about blitz. So we wanted to make sure it wasn't just a Redwood podcast. We were like very conscious about that. Then as it's continued, we've just done general web dev. We've started bringing on more front end focused ones like Marco and Solid, but it kind of spans the whole gamut. You also have database people. Like, we talked to Paul when Supabase first came out.

00:18:58 - Ryan Carniato

Right. Okay, yeah, yeah, no, I've listened to many episodes of FSJAM and Podrocket, as I've mentioned in the past list too. We're the first to find Solid and also coincidentally became my favorites because you were always looking at new technology and not just going with. I mean, it's kind of obvious that this would happen. Like some of. Some, maybe the bigger, more popular ones play a little safer, which means they're kind of less interesting to me. So. I know, no comment. But that was.

00:19:31 - Anthony Campolo

Well, it's kind of like, you know, some people have just different. Some people want like, you know, know they're working for a company and they want like stable tech and they're like, I don't need the most cutting edge thing. I need some stable, reliable. Whereas some people are like, they're always. They're more of a research mindset and they know things are always going to be improving and changing and there's always things being worked on that aren't quite fully baked yet, but will be fully baked one time down the road. So you and I just, we just both naturally think that way. We find those naturally interesting problem sets. So it's looking who are the people who are doing things that are new and what are the consequences of those things. Things down the line, you know, and not everyone thinks that way.

00:20:10 - Ryan Carniato

True. And honestly, like, yeah, there's just different spaces of where you're at and what Your needs are at those times. Okay, so let's, let's flip this background. We, we got a bit of background on Anthony as I said, known him for a few years now. So it's, you know, it's been good times. But I'm, I'm gonna get back to Redwood here because I mean it does come down to, to this question, right? You know, like a little bit because you mentioned at that time when you saw Red wouldn't want to get into it, it was like basically three meta frameworks built on React within three months, it's like bang, bang, bang. And I guess that was the time to build meta frameworks on React. I guess they saw a need, some kind of want out there and Redwood has taken compared to those two, I think actually kind of more interesting take. That's actually differentiates it from a lot of the others. I don't know. Let's just. I'm just looking at the website right here. I've got it in front of me and it says focus on building your startup, not fighting your framework. Like those are, those are fighting words.

00:21:19 - Anthony Campolo

Yeah, exactly. And this is so, yeah, it's a good question. My, my first like counter response is the reducto ad absurdum of that argument is there would never be framework solved. No one would ever build a framework. And so like, obviously that's not what we want either. So. And I also think that despite the fact that Blitz, Redwood and Remix all came out around the same time, what ones have come out since? Any. So like, actually I feel like at most there's usually one or two new frameworks a year. So I don't think it's as hard to keep up with as most people think. The problem is people generally avoid new frameworks in favor of just sticking with the one they already know. And then one day, two years have gone by and they're like, well, there's four new things I know nothing about. What the heck? So that's why you got. If you're someone who can keep up with the pace every time a new one comes out, okay, I got six months to figure out how this new one works before I'm behind, you know. So that's how I would recommend looking at it from a mindset point of view.

00:22:19 - Anthony Campolo

But to get back to like why, why Redwood? If someone asked you I want a Full stack framework for JavaScript, would you tell them to use

00:22:28 - Ryan Carniato

I first it's like, what do you mean by Full Stack?

00:22:32 - Anthony Campolo

Because I mean, so then, and then they would say I'm someone Who's used Ruby on Rails, Django and Laravel. That's what I mean by a full stack.

00:22:39 - Ryan Carniato

Yeah. Okay. Yeah. So in JavaScript we don't quite have that. Let me show you what we mean by full stack.

00:22:45 - Anthony Campolo

That's the problem. That's why we needed to create Redwood for that exact reason.

00:22:50 - Ryan Carniato

Yes. Yeah, that's, that's where this was going.

00:22:53 - Anthony Campolo

Right.

00:22:53 - Ryan Carniato

Because the truth of the matter is with this front going backwards approach, you know, we don't, we don't have the same, we've never really taken the same focus. There's people who ported things like Laravel esque stuff into JavaScript world, things like Adonis or whatever. But like it's not the same. Like you, you want to have React, you know, you know, and be able to do this essentially you want your modern front end framework and be able to do this. So yeah. What does that mean in terms of Redwood?

00:23:25 - Anthony Campolo

Yeah, so the other ones that I've tried to do, a kind of full stack thing was also blitz and then there's one called Bison and now there's wasplang which is kind of cool. But the one most people now would know about is Create T3 app. So you've had I think Christopher on Create T3 apparently. So I would say right now, I would say Redwood and Create Teeth Grab are the two full stack React frameworks right now. And it's very simple. It means they give you Prisma and hopefully a way to do auth. That's literally all it means. It's really not actually that complicated. They just give you a database tool. Like people who say there's no Full Stack framework, sometimes they mean there's no framework that has emails and cute jobs and infrastructure as code. All that kind of stuff. That's the way I think about it is there's a back end, like there's a server.

00:24:19 - Ryan Carniato

Yeah, I guess for me that was what I was thinking of when you mentioned those other ones because I mean you're right, no one else ships with Prisma other than the ones you like. Like a Next JS doesn't and Remix doesn't and whatnot. But like, you know, since the evolution of services and stuff like Prisma or you know, like, like stuff like, like people aren't actually, you know and a lot of the, like online stuff like, you know, when I think of stuff like, you know, like Planetscale and all those, like it's not that hard to get these kind of things into the existing back end framework compared to, you know, before that's why I was. I guess we still have a gap on the people who want the mail servers. Right? Like, do you know any frameworks that

00:25:00 - Anthony Campolo

are like, I feel like I just heard of one the. The other day, I remember it stuck out to me because I'm like, oh, that doesn't happen very often. I'm forgetting which one it was though.

00:25:11 - Ryan Carniato

But okay, fair enough. But okay. So basically the idea is like most of the space doesn't actually offer all the tools to actually like, even if you install, say Next js, you still need to go somewhere else to actually get an app going. You're actually missing pieces. How can you call yourself Full stack if you can't deliver an application with the pieces that are available? And I guess that makes sense how this whole startup kind of marketing like the framework for startups.

00:25:44 - Anthony Campolo

So that's where it comes back to the. Yes, this is where the startup stuff is pretty important. So for. Let's go back to history. Tom and Peter, they were working on a startup called Chatterbug, which was like one of those language learning type apps. And so this. Yeah, we have a. So we do have. For things that are not built in the framework, we will have docs showing you exactly how to do it. So. So that's pretty good because there's always this question of like, do you want to build something this opinionated into your framework or you just want to give someone like the specific doc to do it with your framework.

00:26:13 - Ryan Carniato

Sorry to interrupt the history.

00:26:14 - Anthony Campolo

Yeah, yeah, no, it's all good. So we. So Tom and Peter, they were building an app that was actually like a React front end querying a Ruby on Rails GraphQL backend, which is just like total nightmare. Like it's hard enough to do that with a node GraphQL backend. You know, they were like, wow, this is so challenging. But by the time you get set up, it's like a pretty sweet dev experience. So they wanted to create a framework and Tom built GitHub with Ruby on Rails. So he's already had a lot of experience seeing what the benefits you can get from having a monolithic framework to work with to build something substantial. But there was like, we've said there's not necessarily a good solution for doing that in JavaScript. So they started building it for that and then at a certain point they decided to drop the Jamstack branding, which like netlify has done and a lot of people are doing right now because they felt like it confused people and they felt like even though the pitch was it lets you do more than you can normally do with Jamstack. They would hear Jamstack, they'd be like, oh, this has limitations of the Jamstack.

00:27:19 - Anthony Campolo

Like, no, we just said it brings you beyond limitations of the Jamstack. That's the whole point. Like, no jamstack. So, yeah, they stopped using Jamstack and then started saying it was the JS framework for apps because they wanted to say this is for building companies and applications and this is for people who want to ship stuff which people had been shipping with it already. They emphasize even more. And then the real kicker is Tom, because he's independently wealthy, has been creating a fund to fund companies that are using Redwood to build. So if you're going to build your company with Redwood and you commit to using Redwood, you can basically get a check for your fund for your company.

00:27:59 - Ryan Carniato

Gotcha. Okay. Well, yeah, so, yeah, the whole package kind of comes together that make that, that, that makes sense. Yeah. It's always been a little bit tricky for me when looking at this kind of stuff because I, you know, I live on the other side of things where I'm like, don't be opinionated because I'm working on the primitives. But someone has to be opinionated. Someone has to make those decisions.

00:28:23 - Anthony Campolo

Right?

00:28:23 - Ryan Carniato

And it's. So it's like the layer of where that decision gets made. I think, I think it's very interesting to see like those pieces come together. As you mentioned, I had Chris on and we Talked to create T3 app and it was the same kind of question or like potential tension thing I'm thinking about here, except Redwood's been around longer and, you know, stuff changes over time. You know, I think I have to kind of address this because there's like two sides of when you're being opinionated about like, you know, choosing those pieces. One side is like, how do you decide what gets included? Like, what criteria, like, makes it worth including versus not including makes, you know, like, forget about the choice. I can assume that it's. You're able to make a good choice. Once you're like, I need a database technology I like, I'm going to look at the market and pick something reasonable with the customers. But like, to know, like, this is a decision point that should be part of the framework versus something that that isn't part, you know, these kind of decisions and then the implications of what that means.

00:29:27 - Ryan Carniato

I mean, this, I'm getting fully loaded on this. But you know, when you move to the future, let's not talk about the future just yet. But I'm just wondering, like, do you have any perspective on like, on that? I know that's more. Probably more of like the author's consideration originally, but.

00:29:42 - Anthony Campolo

Yeah, well, this is where it was useful for me to be someone fairly new coming to like meetings. And I was in like, I was on the core team by December 2020 as they're kind of like devrel person. And that was like one month before I got hired from my first job. So as I was actually like in real job situations, I was also in a situation where I was getting to hear the core team basically discuss like, what to build into the framework and where to go next and what the roadmap should look like. And it's one of those things where there's no simple answer. It's like you have experienced people with years, who've spent years building stuff, coming together and discussing what's the right solution with everything. It's like, okay, the main guiding principle is how do we make this as most like Rails as possible? Because they'd already had such a good experience with Rails, they already understood the dev experience they could get from it, but they wanted to abstract that experience and bring it to JavaScript. We're not just going to rebuild Rails, but we want to create the simplicity of what we're able to do with Rails in this thing.

00:30:48 - Anthony Campolo

Usually we start with what would the solution look like the previous time we had a full stack framework that solved this. And then how do we try and get that with JavaScript? And as you're building it out, you make sure it actually works the way you think it does and it's an iterative process. And then, then you have other people who are using the framework as you're building it and then you get that kind of like, you know, it's just

00:31:09 - Ryan Carniato

tricky because like every place has its own custom setups to a certain degree. And like, it's like, yeah, I don't know, it seems so difficult. Like, I mean one of the ones that I, you know this because of the T3 back and forth criticism. One thing was like that I think Redwood ships with Storybook for example. Right. Is that still. Yeah, like, how do you.

00:31:28 - Anthony Campolo

How do you really important thing to ship with? Because we feel like if you're designing a lot of components, that's something that is useful for a team to have, you know? Right.

00:31:39 - Ryan Carniato

Yeah. It's interesting because so basically this is just like looking at setups they've had in the, in the past and as like each time you Know, new project comes in and go and, and you know, even from the community and stuff and being like, look, this is how we're set up. And then like, these are the tools we found useful. And then at a certain point it's just like, yeah, like, yeah, it's interesting. I guess this is actually probably more in your lane as well with the Bard and teaching and Devrel type stuff is like, it must be. And it's actually a problem that I've been trying to figure out even for stuff like solid Start every meta framework. It's like when you start putting all these tools together and they all have their own pieces trying to figure out how do you approach teaching at Docs? Do you refer people to the underlying thing? Do you take responsibility on for yourself? Because, you know, these, each piece is, you know, shifting slightly underneath you at all times. And then you're like, you know, how do you think about, you know, maintaining that even from like a documentation teaching side?

00:32:41 - Ryan Carniato

I'm just, I'm always curious about this.

00:32:43 - Anthony Campolo

Well, this is, this is such a good question. I'm so glad you asked this because is one of the things that really drew me to Redwood was that they actually did something. So the phrase readme driven development, I'm sure you've heard before, that phrase was invented by Tom, Tom Press Moore. He wrote a blog post about it and he said that you should always write your readme before you write a single line of code. It will help you explain to yourself first and then to others what you're actually building and why they took it to a different tact. And with Redwood, it is something called tutorial driven development. So in this, they wrote a tutorial of how you would teach the framework to someone, and then they built the framework to make the tutorial work. So the tutorial has essentially stayed the same from the very beginning as the framework has been built out from 0.1 all the way up to now. And yes, let's just real quick just go to take a look at like what this is. So you see on the left there's seven chapters with an intermission. And this is. I think there might be two tutorials.

00:33:52 - Anthony Campolo

There might be one. I can't remember if they got merged into one or not, but the idea being that you start with initializing a project, you then build out your front end, you build like pages and then you kind of create a layout and then you go into your backend, you set up your API, you figure out how to do data fetching, you then add your authentication and then you deploy. So it's kind of like sequence of steps. Yeah. So that was originally.

00:34:17 - Ryan Carniato

So this is your first app and

00:34:18 - Anthony Campolo

that was originally tutorial 1. When the framework first came out, there was no chapter 567. There's only these chapters. The idea being that would get you all the way to the point of having a deployed app. 567 is now testing in Storybook stuff.

00:34:33 - Ryan Carniato

Storybook.

00:34:35 - Anthony Campolo

So that's more of like when you're actually working with Redwood, how would you design components in a way that is natural and let you like mock it and do that whole thing in like a very simple way? So that's kind of more of like the. The DX of actually building stuff they want also walk you through that in this tutorial. But chapter 1, 2, 3, 4 is basically just like explaining how the framework will works and what I was doing. When I was in my bootcamp, I was writing blog posts that basically. So there's, there's the written tutorial and then Rob created a video tutorial. I watched the video tutorial and then wrote blog posts based on that, which basically brought me back to just writing the tutorial myself in a different. In a slightly different kind of way. And I was like the first blog. That was like the first blog post. Like the. When I do the first look at X, like I did the first look at Solid Start, like the first time I ever did that was for Redwood, like you know, three years ago.

00:35:26 - Ryan Carniato

Right? Yeah. Okay. Yeah, that makes sense. Yeah. I mean getting from start to deployment and this is like the, like now you have an app, how do you continue with it? And yeah, no, this is a lovely topic by the way. I don't think I've ever seen a tutorial get to this point because this is one of those things. Like I did a lot of this when I was working at the startup that I was doing, which was dealt in kids photos, it was at schools and like everything was role based to the extreme. And we came up with. We had the. I mean that case, it was very extreme and we had to come up with crazy architected system. But the surprising part is how little documentation there is out there for just setting up even a simple version of that, let alone that as part of the tutorial. I actually. That's. Sorry, I just think this is actually very, very cool because this is one of those. Everyone's like, oh yeah, how do you do auth? But the how do you do auth? Question for most people is like authentication. It's like, how do I get in the system.

00:36:31 - Ryan Carniato

Yeah, exactly.

00:36:32 - Anthony Campolo

Like, well then what do you do with your user? You know, so it's. Yeah.

00:36:34 - Ryan Carniato

So this problem. Yeah.

00:36:36 - Anthony Campolo

Created this entire thing and solved because he was just like no framework has ever done this and I'm going to need this. I'm going to have to do this anyway. I might as well put it in the tutorial.

00:36:45 - Ryan Carniato

That's.

00:36:45 - Anthony Campolo

That.

00:36:46 - Ryan Carniato

That is very cool. Yeah. Because honestly like some. There's all those conversations right now like don't roll your own off or whatever. And I've rolled my own auth. I've rolled both authentication and authorization. And I'll tell you, while the authentication is complicated at first because of all, you know, the handshakes, I made my own OAuth2 system with. What is it called? The SSO protocol. Protocol. No, I did OAuth2 but I also did it with the. I can't remember the other term. Like because some people concerned the OAuth 2 was. Wasn't as capable in the SSO case as SAML was. So like there was. There's also a spec for something built on top of OAuth2 that's more similar to SAML anyways. OpenID Connect. Yes, I did open ID Connect. I've interfaced with SAML, I've written the whole thing. But I'll tell you that the authorization problem that I had at the startup was harder than that. Like, like the role based system and like figuring out the best patterns for guarding every little piece, you know. And so like yeah, I think this is very cool like by comparison. Anyways, yeah, just this just an aside.

00:38:06 - Ryan Carniato

This is not something you see every day. Okay. So yeah, I can see when you control the pieces you get to be able to build this narrative and you can actually go in and do this like. Cuz to be fair, I feel like Ruby on Rails got to this level where people were like oh yeah, because you have your database schema, you know, set up your. What do they call freaking active record. You know, like do this and like. But it's. Yeah. And I think it's interesting because I wonder, I don't know if all full stack frameworks actually go this far in their thinking. They're just like look, these are the pieces I need. And then they go there. I, I think maybe this is the trade off consideration here is if all the, to get to the, the final like the. You build up all the pieces on each other and you get to the final piece like something like this, you kind of almost need to know all the parts and know that they're not like that they're going to be present. You can't just be like, oh yeah, you got five options for this, five options this, five options this.

00:39:06 - Ryan Carniato

If you do that, you. It's a lot harder to do to get to the last step. So I'm gonna say that's probably my favorite argument for this kind of, you know, look, if you have these pieces, we know what you're working on. We can basically just, you know, take you to that next level of like, yeah, this is how you build a solution that looks like this. The flip side, and I think I want to talk about a little bit of this before we dig in, is you mentioned Redwood 6 is kind of like coming in big changes and stuff. And it's. And part of the thing is like, I feel like change is like, would be one of the hardest things for a system. Like, let's pretend you built your whole system on GraphQL and I mean we don't have to pretend. But you know, and then suddenly, you know, something comes out like react server components and they're like, oh, well, you don't really want to use GraphQL on the client anymore. You know, it doesn't make as much sense. Or you can like, we're not going to stop you. But.

00:40:03 - Anthony Campolo

Well, this is the moment where it would be very nice to have a whole team of framework authors to solve that problem for you. So your app can stay exactly the same and it gets solved without you having to do anything.

00:40:15 - Ryan Carniato

Yeah, so I guess, yeah, this is sort of where I'm getting at. And that's always been the framework argument, even angular to a degree kind of went with that. I'm, I'm very interested in. So the, like, I guess you already know this. So the high level is keep the authoring experience mostly the same change. The underlying is in my understanding or changes coming in.

00:40:41 - Anthony Campolo

So from the users, the redwood user perspective, you don't really have to do anything at all. There's a, let's see, there's an upgrade guide. Let me look at that. So you will basically have to change like one thing in your like configuration Toml and run Yarn Redwood upgrade. And then there's like a couple things with like SVGs that are a little bit weird. So it's basically like you have to change a couple things with like how you use your like stat where you like put your static assets. But for the most part there's like very little stuff you're gonna have to change yourself so that's pretty, pretty sweet. Let me drop the link.

00:41:26 - Ryan Carniato

Yes. Yeah. This was always my dread like at a certain point like it's really cool that like recently Prisma did that release was a Prisma 5 that made everything 10x faster.

00:41:39 - Anthony Campolo

That's one of the things that's also in Redwood 6 is we upgraded to the new Prisma as well.

00:41:46 - Ryan Carniato

But like it was looking there for a while that a number of people were like maybe it's time to move off Prisma and get a. You know, a different. You know I saw. Was it Drizzle orm or something getting,

00:41:57 - Anthony Campolo

you know Drizzle is the one is the. The hype everyone's talking about right now. I haven't tried it yet. Sounds. Sounds pretty sweet. I think it's gonna be probably a while before they can reach anything near like future parody though. Because Prism is around for a while and right. Pretty. Pretty established. But it's. It's good that there's you know, other options now because for a while it's basically Prisma like or. Or I'm in town right.

00:42:19 - Ryan Carniato

And where I was, where I was getting with that. Was that because. Because of that scenario. Like yeah, it was locked in for a long time. But on the other hand the, the. The consideration came in is like if Prisma hadn't gone and done some of those performance updates or like for some reason like maybe they couldn't. It was architectural or whatever. Like they didn't address their biggest problem pain point from that audience. Now you're kind of like in an interesting space. So like I guess we might be able to see a bit when we build something with Redwood in a few minutes. But I'm, I'm just like does Redwood accomplish stuff through like abstraction layers? Like that's how he hopes to generalize the future or the way it works

00:43:06 - Anthony Campolo

is that you have a very specific way of interacting with your backend because your back end is a GraphQL server and then your front end is just going to make GraphQL queries to the server and then get that data back. So the most of the Redwood-specific stuff that allows us to kind of figure out the React server components under the hood is that the data fetching itself uses something called cells. And if you see here this is kind of showing like if you have like SVGs, here's like a slight kind of change you need to make. DOM has. Has written out this upgrade guide. It's just a couple, couple points here and there of stuff you have to worry about and some of this stuff only applies to certain apps. Like there's one thing here where it's like, if you're using require statements, you're going to have to change that. But if you had built with only ESM from the start, you wouldn't have to worry about that kind of thing. And so. Yeah, and then it mentions storybook v7 also, and then the suspense router.

00:44:05 - Ryan Carniato

That part, right, yeah. So if I'm understanding this correctly, what you're saying is the back end is actually like, I was asking about abstractions, but the back end is kind of already a big abstraction to a degree. Because like this, there's clean separation between the view portion and the data portion. And that data portion is like a. I mean, I guess I'll see in a minute, but it's like a bunch of configuration. I don't know if it's a middleware setup or whatever, but essentially you build up the thing by putting pieces together that have kind of like an abstract API rather than like writing a bunch of imperative code.

00:44:42 - Anthony Campolo

It just gives you a GraphQL API from the start. So you already have a completely configured GraphQL API in the very beginning when you initialize your project. And then from there it's the question of what do you want your schema to be for your database? So you got to write that obviously, because we can't write that for you. So there's a Prisma schema. That's the main thing. You define what are your models. Then once you've defined your models, it generates a GraphQL schema based on that. Then we also then have our own AUTH package that will figure out how to manage the calls to the GraphQL server. That's basically what the back end is. And the front end is a React app that has a specific data fetching pattern called cells.

00:45:24 - Ryan Carniato

I'm just looking at this. Apollo is used for the GraphQL in the client.

00:45:29 - Anthony Campolo

It is. You can switch it out for React or Tanstack Query. I suppose now they call that. That was a couple of years ago. So that package might need some updating. But if you want, you configure your client if you think Apollo is too heavy or whatever, but that's the default.

00:45:42 - Ryan Carniato

Gotcha. Okay.

00:45:43 - Anthony Campolo

It used to be Apollo Server as well, but then we switched to the Guilds graphql Yoga.

00:45:49 - Ryan Carniato

Yeah, and so that's a perfect example. One of those migrations, do you remember what that involved? Switching from Apollo Server to Minor just.

00:45:58 - Anthony Campolo

Yeah, like you with that one, you change, you'll change Like a single line of code, I think for like the app users, you know, so. But it took months of people on the behind the scenes getting the framework to do that. So that's why it was built in a way where there's kind of like a contract for the, for the developer, which is like you're going to develop your app like this. You're going to have your pages, your layouts, your components with your data fetching that. You're going to have your back end with your schema and your models, as long as you do all that correctly. And that's all self contained and correct. And you can test those parts too. You shouldn't have to test anything else. All the framework logic should figure out how we migrate to these new tools so things can get continually better and better and better as new stuff comes out.

00:46:41 - Ryan Carniato

Okay, yeah, yeah, no, this is interesting. I mean, I'm going to be obviously very, very interested in the React server component part. It's not as obvious here if it's. Is it out?

00:46:50 - Anthony Campolo

So the suspense thing is the main one. So where it says so. Yeah, so scroll down to the suspense part again.

00:46:57 - Ryan Carniato

Yeah. Because the router is so vital in making the server component part worked the

00:47:02 - Anthony Campolo

router to suspense under the hood. For most, this reactor, this refactor will largely go unnoticed. There's a subtle breaking change. Okay, so the thing here is that redwood has its own router. So this is makes it similar to your same deal with like Remix has react router and then next has like their own next kind of router. So I don't really know what it means to turn on suspense in the router. All I know is now it has suspense in the router.

00:47:32 - Ryan Carniato

Turning on suspense in the router means that there's transitions baked into the router, essentially like suspense you probably could have used with redwood. I mean, the ssr. I guess I can't say yes because the problem is. Yeah, never mind. React had the ability to do stuff since 18, but like before 18 you couldn't do it. And then after 18 you could, but no one really knew how to. So it didn't really work. So you didn't really do it. But like technically speaking, suspense should have kind of worked already if you wrap stuff. But when people talk about suspense in the router, they're talking about baking transitions into the router. So that usually that's what they mean. It's so that like you can do concurrent rendering between routes and stuff. This is important, especially when you get to certain components and whatnot. But that's usually what suspense into. Into the router means. It's interesting, though, because I know this. Just a side note with teaching people this in solid. Most people don't understand what the proper behavior is. I asked. I do like a lot of teaching on this subject and a lot. There's a lot of confusion.

00:48:37 - Ryan Carniato

People like, why do you do this? And all this? And I'm like, this is the one place where I don't get help being look at the React stuff. I actually think because solids had this out in the wild for, you know, three or four years now, like, we actually have more people playing with it than actually in the React community playing with it. It's only been like the last couple months, so it's been kind of, like, tricky. But yeah, I. I think my guess is it means that there's transitions. That's. That's usually the key. The key piece here for putting in the router. But then again, if you don't explain transition. Yeah, I mean, I guess I have to see, like, does. Does Redwood's router have any way of saying, like, am I routing? So to speak? Like, is there like a hook that's like, use is routing or something along that lines?

00:49:27 - Anthony Campolo

Let's go. So go to the Redwood router docs and let me just kind of show you.

00:49:32 - Ryan Carniato

Yeah. Like, yeah, I mean, it's possible that we should just actually get a project going here in a minute, but let's

00:49:39 - Anthony Campolo

first do this because I'm realizing that actually we have a specific repo that allows you to turn on the React server components in their current iteration. So right now with V6, like I said, it turns on suspense. But React server components are not fully implemented yet. It's still a canary thing. So that is something that if we want to demo that I'm seeing, want to make sure that we'll be able to do that.

00:50:02 - Ryan Carniato

Yeah, we don't need to go there yet, but yeah.

00:50:05 - Anthony Campolo

Yeah. So with the router, there's a single routing file that gives you like, a flat routing structure where you have your routes and you can wrap your routes and sets for nested routing. So.

00:50:17 - Ryan Carniato

Sorry. So Redwood doesn't use a file system router?

00:50:22 - Anthony Campolo

No, it does not.

00:50:23 - Ryan Carniato

There. That's an interesting one. Okay, good to know.

00:50:27 - Anthony Campolo

Yeah, so it was more influenced by, again, the Rails router.

00:50:36 - Ryan Carniato

Okay, cool.

00:50:40 - Anthony Campolo

So, yeah, there. So I don't think you would do like an IS router. Basically you have like, you'll have link components, so you, like, can link to stuff.

00:50:49 - Ryan Carniato

Right. The reason. The reason I was asking is because usually this is a telltale. A telltale sign that there's transitions built in. Because the problem with the transition is if you don't have a way of asking if it's happening, somehow exposing it. What ends up happening is now, instead of the page changing right away, it, like, holds there like the browser and then shows a new page when it's ready. And without any kind of loading indicator, that's not good. So usually, like, there's some indicator so people can, like, put something on the current page, even while it's still interactive, before showing the page. That was like my tip off. If they were using transitions in the router. That's what I was looking for. But I mean, that's fine. I said the future. Future stuff I'm more interested in from a philosophical standpoint, less from the implementation. I'm sure Redwood will be getting there in the next little bit. It's a tricky problem, but yeah, okay. I'm just like, very quickly scrolling through this to see. Yeah. So importing routes to generate routes with wildcards stuff. So it was kind of cool. Yeah. And using Match.

00:51:56 - Anthony Campolo

Yeah.

00:51:56 - Ryan Carniato

There's a lot of different ways of doing this. It's interesting to me because basically every meta framework has to end up creating their own router. This has been Tanner's biggest blocker because he's like, look, I created a really cool router that has amazing typescript without even typescript generation. It actually works without any kind of generation. Just has perfect types. Most solutions have. Have. Have generation in the background. But then he's like, okay, so let's go use it. It's like, no, you need a meta framework to use React. And guess what? We all have our own router. So. Yeah, this is. This is definitely. Yeah. I mean, this reminds me a lot of React router. Just looking at it, like off the base and it makes sense. I'm gathering there's nested routing of some sort of.

00:52:44 - Anthony Campolo

Probably for the sets are. So go to set.

00:52:48 - Ryan Carniato

Oh, yeah, that set thing there was like. I think I saw it up here, higher up. It was. It was like. Yeah. And I saw stuff that was looking like, like main layout, theme, route path set, private and authenticate. Yeah.

00:53:01 - Anthony Campolo

Okay.

00:53:02 - Ryan Carniato

That's an interesting syntax. But again, it probably comes from the perspective of like, setting up this declaration around authentication type stuff. I always found these things really difficult to deal with because, you know, I'm sure Redwood actually probably thought about this a lot. But, you know, at a certain point, dealing with authentication rather than authorization becomes Very. Or sorry, authorization rather than authentication. The other way around becomes very difficult to like, wrap into a declarative API, which is actually the biggest fault of, I'd say file system routing systems, you know, because, like, you start losing your expressiveness. So I can see where Redwood's here with the file routing.

00:53:48 - Anthony Campolo

You're kind of going to have like. There'll be certain parts of your app where it's like you need to log in to get to the dashboard. So if you want to have a front page, you want to have a dashboard, then you can separate that pretty simply just in your router here by using private routes and specifying it.

00:54:03 - Ryan Carniato

Yeah.

00:54:04 - Anthony Campolo

And also you can turn on pre render as well by just putting a pre render rerender prop in each one.

00:54:10 - Ryan Carniato

Redwood must be doing some fancy compilation stuff too. Just. I'm just throwing this out here because. Oh yeah, this API doesn't lend to code splitting because you. If you import blog content here. I mean, unless. Unless what people do is wrap everything in lazy themselves. If that is that the thing like, like every single page you go like, lazy, lazy, lazy, lazy, and then put them in.

00:54:34 - Anthony Campolo

No.

00:54:35 - Ryan Carniato

So if I'm gathering, Redwood does do code splitting. So. Yeah.

00:54:39 - Anthony Campolo

So Redwood's uses. It was originally using webpack under the hood and then Babel. So Babel, this is what Peter said, who wrote most of the initial code of the framework, that Babel is the core of the framework, actually. So all sorts of weird Babel magic kind of happening going on. I kind of move stuff and put stuff in the right places and I imagine code splitting kind of falls out from. From that.

00:55:02 - Ryan Carniato

Yeah, like, what I mean is not tree shaking, but like, like lazy components. Because the thing is like, when your app loads, you don't want to load homepage, about page, contact page, all of this stuff. If you're on the homepage, you just want homepage, you don't want about page. But like, if you look at what the code is doing directly, by default,

00:55:19 - Anthony Campolo

the router will code split on every page, creating a separate lazy load bundle for you. So it's like. And this is why I used to say, like, it's. It already does the MPA spa thing for you. Like, you never even had to think about that. I had from the very beginning, this framework would already. Basically, you could do an MPA or an SPA without even having to think about it.

00:55:38 - Ryan Carniato

Yeah, I'll revisit that in a minute. But yeah, this is what I was getting at because syntactically this doesn't code split But I'm gathering they're doing, doing something special here then. Okay, cool.

00:55:56 - Anthony Campolo

If you like to override the default lazy loading behavior, include certain pages in the main bundle. You can simply add the import statement to the routes JS file, right?

00:56:04 - Ryan Carniato

Yeah, exactly. Yeah. So yeah, they must redwood will detect

00:56:08 - Anthony Campolo

your explicit import and refrain from displaying that page into a separate bundle. Be careful with this feature as you can easily bloat the size of your main bundle.

00:56:16 - Ryan Carniato

There you go. Okay. Oh, so where are you reading this from? Am I.

00:56:21 - Anthony Campolo

So this is all in the router docs. So somewhere. Yeah, maybe I should just go to code splitting. It's a whole code splitting section.

00:56:28 - Ryan Carniato

Yeah, yeah, because this is what I saw in the example. By default Google color page create. If you look over and then include certain pages in the main body, you simply add import in routes JS file. It's just fun. So you understand. I mean I can look at the project and we can confirm this. It was just, it was just interesting because import like the example that I was looking at here, seemed like it imported all the routes wherever I was earlier, you know, up here somewhere. So that's why I was like, like it imported the routes. So how does it code split? Does, does, does. I was like is there some nuxt level stuff here where it's like auto detects components that you referenced without importing them or something? But I, I think a lot of these questions can be answered by actually looking at the project. Oh yeah. Homepage is not there. Not imported. There you go. So yeah, yeah, yeah. Thank you. Must be like nuxt unimport. Yeah. Okay. So okay, that's cool. I wonder if there's any other applications.

00:57:36 - Anthony Campolo

Let's make sure you start cloning this in the song. See, dependency center stream will take like five minutes to install probably.

00:57:42 - Ryan Carniato

Okay. Okay. Okay. Yeah. Then I'm just going to make a new example. Let's get out of this. This branch. Let's make a. Actually I'm first going to go back and go here and then see the examples and. Yeah, actually what's. How do I get started on a new redwood project? Let's. If I go back.

00:58:05 - Anthony Campolo

So let me drop this gist here. You.

00:58:08 - Ryan Carniato

I'll.

00:58:08 - Anthony Campolo

I'll. I can kind of like walk you through this. You need to have it on screen, but you should just show it real quick to people.

00:58:15 - Ryan Carniato

Are we so opinionated that we want yarn? Is that, is that how this works?

00:58:19 - Anthony Campolo

Oh yes. Yarn is built in by default. This is one of those like things because it's just kind of like a legacy decision that we're kind of like really, really baked in right now. And the amount of work to make it work with like NPM pretty, pretty massive, unfortunately. So we're on Yarn three, so it works just as well as any of the new stuff. And it's like the big problem with Yarn three is getting. It's actually working through project. So if you have issues with yarn, it shouldn't show up when you're doing redwood stuff because we deal with yarn for you so you don't have to.

00:58:52 - Ryan Carniato

Okay. Okay. So then I'm. I'm gonna basically do this, right? Oh, okay. I'm actually.

00:59:03 - Anthony Campolo

Do you want TypeScript or not?

00:59:05 - Ryan Carniato

I'm not. I'm not gonna do TypeScript. This is an unpopular decision. We. I don't know if I mentioned this on stream, but. And I'm fine with it. But while we're not as opinionated as Create T3 app, if you say no to Typescript, they're just like, no, you're getting Typescript.

00:59:21 - Anthony Campolo

Edit does not do that. You can actually write Your app in JavaScript if you want.

00:59:25 - Ryan Carniato

At some point. I think It's Nexle from Create T3 app went into Solid Start and changed the default to TypeScript.

00:59:33 - Anthony Campolo

Of course you did.

00:59:35 - Ryan Carniato

So I'm okay with that.

00:59:37 - Anthony Campolo

So like that's hilarious. Oh, nexle.

00:59:41 - Ryan Carniato

So yeah, anyway, yeah, I'm gonna do JavaScript. You know what? Actually, nevermind. I'm gonna do Typescript today. No, I'm gonna do Typescript today because I feel like this is like a batteries included kind of thing. The biggest reason I still use JavaScript stuff is because I'm in like the unknown. And then I know some people use that for discovery. But then like, I get incredibly frustrated when I can't deal with something that doesn't work because it's in the unknown. You're like, oh yeah, I pull this in and why is this not working? And you're like sitting there looking at the red squiggly and be like, die. And it's like never going away. And you go like as any. And then it still doesn't go away. And then you're like.

01:00:14 - Anthony Campolo

One of the cool things I will say about Redwood with JavaScript is that because you have a fully typed database, ORM and GraphQL server, you still get autocomplete and red squiggly lines in your JavaScript as if you're using TypeScript. But you can go ahead and do TypeScript, but I'll just make that one that one caveat.

01:00:34 - Ryan Carniato

Alright, so I'm gonna go with my Redwood project, I think. Unless there's any reason to call it something else.

01:00:40 - Anthony Campolo

Whatever you want.

01:00:43 - Ryan Carniato

Yeah, let's just do that. Okay. Yarn. Okay, so that's the start here. I installed Yarn years ago, but I'm probably not on the same version of NPM now. So what do we got? NPM and yarn dash G? Yeah. Will this give me yarn one or two or three or 50?

01:01:04 - Anthony Campolo

Just. Okay, do it. Yeah, it'll be fine. Should be fine. Because Redwood uses Yarn three. But I think even if you're in like Yarn one, it will figure it out for you.

01:01:14 - Ryan Carniato

This is hilarious. Mpm's like you're. I mean, I install stuff all day long, but they're like, oh, did you know there's a new version of NPM mode? Like maybe they did. Like you're installing Yarn. Maybe, maybe. Maybe you're not happy with mpm?

01:01:27 - Anthony Campolo

Use a node version manager. If so, which one?

01:01:32 - Ryan Carniato

Use what? What's this garbage? Use dash dash location equals global. I mean, I understand they're trying to clean up the top level set of options, but.

01:01:43 - Anthony Campolo

So do you use a version manager for node?

01:01:45 - Ryan Carniato

Yeah, I have MVM.

01:01:47 - Anthony Campolo

Okay. You should switch. NVM's the worst. I know, that's. I'm a big fan of it, but yeah, I've always had issues with the NVM.

01:01:57 - Ryan Carniato

I mean, I've been using MVM since 2010 or something. I just. Or 11.

01:02:02 - Anthony Campolo

2011.

01:02:02 - Ryan Carniato

Yeah. Anyway, it's all good. I'm like the last person to update anything. Anyway, so now that you're talking about

01:02:10 - Anthony Campolo

how you're on the cutting edge of

01:02:12 - Ryan Carniato

deck, not, not, not. Not stuff that involves like ides or. Yeah, like. Like, Yeah, I. I don't care. I could. I could code in a notepad.

01:02:26 - Anthony Campolo

Ooh, Yeah. So you need to be on note 18.

01:02:34 - Ryan Carniato

Oh, yeah. This computer isn't on note 18 yet. Okay, let's. Let's get up there.

01:02:41 - Anthony Campolo

Yeah, that's one of the reasons why,

01:02:43 - Ryan Carniato

you know, and then. And then I'm gonna install a version

01:02:46 - Anthony Campolo

manager at some point. It's just like everyone's gotta have one.

01:02:50 - Ryan Carniato

Yeah, but now my Yarn command's gonna be gone, right? Oh, wait, no. Okay. What did I just do? I just.

01:02:56 - Anthony Campolo

You just ran Yarn. But try running the Redwood app command again.

01:03:01 - Ryan Carniato

Actually, Actually, you know what? It's. Because I'm. If I go Node V, I'm gonna be stones. No. Okay, I do have to do one more thing. What is it? MVM alias default 18. I have to do this because otherwise the next window I open is going to be back on 16. I have to actually tell it to change it.

01:03:21 - Anthony Campolo

Right there. That is why you should never, ever, ever use mvs. The stupidest thing ever.

01:03:25 - Ryan Carniato

MVM list. What do I have here?

01:03:30 - Anthony Campolo

Obviously, when you switch a version of Node, you want that to stay the same. I would think. Or I guess it makes sense. If you like every project, you want to think about what version.

01:03:38 - Ryan Carniato

Oh, weird. I had 18. 16, it looks like. And. And because I forgot they'd probably do this at some point. We were still on 16 this whole time anyways. Or. Yeah, so, yeah, now we're on 18 and we're good. Okay.

01:03:51 - Anthony Campolo

Look at that. You got a hydrogen in there.

01:03:54 - Ryan Carniato

Okay, let's. Let's. Let's yarn something.

01:04:00 - Anthony Campolo

Hopefully this will work. Yep. So yarn repo and. Yeah. Yes. And then give yourself commitment.

01:04:07 - Ryan Carniato

That's fine. Do you want to run?

01:04:10 - Anthony Campolo

Yep.

01:04:11 - Ryan Carniato

Yes.

01:04:16 - Anthony Campolo

You should close out all your extra stuff because you're like in a project.

01:04:20 - Ryan Carniato

Yeah, yeah, yeah. It was just because the folder didn't exist yet. And then I will make a new. I'll just like open the new window in the new location file. Open folder development.

01:04:33 - Anthony Campolo

While you're doing this, I want to talk about Redwood Cough. This is a really important thing. And multiple people on the team. Like, don't forget to talk about Redwood Comp. So Redwood Conf is the first ever Redwood Conference. Super exciting. And if you are so inclined, we actually have a code that you can use. Let me drop this. I'll drop it. The YouTube one as well. So you can get 35% off on this conference. And it's going to be basically just about Redwood the community, Redwood the people who are building companies on it. It's called the Conference for Builders. It's going to be super exciting. It's going to be in Oregon if anyone wants to check that out. Am I going to be able to drop this in the chat? Let's see.

01:05:28 - Ryan Carniato

VS code is telling me I need a bunch of new extensions. Apparently that I don't.

01:05:32 - Anthony Campolo

You don't necessarily need any of those extensions. Honestly, I have Prisma. This was the main one. Oh, I won't worry about any of that stuff.

01:05:40 - Ryan Carniato

Ah, we'll get GraphQL too. Okay. Yay. Okay. It's fine. Whatever.

01:05:49 - Anthony Campolo

All right.

01:05:51 - Ryan Carniato

React prop types of telesense. Oh, just like literally opened up every single one. Okay.

01:05:57 - Anthony Campolo

That's what I'm saying. You. You really. I ignore all those.

01:06:01 - Ryan Carniato

All right. Okay. Okay. Let's go full screen here.

01:06:08 - Anthony Campolo

Oh, and also, you can win $10,000 in cash by participating in our build competition, which also includes tickets to the conference. So check that out. This is one of the other things I was saying how it's when people ask me, like, who is funding Redwood? I always say red was the passion project of an eccentric billionaire, because that's exactly what it is. So we can do things like pay people $7,000 for winning a hackathon.

01:06:39 - Ryan Carniato

Yeah, Let me. Let me actually pull that up. Give me two seconds.

01:06:44 - Anthony Campolo

So go to build.redwoodjs.com

01:06:49 - Ryan Carniato

okay, so if there's a conference announcement that I got here first, which is here. And. And sorry, build.redwardjs.com yeah, this is for the build competition.

01:07:07 - Anthony Campolo

And then there'll be a link there to the conference as well.

01:07:11 - Ryan Carniato

All right. Four weeks to build. Three finalists, 10,000 in prizes. Okay. Yeah. So you guys are doing a hackathon. Nice. Cool. And then it. It completes on September. You have until September 10th. I see. So it's just. This is all. Just this is happening, like, right now then?

01:07:37 - Anthony Campolo

Yeah, this is right now. Yeah. So good time to be letting people know.

01:07:41 - Ryan Carniato

Okay. So, yeah, I mean, you still got, what, 25th?

01:07:45 - Anthony Campolo

Second.

01:07:45 - Ryan Carniato

You still got three weeks. Yeah. Did it just. When did it start?

01:07:49 - Anthony Campolo

Probably two weeks ago, I think. Something like that. Oh, okay.

01:07:52 - Ryan Carniato

So actually, you just have one week left. Winners announced Tuesday, 29th. What? Okay. Any time about two days before this. Oh, no, wait, wait. I'm so. Oh, this is a raffle. Never mind. I'm like. Okay, so you have till September 10th. Okay.

01:08:12 - Anthony Campolo

Yeah. So about a month still.

01:08:14 - Ryan Carniato

Yeah. Okay, so plenty of time. And then it's gonna wrap up.

01:08:19 - Anthony Campolo

Links disappear in the YouTube. So not sure how to get. Can you. Can you post things in the YouTube chat?

01:08:27 - Ryan Carniato

Yeah, yeah, yeah, I can post. It'll go in both places. Yeah. Sorry. Give me two seconds. Sorry. And I realized I wasn't actually on my screen. So you guys don't see what I'm talking about here. Right? I just gonna roll this for a minute. Yeah. Until September 10th. 10,000 in prizes. First, second, third. Runners up. Four runners up at 500. Each judge on usefulness, solving real problems, and then delightfulness. I love that as a criteria. Very cool. Yeah. Okay, let me repost those. So which one you want me to repost? It's easier if you send it to me through private chat.

01:09:07 - Anthony Campolo

Yeah, yeah. So it'll be

01:09:12 - Ryan Carniato

my camera. Just had an issue. Just a second. This one and then

01:09:19 - Anthony Campolo

this one. All right.

01:09:27 - Ryan Carniato

That's weird. Second, I might have to, like, refresh my page or something in a minute, but I'm gonna send it through. I'm also hearing a tapping sound. Is that you?

01:09:37 - Anthony Campolo

Possibly.

01:09:40 - Ryan Carniato

Because I'm not moving and I'm still hearing it.

01:09:43 - Anthony Campolo

I'm not moving at all anymore.

01:09:44 - Ryan Carniato

So it stopped.

01:09:47 - Anthony Campolo

Weird.

01:09:48 - Ryan Carniato

It sounded like someone, like, tapping on a desk. All right, let me put both links through here into the comments. There's the build. And then here is. Yeah, it's tapping. Yeah, it's coming through your side. It is completely. I muted you and it went away.

01:10:27 - Anthony Campolo

What I don't like. I'm totally silent right now.

01:10:38 - Ryan Carniato

What is it? Knock, knock, knock. Can you guys hear it on the stream? I don't know where it's coming from. It's weird when I. I'll mute myself, but I think it's still gonna. Yeah, still coming when I mute. Anyway, I gotta fix my camera. Give me two seconds.

01:10:59 - Anthony Campolo

Let me try this.

01:11:01 - Ryan Carniato

I'm gonna refresh my window.

01:11:05 - Anthony Campolo

What about now? Can you still hear it?

01:11:08 - Ryan Carniato

No, I don't hear it now.

01:11:10 - Anthony Campolo

Okay. It must have been something to do with my microphone then. Sometimes radio wave interference goes into the microphone. You can hear a radio station, but it didn't sound like that's what was happening.

01:11:26 - Ryan Carniato

All right, there I am. I'm back. Sorry. Had to fix my camera. For some reason, it just lost connection.

01:11:32 - Anthony Campolo

Weird. So you don't hear the tapping anymore?

01:11:34 - Ryan Carniato

No, tapping is good.

01:11:36 - Anthony Campolo

It was something to do with my microphone then because there's no sound coming from my room and there's no sound coming right now. All I did was just change to my MacBook mic.

01:11:44 - Ryan Carniato

Yeah, yeah.

01:11:44 - Anthony Campolo

Weird ghost machine.

01:11:48 - Ryan Carniato

Okay, so we advertise the conference, which is happening in 26 29th,

01:11:56 - Anthony Campolo

and if you use the code Ryan CARNEATO, you'll get 30 for 35% off.

01:12:02 - Ryan Carniato

There you go. Okay, so thank you very much. Use that code. All right.

01:12:10 - Anthony Campolo

Run the project now.

01:12:12 - Ryan Carniato

Exactly. So let me share my screen again. Share screen. Entire screen, this one. And let's go back over here.

01:12:25 - Anthony Campolo

Okay, so let's just start with yarn. Redwood Dev or so yarn RWDev is going to be the start command. So everything's going to start with yarn rw. That's kind of like your alias. And this is so. Because it lets you do it without having yarn, I think, in your project or something.

01:12:47 - Ryan Carniato

I'm just like. I was just looking for the.

01:12:49 - Anthony Campolo

There's two. There's three package jsons, there's one the web, and one in the API. So look at the web. One first.

01:12:55 - Ryan Carniato

Yeah, so sorry, because is It So RW dev is one word or rw dev two words.

01:13:01 - Anthony Campolo

Yeah. So each one starts with yarn, RW space, space and then there'll be a word.

01:13:05 - Ryan Carniato

Okay, gotcha. So yeah, so when I go package JSON, that's a top level one. Then there's this one. Okay. Yeah, that's what I'm saying. So this is just not.

01:13:16 - Anthony Campolo

Yeah. So the scripts you would need to. If you look at the readme it'll tell you what to do because you know.

01:13:21 - Ryan Carniato

Okay.

01:13:21 - Anthony Campolo

Usually go the read me first.

01:13:23 - Ryan Carniato

Yeah. Yarn install. Was it already installed it?

01:13:27 - Anthony Campolo

Right?

01:13:28 - Ryan Carniato

Yes, the ironwood. And then I got you. RW is short for redwood.

01:13:33 - Anthony Campolo

Yeah, exactly.

01:13:34 - Ryan Carniato

Right. Okay.

01:13:35 - Anthony Campolo

And then you can do the help to get the rest of the commands.

01:13:38 - Ryan Carniato

Okay. So I click the command and now I'm getting something opening on localhost89 a little more.

01:13:46 - Anthony Campolo

And also our faces are blocking a lot of the terminal right now.

01:13:50 - Ryan Carniato

Yeah. Okay, I'm going to change the view. This is my like this week in JavaScript view. This is.

01:13:55 - Anthony Campolo

Yeah, it's a lot better.

01:13:55 - Ryan Carniato

Yeah, this is my code view. Okay.

01:13:57 - Anthony Campolo

Yeah. So you see here we're going to have. So scroll up just a little more where it says localhost8910. That's the front end. And then there. So you see we got vite going. Now it is figuring out how to proxy to the GraphQL endpoint and then 8911 GraphQL that's the API.

01:14:21 - Ryan Carniato

Got you. Okay, well, I'm going to try and open 8910. Oh, actually 8910 auto opened it in another window for me, which is fine. I'm gonna bring it across. There we are. So we have Redwood JS

01:14:48 - Anthony Campolo

just modded because I'm also a mod. Like I see spam. Wait, I'm a mod.

01:14:53 - Ryan Carniato

Yeah. So yeah, just one second. I closed a bunch of stuff when I was trying to get my camera back.

01:14:59 - Anthony Campolo

So this is the main splash page. This is before you create any pages at all. So this is like not in your project really. This is just something that shows up if there's no pages.

01:15:09 - Ryan Carniato

Right.

01:15:09 - Anthony Campolo

If you see here, it'll say it'll give you the way to generate your first page. Then once you do that, it'll replace this with your new page.

01:15:18 - Ryan Carniato

Oh, okay. Is that what we're going to do?

01:15:20 - Anthony Campolo

Yeah.

01:15:21 - Ryan Carniato

All right.

01:15:22 - Anthony Campolo

So I usually just call it home. H O M e. Okay.

01:15:26 - Ryan Carniato

Yeah. Okay. It doesn't have to be my page. Let's call it home. Okay.

01:15:30 - Anthony Campolo

All right. And then after you do home, add then a space and a forward slash because otherwise it'll create a route called home.

01:15:41 - Ryan Carniato

All right.

01:15:42 - Anthony Campolo

Guess you want the route to be the main route. Yeah, exactly.

01:15:45 - Ryan Carniato

Yeah. Because we haven't actually looked at the makeup of this project yet and. Okay, there's just a fatal and not found page. Okay. So if I go home, does like something magically show up here? Now there it is, homepage. All right, cool. And we have a home page. Okay. So I guess a lot of what we're going to be looking at is web and then there's API. So this is like front end, back end kind of mentality when you approach this.

01:16:16 - Anthony Campolo

Yeah. And that's why there's a package JSON each, because one is a React app that vite is running and the Other is a GraphQL server that just node is running.

01:16:25 - Ryan Carniato

Okay. Okay, cool. All right.

01:16:29 - Anthony Campolo

By the way, someone asked the hard question. I said ask Anthony about defer and stream GraphQL directives and where they fit in with the server first meta framework. So once you throw in React server components, like, I have absolutely no idea. But just for people who aren't GraphQL nerds, these are basically specific GraphQL directives that are meant, that are meant to enable basically streaming. Getting streaming. Working with GraphQL is there's arguments over what is the best way to do it. This is another reason why it would be good to have a framework like Redwood to figure this stuff out for you. Because it's just the GraphQL world hasn't really decided the best way to do this. Let me see where exactly we landed on this. David Tierson has a post here, actually, let me give this to you so you can share with everybody. We use what are called live queries with that use the live directive. This is slightly different from GraphQL stream and defer, but I'm, as far as I know, it solves the same problem. So for people who want to know more about that, this is like a kind of a super duper niche thing.

01:18:01 - Anthony Campolo

But this is what we have thought about. We have docs on it. We have a whole explanation for it here.

01:18:06 - Ryan Carniato

Okay. Yeah, it's interesting because, yeah, I guess if your data is large, large enough for. This is a consideration. Most of my consideration around streaming hasn't actually been around data size so much because like browser. Yeah, it's. It's interesting. It's. It's just like it's the trade off of gzip for.

01:18:38 - Anthony Campolo

So I guess the question is like but are you building things like, you know, video streaming app, you know.

01:18:44 - Ryan Carniato

Right, so, but are they, so are they using GraphQL as the protocol? I guess that's where this comes in. Right?

01:18:52 - Anthony Campolo

Exactly. Because in general, like the redwood was originally set up as your GraphQL server is like a monolithic serverless lambda function. And it just didn't make sense to do this stuff at all. But then as more people started using it, it's become more important to have production ready server. We made it possible to just run it in a node server or a container. You don't have to run it in a lambda because this would be totally infeasible. It's a lambda function, obviously.

01:19:18 - Ryan Carniato

Yeah, yeah, yeah. It was just one of those interesting things because like when we talk about I, I mean, I've hit this recently also with chat GPT because people are really worried about like chat GPT because of the latency at the time loading. So the streaming actually is beneficial. Whereas like most services respond fast enough that the only benefit of streaming is really about service failure decoupling, not about the actual fact that it streams. So it's interesting when like, like it's funny because I'm out there going, yeah, streaming, get streaming everywhere, stream, stream, stream. But it's actually has mostly to do with like improving the speed of loading by reducing coupling rather than the fact streaming itself.

01:20:02 - Anthony Campolo

Because, I mean, because you're talking about HTML streaming though.

01:20:05 - Ryan Carniato

Mostly. Yeah, because h, because HTML actually streams anyway. If you send HTML a large chunk of HTML, the browser will chunk it up and send it anyway. So it's like. Exactly. There's no latency there, usually from the source. But if the latency is from the source, then this becomes a much bigger feature. I was trying to think of like

01:20:25 - Anthony Campolo

if you're someone who has a full stack app that they built by themselves and there's no backend team, then this may come up.

01:20:31 - Ryan Carniato

Yeah, yeah, I was trying to think of like what scenario where you'd be running this through GraphQL. But I guess if your whole backend was GraphQL, then there you go.

01:20:38 - Anthony Campolo

Yeah, that's kind of the dream is that ideally you shouldn't have to reach out of GraphQL because the whole dev experience and everything in the way the framework works and where the front end queries works all based around GraphQL.

01:20:48 - Ryan Carniato

Gotcha.

01:20:48 - Anthony Campolo

Although we do also give you the ability to create rest endpoints if you want. That's also something that exists.

01:20:54 - Ryan Carniato

Okay. Okay. Yeah, I was just looking around here.

01:21:02 - Anthony Campolo

This is new I've barely even seen this.

01:21:04 - Ryan Carniato

Yeah. So there's a redwood plugin for. For vite.

01:21:07 - Anthony Campolo

Look at that.

01:21:08 - Ryan Carniato

So simple enough. Just set up your config. Tsconfig again. Stand turtle.

01:21:15 - Anthony Campolo

Yeah. Big shout outs to Danny, Chowdhury and Toby, who are the ones who actually made this work over a very, very long period of time, so. Not me. I'm not the one who integrated vite.

01:21:28 - Ryan Carniato

Jestconfig. Most of the stuff comes in forms. Router, web. Okay. And then you got react and react. Dom 18.2. Okay. Public folder. I'm gathering it'd be like a fave icon. Okay. Robots, text. Cool. And then immediately we meet components.

01:21:47 - Anthony Campolo

Yes, you have components and no layouts yet. You can generate those just like you generated the page. Right. Now the home page. That is the main thing that you generated. So go to home page.

01:21:57 - Ryan Carniato

Two seconds. I want to see something first.

01:21:59 - Anthony Campolo

Sure.

01:22:00 - Ryan Carniato

So this is our entry route. We have an error boundary wrapping. The provider wrapping routes. Interesting. I wonder if the router has suspense built in. That'd be an interesting choice.

01:22:10 - Anthony Campolo

Anyway, so that's the thing. That's the router with suspense built in that we were talking about earlier, Right?

01:22:14 - Ryan Carniato

Yeah, it's one of those things. Yeah.

01:22:17 - Anthony Campolo

So we'll get to the routes file

01:22:19 - Ryan Carniato

and then entry client is a hydrate. If it has children already. Otherwise render. That makes sense. Where's. Okay, is there an entry server? Or is that like. Is that.

01:22:38 - Anthony Campolo

Yeah, that'll be in the API.

01:22:40 - Ryan Carniato

Right, but. But I'm not talking about that. I'm talking about. Okay. Okay. Redwood SSR is right.

01:22:49 - Anthony Campolo

We should. Now that's. That's part of getting beat in. We couldn't do SSR before. Before B. So it's like. This is actually. This is turned on.

01:22:59 - Ryan Carniato

I mean. I mean, we can. If we. We can. This is what I was looking for. There's no render to stream or render to string. That's what I was looking for. Like we're. Maybe it's like an implied hidden thing. I want to. I mean, see what the default.

01:23:10 - Anthony Campolo

There's. So you're gonna want. Let's look at that actually.

01:23:16 - Ryan Carniato

Right. Because there's nothing in the home page. I've already gone too far.

01:23:22 - Anthony Campolo

All good. There's the pre render thing. This is what we were doing if you wanted to actually. Hold on. Sorry. We broke really important here. Render modes. We have something called render modes. This is very, very new. I forgot about this. This is what you need right now.

01:23:37 - Ryan Carniato

Okay.

01:23:47 - Anthony Campolo

Yeah. So now we have this new thing called render modes, which is where you can turn on things like SSR and streaming.

01:23:53 - Ryan Carniato

Okay, okay. But. Okay, so the why is this? Actually, I'm kind of confused why this page didn't work. Is it localhost89?

01:24:05 - Anthony Campolo

So basically what's going to happen is in your routes TSX file, you're going to have render mode equals and then you're going to pass, you know, either static or server.

01:24:15 - Ryan Carniato

Okay.

01:24:15 - Anthony Campolo

Or stream.

01:24:17 - Ryan Carniato

Okay.

01:24:18 - Anthony Campolo

Or client.

01:24:19 - Ryan Carniato

Before we're even getting there, I just added a page. Is it. Okay, so this is the default page, what it looks like, right?

01:24:27 - Anthony Campolo

Yeah.

01:24:28 - Ryan Carniato

And then if I go to my network doc. Okay, Refresh. Let me look at you.

01:24:41 - Anthony Campolo

X out that thing on the bottom too.

01:24:43 - Ryan Carniato

Yeah, it's. I just shrink it down for the moment. Yeah, yeah. Okay, so it is CSR by default, right? Right. Please keep this div empty. Good job.

01:24:58 - Anthony Campolo

So we can change this to pre rendering it.

01:25:01 - Ryan Carniato

Right. And that's index HTML that I'm looking at right here. Here. Got you. Okay, so this is like what the reason I'm talking about. I'm personally interested in this area because I've been having. We tried this really cool thing where we made server rendering and CSR have the exact same entry point and you could just switch the mode like we're talking about right now.

01:25:23 - Anthony Campolo

Yeah, right.

01:25:24 - Ryan Carniato

Except it's a freaking pain in the ass trying to generate the index for the build and then like it was breaking on Docker and all this stuff. So then I got to a point where I'm like, fine, maybe I'll just do an index HTML and like, like anyway, you know, like. But I mean, to be fair, I want to get away from that again still. So I'm not sure. It's just one of the things like it just never worked properly. But there's an index HTML here because one thing I was thinking about is a single page app and like, sorry, a server rendered app and like a client rendered app have a very different usage of this, so to speak. Because on a. On a single page app, or sorry, a client side rendered app, rather you might put something in really generic like our site, because you don't know what any. Every index gets served for everything, so you don't even know what page you're dealing with. But on a server rendered site, when you have like the document, you might like change it for every page that you hit for the first time because the meta tags will be specific to the page.

01:26:17 - Ryan Carniato

It's something you can't do until we

01:26:20 - Anthony Campolo

think about that in our render modes. Rfc. Is that exactly Specific thing, whether you want to include the meta or not.

01:26:26 - Ryan Carniato

Right. So, okay, let's say I want to do ssr. How do I switch my render mode?

01:26:33 - Anthony Campolo

Let's see if render mode is turned on by default or if we have to do something else. So go to your route and then go. So routes tsx and then go to the route that got created with the green line and add another one that says render mode. That's camel case. Like, add it. Like I said, path, page name. Like render mode.

01:26:53 - Ryan Carniato

Okay.

01:26:54 - Anthony Campolo

Like.

01:26:54 - Ryan Carniato

Oh, you okay. Render.

01:26:56 - Anthony Campolo

Yep. And then have it say, let's try static first and see what happens.

01:27:03 - Ryan Carniato

I've got HTML and I got stream.

01:27:05 - Anthony Campolo

Interesting. Let's try. So let's try static and see what happens.

01:27:09 - Ryan Carniato

Okay.

01:27:11 - Anthony Campolo

This should be basically the same as the pre. Pre render. So let's see. And maybe we have to turn on like an experimental feature is probably what the case is. Okay.

01:27:25 - Ryan Carniato

Okay. No, that one was in. No dice. What are these other interesting render modes? Let's try. And I wonder if it's all the same in dev. There's also a possibility that in dev it doesn't do. No, I mean, that would never fly. What's the other one? Stream. Let's see again.

01:27:50 - Anthony Campolo

Let me see. Danny's got an example Repo.

01:27:52 - Ryan Carniato

Here.

01:27:53 - Anthony Campolo

Let me take a look at this.

01:27:55 - Ryan Carniato

Yeah, I forgot about this. Someone told me this a long time ago that Redwood didn't do ssr. And it was. So that was the actually most standout thing. People talking about the opinions, and I was like, this is like, I haven't seen a meta framework not do ssr, but again, it makes sense.

01:28:09 - Anthony Campolo

Pretty big. Yeah, it's pretty big that everyone was complaining about. Yeah.

01:28:15 - Ryan Carniato

Wow. Jumping to server components is like skipping. It's like.

01:28:20 - Anthony Campolo

Well, yeah, that's how we're kind of doing them in tandem to a certain extent. But I think we're going to have the render modes before react server components, I think. I'm not entirely positive about that, but

01:28:30 - Ryan Carniato

what I'm thinking is what's interesting here, and the first thing that comes to me is this is a per route level config, which is very, very, very cool. Okay.

01:28:40 - Anthony Campolo

I think I actually know what's happening here. Render mode should be HTML. Actually, the RFC is out of date.

01:28:46 - Ryan Carniato

Okay, sure. So it's HTML. Is it because I'm in dev like that, it never server renders.

01:28:54 - Anthony Campolo

So if you want to server render it, let's try for that. Yeah, I guess try stream, see what happens.

01:29:02 - Ryan Carniato

I already tried stream.

01:29:04 - Anthony Campolo

All right.

01:29:05 - Ryan Carniato

Neither of them server rendered.

01:29:06 - Anthony Campolo

Okay.

01:29:08 - Ryan Carniato

That's fine. We can get there again. I just. It's just.

01:29:12 - Anthony Campolo

Let me. Let me try this other repo. Let's. Let's have you clone this one down. So this is Annie's example. Has render modes turned on for sure.

01:29:27 - Ryan Carniato

Okay.

01:29:30 - Anthony Campolo

Been talking about render modes in the V6 release note. So this might not be fully baked yet.

01:29:37 - Ryan Carniato

So. But if I understand, if I'm understanding correctly, pre V6, you didn't do SSR in correct.

01:29:46 - Anthony Campolo

Yeah, we might still not do SSR. That's what I'm trying to figure out right now.

01:29:50 - Ryan Carniato

Okay. Okay, Fair enough. Yes. Do you want me just clone down this thing?

01:29:57 - Anthony Campolo

Yeah, yeah, give this one a try. This should already be pre configured for render modes.

01:30:01 - Ryan Carniato

All right, let's go over here. Another example. Okay, let me see.

01:30:10 - Anthony Campolo

And this is on which Redwood version? Yes, this is on. Yeah, this is on. Experimental build of Redwood right now.

01:30:41 - Ryan Carniato

Okay, so this is. So six might not even. Okay, I see.

01:30:47 - Anthony Campolo

So this is probably not. Yeah, so that's why we said we turned on suspense. But not yet. Server side rendering essentially.

01:30:56 - Ryan Carniato

Okay. I mean, we don't have to.

01:30:59 - Anthony Campolo

I'm kind of curious. I want to see just how far we can go with this. Let's see. You have to reinstall your dependencies though. So do yarn again or just yarn with yarn. Yeah.

01:31:13 - Ryan Carniato

Okay. Interesting. Yeah,

01:31:19 - Anthony Campolo

people have general questions about Redwood they want to ask in the chat. If so, hit us with it.

01:31:28 - Ryan Carniato

Okay.

01:31:29 - Anthony Campolo

I've dropped a lot of links so far, so try and collect as many of those as possible for the show notes.

01:31:43 - Ryan Carniato

Okay, just a second. That one is off. So just let me check Data map. We might not have. You know, we might not be in the right. We might not be lucky today.

01:32:03 - Anthony Campolo

Well, this is probably because there's a. There might be a back end setup

01:32:06 - Ryan Carniato

that we got that we're missing. Right, right. Because we don't have like something for Prisma probably or no session secret. Okay. We need to try by.

01:32:15 - Anthony Campolo

Let me. Let me just real, real quickly look

01:32:17 - Ryan Carniato

at the PB Auth regards. The second secret environment that's used to encrypt your stack. Use yarn RWG secret.

01:32:23 - Anthony Campolo

Okay. It's never SQLite. You should do Yarn Redwood Migrate or Prisma Migrate DEV should work. So yeah, kick out of that entirely. So Yarn rw. Yeah, so Yarn rw Prisma. Yep. Migrate. Yep. Dev. Yep. Try that. So what this does? This sets up your SQLite tables. Boom. Now try it.

01:32:55 - Ryan Carniato

All right. SQLite. Oh, they still want my session secret.

01:33:03 - Anthony Campolo

Go to.

01:33:04 - Ryan Carniato

They do have a bunch of instructions on how to do that?

01:33:08 - Anthony Campolo

Yeah, you're at. Yeah. So you have to generate a secret. It's pretty simple. There's a command for it.

01:33:13 - Ryan Carniato

Mind you, this did load, but. But, but.

01:33:17 - Anthony Campolo

But I can show you how to set the secret. It doesn't. It won't take very long.

01:33:21 - Ryan Carniato

Okay, this looks like it's server rendered killer. Yeah, I see some comments with dollar sign markers and. Yeah, looks like it's server rendered.

01:33:41 - Anthony Campolo

All right. Redwood support server side rendering. I've been waiting three years for the this moment.

01:33:49 - Ryan Carniato

There you go. Yeah. Okay.

01:33:51 - Anthony Campolo

Literally, I think it was like the 16th issue ever written or something like that was like, when's red? We're going to support ssr. So here we go. How do enable SSR by default? Issue number 18, first written January 8, 2020.

01:34:10 - Ryan Carniato

Yeah, because. Okay, so yeah, this is the render mode thing. No, that's ours. Where is it? Let's look what they did here. So when I look in the source here. First of all, there is. Huh.

01:34:23 - Anthony Campolo

There is an entry server now, Andrew Clyde.

01:34:25 - Ryan Carniato

That's funny. They're using the Solid Star convention rather than the Remix convention. That's interesting.

01:34:30 - Anthony Campolo

Hey, look at us go.

01:34:31 - Ryan Carniato

Yeah.

01:34:32 - Anthony Campolo

But yes, we wanted to rip off a different framework because you wouldn't yell at us for ripping you off.

01:34:38 - Ryan Carniato

Obviously, because I've already ripped off everyone else. Okay. Hydrate root. So the entry client is basically the same entry server now has. Yeah. Okay. Location provider, blah, blah, blah. Document component from document. So the base setup here. Yeah, See, this is the other way to do it.

01:35:08 - Anthony Campolo

So what's. What's different between this and Solid start? Well,

01:35:14 - Ryan Carniato

because this is actually a problem that I've been like revisiting here by extracting the document here with the lowercase. Right. And this is what, like, this is an option we can do as well. Then you can do something. Oh, and there's an index HTML. Okay, we'll ignore the index HTML for a moment. This is like all of the above.

01:35:37 - Anthony Campolo

Okay.

01:35:38 - Ryan Carniato

Now the thing is, that's probably to

01:35:42 - Anthony Campolo

keep compatibility with all previous Redwood apps. And I would bare minimum, we can't get rid of the index HTML at this point. It's infeasible.

01:35:49 - Ryan Carniato

But the thing is, if you have your main root entry or whatever you set up and you have the lowercase HTML, you can't use a client side. Client side can't handle you going. It depends on how your framework renders. But in Solid's case, it can't clone an HTML document. It doesn't work. But generally, even with React, what you're going to do with this, this doesn't work. But on server side you want this and this is what I'm talking about, the dynamic injection points. The thing is what you can do here, see entry, server and entry, they both import document. And as long as you put in a separate component, it should be. Oh, actually this isn't even doing anything fancy, but it is possible to get into a zone where you could say, if you're in a CSR type mode, just skip this. What Solid's doing right now, which I'm not super stoked on, is we made all of these capital imports from the framework and what that does is it no ops. The essentially the like, the stuff in between. Like it just like if we're in a client side build, those components, just return their children, they do nothing.

01:37:01 - Ryan Carniato

And then for a server build, we actually generate the HTML with it. So you can have the same entry point for even a CSR build and we basically just skip it on the client. On the server we generate the string. Like at build time we just run it. And similar we have a body tag. And. And on the server, what we do is when we hit the body tag on this mode, we just don't render the children and when we're in CSR mode so that we only render the index up to the body.

01:37:29 - Anthony Campolo

Right. You said that build time though. So do you have a way of SSR at runtime?

01:37:33 - Ryan Carniato

Yeah. So at dev. In dev, this is where this got kind of nasty. We still have that behavior. But the problem is Vite would like still pull in a bunch of crap and then people would complain. They're like, why is my client only module on the server and crashing? So this is like part of why I've been having things. So we end up swapping out the root, but then people didn't get their proper meta tags. Like it's been a mess on start. This is one of those slowdowns is getting CSR to work because most frameworks don't support both. The only one that supports both that I know that works really well is Sveltekit. And the reason Sveltekit works well with both is they always just use index HTML. So your app entry does not have like this. But the trade off of doing that is. Well, I can show you right now. Sveltekit, or was it kit.svelte?

01:38:22 - Anthony Campolo

yeah.

01:38:23 - Ryan Carniato

The trade off of taking this sort of approach is that. Oh, what is it? It's not routing, it's like project structure. Yeah, the. The trade off of doing this sort of Thing is you, you, you, you end up with like another dsl. Like I wonder if there's like I'm not if. I wonder if there's a place I can see it. But they probably have somewhere in the docs where you can talk about app.HTML. i want to say it's called Did I not get that app HTML? No, I'm not finding it right at the moment. But essentially their HTML has like not just one location. Like you know how the Redwood app had like, oh, here's the root, don't mess with it. It's like you've got like six different types of tags that you can pass passed into the HTML file. So you make sure that you, you can insert all the stuff and have the controls and it has a completely different syntax and svelte syntax and it, you know what I mean? It's like, it's like a new language just for this one file. So trade offs there. Anyway, I was curious to see what was doing here.

01:39:34 - Ryan Carniato

Next has another approach where. But again, Next's approach is basically server component forward. Like, like for the page directory versus the app directory. The app directory does something that would never work through csr. So like not many people have gone. Almost no one has gone CSR and SSR in the same app with just a toggle config. We tried.

01:39:56 - Anthony Campolo

It seems like that's what we're aiming for and with how we have it set up with the route file and our own router, it should eventually be possible with the render mode. So if we get that into B7 it sounds like we'll be ahead of the game.

01:40:11 - Ryan Carniato

Yeah, I mean that was our goal as well, which is we have something that kind of works, but not really. That's why I'm like revisiting it right now. It's probably like the source of like the one, the biggest things because a lot of people come in and this, this is something at Redwood people would hit too. People building apps, people not building like their E commerce sites come in solid start and they're like, they want to use all those really client side libraries that no one's got SSR support for. Like Aggrid is a perfect example. We had Nile on stream, but you know, crazy graph interactive, like table, you know, stuff. And there's no ssr. They're not going to ever support ssr, but it actually breaks SSR for us. And then it's like they're like, okay, fine, you know what, I don't actually need SSR for my app. I'll just flip it off and Then it's like, yeah, if you're doing that today in Solid Start, you might hit issues as well. So it's like rocking a hard place until we solve it. That's why I want to focus on it because you can go build a client side rendered app installed using the templates like whenever you want.

01:41:10 - Ryan Carniato

Not using Solid Start, you can build a server rendered app installed start pretty well. People trying to build client side rendered apps in Solid Start that have a little bit more of an issue. So I want to fix that.

01:41:20 - Anthony Campolo

And it's so funny how you've arrived at the thing Solid was created to do can no longer be done.

01:41:28 - Ryan Carniato

So yeah, it's, it's this kind of back and forth play and like how does index HTML fit into it? Trying to come up with this? There's like, I've thought of several different options. They start getting clunkier and clunkier as you go. So it's like, like, as I said, I was kind of saying here is like, how many entry files do you need at this point to get there?

01:41:49 - Anthony Campolo

It's like we have all of them. Yeah, yeah.

01:41:52 - Ryan Carniato

So anyway, this is the cool thing

01:41:55 - Anthony Campolo

though about with the Redwood project though, is that once this is all worked out and you're generating your project, you'll never need to touch any of those files. Like they'll exist. Whichever ones end up existing, you'll never think about them. You'll only have to configure your stuff within your different routes after you've actually created your pages and have an app. So again, this goes back to Redwood is figuring all this stuff out for you. It's taking us a very, very long time because obviously it's kind of complicated, but it's going to get to the point where you basically just put a single word to say, I want this to this route to render this way. And that's going to be the ultimate dev experience.

01:42:26 - Ryan Carniato

Yeah. Okay. I want, I'm kind of interested here because this, this app actually has more for me to look at a little bit because like when I go into

01:42:36 - Anthony Campolo

this route, put in the secret then and then we can look at the dashboard. Okay.

01:42:40 - Ryan Carniato

Okay. So let me finally listen to what they were yelling at me about.

01:42:44 - Anthony Campolo

You scroll down all the way to the bottom because it's got given to you a couple times. Yeah, that's the main one. Yeah. And don't worry about like leaking X. This is just local. Eventually just tear this down. You know, this is all on a SQLite database. This isn't in prod. Yeah, but like, so now you're gonna copy paste that, put in your EMV file. Right.

01:43:04 - Ryan Carniato

But this is all local right now. Right? Like there's no database somewhere computer. Yeah. So no one cares. Okay.

01:43:10 - Anthony Campolo

Yeah. So you could put it on railway really easily. So create an actual env. Don't use any of the example or defaults. Create a file called.env and.

01:43:20 - Ryan Carniato

And this is top level.

01:43:22 - Anthony Campolo

Yes. And this is already in your git. Ignore.

01:43:27 - Ryan Carniato

All right. And then it's session secret.

01:43:36 - Anthony Campolo

Let's see if that works.

01:43:38 - Ryan Carniato

All right.

01:43:43 - Anthony Campolo

You just close your other project right now. Probably not going back to it at this point. Okay. You want to.

01:43:51 - Ryan Carniato

Yeah, no, it's. It's fair. I. Yeah. Well, if. If this all works and it's inspectable, then we should be able to.

01:43:59 - Anthony Campolo

All right.

01:44:01 - Ryan Carniato

Okay. So this looks like it's not complaining at me anymore. I am on localhost.

01:44:08 - Anthony Campolo

So try this. Go to localhost8911GRAPHQL.

01:44:13 - Ryan Carniato

Yeah. So we have what do you call it? Inspector or whatever graphical type thing. Whatever it is. Yeah, yeah.

01:44:21 - Anthony Campolo

And then so before you run this query, add current user under version. You should bump up your font too.

01:44:29 - Ryan Carniato

Yeah.

01:44:33 - Anthony Campolo

I love GraphQL. A lot of people seem to not, but I'm a big fan.

01:44:37 - Ryan Carniato

Sorry, sorry, what do you said?

01:44:39 - Anthony Campolo

So just add. Just add a. Yeah. And then current user. Yep. And then run, run the, hit the hit the plus. All right, great. So we do not have a user, but that's probably okay. And then that's the version we're on. So that's why I say we're on like an expensive experimental build right now. So let's see. Hold on real quick. Let me just kind of look at what's going on in this repo. You can go back to the front end now

01:45:12 - Ryan Carniato

because. Okay. I mean, what's cool. It's. It's kind of. Yeah. I. We actually get to see everything. Okay, so use auth wraps the whole thing and then slash landing page. But the landing. Do you know what the problem is? The landing page? I mean, maybe this is just because it's a demo right now. Okay, so first of all, let's look at the thing here. Landing page, landing page task, landing page story, landing page route, hooks. Okay, so I don't just got a page. I got lots of stuff. I'm not going to route hooks. I'm gathering. This is our load and then this is our meta. Yeah, okay, I understand.

01:45:56 - Anthony Campolo

Yeah. And then the stories is. That's the storybook file. And the test, the Test files. Anytime you generate stuff, it automatically generates a test for you. So you're kind of getting TDD out of the box and then a storybook file. So you just run your storybook command and get storybook working without having created. Create a individual storybook file for each thing then.

01:46:15 - Ryan Carniato

Yeah, Use server data. So yeah, this is our loader pattern navigate, hero navigate, link to blah blah, blah. Route simple. Click to go Simple. Okay, so first nav layout. When I go to the layouts for a second. So layouts, nav layout. Because I think the nav layout just

01:46:33 - Anthony Campolo

wrap pages and then it accepts the page as the children's voice Layout.

01:46:38 - Ryan Carniato

Yeah. So layout of layout layout. Yeah. This is an interesting approach. Right. So your nested routing isn't because you don't use a file system or isn't actually nested. It's interesting. The guys in Astro is talking about nested routing. They're. They're talking about a system like this. Yeah. And you pass children through and children actually end up being the outlet. That's actually a necessity for server component. Side note, something I've been thinking about also with solid router and remix price, I think about a bit because there's no context on the server in the server component land for good reason. Don't want to explain that right now. Using props children from the. From the route or layout components is really kind of the way to do it. Okay, so I understand that. But what was interesting here is based on whether you're authenticated or not, the links change. And my problem that I was having having was none of the links seemed clickable because I was, I was like, okay, I'm on the landing page. I'm not logged in.

01:47:39 - Anthony Campolo

Right.

01:47:40 - Ryan Carniato

But then it was like, why can't I. Sorry. 80, 89, 10. Yeah, I was like, okay, I'm here. These links are not clickable. Maybe these links are. Okay, so this is just something else.

01:47:57 - Anthony Campolo

Okay, this might just be because this is the demo. We didn't set up those correctly. I'm looking in there right now just to make sure.

01:48:05 - Ryan Carniato

Okay. Okay. So there is a sign in and sign up so I can sign up.

01:48:11 - Anthony Campolo

You should be able to. That was the point of creating the secrets that your auth would work.

01:48:16 - Ryan Carniato

All right, this is very much a demo. So my username is going to be Ryan and my password. Ooh, see that I found it is going to be stream or something. Oh good, it's hidden at least. And I'm going to sign up right now. No, I'm not going to save that password. Okay, so now I'm logged in. So we got auth working. And now when I go to recipes, they tell me empty and I can log out.

01:48:50 - Anthony Campolo

Okay. So I think you might be able to create a recipe if you go to forward slash recipes.

01:48:56 - Ryan Carniato

So I want to check something. It's so weird. I keep on seeing this weird flicker, and it's like. I think it's a layout shift because I think the page gets sent with all the content. It does. Okay. Okay. So it's just a layout shift. Okay, it's fine. All right. See? All right. Did I. Did I sign myself out again? I didn't change any code. Oh, no, I'm logged in on this page, just not on the other page. Okay, that's fine. Refresh. I'm in. Oh, the about page just doesn't know how to handle. It's probably an unauthorized page, like one that doesn't require authorization.

01:49:38 - Anthony Campolo

Yeah, it doesn't. And that's when it has the render

01:49:41 - Ryan Carniato

mode turned on and it. And it's like not realizing which mode I'm in. It'd be interesting if this is just like a server client mismatch thing.

01:49:51 - Anthony Campolo

Should I go to simple? Forward slash simple.

01:49:55 - Ryan Carniato

Yeah, that's off the mage pane. Go to simple. Don't know what this is supposed to do. Redirected page. Beautiful. So they're showing like a page intercept redirect, if I understand. Because simple is slash simple. And then we end up on redirected simple. I think maybe just the current state of the project is someone playing with a feature like server redirects. That's fine. I'm getting what this is putting out there because there's no file system routing. This is just really actually. Just convention. It doesn't actually matter. So what's cool about this kind of setup is that. Your pages are mostly flat. You just have. Well, actually, yeah, I guess your pages are flat. It's interesting, though, because your layouts can get pretty hefty when you do this sort of approach. But they also go to.

01:51:04 - Anthony Campolo

If you go to forward slash admin. Forward slash categories, then you can see the. The dashboard.

01:51:10 - Ryan Carniato

I imagine that layouts can also have route hooks,

01:51:18 - Anthony Campolo

So. Yeah, that's a good question. Not sure.

01:51:22 - Ryan Carniato

Okay,

01:51:25 - Anthony Campolo

so no, like, just admin. Forward slash categories. Like the word categories. Just like that. Yeah.

01:51:33 - Ryan Carniato

No category.

01:51:34 - Anthony Campolo

Okay, so this might be. You might have to rerun yarn Migrate Prisma. The Prisma command, because I spun mine up and I'm able to see categories there. So I think you have to run that once you already have the secret created, I would guess. So rerun your migrate. Yeah, that one. And now see what happens. Okay, that should be good.

01:52:13 - Ryan Carniato

You can tell when the page is client side rendered.

01:52:19 - Anthony Campolo

8910, forward slash admin. Forward slash categories. Huh. That's really weird because I cloned down the exact same thing. It seems to be working.

01:52:27 - Ryan Carniato

All right, I can add a new category. Click this plus button. No, yeah, new. Okay.

01:52:38 - Anthony Campolo

Yeah. So on mine, I. I can't add categories either, so the mutations are probably not set up yet, which does not surprise me.

01:52:46 - Ryan Carniato

Okay. But I mean, this is cool. This is cooler than what I was expecting. I was like, okay, I'm gonna come in. I mean, to be fair, we probably should teach some people about, like, actually look and teach me actual redwood. Like, but this. This is like. This is like, all the cool stuff that I want to. I like looking at. This is usually one, like, later on

01:53:03 - Anthony Campolo

in the stream, I'm like, I'm sure valuable to the. To the main team. Team. If you ever, like, poking around and be like, oh, I have to think about this too, you know?

01:53:12 - Ryan Carniato

Yeah, yeah. No, but, yeah, I mean, I get what's going on here structurally. I mean, we could just keep on trying routes. Right.

01:53:24 - Anthony Campolo

Well, so on your homepage, you don't see any recipes at all now, Right now, Right.

01:53:28 - Ryan Carniato

Yeah.

01:53:29 - Anthony Campolo

If so, I should share mine because mine's actually working.

01:53:31 - Ryan Carniato

Okay, cool, cool. Share your screen and I'll put it up there.

01:53:35 - Anthony Campolo

Yeah, Let me just make sure all my stuff is in a good spot.

01:53:48 - Ryan Carniato

All right. I mean, the other thing that I'm obviously interested in, everything we've been doing so far makes sense to me. Like the hooks. It's like dot server and sveltekit or whatever. Like, different conventions we use of data. But you're gonna have to tell me what a cell is, because we haven't actually gotten to that point here. And I think I saw it mentioned somewhere. Recipe, cell recipe. Or maybe that's a UI thing. Like recipe card, recipe sound like maybe not. Okay, you good, Anthony? You're muted right now.

01:54:30 - Anthony Campolo

Yeah, you can put mine up.

01:54:32 - Ryan Carniato

Okay,

01:54:35 - Anthony Campolo

so now you see here. So if I went back to admin categories. So these are. We have these categories here. Each one has their own specific page. And this is the scaffold that gets set up for you automatically. So you basically have a crud interface for all your models. And that's thing.

01:54:53 - Ryan Carniato

Question. Did you change your mic when you went mute? Just. Just wondering. It just got kind of in a different crunchy. Okay.

01:55:08 - Anthony Campolo

Actually. Oh, wait, hold on. No, you're right. Yes. Okay, There we go.

01:55:15 - Ryan Carniato

Better.

01:55:16 - Anthony Campolo

All right.

01:55:17 - Ryan Carniato

Yeah, you're back. It was. It was giving me a little of the harshness.

01:55:20 - Anthony Campolo

It went to my. Yeah, it went to my earbuds. Yeah. Okay, cool. So this is. Now this is like a recipe page. All right, See what's going on here? So we hit our. So this is our endpoint with the GraphQL endpoint. So what we're doing is we're sending a query usually. Yeah. So let me check this out. We should be able to query this directly. Not like that, though. This is find recipe query. And that query will be here. Let's do that. And then we need the ID right here. Boom. Okay, cool. This is the actual. So the back end is this GraphQL API. This is the query. So what a cell is. And you said you wanted me to explain a cell. So the cell. It's a way to declaratively set up your data fetching. When it's loading, we automatically handle the loading state. When it's empty, we automatically handle the empty state. When there's an error, we automatically handle the error. And when there's success, this is the component you would actually write. Right now we're pulling in this recipe component. The recipe component then is. Where's that

01:57:10 - Ryan Carniato

interesting recipe?

01:57:13 - Anthony Campolo

So the recipe is this. That's the recipe component. And then we're using this react markdown thing to render it. It's basically just spitting out a bunch of content, it looks like. And then that. What we're seeing here is the success is basically put into the page. So then this page would be the recipe page. So that's down here. Then the recipe page brings in the recipe cell. So you place the recipe cell where you want the data fetching to actually happen and then display. So if there's an error, it would display the error here on the page. That makes sense.

01:57:57 - Ryan Carniato

Yeah, I guess. Yeah. And it must be. See, I. I obviously have mechanical questions, but I mean, it's. I mean, this, this. This looks like it encourages nested data fetching. Right. And so, like I'm pretending, like, pretend I'm in CSR land, which is what Redwood generally has been to this point. And I'm behind a code split route. So I'm on one page and I go to the next page. Does that mean that I have to load the JavaScript to get down to where I fetch that thing to make my API call? Like, you know, I mean, like, there's a. It's. It's a. It's. There's an implicit waterfall there, like the loader pattern for example, in Remix. And looks like it's these route data hooks in the, in the new stuff will. Will hoist the stuff up, which means that it'll fetch at the same time as the route changes versus fetching after the route changes. And I, I guess that was my interest about the cell architecture is the cell architecture is like innately nested, right? Like, unless it's the compilers like hoisting out the fetching.

01:59:09 - Anthony Campolo

But yeah, the idea is that your, your cell, you're putting on a specific page. So. So I guess if you wanted to have the same cell on multiple pages, then yeah, I'm not sure exactly how that would work. And I figured out here you can save these and then go to your recipes. Let's see if that actually worked and saved it.

01:59:31 - Ryan Carniato

Yeah. See the funny thing is the links, when you've got it small, don't work. But if you move your dev tools over and the layout shifts, the links will work. The, the top level links are hidden work. Those ones work.

01:59:43 - Anthony Campolo

Ah, interesting. Okay, that makes sense.

01:59:46 - Ryan Carniato

Yeah, but. Okay, yeah, yeah, sorry. It's just, it's just interesting from my perspective. I wonder if there's anything that gets done there because. Oh man, this is. Yeah, okay, there.

02:00:01 - Anthony Campolo

And so when you save it, then it saves it to your. Right. So we do have actual functionality here where stuff is being written to the. The database.

02:00:10 - Ryan Carniato

The thing is, the cell architecture will work very well with server components. Not very well, but like will work decently well with server components. Ironically. I actually think unless there's like a special step that actually hoists them up, it's actually detrimental for client rendering. Ironically.

02:00:24 - Anthony Campolo

Interesting.

02:00:25 - Ryan Carniato

Like just mechanically because of the implicit waterfalls that would come from it. You want to hoist data fetching. Server components are kind of like, yeah, you don't really need the hoist data fetching. You know, like waterfalls are Okay, I wonder, I kind of wonder about cells like, like, because it's a few years ago everyone did stuff like this and no one cared. And then like, I mean I cared. That's why I was killing them at benchmarks. But then like remix and they're like, look, we care. But like even react router is like that because I guess my, my question is like it would take a compiler, right? This is the relay trick to a degree. Right. Like your GraphQL queries, if they like use fragments, could get around this. But like I'm not sure how the cells play into that like maybe. Maybe the cells just represent the loading state.

02:01:15 - Anthony Campolo

So as long as here that the. The cell is based like Redwood knows the cell just because it's like has cell in the. In the title. It just like moves stuff around with its. You know, kind of.

02:01:26 - Ryan Carniato

Right. So what I'm I'm wondering is like I guess the queries can get hoisted and then the cells can be used just for the UI state.

02:01:33 - Anthony Campolo

So you do things called before query and after query.

02:01:36 - Ryan Carniato

I'm not sure if that's what I'm talking about is like when a route changes, does it wait for the JavaScript to load before. Before it fetches anything? Which is an interesting question. It. You'll see the cells are supposed to font. Oh yeah. Was there. And if the page has a cell you'll see the cells reconstructs which may have contributed to the error. Okay. No, yeah.

02:01:58 - Anthony Campolo

I'm not sure about how the router and the cells work together.

02:02:03 - Ryan Carniato

I mean could we confirm it very easily? Yeah, whatever.

02:02:13 - Anthony Campolo

Yeah. I mean I think it happens after the page loads. That's just kind of how it works though, right? Yeah.

02:02:18 - Ryan Carniato

Okay. Yeah. Yeah. There's. It's. It's interesting because I can see. It's funny. I. It seems like the cleanest way I can picture react written in 2017. That's. That's. That. That's what I. That's. That's like what were my head.

02:02:35 - Anthony Campolo

That's really funny though because this is like written in like 2018, 2019. So it's.

02:02:38 - Ryan Carniato

Right.

02:02:38 - Anthony Campolo

You're right on the money with that.

02:02:40 - Ryan Carniato

Right, right. And then it's like what's interesting is that. Yeah but the convention could help a lot because you're actually seeing the convention return in next JS because they have like dot placeholder and dot error so next 13 app directory. So I'm talking about the server ones actually have separate files for the pieces of the cell.

02:03:01 - Anthony Campolo

Yeah, that seems a little obnoxious but like that. Well if your thing's handling it anyway and just moving stuff around, compiling, transplant, whatever, then you want them all want like one nice file where you just see them. You know, you don't want to change files to mess with your loading and error states.

02:03:15 - Ryan Carniato

I think this is like the. You know, everyone has their own comfort level. I think we saw this with like some people like don't like to remix or I guess all star style X or really Redwood it looks like probably was the first one style like using special exports.

02:03:29 - Anthony Campolo

Right.

02:03:29 - Ryan Carniato

It's funny. Next Next used to use special Exports. But now they, now they've decided special exports are maybe not good special exports.

02:03:36 - Anthony Campolo

I wouldn't be with like the how it's like figuring out how to export all to make just one nice clean component.

02:03:41 - Ryan Carniato

Well, like that. Yeah. You have like each named export has a special behavior associated with like.

02:03:46 - Anthony Campolo

Right.

02:03:46 - Ryan Carniato

And the same way with loader and action and remix and like that.

02:03:49 - Anthony Campolo

Yeah, we've been doing that since the beginning. That's just how we've done it. Yeah, right.

02:03:52 - Ryan Carniato

But then like, what do you call it? Sorry, Sveltekin and Next JS both recently kind of got away from that. So that's what I was like. They went to separate files. So I was like. It's kind of like there's like this interesting play tension there because I guess they're concerned. Do you know why? It's because if you import stuff, see, their problem was for server stuff. In this case of Redwood, this is all client side, so you're fine. But the reason that they had those exports for like git static props or server side data, which meant that yes, in theory, if you import something and only use it and get server side props, you, it does not end up in the client bundle. The problem is if that thing you import has side effects, it won't let itself be tree shaken out. And that is why in those cases that they stopped doing it. But you hit this relatively quickly if your data format is imperative code. But in the case here where it's GraphQL query, I don't think you hit that because you can, you can just describe that without importing any code. But if you're like Prisma get something, then importing Prisma is a perfect example of one of those things.

02:05:04 - Ryan Carniato

Right?

02:05:04 - Anthony Campolo

Yeah, you would never need to do that because we have the Prismas in the APIs specifically separated from the front end.

02:05:11 - Ryan Carniato

Right? Yeah. So yeah, I'm following that a little bit better now.

02:05:17 - Anthony Campolo

So I think with Redwood we had a separation between the front end and the back end that was clicked clear and explicit and on purpose from the very beginning. So I think that could be like the one kind of meta point that helps us set up, be set up for this new world where now everyone has figured out how to do that.

02:05:31 - Ryan Carniato

Yeah, this has very much been the like the concern here because like I'm like, I'm getting ahead of myself but now I'm picturing like server components and you might say this is why they put the render modes on the routes because you're going to like there's probably Going to be like render mode, RSC or whatever to tell you that this route is a server component. Because then suddenly your page actually starts as a. And your layouts will be like on the server and then you'll have client components. So then you'll need to be you. Yeah, it's, it's. This isn't. This is, this is like, man, this is just going to be interesting. And I'm not pointing anything necessarily. Redwood. It's just like entering this world where like you have opinions and well structured code and then we ask like, no, no, you, you should structure your code this other way. Like they're actually like straight up like doing it. And then you're like, okay, well I can still use this thing with inside my thing. But then like you get to this interesting place where like, like the meaning of stuff changes slightly. And a perfect example of that is client components and RCs now are use client.

02:06:38 - Ryan Carniato

And then like, yeah, you know, then you're like some of my pages are server component pages and some of them are not. Yeah, it's, it's funny because I'm actually working through the exact same problem set. It's just. It is definitely one of those things where it's like,

02:06:53 - Anthony Campolo

it's a lot. We should have you pull up the. So Toby has a. Another one. We don't have to run this one because I wasn't able to get to work. But you should just look at this real quick. Hold on, let me find that link again.

02:07:11 - Ryan Carniato

Yeah,

02:07:19 - Anthony Campolo

Here we go.

02:07:20 - Ryan Carniato

Okay.

02:07:27 - Anthony Campolo

Okay. Actually, so yes, what this is doing is he has you just generate a project so we could try doing that and then you'll be able to see what the project looks like. Once it's already set up for React server components, we won't be able to run it because it's still work in progress. We can see what it looks like at least.

02:07:45 - Ryan Carniato

Okay, well, I mean, give me two seconds. Yeah, I mean this is kind of the area that I'm Redwood is actually like a very good example of like there's been concern about how React rolls out server components and like remixes, you know, often the conversation. But I feel like you almost should start with like, like almost like something like Redwood. That's actually the furthest on the opinionated side to actually vet whether this is actually something that can actually slip in. So current functionality and expectations, you can render one and work component inside the main app server component, css. Right now there's no router support. Okay. Yeah, well, I mean that's the freaking hardest That's. That is the whole thing. Server points. It's a routing technique. I mean, it isn't, but it is. That's actually the whole thing. They didn't work. Yeah. This might be positive. Nikhil has actually made PRs to get vite versions of server components work. I don't know if it's been merged yet, but that's why I had him on stream of like a month or so back, because.

02:08:55 - Anthony Campolo

Yeah, what I would. When I cloned this down today and tried to run, I was hitting some sort of error with vite and got pointed to an open vite issue.

02:09:01 - Ryan Carniato

Yeah. There's no yarn rng. Yeah. So no video. Okay. We can. We can look at the. What you're saying is we can look at the project to see what they're.

02:09:13 - Anthony Campolo

Yeah, exactly. So if you do this, if you just copy all this, this will generate you a new Redwood project. Then you'll run the Redwood experimental commands, and those will then configure it for the rsc.

02:09:25 - Ryan Carniato

What is this?

02:09:28 - Anthony Campolo

He's just putting. He's creating like a temporary folder and sticking in there. You can ignore that thing at the end.

02:09:34 - Ryan Carniato

Do I need the. Yeah, it's fine. I can put anything there, I guess. Yeah. All right, let's make another one of these.

02:09:44 - Anthony Campolo

You're in your Redwood project. Yeah.

02:09:46 - Ryan Carniato

Yeah. Red Redwood

02:09:53 - Anthony Campolo

rsc.

02:09:54 - Ryan Carniato

Yeah.

02:09:58 - Anthony Campolo

Yeah. And so the way he has it set up is he's not using. And like you said, there's not using, like, pages or any of that kind of stuff. And he just kind of has it all plopped in the SRC directory. There's still an entry, client entry server, and then something called an entries TS file. A document file. Yeah. So pretty similar to what we're looking at with Danny's.

02:10:26 - Ryan Carniato

It's like. I'm like, why am I blind? I positive I put it inside examples

02:10:34 - Anthony Campolo

is you are still on node 16. You need to go back to node 18. I swore.

02:10:43 - Ryan Carniato

I. Okay. What the. So, yeah, you're okay. Npm alias Default18.

02:10:58 - Anthony Campolo

Now I understand why I told you use volta.

02:11:00 - Ryan Carniato

Okay, so MVM use 18. Okay. Just MV node dash version. Okay. Yeah. Okay. Whatever. This.

02:11:16 - Anthony Campolo

I.

02:11:17 - Ryan Carniato

Okay, we're just gonna. This explains why I was on what? Why I was on 16. Still on this one.

02:11:26 - Anthony Campolo

I think if you take out the engines thing, it might also work. We shouldn't mess with that. We should just try and get you on 18.

02:11:32 - Ryan Carniato

All right, so where was I? I was doing this.

02:11:34 - Anthony Campolo

That one. Yeah.

02:11:48 - Ryan Carniato

Maybe I need to make a folder first.

02:11:51 - Anthony Campolo

Well, take the Y Out actually of the command. Yeah. And the Y at the beginning, too. There's two of them. That's why there's a dash. We got two dash Y's in there.

02:12:05 - Ryan Carniato

All right, whatever. Typescript. I won't bother on this one.

02:12:11 - Anthony Campolo

Yeah, that's fine. Yeah, Because it got generated before because you had. It got confused because the flags and stuff. Try and just go into the project, see if it. If it was actually generated.

02:12:31 - Ryan Carniato

I'll trust the authors.

02:12:33 - Anthony Campolo

Okay, cool. And as I said, you're not going to be able to run this. Let's just look at the files now. You got to run the experimental commands next. This is just because Ryan wants to see the hot new, new stuff. This will not be how this actually is. And once we have rscs set up, you don't have to do any of this stuff. That there's two commands in there.

02:12:57 - Ryan Carniato

Yeah. I'm hoping that. Do they. They run in succession? No, just.

02:13:02 - Anthony Campolo

Just copy the first one first. Yeah.

02:13:08 - Ryan Carniato

All right. Why does it think. I mean, what am I. No, okay. This is. I. I, like, screwed something. It thinks there's a project in examples. Let's see the. Part of the development examples.

02:13:37 - Anthony Campolo

See, I'm not sure what's going on here. Like, did I. Oh, yeah. Because you ran it because you have a yarn in here.

02:13:50 - Ryan Carniato

Like. Okay, okay. It's also possible that now that we were where we.

02:13:57 - Anthony Campolo

I'm also realizing you are going to have to run yarn to run the experimental command. I think so. Like, install your dependencies first. So just run yarn by itself. Yeah.

02:14:06 - Ryan Carniato

Yeah. Okay. All right.

02:14:13 - Anthony Campolo

If you can't get us forward, I can just clone what I have, what I'm looking at right now.

02:14:18 - Ryan Carniato

No, we're almost there. Yeah. Yeah, we're exploring Redwood 7 here.

02:14:24 - Anthony Campolo

Yeah, right. That hot new.

02:14:30 - Ryan Carniato

New.

02:14:31 - Anthony Campolo

How's netlify, by the way?

02:14:33 - Ryan Carniato

Yeah, it's going okay. As you know, there was a hard restructuring, like, about a month back, but team seems more focused than ever on the goal, which is. It's kind of crazy after the lot. Like, it's. It's a very different netlify than I joined a year ago, but there's a lot of really good energy about focusing on the. The base of the platform, focusing on the primitives.

02:14:56 - Anthony Campolo

Cool.

02:14:57 - Ryan Carniato

Yeah. The last, like, couple weeks even, like, I've just, you know, the. The kind of, you know, every week we have like a start of the week kind of thing, and it's been, you know, full of demos of new features being developed by teams. It's. It's a Different kind of energy. I'm pretty excited about that.

02:15:14 - Anthony Campolo

Awesome. I was looking forward to new, new features.

02:15:18 - Ryan Carniato

Yeah. Okay, so not that. Okay, so then now we try this. All right. And then we try the other one. All right. Okay. Document. Cool.

02:15:48 - Anthony Campolo

Yeah. So. So this is how it would be set up.

02:15:50 - Ryan Carniato

Entry server. Very similar to what we're looking at in the other example. Index is still here. Entries. Okay. Don't know what this is, but not going to worry about it too much. Document. It's probably the way of faking the router counter, User component and app tsx. So I guess what we're supposed to realize here is that this is actually a server entry. This is a, this is a server component. And then. Yeah, so interesting. The document isn't actually here, but that's rsc. Should be part of the router layer. Assets. Yeah. Okay. Sure. Yeah. Okay. So I mean, this is, this is just, this is just a server component entry file with a client component in it. And I'm gathering this was just testing to see what that would look like. Yeah, we're super early here, but yeah, presumably. Yeah, I mean, most of the beginning is just getting the build to work. Okay. Yeah. I don't know if there's actually a ton to see here just yet, but I, I. Because like it's the downstream implications where things get interesting. Right. Because, you know, even, even the SSR stuff is going to be really interesting from the impact it has on data fetching.

02:17:22 - Ryan Carniato

I mean, I'm assuming we didn't actually look at this when we were looking at your. This example. I'm actually going to go back here for a second. I don't know how many of the pages are

02:17:36 - Anthony Campolo

actually.

02:17:36 - Ryan Carniato

I mean, I can check from the routes how many pages are actually server rendered. Just the about page. Okay. Yeah, because I was gonna say, like, I don't think the about page has like GraphQL queries on it or something. It'd be interesting to like all the deduping type stuff that happens. Right. Like when you have the server render, suddenly you don't want to. You fetch on the server and then you don't want to fetch on the client and then you have to Pre.Pre. the GraphQL cache has to be pre populated with that data.

02:18:13 - Anthony Campolo

So we can actually try writing this. The GraphQL server does work and then it does load some things on the, the home page. So let's kind of, let's just see what happens.

02:18:21 - Ryan Carniato

Oh, you. Okay. So.

02:18:22 - Anthony Campolo

But yeah, the react server components one, not this one.

02:18:25 - Ryan Carniato

Okay. React server components so can I do yarn dev or RW dev or whatever it is?

02:18:32 - Anthony Campolo

Yeah.

02:18:34 - Ryan Carniato

All right. Okay. That's good.

02:18:42 - Anthony Campolo

Yep. Yeah. So you see how your back end's working?

02:18:47 - Ryan Carniato

We'll just keep 89, 10. Okay.

02:18:54 - Anthony Campolo

Oh, you gotta do a build first.

02:18:57 - Ryan Carniato

Okay, fair enough. Yeah.

02:18:58 - Anthony Campolo

So yarn Red would build, and actually it's not dev, it's serve. Yeah. So yarn Redwood. So first build, huh? Yeah. And then yard red would serve.

02:19:10 - Ryan Carniato

Okay,

02:19:22 - Anthony Campolo

See if this works.

02:19:26 - Ryan Carniato

Apparently the server might not be RW serve.

02:19:32 - Anthony Campolo

Fe. Interesting.

02:19:34 - Ryan Carniato

But that was, like, weird. It was like, not like a space. Oh, it's like you got to run two commands. Actually, did this actually tell us anything like. Oh, no.

02:19:49 - Anthony Campolo

Yeah, that's what I was supposed to do. Did you run both. Both of the experimental commands?

02:19:52 - Ryan Carniato

Yeah, I did, but did I run build with a dash V? That's just verbose, isn't it?

02:20:01 - Anthony Campolo

Yeah, I don't think that matters.

02:20:06 - Ryan Carniato

Build. Probably just the verbose command. All right. Yeah. Okay. Serve.

02:20:39 - Anthony Campolo

Just. Just to make sure, you try running yarn Redwood Experimental setup. Dash rsc.

02:20:48 - Ryan Carniato

That's a second. That one.

02:20:50 - Anthony Campolo

Yeah, that one. Yeah.

02:20:53 - Ryan Carniato

They're just telling me they already exist. Yeah, I'm not sure.

02:20:58 - Anthony Campolo

Probably we nuked something somewhere down the line as we were doing this. Okay, so someone's asking what bundlers Redwood use. So this was the exciting thing about Redwood's six that we added beat. So we did not have vite before we were using webpack. I think we were the last framework using webpack. So instead, no more webpack, everybody.

02:21:17 - Ryan Carniato

Yeah, no, that's. That'll be big faster. H. Well, yeah, probably faster. HMR faster. I mean, Webpack 5's caching wasn't actually bad for performance, but, yeah, definitely I have big improvements in the dev environment.

02:21:35 - Anthony Campolo

Just real quick, just so we can close the loop on this, let's go back to the screen sharing. I'll show what I'm looking at here with these.

02:21:42 - Ryan Carniato

Share away.

02:21:52 - Anthony Campolo

And let me know if anything happens with my sound again.

02:21:56 - Ryan Carniato

Okay.

02:21:56 - Anthony Campolo

All good.

02:21:59 - Ryan Carniato

2 secs. Yeah, let's see here. Yeah, your sound is fine.

02:22:03 - Anthony Campolo

Okay.

02:22:07 - Ryan Carniato

Okay.

02:22:07 - Anthony Campolo

Do they see my screen?

02:22:09 - Ryan Carniato

Yep.

02:22:10 - Anthony Campolo

Okay, so this is where the error is coming in right now. So something's happening here. Not really sure what, but you see here we are getting in data, and that's pretty interesting. And then here we can see. So we're getting this main file. It looks like it's already been, like, minified. JSX runtime file, RSC file and then props.

02:22:40 - Ryan Carniato

Yeah. Oh, interesting. Oh, that's interesting. Instead of serial, instead Instead of serializing it into the document, it's a separate end point hit. Okay, yeah, this is something I've been playing with recently. I mean I don't think get into it right now, but the RSCs don't solve the double data problem. When we set out to do this partial hydration thing, there was two things we were, I mean, at least I was setting out to do. The one was to reduce hydration costs, not send that JavaScript. But RSCs actually don't solve the double data problem. Every single piece of data that you show in your HTML gets sent again in that JSX format. In fact, it's probably more bloated than the original JSON. So in a sense we save hydration execution time and we, we have a slightly larger serialization type. I don't think the serialization is that, that that important, but it's just like, it's like, it's. This is why rcs like I do silly benchmarks where I like, you know, make a page with a lot of data on it and you know, wrap it with client components so you can't cheat kind of speak and then even if you pass it through with RCS to be smart so that like it's server rendered and not sent to the client, RCS can't help but serialize everything in the same way.

02:24:18 - Ryan Carniato

So like in, in that simple test, single page apps score about a 48, lighthouse score, RCS score about a 60. And then like Astro and Marco and Quic all score about an 85. And it's, it's, it's. It's basically because RCS only solve half the problem on the initial page load the way they are today.

02:24:45 - Anthony Campolo

Interesting. Okay, here's something really interesting you should look at. Check out this link. So this is just our notion where we coordinate between the different teams. So this will give you a lot of info on specifically how we're figuring out SSR plus React server components.

02:25:05 - Ryan Carniato

Is this public? Like I can.

02:25:06 - Anthony Campolo

Yes, this is public. Yeah. Yeah, that's cool. Redwood.

02:25:09 - Ryan Carniato

I love that.

02:25:10 - Anthony Campolo

Totally open source. We do everything public. Everything. The whole team's roadmap, what we're working on is all always public.

02:25:17 - Ryan Carniato

Yeah, I've thought about notion being a good thing right now I just write long blobs in HackMD whenever I have something to think about. But. Okay, this is, this is great. Yeah.

02:25:26 - Anthony Campolo

So suspense enabled cells. That's probably a big one.

02:25:29 - Ryan Carniato

Is this plan to go. The main is. Okay, so this is a progress. Oh yeah. Yeah. Thank you. So this is just a Progress thing on.

02:25:39 - Anthony Campolo

Scroll up to the very top.

02:25:41 - Ryan Carniato

But yeah, I was. I was just like, oh, yeah, it's just a bunch of questions. I don't actually. This is like. To do retro was done. I was like, kind of interesting, like, what is being done? But this one.

02:25:54 - Anthony Campolo

Well, that was. That was not the main page I sent to you, though.

02:25:56 - Ryan Carniato

No, no, no. I was actually just looking at this and this fence router was the first thing that came to mind.

02:26:02 - Anthony Campolo

Gotcha.

02:26:02 - Ryan Carniato

Render mode.

02:26:03 - Anthony Campolo

These will all be in different states of complete versus not and with information versus not. So this is kind of like. This is a big dump of how we collaborate. But just to kind of get an idea of what we're working on. What are some of the ideas we're playing around with?

02:26:17 - Ryan Carniato

Public notion is great. Actually. You can't do this very easily on GitHub. I've also tried that and it comes of sucked.

02:26:22 - Anthony Campolo

So, yeah, we tried GitHub discussions, I think.

02:26:26 - Ryan Carniato

Yeah. Nice.

02:26:37 - Anthony Campolo

So, yeah. So if you want to jump in, give some thoughts on any of these things, welcome to.

02:26:41 - Ryan Carniato

Okay. Yeah, we won't go through this. All right. Now I just. The one that I was mostly interested in actually was suspense router. Because this is something that's kind of coming out right now in V6. What does that actually mean? What is a suspense router from Redwood's perspective? And this one is not giving it to me because this is like the after the fact. Like, everyone already knows what the suspense router is. How are we doing on it? Fetch from any data source sells first class.

02:27:06 - Anthony Campolo

I am streaming ssr. Did you click that one yet?

02:27:10 - Ryan Carniato

No, I haven't turned that one. Where's it?

02:27:11 - Anthony Campolo

Yeah, click stream esr. It's down the bottom. So I think this is what you're looking for, right? Just scroll a little bit more.

02:27:17 - Ryan Carniato

Okay.

02:27:19 - Anthony Campolo

Yeah.

02:27:20 - Ryan Carniato

Average user SEO server Cell SSR potential goal. All right, this is. This is a. This is. Yeah, yeah, this is like. Yeah, this is out of order streaming. And I'm pretty sure what they mean by cell ssr because you could actually, with. With streaming ssr, you can show the cell states, like, even though it's happening on the server. So you like start rendering the page. The data's not there. You're showing loading. You stream that back, and then as the cells complete, they actually will update from the server. So I'm gathering that's what they mean. We're not doing render modes as part of this project. Blah, blah, blah.

02:28:01 - Anthony Campolo

Yeah. So as people can see right now, there's render modes, there's streaming, there's server side rendering, there's React server components, there's, it's like all this stuff is kind of happening all at the same time and it's still being kind of worked out, but we were nowhere near this stage like a year ago. So like this is all like, even where we are now is like super, super exciting to me. And as you can see, you're constantly saying, oh, this is the type of thing I'm thinking about or working on or whatever. So in line with some of the other people who are at the cutting edge of this.

02:28:28 - Ryan Carniato

Yeah, no, these are all the topics right now. Yeah, mostly that. Recently with that Chrome funding for Solid Start, we went back to our server component Islands routing type solution because it was very simple. It was basically like, what if we could take Astro and add client side rendering to it? Like, it's actually probably really similar to what they did with the View Transition API, which we'll find about next week when we get a sneak peek at Astro 3 with Matthew Phillips on the stream.

02:29:01 - Anthony Campolo

Yeah, I'm looking forward to that one.

02:29:03 - Ryan Carniato

So, sneak peek of Astro 3 next week. But yeah, I, I, I think this whole area, there's a lot of questions still very much open and I think there's this, this is where it's, it's fun because there's an added complexity that I think that comes with when you have opinions ahead of time that you have to like reconcile with. But it looks like that looks like there is like a lot of thought going into here. So this is really cool and even an idea of tasks and like how far along it's going. So I like to see that. I would love to get this kind of visibility. I think it's very cool to see.

02:29:45 - Anthony Campolo

Yeah. And then last, last link you should look at is this would have been one good look at a while ago, but we have kind of update doc that talks about how this is coming together. The React server components roadmap is called Bighorn.

02:30:01 - Ryan Carniato

Bighorn Epoch. Yeah. Okay, let me pull this one up.

02:30:04 - Anthony Campolo

That's a, that's a forest. So trees.

02:30:08 - Ryan Carniato

Yeah, yeah, yeah. No, that makes sense. But I, I'm gathering the ideas. This is so everyone can get involved

02:30:13 - Anthony Campolo

and see that we see here specifically says targeting V7 for SSR capabilities.

02:30:17 - Ryan Carniato

Exactly. Yeah. So as I told you, we, this was actually pre, pre Sneak peek at Redwood 7, not actually a Redwood 6 stream. I apologize.

02:30:28 - Anthony Campolo

This is really interesting and I think those will be good food for thought for the team as well because you're working on a lot of this similar stuff.

02:30:35 - Ryan Carniato

You know, yeah, yeah, especially well. And I've been talking to a lot of people in the React ecosystem about this stuff because I did independently look at the same space of problems and see if I could solve it, you know, in a way that made sense to me. And I've gotten to that point in the process where I've arrived at basically every conclusion that you React teams arrived at. Right. So I'm like, okay, okay, okay. I, I, I, I get exactly why we're here. You know, like, like I've gone through all the design trade offs and like going this and I'm just like, okay, yeah, that probably makes the most sense. That probably makes the sense. So yeah, now I'm, now I'm at that point where I'm like, okay, I could just do this, probably makes sense. But my problem right now is I'm not hitting my objective. So I, and then which, because like my thinking right now, and it could change, is that if we don't solve the double data problem here, we haven't solved the problem. Like essentially there's two things set out to do. We're only doing half of it. The solution is not going to suffice.

02:31:41 - Ryan Carniato

So that's why I'm casting the net a little bit wider on that. To be fair, this is not something Red would have to worry about because they'll get to use React and then they'll use whatever React uses and do the best you can with it. But I, I am definitely, and I think a lot of thinking it's been going with others.

02:32:04 - Anthony Campolo

Blog post about this?

02:32:06 - Ryan Carniato

No.

02:32:07 - Anthony Campolo

Blog post about.

02:32:08 - Ryan Carniato

I feel like, yeah, I mean, yeah, you're right. I've been, I haven't been publishing public vlogs as much about this stuff recently because, you know, I've been like, I've been going like hack MD and then I've been like publishing like document after document of my rough thoughts. Blogs always take a little bit more effort.

02:32:25 - Anthony Campolo

But where are these getting posted?

02:32:29 - Ryan Carniato

I publish most of them publicly, but then I'll throw them on a discord or maybe occasionally they'll make it to Twitter, but most people don't actually get to see too many of these.

02:32:40 - Anthony Campolo

Is this the stuff that just ends up on your device or is this something different?

02:32:44 - Ryan Carniato

No, no, this is, this is, yeah, this is different. This is when I'm like actually like, this is like my, my thinking when I'm like, when I, when I'm like on a topic, kind of like what we're talking about now. I'm not, I can't get it off my head. I'll just go and write like an article and then I'll share it with those parties. Like, what if Marco was right?

02:33:07 - Anthony Campolo

Yeah, right. It's just really like, I want to read that. So are these public or not?

02:33:13 - Ryan Carniato

Most of them are public.

02:33:16 - Anthony Campolo

Okay, so it's like a hedge doc, basically.

02:33:18 - Ryan Carniato

Yeah, these are, these are just like. These are very much like, as I'm thinking through these problems, you know, I. I just spitball stuff kind of, you know, and then I go bug people and I'm like, what do you guys think? Viable? Does this work? You know, so, yeah, I. It's been a while since I wrote a devtool article, so I should get back to it. I actually wrote an article that's basically ready to publish like four months ago. I just haven't published it. It was about two way binding and why it's terrible.

02:33:50 - Anthony Campolo

I've got a couple of those. Yeah.

02:33:53 - Ryan Carniato

But yeah, I could talk more about this experimental stuff. The problem is it's hard. It's harder. You know that like you. You have to get to that point where the realization hits and then the solution hits and then you can talk about it. Because otherwise, like, if you just have a problem, then like your perspective and your perspective will change all time. Right. Like. But yeah, I could probably. I've been doing a lot of stuff and having a lot of conversations with people. And yet, so what? I forget who said it first, but if you had like the same conversation three times, you. You probably should write an article about it. I've gotten to that point. To be fair, I don't know who the audience of this is. It seems like the people I have these conversations with are people who write other frameworks. Yeah, exactly.

02:34:36 - Anthony Campolo

Yeah.

02:34:37 - Ryan Carniato

So like, basically that's kind of like

02:34:39 - Anthony Campolo

my whole point though, with FSjam though, is that like you have those conversations that are like irrelevant to 99% of devs or the 1% of devs, like need to. Need to know what the other people are thinking so they know like what they're doing actually makes sense. Or not.

02:34:54 - Ryan Carniato

Right? Yeah. So it's been funny though, because, yeah, I've been meeting with people repeatedly. Like, I actually, I guess I was going to talk about this a bit with this week in JavaScript and I'll tie into that in a few minutes, but on Wednesday I literally talked to some people related to the signal spec thing that's coming around and then, then I met with the people, the Ang Angular core team and the Wiz core team at Google. And then I met with Misko all in one day, bang, bang, bang. And we all ended up talking about the, the same topic that so like even exist.

02:35:35 - Anthony Campolo

If Wiz was actually open source though.

02:35:38 - Ryan Carniato

I, I think so. I, I think I, I mean, the way to put that is that there's, there's hard problems to solve, right. From a mechanical standpoint. And then you, you can and it. And you have to work through it and you can finally find that there's a way to mechanically do it and that Wiz is an example of like how to solve a very difficult problem. Right. And coming up with that solution. But it's like a whole other different type of hard problem to take. Take something like that and make it into something that people would want to use.

02:36:10 - Anthony Campolo

Yeah, versus work for everyone else.

02:36:12 - Ryan Carniato

Yeah, right, exactly. And the thing is, that was what the goal was with Qwik, because even open source wouldn't be enough necessarily. The funny thing is Wiz is actually looking at how to make it. Like, you have a ton of Google developers working in this. They want to have a pleasant experience, they want to pull in stuff that they're familiar with and tools they can use in other frameworks. So Wiz itself is evolving probably more rapidly than most frameworks at this point because they have to clear that whole DX gambit that they haven't really been able to address.

02:36:46 - Anthony Campolo

Right? Yeah.

02:36:47 - Ryan Carniato

So it's really interesting to see those teams work together so closely because guess what, Everybody that I'm talking about is on Signals and they're like, well, if we can solve this in Signals land, then we, we can all benefit from it. So like, the Wiz and Angular teams are actually working really closely together.

02:37:06 - Anthony Campolo

That's just, must be so funny for you having like, create a signal or not having been the CEO of Signals for so long and then like all of a sudden now the rest of the world catches up five years later and you're like, yeah, signals are great, right?

02:37:18 - Ryan Carniato

Yeah, yeah, it is interesting. And actually we should probably talk about that and maybe swap over. Do you have any place to go or do you want to stay around?

02:37:25 - Anthony Campolo

No, actually I'm totally down to go into this week in JavaScript. I'll be down to hang out for that too, if I could just use the bathroom real quick.

02:37:32 - Ryan Carniato

Yeah, yeah, sure. Take a moment and we can switch gears. But yeah, I think, I think we had a nice chat there about Redwood. I don't know if there isn't a ton more that I wanted to go in on that Per se. I think it's going to be an interesting challenge to reconcile heavily opinionated with, with like other opinions coming in. But that's always the challenge. Yeah. No, the thing is, me, Anthony, like myself, has a very wide range in terms of, like, he's familiar with most, like all the framework solution spaces they're working in, which really adds to conversation like this because you can see trends, like micro trends come across in different places. And I mean, that's part of why, you know, he's in the podcast area and stuff, because he's like, he's like, okay, what's going on? We should talk about that. Right? So I think that's like, definitely very interesting point. I'm gonna set off. While we're off screen right now, I'm going to actually set up real quick,

02:38:49 - Anthony Campolo

talk about Edgio and JavaScript Jam, because I have FSjam, which I've been doing for a while as my own side thing, but then JavaScript Jam is now a weekly Twitter space that I do for my company, Edgio. And we have all the same framework authors, have all the same kind of conversations, but instead of, it's like you record something I put out a couple months, you just like, it's live, people can listen to it immediately and then people can come in, audience members can ask questions and join. So really recommend people check that out. JavaScriptjam.com Nice.

02:39:22 - Ryan Carniato

Nice.

02:39:24 - Anthony Campolo

Yeah, thanks for having me be able to show Redwood stuff. This is super exciting. I feel like I wish I knew more about a lot of what's happening in the internals. We have a constant struggle with me and Redwood is like, I very much like using it, building stuff with it, showing it to other people. And then there's been like this whole core team building the thing on the side, and there's a little bit disconnected from that to a certain extent, and I'll definitely acknowledge that. But for people who do want to contribute to open source, there's a whole team here willing to help you get spun up and there's a lot of work to do. So, yeah, I highly recommend people check it out if that's something they want to do.

02:40:02 - Ryan Carniato

Yeah, yeah. And yeah, that's. That's the whole thing. Right? If there's always these opportunities, it's how often you get that question. It's like, how do I get it involved in open source? How do I. How do I get started? And I love when I have a lot of guests in with different stories, but for you, actually is a great story because you said almost everything you did actually come from open source. You're doing the boot camp and then you went straight into open source before you even finished the boot camp.

02:40:28 - Anthony Campolo

Yeah, exactly. Yeah.

02:40:30 - Ryan Carniato

So, like, so, so important for your journey into the web. I'm just gathering all my sources for this week in JavaScript right now and putting it together. And the funniest thing is, like, I have, like, no bookmarks this week because

02:40:44 - Anthony Campolo

it was a pretty slow week. Yeah.

02:40:46 - Ryan Carniato

And it really. Because for me, the whole week was kind of started by that discussion around signal spec, and I think I wanted to talk a bit about that. Yeah. Okay. Let's see. Okay. Yeah, I am set up there. See if they. I'm just trying to see very quickly if there's any, like, solid JS kind of news I want to talk about to start it off here, but I don't know that there is. That's August 9th. That's August 9th. It's funny. It's just been. Yeah, yeah, I think. I think this is where we start. And then I did see something about Lepto's query. Oh, I did see that too. That's funny. Maybe. Maybe you're. You're right. And it's funny because Greg. Greg reached out to me and he showed me that he made. I wonder if he's okay with me talking about this.

02:41:43 - Anthony Campolo

There's a blog post here you can even talk about. Regardless.

02:41:46 - Ryan Carniato

So, yeah, send me the private link for that. But Greg actually showed me something else that was actually really cool. And I'm gonna actually gonna pull it up here just because I can and because he's probably not gonna care that much if I do. Greg, where are you? There you are. Not you. Where's. Where's what? It's like I'm like, searching he's. Because he uses abbreviation. Okay. Yeah, he sent this to me before the last stream, but he never actually. I. I was expecting some big announcement around it. Give me two seconds as I set this up. Yeah, yeah, let's. Let's. Yeah. Okay. Perfect. Perfect. Yeah, those are good. And then the only other thing I wanted to check is a few dates on something. Sorry, this is like the setup time that I never get to do ahead of time that I should do ahead of time. I think I already talked about solid start 0.3 last week because I put it out on. I can't even see timestamps like last week. And like, that's so useful. Thank you for telling me it was last week. Can just, like, give me a day or something?

02:43:10 - Ryan Carniato

No, last Week.

02:43:13 - Anthony Campolo

Your grand unifying theory.

02:43:16 - Ryan Carniato

Yeah, I think I talked about that one, didn't I?

02:43:18 - Anthony Campolo

Yeah, I must. I think I signed off before that.

02:43:21 - Ryan Carniato

Yeah, it's, it's, it's. I'm pretty sure I did that gigantic merge there. I mean I can really tell by commit history it's not that far, long ago. August 11th was 3.2. Yeah, I did it at the beginning of the previous week. Yeah. Okay, so we don't have ton there. I'm making progress on some new stuff with solid start but I'm not ready to talk about it yet. So that is good. That's good, that's good. Okay, all together. Perfect. Comments.

02:43:47 - Anthony Campolo

Good.

02:43:49 - Ryan Carniato

Everyone's still alive, everyone's still awake. Chat guys have been kind of slow recently, so maybe. Yeah, yeah. Hey, awesome, awesome, awesome. Okay, good then, then we're going to get started on this week in JavaScript. I've got Anthony here to join me, add a little bit topical, actually write a weekly newsletter.

02:44:17 - Anthony Campolo

I mentioned we do the twitter space on javascriptjam.com but I also do a weekly newsletter where I cover similar stuff to where you're covering but in a written format instead of a streaming format. So yeah, this is always fun for me.

02:44:27 - Ryan Carniato

This has been a slow week though. I, I can imagine in the past other topics that would have gotten given us a little bit more material to go with, but this has been a bit of a slow week.

02:44:36 - Anthony Campolo

I'll talk about Google's AI editor.

02:44:39 - Ryan Carniato

Yeah, that's an area that I don't know a ton about. So maybe, maybe if people want to bring that up they can talk and put in the chat. But let's, let's, let's talk about what's been going on in JavaScript this week. So I'm going to just share my screen and actually with this format we're going to do it this way because I don't want to block everything and this is actually not where we're starting. Where we're starting is. I'm going to start with some solid stuff because then I can get out of the way because it's not really a huge topic. As I said, not much happened. The only thing that I've been really excited about is native seems to be happening. Okay, we actually. I forgot to ask you earlier, Anthony, if there was a native story for Redwood. Like you know how people playing with like. Yeah, like. Yep, yeah. Pulling mobile into like mono repos and stuff like that. I forgot to ask.

02:45:33 - Anthony Campolo

Yes. So we, yeah, so this one that has been kind of in the background, something we've wanted to do for a very long time. We've had people spike stuff out because with Redwood you had the API side of the website be very natural to add a mobile side in addition and then you just have a mobile side, a website and then your API. So that's something you can do. Right now we've got a bunch of stuff. You just Google React native Redwood js, you'll find a whole bunch of blog posts and stuff about it. So yeah, it's like Orta has been someone who's actually worked on like Orta's on the Redwood team, which almost no one knows, but worked on a lot.

02:46:09 - Ryan Carniato

Yeah. I imagine because of the way the separation from backend and front end means that the API side like the back end is the same. So like it would actually work really

02:46:16 - Anthony Campolo

nicely using GraphQL queries. Yeah, it's pretty natural.

02:46:20 - Ryan Carniato

Yeah. The reason I was just talking about this is just. This has just been like the narrative. I keep all the people who are working on alternatives to React Native, like Tori does a lot of desktop, but they're moving into native mobile as well.

02:46:35 - Anthony Campolo

That's interesting. I know that.

02:46:36 - Ryan Carniato

Yeah. So we're seeing a lot of this native script. We absolutely love Solid look forward to putting in production more professional. We've been getting a lot of push from those communities. They like Solid as a choice. It's lightweight, it's fast and it aligns with their. Because we're good with custom renderers, it's very easy. It's not like we're full compiler that only compiles to DOM like some other things. So we're just a nice choice where they're like very excited because it's like we get to use like there's already React Native in the. In the native space. So this makes us, you know, a very lightweight, small performant choice.

02:47:15 - Anthony Campolo

And then you have to build a whole solid native.

02:47:17 - Ryan Carniato

Yeah, exactly. So I've been, I've been exactly. I've been seeing a lot of that stuff. Yeah, I've had the chart like. So I've been just seeing a lot of this kind of activity. This had to try rivapp with Solid JS and nativescript post a PR example so you can learn more. So here's like an example of like this, you know, solid native app. You know, I think, you know, people tell me what was the native store list? Yeah, we don't have React Native, but I think a lot of these other solutions that want to kind of like do a react non Specific solution are putting a lot of time in and it might take them ages to catch up, but it's already. We're. We're in a much better state these days in general than like back when we're all using like Cordova like so you know, even Capacitor is much better than like what they were doing before. But when you're talking about these native solutions, things like Tory, it's really exciting to kind of see that.

02:48:12 - Anthony Campolo

I had Adam on my podcast once or Chris had a Cordova experience. He's like, you should really try Capacitor. Trust me, it's much better.

02:48:22 - Ryan Carniato

Look, actually here's you. This is from a little while ago. I missed this interview at the time, but it was, it was awesome to hear Ryan turn Quest again talking about how he got open involved in open source working the solid project. He built solid router, like one of the two solid routers and we merged our effort and he did the majority of the initial work to actually merge it and make what the solid router everyone uses today in solid and solid. Starting all the solid projects and then through that experience and obviously connectivity because I was working at ebay and I left ebay and he joined ebay. So we kind of like just swapped spots so to speak. He got a job at ebay now through open source basically. So really great story. Yeah it was a great community kind of push up. So that's why I wanted to show that. See, not much news here. We've been just plugging away at Solid Start but I'm really excited about the mobile stuff. Yeah. While talking about, you know, before we get into the big topic I'm gonna. We're getting into in a minute which is the signals stuff.

02:49:23 - Ryan Carniato

I just wanted to make a shout out a bit to Leptos which is for those who know is we've had Greg on the stream, one of our most popular stream actually where he taught me Rust. But we. They've been making incredible progress there and what they ported Tanstack Query to Leptos now in Rust. So they have that pattern the dark age of React. I didn't even read this. It's funny because like I talk about the dark age of.net this is like the next generation is going to be talking like this. That's hilarious. Redux flashbacks. Oh. So in any case, what we're seeing in this ecosystem very quickly, if you remember when Greg came on, I was legitimately surprised he had implemented server functions in Leptos. He basically made solid start in Leptos. Like the version at the time. And I was just like, you didn't tell me this. I knew he ported something very similar to Solid in. In Rust, but he actually makes it

02:50:27 - Anthony Campolo

easier than JavaScript or it's just because he just decided to figure it out.

02:50:32 - Ryan Carniato

Well, he wanted a backend framework, right? Like that. Like he. Or not backend. He wanted like to be able to use wasm, right? Like, like. Or use Rust, essentially. And he, you know, there's been a lot of conversation about like, is it fast enough? Can it be more performant? And he. What made leptos kind of show up, you know, on the map was they were the first WASM framework to basically get within spitting distance of the fastest JavaScript frameworks. I think leptos got within 4% of solid JS on the JS framework benchmark, which is way ahead of you, way ahead of svelte lit everyone else, and people like, whoa, this could be legit. And then he just kept on building out the thing and he's big reactivity fan, and now they're seeing a community actually building very similar to us building these pieces on top. And the biggest downside and the reason he built something like Solid Start was the biggest downside is that wasm's like, bigger to load. Like, at one point he was telling me the component size and I made a funny face and someone screen capped it because it was like, it was like, it was heavy, you know.

02:51:37 - Ryan Carniato

And

02:51:40 - Anthony Campolo

brings back to the first problem. We have these giant JavaScript bundles, right?

02:51:44 - Ryan Carniato

So as it turns out, the same solutions that we solve in JavaScript can apply to WASM. And when, like, if you get into that zone, you start getting into this. Interesting question because obviously you can make better patterns like this, like we're seeing with the queries. But, you know, he, he was like, really stoked when he showed me his version of something similar to solstart because he had the progressive enhancement. So he's like, look, my app is interactive before the WASM kicks up, right? Wasm takes slower. So he's making what I call the remix argument. Like, it's okay if my framework slow, slow to hydrate or slow to load or whatever. I can just progressive enhance, right? That's how Remix has been kind of saying it for the last little while. And, and, but. And I was like, you know, that that's not a perfect argument. But I mean, honestly, a couple years ago, I wouldn't have thought we would be here where we're not concerned about update performance. We're just concerned about Load performance and it actually loads relatively fast. And if it doesn't, it's still interactive.

02:52:41 - Anthony Campolo

Do this because we actually care, because Google makes it count for SEO, right?

02:52:47 - Ryan Carniato

I mean that. And then I just wonder how much

02:52:51 - Anthony Campolo

things like that affect the entire, like what we, what we work, what we prioritize as web developers. How much is it just based on what Google decides to optimize for, for SEO.

02:53:02 - Ryan Carniato

Right. And, and that is true. And that's guiding a lot of the R and D that we're doing in the thing. We're using IMP as a measure of our success on the, the work we're doing. We're using core web vitals wrong with

02:53:15 - Anthony Campolo

that from like framework authors perspectives, users perspectives. Like it's, it's totally makes sense. It's just, I don't know, I always wonder about things like that, you know, like why do we decide to optimize the things we actually optimize.

02:53:26 - Ryan Carniato

But guess what I got, I got a Hacker News demo built in Leptos.

02:53:30 - Anthony Campolo

And now I was thinking about trying to build this with Redwood, but then I realized it was just I didn't have the time. Next time I'll build Hacker News for Redwood for you once he's actually enabled.

02:53:41 - Ryan Carniato

This is a different Leptos demo because he showed the progressive enhanced demo when he was on stream and we were very excited about it. But in this demo, when I click, you're going to notice the spins because unfortunately, or maybe fortunately, this is an MPA and you're like, okay, well why the hell did he make a Hacker news in an MPA? Now this, you know, because it has

02:54:02 - Anthony Campolo

such fast initial load, it just works, right?

02:54:04 - Ryan Carniato

I mean part of it is especially because does isn't the problem with WASM how big that initial load is? Right? And the question is, I forget what it shows up here. Okay, I need to get into an incognito window. Give me two seconds. So just what are we loading here? Wait, what? 4.5. Let's, let's put all on 4.5 kilobytes of JavaScript and 49 kilobytes of wasm. Now let's go to the comment page, you know, the death tests kind of page, and do this load. Will you see it again? 49 and 4.5. Okay, so if you remember, Greg was telling us sometimes that like these apps would be just humongous, like like 200 kilobytes or something, even for something like Hacker News. Probably someone just said, okay, we can. Yeah, so there we go. 49. But what I wanted to point out here is the reason this is kind of small for wasm. Because if you think about. Just put it out there. NextJS version of this page is 80 or. Well, actually. Why? What is it next? Well, let's do RSC actually.

02:55:29 - Anthony Campolo

Always, always wonder about. I wanted to talk to you specifically about what point does it become too big.

02:55:36 - Ryan Carniato

Yeah. Okay, so the RSC version of this. Okay. Yeah, let's go to JS. What is this? Okay, 90 kilobytes, right? Yeah, we can go there in a minute. But what I can say is it's 90 kilobytes. So his rust version isn't any. That I'm showing you here isn't any bigger. It's actually half the size of the next version. What's going on? We can kind of tell by the islands here. Or, sorry, the title here. I just gave it up. Sorry. He did islands in Leptos, so he's doing partial hydration in Leptos. So that same JavaScript saving thing is. Yes, it's obviously bigger than Astros, which is like you're solids versions, which are like 6 kilobytes. For the islands version, it's like nothing. But when this is your competition,

02:56:30 - Anthony Campolo

is React never going to have islands? Is it just like impossible?

02:56:33 - Ryan Carniato

No, no, but the thing is, React server components is islands for React.

02:56:37 - Anthony Campolo

It's a type of islands.

02:56:38 - Ryan Carniato

Yeah, right?

02:56:39 - Anthony Campolo

Yeah.

02:56:40 - Ryan Carniato

Like the code reduction part is the same. I was complaining that they didn't solve the double data. Right. Like, if you go in here, you'll. You'll see like every single same thing that you just saw in, in here. Like wherever it is, we'll get in here eventually. Do, do, do comments. Comments. Like if I picked a piece of text in one of these stories, like, I am a northern U.S. okay, there we go. And I go into the what the network and grab the what I'm gonna say the document and look at the response. And if I search in this response and go, I am the northern US. You're gonna see it in this P element. And if I click it again. Oh, actually this one's not a good example. Apparently this exact phrase is in here multiple times. Yeah, we are. Okay, let's try this one.

02:57:35 - Anthony Campolo

I'd make it a little smaller.

02:57:38 - Ryan Carniato

Yeah, it's like

02:57:41 - Anthony Campolo

I split it like a line break or something.

02:57:44 - Ryan Carniato

Yeah, you're right. There's probably like a character. Okay, fine, let's. Let's just pick like a different one. Over the years, I definitely insulted several Southern guests by mostly ignoring them. Yeah, this is probably Great story. Okay. Okay. Yeah, so let's go back to the first one, right? It's in a paragraph element in the HTML and then if we click it again, it's in this JSX blob thing we saw at the beginning where it's like self push next whatever server component thing. So yes, there's that, but the actual code being sent, there's no code being sent to render, the comments only being sent to the tabs. And it's hard to probably see this, but if I, if I look here, this is the toggle component, like what I was talking about, like the thing that actually does the interactivity like this. But the rest of this is not like the other components aren't in here and you got to trust me. But we won't find children colon probably in any of the other. Well, I guess there's some internal stuff yet. This is the next JS internal components like baselink. What my point is the rest of your app code doesn't have it.

02:59:01 - Ryan Carniato

This is actually islands from a code perspective. So this is just the size of React plus the size of next js. After this point you get the benefit of islands. You just. Your starting line is 84 or 85 kilobytes. And then like you get to use islands from there. Where other frameworks, their starting point is like four kilobytes. So like it makes a bigger impact on this. But what I was getting at is the starting point on WASM might be like 50 kilobytes.

02:59:34 - Anthony Campolo

Interesting. So we're talking to Aidan from Millions about how when he first started Millions, he tried to do it with WASM and then decided to. To find these new kind of VDOM solutions.

02:59:45 - Ryan Carniato

Yeah, yeah, it's interesting. I mean the VDOM stuff there, which is a little bit of a tangent, has largely been. It's the block someone. There's been block DOM esque solutions in the GIS framework benchmark since 2018 ish. For about four years it was the same thing. There were signals in the JS framework benchmark from 2015 16. Doing this, the technique always precedes the dx win.

03:00:16 - Anthony Campolo

Yeah, totally.

03:00:18 - Ryan Carniato

The problem is the JS framework benchmark now has actually gone to the limits. Now that we know that we can approach things both ways and get basically the same score, we almost need to find something that tests something more complicated structurally. Because the problem right now is we've gone to a point where I think that the techniques of basically, is the

03:00:37 - Anthony Campolo

JS a single page or is there routing involved in it?

03:00:40 - Ryan Carniato

It's a single page with. It's a single table. You can picture it being like, yeah,

03:00:47 - Anthony Campolo

like a thousand rows or something.

03:00:49 - Ryan Carniato

And there's operations to add rows, remove rows, move rows, select update specific and just the show and hide them and append row. Like, like it's all just table ops, which are classically, you know, things that can be, you know, very common in apps. But yeah.

03:01:10 - Anthony Campolo

Cause I feel like now that we're at the point where all these frameworks are trying to figure out this different render mode along with MPA versus Spa, like it doesn't really make sense to have a benchmark that doesn't include that type of stuff. Or even if you use like view transitions, like however the framework decides to do it, you know.

03:01:24 - Ryan Carniato

Yeah, yeah. I mean, actually, maybe we should talk about Million. I think that was from previous week, but we can pull that off on Twitter in two seconds. But I just want to leave on this note is if WASM adopts the same techniques that we use to reduce JavaScript and they have the same care of attention, maybe they won't beat the fastest JavaScript frameworks, but if they use the same techniques that the smallest and fastest JavaScript frameworks do, they're probably going to outperform the average popular framework, which is React. Exactly. Which is a very interesting place when, like at a certain point.

03:02:11 - Anthony Campolo

But if someone's not going to move from React to Sol, they're certainly not going to move to Leptos.

03:02:16 - Ryan Carniato

Right. But it's like another thing where when people are looking and they're like, yes, it becomes, yes, React has a job market, React has that. But if these other solutions just start coming out and they quantifiably feel more performance faster, all this. Like the guys who were like, I really want to use Rust, I don't want to use a JavaScript framework. You know, like now they, if they actually have a reason to, they're getting very close to being able to do that. So like, and, and, and honestly, with very little criticism, because if we can shave the JavaScript, we can shave the WASM, and at that point they can even brag that their site is more performant than a React site.

03:03:01 - Anthony Campolo

So they're also using Rust Lambdas instead of Node lambdas.

03:03:06 - Ryan Carniato

Well, that's where the real win comes in. I think, I think he, the Leptos guy was like, our server side rendering is 30 times faster than React. And I'm like, okay, that's pretty good. Because that means that it's, yeah, like even way faster. That's faster than any JavaScript framework. Like not even, yeah, like a whole order of magnitude. So. Because I think we'd done a benchmark where we were like six to eight times faster than react, but 30 times is like, you know, fast. Yeah. Anyway, so, yeah, I mean, I don't know, I think there's still like a bit of a barrier here, but I think this is a important piece, moment in time to see and I'm sure Greg will talk about more of this in the future when we figure out islands routing and like the real version and like silver clones. I'm sure leptos will also have it almost immediately. So I, I think this is going to be, I think it's gonna be interesting when, when, when we're in that world anyway. Yeah, actually, yeah, we, we should actually do a quick search for a second here because I, I think it was the week before, but Million JS has been doing a lot of

03:04:29 - Anthony Campolo

polls.

03:04:30 - Ryan Carniato

What's wrong with this component? I, I, I was having a little bit fun with this, but I think, I think, yeah, Aiden's been pushing this new thing where he got funded for four months, which we announced before, which is incredible for a project this age. And I. Do you know why the proposal is attractive, right? Like, think about it, like, I'm going to make your react app faster. You don't have to adopt a new framework or do anything different. I'm just going to automatically make it faster.

03:05:01 - Anthony Campolo

Who doesn't want the proposal on a web dev term is completely irrelevant because Tyler Cowan doesn't know the first thing about web development. He's looking for smart young people who could do interesting work that wouldn't be get, that wouldn't be able to be funded through traditional academia. That's what he's looking for, right?

03:05:18 - Ryan Carniato

Yeah, so that makes sense. But I'm saying like for a wider thing, why this is interesting. I think the tricky part about this is this is a last level optimization, kind of like caching. Like it's, it only affects leap nodes. It doesn't, it doesn't make a slowly architected app faster, it makes the last tip of the interaction faster. To be fair, that's how most frameworks that use signals use signals. They, they use it as a mechanism to get that last leaf node faster, that last text node in the DOM on a table faster. But we had it on a few weeks ago and we showed it. Sometimes in general, solving a problem by making it faster is better than scheduling. We did a demo where we compared RSC or concurrent rendering performance with Million. And while both of them got to a point where they got smaller, really sloggy, the, the difference was that because concurrent rendering makes sure everything's consistent and good and doesn't like interrupt in the same way or tries to do it, what was happening is on Aidan's version, he would do an action like in million and it would take a fraction of a second and you'd see the, the dip, but it would be done.

03:06:35 - Ryan Carniato

And this is classic, like solid, kind of, same kind of improvement, right? But then you go in the React version and you click it and the thing would actually go just as much, even, maybe even more into the red, except the action would get delayed like two or three seconds because like it was doing the concurrent stuff in the background and making sure that like, like that it was like trying to make it smoother. And you could argue that it wasn't quite as red, but like, yeah, I don't know. We just did it over and over again for the visual and I think it was very interesting. It's basically like it depends on what's expensive in your app and in cases where the cost isn't in your end user code, but like in the DOM operations or like doing 3D or some kind of expensive thing, then like concurrent rendering isn't going to save you. It's only if the computational cost is expensive. I think the challenge here is block DOM actually only solves the rendering stuff, not the computational cost. So maybe you put them both together and you'd be in a good place.

03:07:39 - Ryan Carniato

But it's, it's. Yeah, I, I think this is, this is very attractive idea. I think there's. I, I think the value of it is more questionable, but I think that people will have to explore this route because the, they're stuck with React. So I hope this has benefit. But if you think about it, the tr.

03:08:06 - Anthony Campolo

The.

03:08:06 - Ryan Carniato

At a certain point, usually React gets incompatible in a certain way. Like they had Dominic Gannaway, the creator of Inferno, working on the React core team, right. Like he, he was there. He could have made React faster now. Yes, he's on Svelte now.

03:08:19 - Anthony Campolo

Yeah, they, they felt five last week.

03:08:22 - Ryan Carniato

Yeah, yeah, yeah, yeah, yeah, yeah. So he could have made React faster, but that wasn't the direction because the compatibility with what they wanted to achieve. And it's the same thing with like the way Preact has that thing that compiles React and gets signals under the hood. And all these like small optimizations will always fly in the face, like, of what, where React things are going. Like, I Think React forget is the one that makes million not make sense anymore, perhaps.

03:08:46 - Anthony Campolo

Yeah, yeah. I had Aiden on JavaScript Jam and he has like this whole whole grid thing that compares like React with React forget with million. And.

03:08:54 - Ryan Carniato

Yeah, so it's, it's, it's a very, it's, it's. The thing is React could do this optimization. One of the reasons they don't risk for simplication, philosophically, they don't believe that Create should be different than Update. Unfortunately for basically everything that exists in the real world, that means you are saying that you were willing to make stuff slower. It's, it's like. But it's like very important for them from an idea standpoint. But it's literally the source of most of the performance gains of reactive frameworks and other stuff. And what Aidan's been able to do really smartly here and market it well is take a bit of that performance that we do in these other frameworks and apply it back into a small part of React. Yeah. But yeah, I'm excited in that this kind of conversation gets people talking about this because you're like, oh, because now when people go, oh, I didn't actually try solid, I just went to using the block dom million in React. Or I tried preacting, I've heard about

03:09:59 - Anthony Campolo

since solid kind of blew up or quick probably, since those two were. So I was like, oh, there's this new thing that I can try to make my thing faster without a lot of extra work, you know.

03:10:07 - Ryan Carniato

Yeah. Or what was the preact signals is another one. I can just use preact signals in React and now I don't need to use something like solid or whatever, or like, you know, svelte or whatever.

03:10:16 - Anthony Campolo

And oh, Aiden's in the chat, by the way.

03:10:19 - Ryan Carniato

I, I love this conversation though, because if that's what people are coming to tell me, that means they're thinking about it and if they're going to go try this, they might be satisfied enough on their project, but do you know what it means? Their next project, they're not going to do this. Their next project, they're going to be like, okay, now I get to start from scratch and I just want it to be like this. Anyway.

03:10:48 - Anthony Campolo

Yeah, he done a treadmill, right?

03:10:52 - Ryan Carniato

Because at a certain point you're just like, you see the benefit you use and you're like, why isn't React like this? Why can't we just do this? And then you're like, then let's just do it, you know? So, yeah, I'm actually very I think this is a just a change in narrative because there's two outcomes of this. React shapes up and does better and works on this, you know, in ways or people start trying other things. So, you know, that's the bottom line, from my perspective at least. Who needs signals? Right? Yeah, no, completely.

03:11:28 - Anthony Campolo

Right.

03:11:29 - Ryan Carniato

That's what I've been thinking a lot about recently. Right. I actually changed my Twitter thing recently. Signal signals everywhere. Because we're just back on this conversation again. And I think the latest, which is kind of exciting, is every couple months or every couple years, someone tries to bring some, some kind of reactivity into the spec. I think a few weeks ago we talked about observable events. I don't know if you, if you saw that, Anthony. There was like DOM event where it's like on click, but it returned like a RX observable. Basically.

03:12:06 - Anthony Campolo

Yeah. I mean that I never use rx. That stuff just makes no sense to me. Just like, okay, cool.

03:12:14 - Ryan Carniato

Yeah. So like when like in this kind of scenario, the problem is there's people who really, really want it and then there's other people. Like I'm never gonna use that. So it's sometimes hard to find the users because it's like you have to convince people like this is the generic API. The funny thing is RX kind of sits in this place where it has really good niche use cases. And it's kind of like if you want to solve that and those people like very much love it, but it's harder to always push it into the standard. There's so many operators, there's complex complexities and all this stuff, but one thing that is happening in the front end world that everyone seems to agree on right now is signals. Like if we did talk about Svelte 5, we didn't go much detail, but Dominic is basically suggesting at it, the reason for Svelte 5's incredible performance gain is because guess what, they switched to using signals under the hood. Right.

03:13:07 - Anthony Campolo

Incredible.

03:13:09 - Ryan Carniato

So he's got a really compiler optimized thing and there's a lot of ways you could go with a compiler spec and we could probably talk, talk about this for a bit, but essentially high level looking at this coming in is who, what frameworks use signals.

03:13:29 - Anthony Campolo

At this point, most of them.

03:13:30 - Ryan Carniato

Yeah, okay, I'm solid. View, preact, quick Svelte five. Actually, you know what, let's just go down the list. Best of js. Yeah, it's like where is it by total number of stars, UI frameworks. Okay. Angular. Did I miss that one? So yes, yes, not, not react. So skip, react, sorry. View Angular. Svelte will be view again. Preact. Solid. Not you, not Backbone. Alpine, yes. Ember, basically Polymer. No. Hyper App. No. Quick. Yes. Htmx. Who cares? Relay. No.

03:14:22 - Anthony Campolo

Okay, lots of people care about htmx. All of a sudden it seems like.

03:14:24 - Ryan Carniato

I know I'm just being, I'm just being a jerk, but my, my point is like,

03:14:34 - Anthony Campolo

it's kind of, it's becoming more of like just the thing to do. Just having signals seems like table stakes at this point, right?

03:14:40 - Ryan Carniato

Because if, if I, I put virtual DOM here, let's do virtual DOM instead. And I mean that's a pretty good list too. But actually I think the signals list is going to beat the virtual DOM list pretty quickly here. React Vue, Preact, Inferno, Riot, Mithril. Million racks. But yeah, there is an interesting customer for this. So Dominic was obviously working on the compiler and he threw something out a few months ago. And I think I put this on stream where Brendan Eich responded, said JavaScript's not a dataflow language. But we're back here again because more people are looking at other proposals around putting signals directly in the dom, which basically makes it kind of solid. And Dominic kind of very vocally went out here and said, I think signals essential front end web, if done right, they solve so many problems. I'm looking forward to working with all these people to make this primitive reality. And what that means is bringing signals to the browser, to the actual JavaScript spec.

03:15:48 - Anthony Campolo

Do you think that's going to happen?

03:15:51 - Ryan Carniato

I think there is motivation. I think it's going to be tricky to balance some of the parties, but not the way people think. I think they're not the biggest problem with specs. They try and do too much. And the reason they do too much is because there's a tough balance between who the consumer is. There is the low level primitive framework author guys who always get pissed off at the specs people after the fact and maybe weren't involved in the process. And then, and then there's like the end user developer who's like, I just want to use vanilla js. I mean those people exist still, but like the spec people have to look at that and every range in between. So what usually happens is if something starts from a land of like mechanical base kind of thing of like what I need, by the time it goes to try and get released, it has to appeal to some user or something like I'm going to use web components as an example because web components are A great example of like what not to do. Because if you look at the, if you look at like the framework author perspective or like the library maintainer author perspective, they're like, okay, I want scope CSS and I would like some way to know when DOM elements are attached or removed from the dom.

03:17:17 - Ryan Carniato

That would be nice. So like, you know, I could like attach something and like fire an event or. And back then they didn't have mutation observers and they weren't like, you know what I mean? Like, the idea is like as long as you can like picture, you can just put an element on the page and run some JavaScript, you know, and when it's removed you can run some JavaScript. Like that's the, that's the basic ask. And I want to be able to scope CSS somehow. That and maybe I want to like make ranges of DOM elements that can be removed and added, you know, like fragments kind of of a sense that were persistent. Those three things probably what every framework has wanted since 2010, but instead we ended up with web components because, well, if you take those three things, you realize they're kind of like a component system. And if you put them all together, you can make this like system. And then end users, not the framework authors, end users, can just like build their own thing with them and they're usable by them. Because the, those pieces by themselves, themselves might not be actually, you know, like people could use them wrong or they could be, you know, like there's a billion types of considerations that come, come with that and they're like, maybe too clunky to deal with.

03:18:19 - Ryan Carniato

Whereas if you tie up all these ends, you can like solve multiple problems from multiple parties and kind of weave that line perfectly and get that right solution. Now the funny thing is, as a framework author, that is exactly what I do. I'm always weaving, walking the line between solutions, picking the best parts. But I don't think that's the job of the browser. So this is the challenge with something trying to come up with a spec, because I think if you talk to the framework authors who have big interest in here, most of them will be like, yeah, honestly, I just want some kind of base ability to have a signal and maybe a computed or memo dried value system. And I think we all agree that they're poll based. You know, as long as we can have like a way of like doing that reactive propagation in the browser, it's fine. Like, I'm going to talk to like, we're going to talk more and see how far people Want to go, but

03:19:12 - Anthony Campolo

got a bunch of questions in the chat, by the way.

03:19:14 - Ryan Carniato

Yeah, yeah, answer those and I'll be right back. Yeah, yeah, gotcha. Let's, let's, let's see what's going here. What would the major benefit. Yeah, okay, I got to scroll way back here. Sorry, last comment. Htmx. Who, who cares? Yeah, okay, that's. That was that. Yeah. And then where's it? Yes, that's right. I wonder if Dash use Waku has signals. I mean jotai is getting close to it. I think they actually released a jotai signals library at some point. But yeah, so crazy. Whatever. I. Yeah, I don't know what that's referring to, but if it's the signals thing, I think that'd be fair. But yeah, okay. Major benefit of bringing being native. I was just getting to this. If we could all just have like there's an interop story here, right? If you could have the same base class to this, then all the reactivity systems could be compatible with each other because they'd have the same tracking system. I think the challenge is that every framework has a different idea of how to handle side effects and scheduling. Like when they run, should they be on the micro task, should they be synchronous? And even then within them like install, we have render effects and normal effects.

03:20:22 - Ryan Carniato

We'd have different behaviors with transition suspense. Like all, all of those kind of things. So like you get into the zone where like you have zones of different flushing boundaries off screen. Like there is a whole bunch of complexity that I don't think belongs here. But if we all had the. I think. Yeah, I'm actually going to go into this a little because. Like this conversation with Dominic continues a ton and like you can read for hours in here. But what I wanted to put is my initial point here is that I think when it comes to pure portion signal drive values, it occurs to me that most discussions these days around syntax or like what's the most optimal algorithm, but not so much around behavior. I think we all have kind of arrived that we want poll based reactivity for signals and dried values. And what's cool about that is that there's like no scheduling consideration because when you have a library that just uses like a pure pull based library, when you update a signal, it doesn't do anything except tell any downstream derived values that hey, you're stale. So when someone asks for them again you need to recalculate like rerun the function.

03:21:42 - Ryan Carniato

But if they are not stale, you just return the last value. It's kind of like they're memoized, right? So you know, it's really about that. We have different opinions around scheduling and side effects. And when I said this I realized most people don't actually probably get what I'm talking about. But the library that sort of tipped me off to this was Milo's work on Reactively. And his library doesn't have effects. He uses the same thing for a signal as a computed. He just has a single primitive. But basically it's like, okay, I have a value here, it's counter. And then I have a computed value. And then if you want to get the value of the counter, like I don't know about this.

03:22:32 - Anthony Campolo

Equal.

03:22:32 - Ryan Carniato

Like this right? Is weird. But let's say if I want to get the value of the, of the counter, then you just call docket on it and. Or render.

03:22:45 - Anthony Campolo

Get.

03:22:45 - Ryan Carniato

What's render? Yeah, okay, his render. I guess his render is his effect. But essentially he's calling git on a. On an. On what I'd consider something effectful. My point is his system is completely pole based. There's no scheduling, there's no like do this every time this changes. It doesn't run anything until he calls get at the end here so he can, you know, set some new values, but then he calls get.

03:23:08 - Anthony Campolo

And is the point of this just like the benefits you get from functional programming in general?

03:23:14 - Ryan Carniato

Well, it's. It's like a reverse memo system. It's. It's a pull based one instead of a, like a push. I mean it is like benefit.

03:23:22 - Anthony Campolo

Like why, why would you want that is what I'm asking.

03:23:24 - Ryan Carniato

Well, how should I put it? This is just, it's. I'm not saying you want this API. I'm saying that every single solution starts with this and then they build a whole bunch of crap on top of it. So if we actually just had this, then suddenly everyone's version. The problem right now with the reactive system, when we actually have something where we enable external source where we can have like mult. Like you can use mob x variables inside solid. It's imperfect, but it's there. And the idea is that every reactive system isn't compatible because they have a singleton that does tracking. They have a way of being like, when this effect's running, this is the current context. Listen to my things. But they don't know how to listen to someone else's things. Well, if they were actually all the same base class, they would actually all be able to listen to each other. And I'm getting To the point of what the benefit of that is, is it's not just like, oh yeah, they're interoperable. I know a lot of people who probably don't care, but picture what it means if that's native. Okay, what if you could get better stack traces for your errors instead of having a queue like the imperative running of signal propagation.

03:24:29 - Ryan Carniato

You could actually like when an error gets thrown, it's not like where it gets thrown in a queue, it actually throws along the reactive graph. So like you could understand that hey, it's because this change that this change or because this asks for this change, you could actually trace the graph which is different than tracing the execution queue.

03:24:46 - Anthony Campolo

Is this kind of that Replay is working on.

03:24:49 - Ryan Carniato

Replay does like back and forth debugging and we have people on the solid dev tool side working with the Replay guys to see if they can do reactive debugging, which is cool. But I'm saying it's like this could be kind of browser built in error handling debugging similar, but you wouldn't need

03:25:03 - Anthony Campolo

this whole extra product thing is basically it would just be there and it would do it automatically.

03:25:07 - Ryan Carniato

Yeah, I mean Replay going back and forth is the next level picture if you can go back and forth along the graph time.

03:25:13 - Anthony Campolo

Yeah, yeah, exactly.

03:25:15 - Ryan Carniato

Yeah, exactly. But on the other hand, if you just think about it, this is easy for people to imagine. Think about what Async await did in JavaScript and Chrome tools. You can actually walk the async tree right when you hit it doesn't. Even though it's a completely different stack Trace Chrome like let you walk through the async so you actually continue and you can actually debug. You can go up the stack through the Async awaits. What if you could do that through the reactive graph like because this is a native capability. My big point of why I showed Reactively is this is if you keep it on the pull side, there's no scheduling. There's all the subscriptions are technically even auto disposable because if no one's listening to reactive like then this doesn't need to exist because it's all derived. Like it's like you can basically you can make it auto disposing. You could make it basically there's no concern potentially around cleanup or scheduling or like this is just a very simple primitive for being able to read these kind of semi. Like they're. They're basically memoized, but they're memoized with like automatic invalidation.

03:26:36 - Ryan Carniato

Like and it with this what I was Trying to show is like that. Where is it? Yeah, I'm gonna grab this one. Milo went to Bubble and he was trying to build this for. Bubble has their own reactive system. And he's like, but I'm working on solid 2.0. He's like, maybe we can use the same reactive system. So he took the. It's funny, he Reactively internally became like the prototype for solid 2.0. And we have a private repo for that. And then we started working with the guy from Reactively created last summer, like around August last summer, about a year ago.

03:27:12 - Anthony Campolo

I don't know anything about it.

03:27:13 - Ryan Carniato

And then like, it was really interesting from the signal kind of thing because he basically found a very performant way of doing signals and he kept it really on the Bass Primitive side. He didn't worry about effects. And then what was interesting to me is he took that bass, we worked with Raheem from Maverick to work on solid 2.0 bass, and then he took that base again to Bubble to try and integrate, and then they shifted it a bit more. And we've been kind of progressing this reactive core library. And he made this effect ts. And I always laugh about this because this effect TS is essentially just an implementation of Effect in this library. But Bubble does not use it because Bubble has their own thing and they're not going to use this version. And then Fact Solid is not going to use this. In fact, this file can be deleted. But right now, for me, it serves as an example because this is a system that doesn't need effects. But what if you wanted to add effects? Like, you know, create effect, console log, whatever.

03:28:19 - Anthony Campolo

Well, great example of just like an exercise of like, how would you add effects to a thing? And most people have never even thought about that. They just use. They use the effect like. Oh, yeah, how do you do effect? You use effect and.

03:28:31 - Ryan Carniato

Yeah, yeah. And the example, this is over complicated because he has a few other things in here, including like hierarchical stuff. Because Solid does like hierarchical nested effects and stuff. But like the base of it here is that he has a computation class and then he has a few like enum variables for the state of the signal. And then you can ignore the rest of this. Okay, then end user code, basically he called the scheduled effects, but I'd say like, yeah, scheduled effects is fine. And then running effects. Yeah, these are just flags to keep track of whether you've already scheduled effects or if they're cor. Currently running. And then he has an effects list. And then this is just so people can flush sync. We can ignore that. Then he basically has this flush function which probably should be called schedule, which is like set schedule to queue microtask to run these effects later. And you might be like, okay, what's running effects? Well, if there are effects, say that you're running them now iterate through the, through the queue and run them and then clear the queue and stayed at the end. Okay, like this run top is hard because it's solid, but we can ignore that for a second.

03:29:38 - Ryan Carniato

So it's basically just a for loop that runs through like a queue, like

03:29:41 - Anthony Campolo

a, like a, like an array almost turning complete.

03:29:45 - Ryan Carniato

And then, and then what's in effect? Well, he just took the base computation class and overrode the notify method. So instead of just being notified and saying hey, I'm dirty, if, when you go to say hey, I'm dirty, you just push it to the queue and if it hasn't been scheduled, schedule the effects. I don't know if this appeals to everyone to understand what I'm saying here, but it's basically all you have to do is just very simply take an existing computation mechanism and then be like, oh, hey now when you get notified, instead of just saying that you're dirty, also push something to a queue to. And all that Q does is basically call that get. You know, just goes through the list. So like we, this example chose to use where is it? Micro task queue. But you could do whatever you wanted. You request animation frame and. Or you could not schedule them. You could say hey, no, I actually am going to hold this until it gets attached to the dom. Or I can like you could do any number of things and, and basically you'd still benefit from this being built into the browser.

03:30:53 - Ryan Carniato

But as you can imagine, this is not a very end user. It's kind of like streams and node. Yeah.

03:31:00 - Anthony Campolo

Implement your own one of these old JavaScript APIs that we all originally learned to code with.

03:31:04 - Ryan Carniato

You know, it's like implement your own readable stream by overriding these methods on the stream class. You know, I'm not suggesting that this might be the, the final spec, but I just wanted to point out that it would.

03:31:16 - Anthony Campolo

This is where the value that's easier to put in than most people would think about and could just be there on hand.

03:31:22 - Ryan Carniato

Right. And without being too opinionated. And the truth of the matter is in every reactive library under the hood there's these, you know, these where is it? I'm going to go into not effects, globals index. Probably core.

03:31:38 - Anthony Campolo

Core.

03:31:39 - Ryan Carniato

Probably core. Yeah.

03:31:40 - Anthony Campolo

There's a lot more questions and comments also as you've been talking.

03:31:44 - Ryan Carniato

Yeah, but which I'll get to a second. But essentially this base class is kind of complicated. There's a whole bunch of crap, a whole bunch of properties in it. But like an actual signal or computation internally has like, you know, at least, you know, maybe, maybe 10 or so of these properties and things that we keep track and owners and setters and all that. But that's not a good interface for the end user. Right. Because what are they going to do all this stuff. But me as a framework developer actually want access to a lot of this information. So we always have internal nodes and the external API. So what I actually want the browser to do maybe is basically standardize on the internal API nodes because we can always override them and add new behavior to them. This is the kind of mentality I'm coming from. But I understand from a spec perspective

03:32:28 - Anthony Campolo

like a browser object.

03:32:30 - Ryan Carniato

Right?

03:32:30 - Anthony Campolo

Like a class.

03:32:31 - Ryan Carniato

Give me a class. But like from. I can understand from like a spec perspective. This is not like people can't just pick up and use it. They like. This is actually kind of clunky. So I think this is where like these kind of challenges come from. Right? Yeah. So what do we. Let's get with chat here. So I was talking about the benefit. So then okay. Signals can be implemented in different ways, each with their own trade offs. The API also some of the governor. But how do you get. Which part's like. Well, that's the whole thing. Like I was trying to get low enough that I didn't care. Like if you use dot value or a function. I don't care. Right. Because the truth matters. Whatever the spec lands on, I'm going to wrap it with the same API use with solid today. Like I'm not solid doesn't even have is signal. Like I don't actually care about the interop layer but if I was running a spec I probably would because I'd be picturing these use cases. I just personally have no use for any of it. So it's kind of an interesting tension.

03:33:25 - Anthony Campolo

Well it's like we were talking about with Redwood and how you could have the whole way you write your redwood stuff and then the internals which would actually do all the stuff. And it's like this. There's just. It makes sense to have that separation because otherwise everyone has to know everything. Like that's the way you specialize.

03:33:41 - Ryan Carniato

Right. How specifically like sort the browser decided on the right algorithm. I'm actually less Worried about the algorithm thing. To be fair, there are a bunch of different algorithms that optimize to different things. Like some are better at fan out, some are better at creation, some are better at being deep versus whatever. All of them are very fast. As long as creation is fast, I don't really care about update. The update performance is probably good. I know people might have specific needs, but like the difference there isn't what's killing people on performance. The difference is like everything else, like the speed of the reactivity only matters as far as far as the creation cost because that's the biggest overhead. When you go and create a reactive graph versus just like rendering or whatever, it's like creating a vdom or whatever you're creating, you're making a bunch of memory and that. That can be expensive. So you know, there's a few different. There's like the coloration algorithm. We went through a bunch of algorithms on my previous stream. I think as long as it. I don't actually think that part matters as much surprisingly. But you know, everything's like.

03:34:52 - Ryan Carniato

Yeah, so everything is lazy. Yeah, this is what I was trying to say. Yeah, I'm catching up. Yeah, I'm about 10 minutes behind in the chat. Thank you Anthony for pulling that out.

03:35:02 - Anthony Campolo

Does Milo have a Twitter?

03:35:04 - Ryan Carniato

Yes. Modern me. He joined finally after I posted. Posted his article because he didn't post his own article

03:35:13 - Anthony Campolo

like Nexel. I remember when Nexel didn't know.

03:35:16 - Ryan Carniato

Yeah, he's. Yeah, I mean this is. This is a typical stuff. I. He. He's just about to enter second year university so he, he was already huge.

03:35:27 - Anthony Campolo

Yeah, he was way too good.

03:35:30 - Ryan Carniato

Right before the summer before university he created Reactively and he. He's been on the Solid core team now since I think 2020 or 2019 because he came in and he wrote a different hyperscript version for Solid that was as performant as the JSX but it was too clunky to use. In a lot of ways it reminds me of block dom but it was like where he was trying to make hyperscript make blocks for solid because that's what our JSX compiler did. Yeah, really smart kid.

03:35:56 - Anthony Campolo

Obviously I need to get him on fsjam,

03:36:00 - Ryan Carniato

but where was I? Yeah, sorry, back to the comments. I see. Yeah, okay. So much here that I probably won't get it all, but proxy holds a reference people talking about proxies so what makes use in react debounce version making batching a state there's different places you can batch just so you understand And I guess there's an argument of whether you want to batch on right, but actually none of the reactive frameworks batch on right. They all batch on effect. Batch on right is what React does. Batch on right and, and Solid actually did that in our batch mode in the early days, where if you write, you hold the values until you're like, okay, now I'm going to propagate. And honestly, that model is the least likely to be flawed. It is actually a very smart model. The only problem is, literally everybody hates it. Except maybe people who've used some different, like, smart functional programming stuff in the past. Almost every developer comes across. It is just like, why does React do this? This is the stupidest thing ever. I hate it.

03:37:07 - Anthony Campolo

Unless you're a closure developer. Maybe.

03:37:10 - Ryan Carniato

Yeah, like maybe. And this, this is, this is the sort of, sort of thing where, like, I'm actually not worried that much. I mean, and the thing is, no, why, again, if you want to batch the writes, you can always wrap your signal primitive and have the ability to batch the writes. Like, this isn't, this is not actually that hard to like, do that. What most frameworks do is they batch the reads, they batch the effects essentially. And Solid today only does, does that synchronously. And that's why you have to wrap everything. I mean, there's other reasons to wrap everything, but that's, that's, that's why they do that. Like all the crate routes, um, and a lot of our, many of them use microtask cues where they say, you know, at that point they pull all the values. But I think if we talk to everyone, almost everyone will be okay with, well, here's the beautiful thing. If you don't care about batching rights generally, and if the batching only happens on effects which are not part of the spec and outside of the realm, then we don't actually have to worry about batching at all for the spec from my perspective.

03:38:20 - Ryan Carniato

So this simplifies things drastically. Could give a default, but the problem with the default is that you're implying behavior and I think it's dangerous because this is the challenge I had with this is because, and we'll talk about in a minute here, is that if you. Having two different effect systems run at different times might be okay if it's intentional, but if it's not intentional, it causes inconsistency. So like an example, actually, I'm going to get to this in two seconds. We'll go there in two seconds. Okay. Would that flash effect make UI not atomic use all the race. Yeah, the flush effect ideas like everybody has an escape hatch too which is like flush everything right now. It does definitely change the behavior if you do that because it means that you're like I'm ending whatever the cycle was right now and I'm going to start a new one. So. It depends on what you're flushing. But yes, in terms of effects. Here's the thing though. So when I say flush all, any change that's already in will have already told its things what to change. So it's just any further change won't, you know, apply.

03:39:48 - Ryan Carniato

So like you can almost view flush effects as like when you're in a function and go like Q micro task and then go in, you're basically pulling yourself out of the flow flow like everything that was already scheduled will then run. So actually I think it still stays consistent sets the frameworks and end users. Yep. Good luck. Okay. Okay, let's, let's go back here for a second.

03:40:15 - Anthony Campolo

Good luck. Yeah, it's literally impossible

03:40:20 - Ryan Carniato

because I was talking about that. But the reason this came out, I actually found out later was that this is where the conversation was. I forget if we covered on stream, but there's a talk of something called the DOM Parts API and they're getting pretty deep into it where they had this idea of like building templating in and updates into the browser and some and someone's like well couldn't we just do this which is like document, create element button, text content equals count, wait, count as a signal and then here append div. Well, div is a signal as well. And using this as a way of just replacing elements essentially by using reactivity because once you wire it up, if you change like they're using preact and view syntax but if you go div value because a different element, well, you've just replaced the section of the DOM and if you update the count on click well you've just updated that text directly without re rendering anything. As you can tell, this is kind of what solid does, right? Like super fine grained updates by basically wiring signals to portions of the dom. But the challenge and I when I saw this post I was like this is cool, you know like because you can picture like a library like basically compiling to this.

03:41:35 - Ryan Carniato

Right. And for solve that would mean way less code. Not way less, but considerably less code in our output if these things are built in. But I actually sat with it a bit longer and I came back to it and this, this is what I did is the thing that's not shown in this picture is even though you're inserting signals and derived values, these are creating effects. These are. There's implied scheduling in the DOM here. There's like, like this is, this is where like I think the standards people and some people might like hit walls because like in, in frameworks like solid we don't always run the effects. We kind of like hold the effects sometimes because of you know, suspense or you know, what if want to do off screen and stuff. And to be fair, the DOM could detect off screen but having competing scheduling methods that aren't controlled by the like aren't the framework can't control or be aware of is actually kind of could be problematic. Do you subclass render effects? You know, we have like these different mechanisms. To be fair, I did get some responses from people who are, you know, where is it

03:42:50 - Anthony Campolo

here?

03:42:51 - Ryan Carniato

I guess my hope would be that the DOM inflation could determine the appropriate timing, batching, sync methods. Since it has the most awareness the tree render state, it knows about occlusion transitions about page lifecycle. An example, the browser could defer tree updates within context visual auto container containers without requiring bookkeeping or exposing render state to js. It could also force you out. So it's interesting, I mean this is a different path but if we had I guess new CSS properties where we could basically control the section of the dom, I guess it would be possible where you can go this range of the DOM doesn't want to run its effect effects yet. But I, I think this is the, the challenge with this. I, I don't know if I've illustrated this enough. I'm getting kind of into the weeds a little bit in the technical details but like if you, you could. This very easily starts simple and then gets really complex as, as soon as you start trying to do stuff with effects and like scheduling and actually integrating it with any existing API. But I feel like for a certain audience this won't have value unless it does something like this.

03:44:03 - Ryan Carniato

So that, that, that is definitely the, the debate here, so to speak. All right. I know chat was talking a bunch there, but then I, I think we, I lost them.

03:44:19 - Anthony Campolo

I think you're probably answering most of their questions and they're probably like cool.

03:44:24 - Ryan Carniato

Yep.

03:44:25 - Anthony Campolo

There's one other thing. I saw some news. I'm not sure how big it to Dino you are, but fresh 1.4. Pull that up. This is two days old.

03:44:34 - Ryan Carniato

Okay. Yeah, I'd love to see that. All right. Is this the one? Actually I'm going to do it on this One.

03:44:41 - Anthony Campolo

Yeah.

03:44:42 - Ryan Carniato

So sorry, is it from Deno just

03:44:46 - Anthony Campolo

Google fresh or this will get you to it? Yeah, probably so fresh One off four right there. Yeah.

03:44:51 - Ryan Carniato

Oh yeah, yeah. Faster page loads layouts and more. Faster page ahead of time compilation, custom HML layouts, async wrapper, quicker typing, better organizing route groups and co located islands. Okay, cool, cool, cool. Yeah, I kept them breaking fresh on stream when it was like still very new, but now they have Marvin Hagmeister working on it. You know like the other pre act guy we were just talking about. Jason Miller.

03:45:15 - Anthony Campolo

Yeah, yeah, yeah, yeah. I feel like also you have like a vested interest in Deno just because of their integration with netlify, you know.

03:45:21 - Ryan Carniato

That is true. And I. Dino does have like this. If there was a force out there that could be like the equalize, like it's. It's kind of like sad state of things like when you have something like node at the top. I mean Deno succeeded in a certain way in this. But like picture we had Node at the time, right.

03:45:42 - Anthony Campolo

Dino succeeded by making something better, but no one used it. Like that's the story of Dino, right?

03:45:47 - Ryan Carniato

Exactly. And they got pressured into adding Node Compat and like kind of backpedaling on almost a bunch of the.

03:45:54 - Anthony Campolo

I've been following Dino since 2020. So I was like, I know this whole story. I. I think Deno is great. I wish people made more. The problem is just no one to make the argument for why people should use it. They're always just like, well it can't do this stuff. No, it can do. No one's gonna want to migrate other stuff. So just just don't use it. I'm like. But like that's not. You could make that argument for anything.

03:46:16 - Ryan Carniato

Yeah, yeah, yeah, yeah, exactly. With Freshman four, you can set head directly on the server. Okay. Layouts. Okay, I guess. Did they not have nested routing before or they changed the style of nesting routing.

03:46:35 - Anthony Campolo

I would guess they probably built what next built in Dino and then as Next has changed, they've needed to change stuff to make it more like next. If I had to guess, I have no idea if that's correct or not. But I feel like.

03:46:47 - Ryan Carniato

Oh, so the async layouts and async grapher functions. Okay, so what the. Okay, I see what they're doing. Okay, yeah. So they've added something similar to server components here in that like they already had server components because technically the server like it's like aspect. The server side was already server components and these are the islands they Allow async components on pages and layouts here so they can fetch. This makes sense. See one thing I like about Deno is because they have the separate folders, there's no like concern here about like ambiguity. And so you like, you can't put your islands in the like islands are over here because the, the whole thing with the async is it's Async on the server is actually not a bad pattern. I mean I. You still want to fetch it above because otherwise you get waterfalls. But like it's actually better than like re rendering like the suspense model of like you know, react style. Like you get there, you throw a promise re render that if, if you can actually await an async function and handle it at a component level you could actually like pause resume. But you can't do that in a client app because state can change and the component could render again.

03:47:59 - Ryan Carniato

And then like you get the weird like. So like on the browser you actually don't really want Async Await or you have to do a compiler and turn into a different thing. Like it's, it's a lot trickier. But yeah, this makes a lot of sense because it's a lot easier now. Yeah, I'm not surprised this change because like it's the same thing like how Astro has top level awaits. So like they're getting in line with these simpler server solutions that just have like oh, you can just wait in the component because this is this, this is a trend that I'm having a hard time with because it promotes waterfalls. The only thing that I think Deno has really nicely going for it on this side our search fresh is that like people aren't like, I don't think they're intending to have like server components like libraries. Do you know what I mean? And I think that that's, that intention is what is the most waterfall inducing because now you install package off npm, put it way down in somewhere and it happens to be fetching data below some conditional like presto waterfall and you didn't even realize or you weren't thinking about it and it was just an NPM package.

03:49:03 - Ryan Carniato

So I don't think they're going to.

03:49:04 - Anthony Campolo

It's only that if they could just solve it in the framework and it stays in the framework that it could be useful.

03:49:10 - Ryan Carniato

Yeah. Or in the app like don't put this in NPM packages. But okay, so now. Okay. And this is the co. Location. Okay, I got it. Now people do kind of want to like when you, when you Start dealing with larger apps. Keeping separate folders is kind of a pain in the ass. So now the component and Islands folders can actually be nested.

03:49:34 - Anthony Campolo

Looks like they're adding support for a few transitions.

03:49:37 - Ryan Carniato

Yeah. Next version and we're exploring how to add spa like client navigation to Fresh. Yeah. So I mean this, this is, this is the, this is why I'm excited to have after on next week and why I was talking about it last week is the baseline expectation of people going in here is going to be islands plus view transition sort of kind of thing. I think nested routing makes it more interesting and I think like I, I mean I showed it, I showed the, our like HTML based server component type solution about a year ago and I kind of was calling this shot that like within 12 months there'll be a bunch of these and that's what's going to go up against rscs. And as I said when, when it's preact or solid and you're like oh yeah, my app's like eight kilobytes. And then you're like oh but my net, you know, to be in reality it's not that small. It's more like my app's 30 kilobytes and my next app is 200 kilobytes. And at every single point you're just gonna like. You know what I mean? Like maybe not but like it's.

03:50:45 - Anthony Campolo

I mean my, my blog is built in Astro. I'm a big fan of the that approach and the Islands stacks. I generate or bring in server stuff when you need it. Like have components when you need or when you don't bring in JSX when you need it when you don't. I think it's great.

03:51:00 - Ryan Carniato

Yeah. So it's awesome to see them continuing to work on Fresh and have like full time resource on it because this is really how you can fresh.

03:51:11 - Anthony Campolo

Makes it a lot easier pitch to get someone to use Deno if you get them to use Fresh. For sure.

03:51:16 - Ryan Carniato

Yeah. And I focus on the, the features I cared about part of the stuff here and their big headline is actually the Dino side which is they, they do all this stuff. See they were doing stuff not ahead of time so like it would they get hit the first time and now they're saying they can do ahead of time. Remember that was the whole thing. No compilation. It just works because we lazily evaluate everything. But compilation was still happening. People when Dino was pitched people were like oh yeah, it's the framework with no build step or like it's no build.

03:51:49 - Anthony Campolo

Well, it has. That was impossible though, because it was built with typescript. So you can't build a typescript and not have a build step. That's really. That's like fundamentally impossible. That's like cold fusion moment.

03:52:00 - Ryan Carniato

Exactly. Right. So now like, I was. It was. This was going to happen. Yeah. 45 to 60 times faster for cold start. Yeah. That's what actually matters, you know, for. For these like, edge functions. So I. It's good there.

03:52:18 - Anthony Campolo

Yeah. Startups all about instant. Like how fast the first hit go.

03:52:22 - Ryan Carniato

Yeah, yeah. The small walks, what they're saying.

03:52:26 - Anthony Campolo

Yeah.

03:52:26 - Ryan Carniato

So it's funny. Yeah. Because solid start docs are about 30kb and it's all angolia.

03:52:31 - Anthony Campolo

Like Algolia. Yeah. That's the search, like page find. This is the hot. This is the hot new way to search without that, apparently.

03:52:40 - Ryan Carniato

Okay.

03:52:41 - Anthony Campolo

Open it out.

03:52:43 - Ryan Carniato

Okay. Okay. Yeah. Okay. So cool. Let's see. How's chat doing here? They can get requests from layouts. Next doesn't get requests from layouts. Oh, man.

03:53:12 - Anthony Campolo

How do you need a request in a layout?

03:53:15 - Ryan Carniato

Well, okay. I mean, I actually. I hate this layout trend that's going on right now. Like, I.

03:53:30 - Anthony Campolo

Because it actually be a nav bar. Like, why would you need a request in your nav bar?

03:53:35 - Ryan Carniato

Like, this is an. This is an example of when you take two concepts and you put them together so that people can. Like, it makes it easier because now you have less concepts. Because now you have like a perfect example, a component. It takes care of everything. Lifecycle, re, renders, whatever. Like, that's the reaction thing. Right. When it's like a component is actually a lot of things. And like. Or at least a couple of things. It's a change management system. It's a unit of code that you want to break up. Like your ui, it's. It renders like it's a few things. And the problem, the challenge I have with layout is that, like, it's arbitrary, that it's like. It's like that. We call it layout. Like, the check was not clear.

03:54:21 - Anthony Campolo

Like the link I just sent you in private chat. So this is how I've been thinking about layouts because this is how we define in Redwood. A layout is something that wraps a page. So when you find it like that, like, it's not just like. And I don't know if this is necessarily entirely correct, like, there may be people who use layouts in a way where they don't always do it this way, but this is at least like, you're always creating Pages in redwood. And then your layout is always going to wrap it in individual page. So you'd never have a layout that would be like, I'm just gonna have a layout for like this little spit. This is like this carousel in my page. There'd be a layout right in the middle of there. Like it's something that's gonna wrap the entire page. Right.

03:55:00 - Ryan Carniato

Okay.

03:55:01 - Anthony Campolo

So

03:55:03 - Ryan Carniato

mechanically. And this is where I'm coming from. From like this. The designer view is like I have layouts and page and there's elements, you know, kind of like. I'm not gonna say exactly atomic design, but like there's this idea that you have parts of the page that are defined parts and then you could like, it's part of the designer. Right. And the, the thing that I'm getting at is like from a mechanical view for the framework. And this is something I'm very familiar with because I never had a vdom and Ember didn't have a VDOM back in the day. And why Ember invented nested routing, you know, is because the whole point of the layout has had nothing to do with layout. It had. It had to do with not re rendering part of the page. So I'm on Twitter and I go

03:55:49 - Anthony Campolo

should bring in some of these comments here saying that requests would be useful for things like current page indicators. Currently you have to hack around with client components.

03:55:58 - Ryan Carniato

Yeah, yeah. Well, it's. It's part of the page is what I'm getting at. Like, I mean this, this is going to roll scroll up on me because it does when I switch between posts and reply. But my point is like it's the remix homepage example section of the page, the whole page, then section and then section. Right. The page is an onion and the whole point was not to re render the outer part. See, react didn't care. So in a lot of cases they were just like, oh, whatever. Like we'll just re render the page. We'll just use. We'll make our layout a component and we'll put it under the route. So when I switch page, I'm just going to go to the next page and guess what? I'm just gonna render the layout again. Even though it's a, you know, who cares, right? VDOM diff. Oh, it matched on the same element. Even better. Now I don't have to re render it. Like that was the mentality. But when nested routing came out in other frameworks that don't have a vdom, it was so that when I switched from pull post A reply. None of this re renders right?

03:57:01 - Ryan Carniato

But it means that like is this a layout? Is this a layout? No, they're just parts of the page that equally have their own data requirements, equally have their own reason for managing the request want the router. They're just parts of it. The fact that it's called a layout is arbitrary. Because I could take something here and this is a page, let's say and now I want the modal state when I click into something. Like let's pretend this app when I click on something popped up a modal that gave me like a picture view. Like it might even do that somewhere. Like click this perfect pretend. Well, look, this is actually part of the URL, right? So I did this is routing here. Okay. Even though like conceptually made my old pages behind it. Now is this also a layout? Like it's this distinction from a mechanical standpoint is like it's just a route section that doesn't have children. Like a layout is one that has children like this. This is kind of like the mentality that I've had from day one. So it's like been very difficult to watch this layout thing happen. Because the biggest argument I see for layout is the designer argument.

03:58:16 - Ryan Carniato

And I see that a lot of the file system routings used to nest the same way. The mentality I talked about was where if you had a folder and a file the same name, that was a way of saying like hey, this is the folder would be the things that would go inside and the file would be the page. So you here's the page. And then if you have a folder. Now you're saying that you want to drill in like children style. And I understand why that can be kind of clunky. But the thing is that's why layouts came out because then they could hoist the file inside and be like, okay, look, now you don't need to have a folder and file be the same name. Like a weird convention that's not very obvious. I agree. And now you can just call a layout. But the treating the layout as something different is very, very, very odd to me. Because you're saying redwood you took a very design oriented thing where you're like look, the layout is the like what the shell of the page or whatever. And pages have these things but mechanically when this is why those frameworks have layouts in layouts in layouts in like layouts in those other sections and the layouts and those is because really it's this whole layout thing is a fictional Creation.

03:59:22 - Ryan Carniato

Like, it's. It's like.

03:59:24 - Anthony Campolo

Are you saying that layouts are a social construct? Like, it's.

03:59:28 - Ryan Carniato

It's something that like, made the file system router, like, flatter, I guess, or like less. It doesn't even make it flatter, actually. It just makes it like, a little easier for. Better for file organization. And like, yeah, you can kind of, from a design standpoint, like, make an argument again. It like, make it a thing, but it's not actually. Mechanically, it's kind of not a thing. I don't know. That's why, like, the root layout and next is not like other layouts because,

03:59:58 - Anthony Campolo

like, it's actually, for me, man, the layout is where you put the. The logo, the nav bar and the footer. That is what a layout is to me.

04:00:07 - Ryan Carniato

Right? But then it's like, oh, is this tab bar the layout for the section?

04:00:13 - Anthony Campolo

This is a component. This is a timeline. A timeline is a component within a page which has a layout.

04:00:19 - Ryan Carniato

Right. But the argument for this is when I switch these tabs, I don't want to rerender this top section. So it can't be a component because the component will rerender.

04:00:31 - Anthony Campolo

Well, if it's a component that doesn't re. Render.

04:00:35 - Ryan Carniato

But I'm saying, like, the route changes. Yeah, but I'm saying that if the route changes, if the point of the page entry point is up here and you navigate, then you re. Render the whole thing. Like, that's why it came for me from a mechanical standpoint.

04:00:49 - Anthony Campolo

I see. Gotcha.

04:00:50 - Ryan Carniato

Right. So yes, layouts are kind of a navigation boundary or a wrapper around navigation boundaries from your perspective. So like, like. Because, like, I did a refactor of. Of the Movies app demo recently because Nikhil decided to put layouts in Solid Start and had to make sure that I removed them before I merged it and.

04:01:15 - Anthony Campolo

Hilarious.

04:01:16 - Ryan Carniato

And. And. But. But everything I could express for layouts, I could express without layouts or vice versa. It's just a different. It was just like a different syntax or the same representation. And the only difference was a layout was if I put the file like I'm trying to think, if I have an example here, solid. Do I have Solid Start open somewhere? Yeah, I do. The difference between a layout and See if I have an example with nested routing not on this branch, probably, which is very unfortunate. But like, if you do nested routing in routes, the way you do it is by putting a file outside that has the same name as the thing inside. So like, if there was a none of These have an index page. So it's like a terrible example here. That's something I wish I actually had a good example of nested routing in the base examples. But my point is the difference between the layout and the like old next JS or V. Actually old next never had nested routing. So it's. I guess it's the nuxt version of this stuff. And Remix, like remix is you move the file that was outside the folder into the folder.

04:02:42 - Ryan Carniato

That's the difference. Like it's the same mechanism of nesting. I actually think, you know, we actually have it here. Do we have it still open? Yes. See.

04:02:59 - Anthony Campolo

This.

04:03:00 - Ryan Carniato

I see how. I guess this set wrap injects layouts, right? And this is, this is the way that you do it because you're actually doing route, route, route, route. But if you look the way solids router works and Remix react router works in these states and ember way back in the days this would just be another route because we didn't need to call. Do you know what I mean? You didn't need to call wrap. You'd just be like route. And then you take the shared part of the path, which is admin categories and put that there. So route, admin categories, page or component, whatever the component is. And then down here be/new the specific components. Like, I mean it's a different way of doing it. But my, my whole point here is you could just. This nesting is something you see very obvious when you're using the. The. Either the JSX base of the route or the JSON base of the route. But it's not. I like. Like layouts here. Sure you made a special component to do it, but you could pretend like you can already see the nesting. Like this could also just be a route with a shared path.

04:04:12 - Ryan Carniato

Like it's. It's just the way the router actually operates, so to speak. So like the whole layout convention has generally been just mostly just so that you can move the file inside the folder. But actually in reality they are a navigation boundary because if you. I mean if, if you're going between a page that starts with admin categories and a page that doesn't start with admin categories like you could conceptually one model I guess would be that this whole thing gets un. Mounted when you switch. Like the layout gets unmounted and this so that layout has as much right potentially to the data, especially if it's shared. Because do you want to re render this layout when you switch between these two pages? Probably not. Like you. It could Fetch the data that you use on all these pages. Let's say like if this was users or a user and then you had the settings like on Twitter, you don't. You might not need to fetch all the data again because you already have the piece above it. Right. Anyway, Layouts are like hawks. But like if I don't think. How should I put it?

04:05:40 - Ryan Carniato

If you get a sufficiently nested page, I don't think you can do it without layouts. Like it's the layouts that do the nesting. Right. Maybe I'm wrong. What do I think about Remix Flat Zone? I got really into this for a short period of time. I think it's really cool because like you get rid of all the folders. But then I got really tempted to mix folders and files and brought back all the same problems again. It. It's a lot for people to look at their app and then see like one pile of like these really long character things. You know, I keep on thinking back to when Windows only had 255 characters in the path. But on the other hand I think the routes are sort in the right order. So like I kind of go back and forth. I actually think it's. It is kind of really nice. It's like I kind of. Okay, like I understand the shortcomings of what we're doing right now or like Solid Start is. Or remix v1. And I'm okay with them enough that I'd say remixes flat systems like my second favorite system. But yeah, I mean file system routing all has trade offs and opinions, right.

04:07:00 - Ryan Carniato

My least favorite system is any system that has layout in the file system. Like dot layout is. Or layout TSX is my least favorite. So yeah, I think the Remix one's pretty cool. All right, that was a fun tangent. Can I get out of here? I've got so many open. Oh, this one's not full screen. That's why I can't even remember how we got there. Do you remember how we got there, Anthony? I don't know.

04:07:34 - Anthony Campolo

We were talking about fresh 1.4.

04:07:37 - Ryan Carniato

Yes, yes, yes, yes. Yeah, yeah, we were Talking about fresh 1.4 and the fun with layouts. Yeah, yeah. I went off tangent. Yeah. So in any way case I think layouts if I think the benefit layouts and it might help people. I think a lot of people, even when they come to solid router, they're like how do I do layouts? I think it's a concept that's easy to understand. So that's a win. So when you say Layout people kind of get a concept of what you're. You're talking about, which I think makes it easier to communicate and go like, how you can do stuff. The part that irks me about it is layouts are, as I said, are fictional. So, like, it's, it's. It's actually just a nested routing mechanism. And like, it's convenient that these ideas kind of overlap and, you know, you can, like, talk about it and have the right communication. It's just also like a lie.

04:08:32 - Anthony Campolo

Anyway, so it's like cake.

04:08:43 - Ryan Carniato

I don't know if I have much more today, actually. This is. This was the challenging thing about this week. I'm hoping next week we pick up with more stuff, but it's been. It's been kind of slow. Other than like, like the number of meetings I've had about the signals proposal already.

04:08:58 - Anthony Campolo

You can sign up for the announcement to Bun 1.0. You do bun.sh/1.0.

04:09:06 - Ryan Carniato

That. That's actually very cool. It's coming up and yeah, maybe I can see if they oven is like. Is one of them. Maybe I should just look at Jared.

04:09:20 - Anthony Campolo

Yeah, Jared. Yeah. Either.

04:09:22 - Ryan Carniato

Did I spell them wrong? Does he have two Rs?

04:09:24 - Anthony Campolo

Two Rs, yeah.

04:09:27 - Ryan Carniato

Anyway, there it is. September 7th. Yeah. Coming very soon. Yeah, he. We were working on a solid start integration to work on bun and it just missed 0.8 or whatever. But it should be in the next version. So I got the PR to update the CLI to show Bun as one of the options. So that, that will be fun. Fast stuff with fast stuff. But yeah, I'm interested to see what a 1.0 of bun is because by pers. This is. This is. Some people try Bun right away. Understood a little bit. Like, this isn't necessarily the most stable thing in the world.

04:10:08 - Anthony Campolo

Yeah, no, I tried, but I thought it was super fun. But I certainly would not put in production. Like.

04:10:15 - Ryan Carniato

Yeah. And yeah, this is one of those things where it's like, I hope they're ready. I like back then playing with it. You're like, yeah, we're not even close, but it's been about a year. And yeah, 1.0 is big news. I feel like people will go, okay, if you're saying it's 1.0, I'm going to trust you and I'm going to do this for real. And that's. That will be the real test here. So I hope he's ready. Yeah.

04:10:42 - Anthony Campolo

No, that was the same thing with Redwood. We put off 1.0 for like, well, from when we first announced it to. When it actually happened. There was like about a year delay because we wanted to make sure that it was actually going to be production ready. Like, the main thing is like, it's never going to be ready for every single person. Weird individual specific bespoke use case. You just make sure that your thing itself does not break. That's the most important thing.

04:11:08 - Ryan Carniato

Yeah, yeah. No, and the. Yeah, there's. Especially with what he's trying to do here, there's going to be tons of those, like, side issues. He's going to get swamped if he isn't already. But I think the key thing is like, the. He's got to prove that the runtime can handle. Like, I think he's already been very good with that on the React ecosystem. But you got to be able to like, someone's got to be able to go in and be able to build an app and deploy it, you know, to like, basically run it to production or whatever to show that at least from my side. I know there's other uses for Bun too, you know, just like all the other uses of Node. But I think like, his story did start as a bundler. I think he has to show that that path is incredibly stable and compared to compelling.

04:11:53 - Anthony Campolo

And that's probably what OVEN is for. Oven's the deployment part. So.

04:11:58 - Ryan Carniato

Yeah, so, yeah, no, hopefully that that all goes well. I'm. I'm excited. He's got so many good ideas and like, little things that he's added. He's like pushing the platform forward in kind of the same way that the Chrome team pushes the platform for. But that works for Chrome because they're the most popular, whereas he's not. So. But I'm always. He's the guy who's like, not afraid to break stuff to get like, more performance and be like, why are we doing stuff stupid ways. So it. I feel like sometimes that will catch up with you and. But I. One thing for sure is it makes it exciting.

04:12:39 - Anthony Campolo

Yeah, totally. And I think as long as you continue to lean into web standard APIs, you can more easily be like, all right, I'm gonna break this. I can break. I can break Node, but I'm not gonna break the, you know, standards, which we'll see how that kind of works out. He also apparently has no compatibility, but it's like, I don't really know how stuff like that works. Or it's like you can use the compatibility or you cannot. So it's like that mean having to build the compatibility slowed down the Original one or is it just like a separate thing?

04:13:05 - Ryan Carniato

You know, I feel like it's sometimes a separate thing. It's like, no streaming button is pretty slow. Unfortunately, we addressed this in the future, but generally, button slots. Yes. So, like, he's basically encourages you not to use the Node APIs because he's like, we have compatibility, but they all suck. And I've. I've heard his, like, in other places. I've heard him just complain profusely about how slow stuff is. And because he's.

04:13:27 - Anthony Campolo

He's the same battle that Dino tried to fight and lost. And so he's. I like this approach where it's like, I'll support it, but it's not going to be good. It's just going to work, you know?

04:13:39 - Ryan Carniato

Yeah. I think this is where actually some of the pressure happened with Dino, because this is always the tricky part when you have the thing that's like. Wants to be different and actually change the game. And before that happens, no one assumes that you can do anything. It always takes that thing that wants to be different enough to actually show that things could be different. But then what ends up happening is. Is after, like, fun comes out, and instead it's like, oh, okay, well, we actually have Compat. And then, like, we'll focus on, like. Like, in his case, performance, like, something very niche. And then suddenly Dino's like, I don't have Compat. And now, like, after we considered performance and you saw they. They basically went really hard against Bun on the performance thing. Like, they. They. They were for the few releases going back and forth on, like, who could do the fastest stuff. Which is weird because in Dino's position, you wouldn't have expected them to get pulled into that because, you know, like,

04:14:33 - Anthony Campolo

well, one of their pitches being better than no. Is also to be faster. I was like, Roto Russell is faster.

04:14:38 - Ryan Carniato

But, like, I guess what I always wondered was, like, do you want to be the. Do you want to be, like, the company that's like, I'm gonna chase performance down with, like, down. What's. What's that term when you, like, everybody, like, goes down together? Because they're like. They just keep on going, like.

04:14:52 - Anthony Campolo

Right. Yeah.

04:14:53 - Ryan Carniato

Yeah.

04:14:53 - Anthony Campolo

And that's where, you know, I'm sure at a certain point, they realize, you know, it's fast enough. And for that baseball make sure it's fast enough that they're not being embarrassed by a smaller competitor.

04:15:03 - Ryan Carniato

Yeah. But because it's one of those things where it's like, Jared is not the person that I want to go on like one of those like games of chicken with. Right.

04:15:09 - Anthony Campolo

Because like technical chicken. I've used this term before. Technical chicken. Yeah. This is not time I ever had to introduce SWC into their. Into their code base is going to be a game of technical Chicken. Chicken. So it wasn't going to work for anybody. But then once everyone had a broken SWC integration, they would have to all figure it out.

04:15:24 - Ryan Carniato

Right? Yeah. So yeah, I don't think the person you're going to play that game with because he'll just keep on going. So from that perspective, that's why bun's always been interesting. 1.0 is a new stage in their evolution. So this is going to be, it's going to be exciting. Live Streamed launch event September 7th. So very cool to see and yeah, sign up. Okay. I think we're good. Honestly, I'm not going to try and stretch this out anymore. I don't think we have any other news. Is there anything else you wanted to shut out before we head off? Anthony?

04:16:00 - Anthony Campolo

Let's just look at Edgio real quick. This is my actual, actual company. Do you want to pull up our just homepage and share that real quick?

04:16:07 - Ryan Carniato

Sure, of course. Let's go here. So how is it?

04:16:13 - Anthony Campolo

Just Edge EDG IO IO. Yeah. So edgeo IO is in the name. Yeah, there you go. Yeah. So we are a deployment company. You can kind of think of us like a little bit like netlify, Vercel, a little bit of like Cloudflare aws. We have our own network Edge ready. We got Edge functions, we got all that stuff typical like logging. We're very prepared, performance based. So we have our own points of presence and that's like we used to say like enterprise jamstack and but we also have servers. So it's like another way each time you should put is that like if the jamstack was SSR first instead of static first, you kind of arrive at something kind of like edgeo. You can like sync your git repo and just get yourself spot up really quickly. But there is an actual like server edge server kind of running for you. So yeah, it's pretty cool stuff. And we have like a whole security suite and all of that. And then if you want to go to JavaScript jam.com this is like our kind of community function that I run right now. I run with Scott, Scott Steinlage.

04:17:20 - Anthony Campolo

And this is both a weekly newsletter, a weekly Twitter space and video podcasts that we do. And so if you look at like the archive newsletters Just click oh, yeah, yeah, Newsletters and scroll down. Let's look at. There's probably one where I talked about solid or Marco at some point. There's so search for Marco. I know there's at least one Marco. One in here. Yeah.

04:17:51 - Ryan Carniato

Marco Run release. Yeah.

04:17:53 - Anthony Campolo

Yes. Like, we talk about, you know, things that, you know, Ryan would talk about. So if you're interested in the same stuff that Ryan's interested in talking this week in JavaScript, that's type stuff you'll hear about on JavaScript Jam. And then our Twitter is just the twitter.com javascriptjam I think.

04:18:10 - Ryan Carniato

Very, very cool. Yeah, I've dropped in a couple of those spaces. Yeah, JavaScript.

04:18:22 - Anthony Campolo

Yeah, that's us.

04:18:23 - Ryan Carniato

Yeah, check us out.

04:18:26 - Anthony Campolo

And if you want to come, we do spaces every Wednesday at 12pm Pacific. And you can come up, join the conversation. You let kind of participate in these types of conversations. And if you're a total beginner, totally welcome. And yeah, it's really fun. Fun time.

04:18:42 - Ryan Carniato

Awesome. Awesome. All right, well, I think with that, we're just gonna call it a stream. So thanks for joining me this week.

04:18:51 - Anthony Campolo

Finally made it. Want to get on this stream for a very long time.

04:18:55 - Ryan Carniato

Yeah, no, and it's fun. Yeah, we've talked about this. Like, yeah, it's. It's been at least eight or nine months since I was, like, actively, like, oh, maybe. Maybe in a few weeks. It's like, oh, no, I'm. I'm out.

04:19:05 - Anthony Campolo

This is the perfect timing that we actually have, like, good stuff to look at. So I'm glad we waited.

04:19:09 - Ryan Carniato

Yeah, no, it's good. And maybe, maybe some people try take a look at Redwood, Another opinionated stack where all the pieces are there for you. Another T3 has been getting popular recently, so it's another alternative to that sort of thing. So very, very cool stuff to see. All right, so, yep, signing off. See y'. All. Till next week, Astro 3 sneak peek.