On The Bike Shed, hosts Joël Quenneville and Stephanie Minn discuss development experiences and challenges at thoughtbot with Ruby, Rails, JavaScript, and whatever else is drawing their attention, admiration, or ire this week.
…
continue reading
Player FM - Internet Radio Done Right
214 subscribers
Checked 5M ago
اضافه شده در eight سال پیش
محتوای ارائه شده توسط Frontend First, Sam Selikoff, and Ryan Toronto. تمام محتوای پادکست شامل قسمت‌ها، گرافیک‌ها و توضیحات پادکست مستقیماً توسط Frontend First, Sam Selikoff, and Ryan Toronto یا شریک پلتفرم پادکست آن‌ها آپلود و ارائه می‌شوند. اگر فکر می‌کنید شخصی بدون اجازه شما از اثر دارای حق نسخه‌برداری شما استفاده می‌کند، می‌توانید روندی که در اینجا شرح داده شده است را دنبال کنید.https://fa.player.fm/legal
مشابه Frontend First
A podcast about web design and development.
…
continue reading
This is the audio podcast version of Troy Hunt's weekly update video published here: https://www.troyhunt.com/tag/weekly-update/
…
continue reading
BBC Radio 5 live’s award winning gaming podcast, discussing the world of video games and games culture.
…
continue reading
1
Syntax - Tasty Web Development Treats
Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers
4k
898
Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.
…
continue reading
Welcome to the Security Weekly Podcast Network, your all-in-one source for the latest in cybersecurity! This feed features a diverse lineup of shows, including Application Security Weekly, Business Security Weekly, Paul's Security Weekly, Enterprise Security Weekly, and Security Weekly News. Whether you're a cybersecurity professional, business leader, or tech enthusiast, we cover all angles of the cybersecurity landscape. Tune in for in-depth panel discussions, expert guest interviews, and ...
…
continue reading
Hanselminutes is Fresh Air for Developers. A weekly commute-time podcast that promotes fresh technology and fresh voices. Talk and Tech for Developers, Life-long Learners, and Technologists.
…
continue reading
Developer Tea exists to help driven developers connect to their ultimate purpose and excel at their work so that they can positively impact the people they influence. With over 13 million downloads to date, Developer Tea is a short podcast hosted by Jonathan Cutrell (@jcutrell), co-founder of Spec and Director of Engineering at PBS. We hope you'll take the topics from this podcast and continue the conversation, either online or in person with your peers. Twitter: @developertea :: Email: deve ...
…
continue reading
Android Backstage, a podcast by and for Android developers. Hosted by developers from the Android engineering team, this show covers topics of interest to Android programmers, with in-depth discussions and interviews with engineers on the Android team at Google. Subscribe to Android Developers YouTube → https://goo.gle/AndroidDevs
…
continue reading
Stay current on JavaScript, Node, and Front-End development. Learn from experts in programming, careers, and technology every week. Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.
…
continue reading
Player FM - برنامه پادکست
با برنامه Player FM !
با برنامه Player FM !
))
Daily Deals
Server-side rendering vs. Server Components
Manage episode 371155170 series 1635850
محتوای ارائه شده توسط Frontend First, Sam Selikoff, and Ryan Toronto. تمام محتوای پادکست شامل قسمت‌ها، گرافیک‌ها و توضیحات پادکست مستقیماً توسط Frontend First, Sam Selikoff, and Ryan Toronto یا شریک پلتفرم پادکست آن‌ها آپلود و ارائه می‌شوند. اگر فکر می‌کنید شخصی بدون اجازه شما از اثر دارای حق نسخه‌برداری شما استفاده می‌کند، می‌توانید روندی که در اینجا شرح داده شده است را دنبال کنید.https://fa.player.fm/legal
Sam and Ryan explore different ways to think about the RSC architecture, including what problems RSC solve, why RSC are valuable even in a world without server-side rendering, and how React’s reconciliation phase enables RSC to make partial updates to the UI as a result of server-side events.
Topics include:
- 0:00 - Intro
- 5:45 - What if RSC were introduced before SSR?
- 10:54 - What does it mean to render RSC?
- 25:41 - Why SSR does not apply to Server Components
- 35:31 - Server-driven UI updates
201 قسمت
اشتراک گذاری
Manage episode 371155170 series 1635850
محتوای ارائه شده توسط Frontend First, Sam Selikoff, and Ryan Toronto. تمام محتوای پادکست شامل قسمت‌ها، گرافیک‌ها و توضیحات پادکست مستقیماً توسط Frontend First, Sam Selikoff, and Ryan Toronto یا شریک پلتفرم پادکست آن‌ها آپلود و ارائه می‌شوند. اگر فکر می‌کنید شخصی بدون اجازه شما از اثر دارای حق نسخه‌برداری شما استفاده می‌کند، می‌توانید روندی که در اینجا شرح داده شده است را دنبال کنید.https://fa.player.fm/legal
Sam and Ryan explore different ways to think about the RSC architecture, including what problems RSC solve, why RSC are valuable even in a world without server-side rendering, and how React’s reconciliation phase enables RSC to make partial updates to the UI as a result of server-side events.
Topics include:
- 0:00 - Intro
- 5:45 - What if RSC were introduced before SSR?
- 10:54 - What does it mean to render RSC?
- 25:41 - Why SSR does not apply to Server Components
- 35:31 - Server-driven UI updates
201 قسمت
همه قسمت ها
×
Ryan talks to Sam about reproducing iOS's new image background treatment for his Open Graph Preview tool, opengraph.ing. They talk about different approaches for generating gradients from images, including finding the vibrant color of an image, luminosity-weighted averages, k-means clustering, and more. Timestamps: 0:00 - Intro 3:07 - Apple's new OG image gradient 10:06 - Luminosity-weighted average 14:22 - Finding the vibrant color of an image 21:41 - Contrast ratios on favicons 32:21 - K-means clustering 41:25 - Refactoring UI tip about rotating the hue Links: Open Graph Preview Refactoring UI…
F
Frontend First
Sam and Ryan talk about React 19's useActionState hook. They discuss how adding async functions to a plain React app introduces lots of in-between states that developers must grapple with, and how useActionState allows React to collapse and eliminate these states, bringing the simplicity of React's sync mental model to our async code. Timestamps: 0:00 - Intro 1:51 - How React normally eliminates state in synchronous apps 8:20 - How useActionState lets React eliminate state in asynchronous apps 18:17 - Why you shouldn't just pass server actions into useActionState 23:00 - TCP/IP and UDP analogy 26:39 - Thinking of useActionState like enqueue 34:55 - Why the term "reducer" is too loaded for best understanding useActionState 51:07 - How useActionState helps you build a Todo app that stays responsive during pending actions…
Sam and Ryan talk about using Cloudflare Tunnel for local development, the new React Compiler beta release, and why reading or writing refs during render violates the rules of React. Timestamps: 0:00 - Intro 1:42 - Cloudflare Tunnel 7:06 - React Compiler 14:21 - Reading or writing refs during render Links: Cloudflare Tunnel React Compiler Beta release React Docs Pitfall on refs…
F
Frontend First
1 useAnimatedText | Events vs. State Changes | Catalyst 1:08:19
1:08:19 
پخش در آینده 
پخش در آینده 
لیست ها 
پسندیدن 
دوست داشته شد1:08:19
پخش در آینده پخش در آینده لیست ها پسندیدن دوست داشته شدSam and Ryan talk about building a useAnimatedText hook that can animate streaming text. They also discuss how React code that uses state changes to approximate events can be simplified, and the benefits of having escape hatches when building UI with Catalyst. Timestamps: 0:00 - Intro 1:22 - Catalyst and escape hatches 16:03 - Building a useAnimatedText hook (aka useBufferedText) 54:10 - Avoiding using state changes to approximate events Links: Catalyst Sam's Tweet about useBufferedText and AnimatedScroller useAnimatedText recipe Intl.Segmenter on MDN David K's Tweet on events Ricky's Tweet on Intersection Observer Build UI's new course…
Sam and Ryan talk about how frameworks and infrastructure evolve with each other, using Next.js as a representative example. They discuss how hosting providers like Heroku have always imposed certain constraints on apps, what features those constraints enable hosting providers to support, how burdensome those constraints are across different frameworks, and how frameworks that add infra-specific APIs can best communicate the costs of those APIs and benefits they enable. Timestamps: 0:00 - Intro 3:03 - Heroku and the Twelve-Factor App 7:39 - GitHub Pages and static sites 13:57 - Serverless and JAMstack 17:30 - Vercel and CDNs, self-hosting, and Next.js 19:00 - How framework APIs can nudge an app towards a particular hosting solution 23:09 - What constraints does Next.js impose on your app (e.g. middleware doesn't run node), and what benefits do those constraints give you? 36:13 - How Next.js APIs are motivated by wanting to tease apart static and dynamic code, in an attempt to support the needs of any web app with a single stack 40:33 - What is the relationship between frameworks and infra? 47:37 - How can frameworks that add infra-specific APIs best communicate the costs of those APIs and the benefits they enable? Links: The Twelve-Factor App…
F
Frontend First
1 Tom Occhino on the future of React 1:00:27
1:00:27 پخش در آینده پخش در آینده لیست ها پسندیدن دوست داشته شد1:00:27
پخش در آینده پخش در آینده لیست ها پسندیدن دوست داشته شدTom Occhino, Chief Product Officer at Vercel and former Engineering Director at Facebook, joins Sam to talk about the pivotal moments in React's history. He talks about how React popularized the ideas of declarative rendering and unidirectional data flow, how GraphQL furthered React's goal of co-locating all the concerns of a particular piece of UI, the problems that GraphQL led to at Facebook and how Relay solved them, and how Suspense, Server Components, and PPR are the generalized spiritual successors to the stack used at Facebook. Timestamps: 0:00 - Intro 2:53 - Declarative rendering as React's legacy 8:12 - How GraphQL enabled complex components to be fully self-contained 20:12 - How React's goal has always been to co-locate all the concerns of a particular piece of UI 22:58 - The problem with co-locating GraphQL with components, and how Relay solved it 26:28 - How RSC is the generalized spiritual successor to BigPipe and GraphQL 34:46 - What PPR is, and how it and Suspense fit into this story 55:55 - The general paradigm shift of getting static code to the device as soon as possible Links: Tom Occhino with Ben Dunphy React: The Documentary React Roundtable with Andrew Clark and Sebastian Markbåge Tom Occhino on Twitter…
F
Frontend First
Sam and Ryan talk about render props in React. They discuss where they came from, how Hooks superseded them for sharing stateful logic, how data attributes compare to them for customizing styling, and how for certain complex components like forms they're still a great solution for accessing slices of internal state. Timestamps: 0:00 - Intro 3:40 - Where did render props come from? 6:01 - How hooks replaced many use cases for render props 8:14 - Using render props for custom styling 10:32 - Data attributes vs. render props for custom styling 16:43 - Using render props to peek into an uncontrolled component's internal state 21:05 - Forms example and using render props for a smaller public API 24:10 - React docs mention of render props 25:48 - Where render props shine Links: Headless UI Menu Radix Forms React Aria Forms React docs - Render props Our upcoming course on React Component Patterns Email Sam Email Ryan…
Sam and Ryan discuss controlled and uncontrolled components in React. They talk about how uncontrolled components can be thought of as components that manage their own internal state, why you should model your complex React components after the simpler APIs of native HTML elements like inputs, why you shouldn't try to make components that are both controlled and uncontrolled, and why making a new component boundary is sometimes all you need to make your custom components behave more predictably. Timestamps: 0:00 - Intro 1:41 - What are controlled and uncontrolled components? 6:11 - How to change a component from uncontrolled to controlled 8:48 - How do you decide when to use a controlled or uncontrolled component? 12:00 - Sortable table example and a single source of truth 15:27 - Is it always either controlled or uncontrolled? 21:09 - Color picker example and not exposing internal state 28:46 - Sortable list example with Framer Motion 39:45 - Component boundaries and wearing two hats: the library author vs. library consumer 41:43 - How do you know if you are using the wrong approach? Links: New course: Advanced React Component Patterns React docs: Controlled and uncontrolled components React docs: Storing state from previous renders Email Sam Email Ryan Frontend First on Twitter…
F
Frontend First
Sam and Ryan talk about the pattern of building unstyled components with React. They discuss why unstyled components were created, how they improve upon composition patterns from UI libraries like Bootstrap, how they can be used to share behavior and logic without prescribing any styling opinions, and how they fit into a larger collection of React patterns that can be used to build more powerful components that avoid premature abstractions. Timestamps: 0:00 - Intro 1:36 - What are unstyled components? 2:24 - How do unstyled components improve upon earlier patterns? 6:44 - Why would you want to use an unstyled component? 9:58 - How can you compose an unstyled component with a styled component? 16:41 - How to decide which pattern is best suited for the code you want to share 19:36 - Using patterns that preserve React's locality of behavior 24:49 - How do you know if an abstraction is good? 32:54 - Build UI's upcoming course on Advanced React Component Patterns Links: Build UI's newest course: Advanced React Component Patterns Sam's YouTube video on Recursive Components Email Sam Email Ryan…
F
Frontend First
1 What is a framework? 1:02:38
1:02:38 پخش در آینده پخش در آینده لیست ها پسندیدن دوست داشته شد1:02:38
پخش در آینده پخش در آینده لیست ها پسندیدن دوست داشته شدSam and Ryan talk about what sorts of capabilities a tool should have to be considered a web framework. They discuss how frameworks tackle the complexity of getting different systems to communicate with each other, how good frameworks embrace the strengths and patterns of the language they're written in, and why frameworks and services are not in opposition to each other. Timestamps: 0:00 - Intro 3:58 - Adapter pattern and cohesive boundaries 9:43 - Rails is Omakase 13:47 - Configurable, but still cohesive 17:04 - Frontend frameworks try to “work with everything” 21:42 - Does composition mean a React framework will look different than Rails? 29:29 - Why taste still matters 34:20 - A framework is a shell of adapters and a brain that coordinates them 35:16 - When using services, complexity still exists in the in-between 37:59 - A fullstack dev is someone who acknowledges and understands how all the parts come together 44:06 - Tweets about the hard problems that Laravel tackles, and the deep design it took to get there 49:15 - Frameworks should embrace the strengths and patterns of their language and ecosystem 50:35 - Why RSCs and Server Actions mean the “Rails for JS” may end up looking nothing like Rails 52:11 - Why users of a “fullstack framework” shouldn’t even care about where the code is running 55:31 - Why libraries or services that are easy to install and set up are not a replacement for frameworks Links: Sam's BigSkyDevCon talk Rails is omakase Povilas' Laravel tweet Mary's Laravel tweet Build UI's upcoming React Component Patterns course Email Sam Email Ryan…
Sam joins Lane Wagner in a crossover episode with the Backend Banter podcast. They talk about abstractions in frontend and backend frameworks, what JavaScript is doing differently from other languages and frameworks, why the frontend should drive the backend even if you're building in a server-side framework, and what's so special about React Server Components. Timestamps: 0:00 - Intro 2:12 - When abstractions leak 6:37 - Recap of Sam's BigSky talk 10:51 - What is JavaScript doing differently? 19:10 - Why frontend frameworks should have more backend features 24:04 - Strong opinions on a library level 30:29 - Shipping more standardized interfaces 37:06 - The frontend should be driving everything in the backend 39:12 - Your types should flow from the database to the frontend, but not your product decisions 46:53 - React Server Components Link: Backend Banter…
Sam and Ryan read and discuss a fantastic interactive blog post about queueing in HTTP written by Sam Rose. Timestamps: 0:00 - Intro 6:57 - Queueing: An interactive study of queueing strategies 9:05 - Why do we need queues? 13:16 - FIFO and timing out 17:55 - LIFO 20:58 - Priority queues 25:21 - Active queue management 29:08 - Comparing queues 36:32 - Conclusion Links: Queueing: An interactive study of queueing strategies Up and Down the Ladder of Abstraction…
F
Frontend First
Sam and Ryan discuss the new features in React 19 that will specifically benefit developers building single-page applications. They talk about how Suspense and Transitions let developers "teach" React about when their apps are in a loading or a pending state, how Client Actions improve upon using events in React 18 to handle data mutations, and how Actions enable React Components to automatically render and discard optimistic updates without any knowledge of the application's data layer. They also discuss several new Hooks like useOptimistic, useFormStatus, useActionState, and useOptimistic. Timestamps: 0:00 - Intro 2:19 - How SPAs are built in React 18 5:29 - How Suspense made loading a first-class concept in React 7:48 - The problem with data writes in React 18 10:37 - What are Client Actions? 12:05 - What does it look like to use Actions? 14:13 - What are the benefits of Actions? 18:46 - How does React 19 change the Optimistic UI story? 29:40 - Working with Transitions outside of Actions 36:06 - The useActionState Hook 37:51 - Using Transitions to keep the old UI rendered and responsive 41:25 - How Transitions enable better composition patterns in third-party libraries 43:55 - Building a SortableList that flips between being controlled and uncontrolled Links: React Unpacked: A Roadmap to React 19…
F
Frontend First
Sam tells Ryan about a recent talk he gave at BigSkyDevCon. They chat about how backend frameworks are raising the ceiling of what UIs they’re capable of delivering, how frontend frameworks are raising the floor of what backend features they come bundled with, and what each community can learn from the other. Timestamps: 0:00 - Intro 4:23 - Recap of Ryan Florence’s talk 6:49 - Overview of "High floor, high ceiling" 10:02 - Cohesion is the biggest strength of backend frameworks 17:10 - Why doesn’t Rails for JavaScript exist? 23:48 - Locality of behavior is the biggest strength of frontend frameworks 33:14 - The use of lexical scope in React 50:27 - Which community is raising both the floor and ceiling the most? Links: "High floor, high ceiling" talk…
F
Frontend First
1 Technical Cost vs. Product Benefit 1:14:10
1:14:10 پخش در آینده پخش در آینده لیست ها پسندیدن دوست داشته شد1:14:10
پخش در آینده پخش در آینده لیست ها پسندیدن دوست داشته شدSam and Ryan talk about the difference between the costs of building a feature and the benefits that feature brings to our end users. They discuss how libraries and frameworks can lower the technical cost of building a given feature, how Ryan Florence framed this calculation in his talk at Big Sky Dev Con, and how sometimes developers’ opinions and tastes about tech can smuggle their way from the cost side of the equation into the benefit side. Topics include: 0:00 - Intro 6:53 - How Ryan Florence framed the problem in his talk “Mind the Gap” 14:38 - How frontend frameworks and backend frameworks both have their own ways of crossing the network gap 19:11 - How Network-Sensitive Interactions force technologies to grapple with both server and client environments 23:02 - How React is trying to lower the cost of moving interactions between the server and client with Server Components and Server Actions 26:53 - Why “Use the right tool for the job” doesn’t capture the dynamic requirements of living software 31:53 - How discussions about the product benefits of a feature and the technical costs of that feature are often conflated with each other 34:08 - A thought experiment from economics that highlights how uncertainty plays a role in the estimation of product benefits 56:54 - How to think about tech choice independently of the estimation of product benefits Links: "Mind the Gap" by Ryan Florence Zero-JavaScript View Transitions in Astro…
به Player FM خوش آمدید!
Player FM در سراسر وب را برای یافتن پادکست های با کیفیت اسکن می کند تا همین الان لذت ببرید. این بهترین برنامه ی پادکست است که در اندروید، آیفون و وب کار می کند. ثبت نام کنید تا اشتراک های شما در بین دستگاه های مختلف همگام سازی شود.
Daily Deals
مشابه Frontend First
On The Bike Shed, hosts Joël Quenneville and Stephanie Minn discuss development experiences and challenges at thoughtbot with Ruby, Rails, JavaScript, and whatever else is drawing their attention, admiration, or ire this week.
…
continue reading
A podcast about web design and development.
…
continue reading
This is the audio podcast version of Troy Hunt's weekly update video published here: https://www.troyhunt.com/tag/weekly-update/
…
continue reading
BBC Radio 5 live’s award winning gaming podcast, discussing the world of video games and games culture.
…
continue reading
1
Syntax - Tasty Web Development Treats
Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers
4k898
Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.
…
continue reading
Welcome to the Security Weekly Podcast Network, your all-in-one source for the latest in cybersecurity! This feed features a diverse lineup of shows, including Application Security Weekly, Business Security Weekly, Paul's Security Weekly, Enterprise Security Weekly, and Security Weekly News. Whether you're a cybersecurity professional, business leader, or tech enthusiast, we cover all angles of the cybersecurity landscape. Tune in for in-depth panel discussions, expert guest interviews, and ...
…
continue reading
Hanselminutes is Fresh Air for Developers. A weekly commute-time podcast that promotes fresh technology and fresh voices. Talk and Tech for Developers, Life-long Learners, and Technologists.
…
continue reading
Developer Tea exists to help driven developers connect to their ultimate purpose and excel at their work so that they can positively impact the people they influence. With over 13 million downloads to date, Developer Tea is a short podcast hosted by Jonathan Cutrell (@jcutrell), co-founder of Spec and Director of Engineering at PBS. We hope you'll take the topics from this podcast and continue the conversation, either online or in person with your peers. Twitter: @developertea :: Email: deve ...
…
continue reading
Android Backstage, a podcast by and for Android developers. Hosted by developers from the Android engineering team, this show covers topics of interest to Android programmers, with in-depth discussions and interviews with engineers on the Android team at Google. Subscribe to Android Developers YouTube → https://goo.gle/AndroidDevs
…
continue reading
Stay current on JavaScript, Node, and Front-End development. Learn from experts in programming, careers, and technology every week. Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.
…
continue reading
Player FM - برنامه پادکست
با برنامه Player FM !
با برنامه Player FM !
