RRU 035: Optimizing React Virtual DOM Explained Article with Alexey Ivanov and Andy Barnov
React Round Up30 Okt 2018

RRU 035: Optimizing React Virtual DOM Explained Article with Alexey Ivanov and Andy Barnov

Panel:
- https://github.com/lucasmreis
- https://github.com/zephraph
Special Guests: Alexey Ivanov and Andy Barnov In this episode, the panelists talk with https://twitter.com/savetherbtz?lang=en and https://github.com/progapandist They all discuss Alexey’s https://evilmartians.com/chronicles/optimizing-react-virtual-dom-explained titled: “Optimizing React Virtual DOM.” Listen to today’s episode to hear all the details about this article, the guests’ backgrounds and much, much more! Show Topics: 0:32 – Panel: Thanks for joining us and talking about this https://evilmartians.com/chronicles/optimizing-react-virtual-dom-explained 0:52 – Guest: Thanks for having us on your podcast! The guest talks about his community of developers and the offices are in San Francisco, Russia and other places. He talks about how the company helps their customers and how they can scale. Some of their companies are https://www.groupon.com/?gclid=EAIaIQobChMI9Puun7Kq3gIVDo1pCh2oDgiyEAAYASAAEgJZ7_D_BwE&utm_campaign=us_dt_sea_ggl_txt_naq_sr_cbp_ch1_ybr_k%2Agroupon_m%2Ae_d%2Agroupon-brand_g%2Agroupon-exact_c%2A137872562158_ap%2A1t1&utm_medium=cpc&utm_source=google and https://www.ebay.com 2:39 – Alexey. 3:09 – Panel: The article is https://evilmartians.com/chronicles/optimizing-react-virtual-dom-explained What is JSX how does it boil down to? It’s all supposed to help people and help them understand. 3:45 – Alexey: It’s about how to structure your state, etc. 4:15 – Panel: This keeps things small. He said when I have one idea I write a song and when I have 2 ideas I write 2 songs. If you try to put too many ideas into one post it maybe won’t go too far. 4:48 – Alexey. 5:50 – Panel. 5:56 – Panel: That’s a topic for another episode. The article is interesting in that the large percentage don’t think about rendering performance, so it’s a needed piece of content. Let’s talk about – what is the https://www.codecademy.com/articles/react-virtual-dom 6:32 – Alexey goes into detail with his answer to the panelist’s question. 8:50 – Panel: What I like about this article is that you go through a good progression: here is the JSX that you would write and here is the trans piled function is. And you show the virtual DOM pre-presentation is. I think that is a helpful thing. Let’s talk about that. How does React change to those things when it’s rendering? 9:50 – Alexey. 12:58 – Panel: Okay to recap...when you are rendering an element you write some JSX and the first thing (component) that will map over to the type property is for the Virtual DOM object? And then all of that is compared – when does that happen, the comparison? 13:28 – Alexey: You have React and you create... 15:20 – Panel: So it’s both React and set state these are the only 2 things that triggered state or is there anything else out there? 15:31 – Alexey. 15:47 – Panel: Interesting. You talked about the imperative way we did it before – and it’s much simpler to say what you want, but a question is that is there any world case where it does not work well? What are the trade-offs? Have you ever encountered one? 16:34 – Alexey: If you have changes in the browse, implementations...it’s simplest and easiest way. You just need to have some little changes... 17:53 – Panel: If it’s basic then you don’t have to do manual updates. 18:03 – Alexey. Alexey: To make it work you need competence in your bundle. 18:36 – Panel: I’ve heard – haven’t worked with – when we have these projects that are really web time based, hundreds of elements in real time on a screen, on a Virtual DOM it’s too slow. You have to be precise. They had performance issues, I’m sure 98.99% of the applications probably perform better with the Virtual DOM. 19:46 – Alexey. 21:38 – Panel: That is to reduce the amount of state changes so you are reducing the amount of time it renders – right? 21:50 – Alexey. 22:03 – https://www.freshbooks.com/?ref=10400&sscid=a1k2_rph9e&utm_campaign=87321&utm_medium=affiliate&utm_source=sas 23:11 – Panel: We talked about how type is the first thing that is checked. It does equal comparison to compare these types. What was really interesting is that class components are the same thing but not so. Is it always going to re-render for those components? 24:24 – Alexey: We have to talk about 2 things about this first. In my https://evilmartians.com/chronicles/optimizing-react-virtual-dom-explained 27:49 – Panel: That is a beneficial tool too to control your rendering. You talked about tools to show updates and we will include the link to the article in the links, also I would read it and check out that particular function. It’s cool to see HOW it’s actually rendering. 28:29 – Panel: Apparently sometimes things help us in principle cause we need performance. We need to open the tools and understand what is happening? Is it really a bottleneck like I think it is? One of those Twitter things I saw a few months ago... 30:52 – Alexey: Yes, do what makes sense to you at the time. 32:08 – Panel: We talked about render performance and the pure component and not creating functions...you have a big quote in your article... I have a big question for me: You have a component, and there is a child / parent component. I am curious about that pattern – will it re-render every time? Tell us your thoughts, please. 33:16 – Alexey. 34:11 – Panel: My only issue with the render props is not a performance issue it’s more of an architectural issue. Sometimes we want things to be interjected. I want to have access to this or that. Sometimes we want to access those on a life cycle. The higher the component makes it easier to add a... That’s my only complaint about render comps. 35:35 – Alexey. 36:00 – Panel: Like composing consumers? 36:06 – Alexey: What we are talking about is... 37:00 – Panel: I agree. There are some interesting cases with that pattern when you have a lot of those chained together – function, function, etc. – there are some components that will help you compose... 37:34 – Panel: It’s like callback hell all over again. Everything is a tradeoff somewhere. After the tree it looks clean with render props. I like it even with the drawbacks. 38:25 – Panel: You spent some time talking about lists of children and how you (if one of the children are removed) then it ends up re rendering all the children cause it’s comparing their positions. You mentioned key is one way to deal with that. Let’s talk about keys. When people use keys they are using an array of an index. It seems like it defeats the purpose of it – is that right? 39:20 – Alexey: Yes, you are right. 40:19 – Panel: I think that continually and it’s a smaller known thing but people want this key error to go away and they just shove something in there. To some extent it’s good to know if your tool requires something it’s good to know WHY it requires that. 40:52 – Panel: Last question. Is that the person to program and be a web developer and they are learning React. This is the tool and they are learning how to use React for an app then when we are throwing articles at them. If they are learning React and these articles are at them I think it’s a cognitive overload. What are your thoughts / advice? 42:07 – Guest: How beginner should you be before you learn React? Ideally you should be aware of JavaScript, right? Sometimes people do this to catch up to something shiny. This is just my 2 cents. 43:03 – Alexey. 44:49 – Panel: When you are going to hire someone to do something or choose a framework always try to do a little bit of work without it. Try to build an application w/o React, and then React is introduced to you, you will only see the benefits that they are brining. One thing that happens inside the React world is that people don’t write an application... Start with the basic building blocks – that makes sense to me. 46:05 – Panel: Let’s go to picks! 46:13 – https://www.digitalocean.com/ Links:
- https://rubyonrails.org
- https://angular.io/guide/quickstart
- https://www.javascript.com
- https://elm-lang.org/community
- https://phoenixframework.org
- https://github.com
- https://www.codecademy.com/articles/react-virtual-dom
- https://www.udemy.com/the-complete-elixir-and-phoenix-bootcamp-and-tutorial/
- https://twitter.com/SaveTheRbtz?lang=en
-

Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

Avsnitt(310)

AI Integration in Web Apps - RRU 267

AI Integration in Web Apps - RRU 267

In this episode, Lucas, Chris, and Peter are joined by Colby Fayock, the Director of Developer Experience Engineering at Cloudinary and a content creator.Join them as they dive deep into the world of AI-powered WYSIWYG editors for React. They explore the practicality of running AI models locally versus on remote servers, discover Google's innovative browser-based AI models in Chrome, and discuss the versatility and editor compatibility with formats like JSON and Markdown. They also touch on integrating AI functionalities securely using serverless functions and backend APIs, ensuring solid security without exposing sensitive API keys.Colby shares his experience with using storage formats like HTML and JSON in richer content editors, the flexibility of customizing styles and commands, and the potential applications outside of just being a Notion alternative. They also delve into UX trends toward integrated editing experiences and the practical challenges it may present.Towards the end, Colby talks about his upcoming full stack Next.js 15 course featuring authentication, database management, and payment options. This episode is packed with valuable insights for developers aiming to enhance their front-end capabilities and integration of AI functions. Stay tuned as we unravel the future of rich-text editing and AI in modern web development.Social MediaUnvoidLinkedIn @unvoidweb https://www.linkedin.com/company/unvoidwebInstagram @unvoidweb https://www.instagram.com/unvoidwebLucas PaganiniYouTube @lucaspaganiniweb https://youtube.com/@lucaspaganiniwebLinkedIn @lucaspaganiniweb https://www.linkedin.com/in/lucaspaganiniwebTwitter @lucaspaganini https://twitter.com/LucasPaganiniInstagram @lucaspaganini https://www.instagram.com/lucaspaganiniChris FrewinGitHub @princefishthrower https://github.com/princefishthrowerBlog Chris Frewin https://chrisfrew.in/Peter OsahLinkedIn @peterosah https://www.linkedin.com/in/peter-osah-744118179/Colby FayockLinkedIn @colbyfayock https://www.linkedin.com/in/colbyfayock/Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

25 Sep 202432min

Speech Commands and Speech Recognition in React featuring Chris Laughlin - RRU 266

Speech Commands and Speech Recognition in React featuring Chris Laughlin - RRU 266

Chris Laughlin joins the round up to discuss how to use the WebKit Speech Recognition API to interact with your react applications. This opens up a wide range of capabilities for web and React applications.LinksAdding Voice Search to a React ApplicationUsing the Web Speech APIGitHub | streamich/react-useRecutDescriptSvelteNetlifyGithub Co-pilotGitHub: Chris Laughlin ( chrislaughlin )PicksCarl- Subscribing to different newslettersChris- Script Kit by John LindquistJack- GitHub | solidjs/solidPaige- Logitech Wireless MX KeyboardTJ- Manfrotto Magic ArmBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

4 Sep 202446min

Building a Seamless Image Zoom Feature - RRU 265

Building a Seamless Image Zoom Feature - RRU 265

In today's episode, they dive deep into the intricacies of creating a seamless image zoom functionality with our special guest, Robert Pierce, a seasoned software engineer with 13 years of experience and the mastermind behind the popular React Medium Image Zoom library.They tackle the challenges of zooming in on images while maintaining quality, elaborate on accessibility concerns, and discuss the technical hurdles, including those pesky Safari issues. They also explore the efforts to make clickable content accessible to all users, converting images into modal elements, and the journey from version 4 to version 5 of the library.Robert shares his experiences with maintaining this open-source project, the community's role, and his attempts to create a monorepo supporting various frameworks. We touch on the complexities of scaling, customizing dialog elements, and the potential future developments for the project.Join them as they discuss the blend of native functionalities, accessibility, and the pursuit of a perfect user experience. Whether you're a developer interested in modern technologies, web component integration, or just curious about the behind-the-scenes of an open-source project, this episode has something for you. Let's zoom into the details!Linksreact-medium-image-zoomSocial MediaUnvoidLinkedIn @unvoidweb https://www.linkedin.com/company/unvoidwebInstagram @unvoidweb https://www.instagram.com/unvoidwebLucas PaganiniYouTube @lucaspaganiniweb https://youtube.com/@lucaspaganiniwebLinkedIn @lucaspaganiniweb https://www.linkedin.com/in/lucaspaganiniwebTwitter @lucaspaganini https://twitter.com/LucasPaganiniInstagram @lucaspaganini https://www.instagram.com/lucaspaganiniChris FrewinGitHub @princefishthrower https://github.com/princefishthrowerBlog Chris Frewin https://chrisfrew.in/Peter OsahLinkedIn @peterosah https://www.linkedin.com/in/peter-osah-744118179/Robert PearceLinkedIn: @RobertPearce https://github.com/rpearceBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

30 Aug 202450min

Next.js Deployment Woes: Tackling Vendor Lock-In and Production Readiness with FlightControl - RRU 264

Next.js Deployment Woes: Tackling Vendor Lock-In and Production Readiness with FlightControl - RRU 264

In this episode, they dive deep into the intricacies of deploying server-side rendering applications using Next.js on AWS. Join them as  Brandon Bayer, the CEO of Flightcontrol shares insightful experiences on overcoming production challenges with FlightControl.Discover why FlightControl's infrastructure, cost-saving capabilities, and new build system—including Lambda support—are game changers for developers. They talk about updates and exciting projects from Lucas and Chris, explore the seamless deployment to AWS with FlightControl, and compare its strengths against platforms like Heroku and Vercel.Get ready for a captivating discussion on hybrid clouds, vendor lock-ins, the ease of using AWS services through FlightControl, and the potential for supporting other cloud providers. Plus, Brandon's passion for flying small planes brings a fascinating real-world perspective to the intricacies of sky-high ambitions versus ground-level developments. Tune in for an episode packed with practical insights, expert opinions, and the latest in cloud deployment technology.LinksFlight ControlSocial MediaUnvoidLinkedIn @unvoidweb https://www.linkedin.com/company/unvoidwebInstagram @unvoidweb https://www.instagram.com/unvoidwebLucas PaganiniYouTube @lucaspaganiniweb https://youtube.com/@lucaspaganiniwebLinkedIn @lucaspaganiniweb https://www.linkedin.com/in/lucaspaganiniwebTwitter @lucaspaganini https://twitter.com/LucasPaganiniInstagram @lucaspaganini https://www.instagram.com/lucaspaganiniChris FrewinGitHub @princefishthrower https://github.com/princefishthrowerBlog Chris Frewin https://chrisfrew.in/Peter OsahLinkedIn @peterosah https://www.linkedin.com/in/peter-osah-744118179/Brandon BayerLinkedIn: @BrandonBayer https://www.linkedin.com/in/brandonbayer1/Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

14 Aug 202445min

Boosting Development Efficiency with Strapi CMS and Next - RRU263

Boosting Development Efficiency with Strapi CMS and Next - RRU263

In today's episode, our host Lucas Paganini sits down with special guest Paul Bratslavsky, a seasoned software engineer at Strapi, to explore the powerful synergy between Strapi, a versatile JavaScript-based headless CMS, and the cutting-edge features of Next.js. Dive into the rapid development capabilities these technologies offer, streamlining workflows, and quickly delivering products to clients.They also delve into the convenience of Strapi Cloud for effortless app deployment and discuss varying perspectives on its pricing. Tune in to hear about the benefits of Remix, the evolving job market post-pandemic, and invaluable career advice for aspiring developers. This episode is packed with practical insights, personal anecdotes, and expert tips that you won't want to miss. Plus, get a sneak peek into upcoming soccer games and learn about Unvoid’s client-friendly approach to software development. Join them for a well-rounded discussion on all things tech, career, and beyond!SocialsGitHub: @PaulBratslavskyTwitter: @codingthirtyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

7 Aug 202454min

React Native vs Capacitor: Performance, Flexibility, and Business Impacts - RRU 262

React Native vs Capacitor: Performance, Flexibility, and Business Impacts - RRU 262

In today's episode, they dive deep into the evolving landscape of mobile development by comparing React Native and Capacitor, two pivotal technologies for transforming web code to run seamlessly on mobile devices. Special guest, Jamon Holmgren, CTO and co-founder of Infinite Red, brings a wealth of knowledge to the conversation, offering insights and firsthand experiences with these tools.Join them as they thoroughly discuss the considerations for choosing between Capacitor and React Native, based on your team's makeup and business needs. They explore the benefits of using Ionic and Capacitor for organizations that favor Angular, and why React Native might be the go-to for those who work with React. They also share valuable information on the Chain React conference, the various content offerings through Infinite Red, and best practices for integrating over-the-air updates.Additionally, Jamon touches upon intriguing experiments with Yacht testing, and they highlight the exceptional remote design and software development services provided by Envoy, especially their unique payment model that ensures client satisfaction.If you're navigating the complexities of mobile development, this episode is packed with expert advice and actionable insight.SocialsLinkedIn: Jamon Holmgrenjamonholmgren.comBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

24 Juli 202453min

Speech Commands and Speech Recognition in React featuring Chris Laughlin - RRU 261

Speech Commands and Speech Recognition in React featuring Chris Laughlin - RRU 261

Chris Laughlin joins the round up to discuss how to use the WebKit Speech Recognition API to interact with your react applications. This opens up a wide range of capabilities for web and React applications.LinksAdding Voice Search to a React ApplicationUsing the Web Speech APIGitHub | streamich/react-useRecutDescriptSvelteNetlifyGithub Co-pilotGitHub: Chris Laughlin ( chrislaughlin )PicksCarl- Subscribing to different newslettersChris- Script Kit by John LindquistJack- GitHub | solidjs/solidPaige- Logitech Wireless MX KeyboardTJ- Manfrotto Magic ArmBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

12 Juni 202446min

Gmail Analysis Software, Web Components, and State of Web Development Surveys - RRU 260

Gmail Analysis Software, Web Components, and State of Web Development Surveys - RRU 260

Levan Katsadze is a Software Developer. In this episode, they explore a fascinating project, which offers migration rules for moving websites, emails, and databases between hosts. They talk about the tool's functionality and bugs encountered during testing.Additionally, they shed light on the user-friendly nature of the software and discuss their VS Code extension block, emphasizing the importance of code structure for developers. They delve into the world of web components and upcoming support for web components in React 19.The episode features discussions on the release of Angular 18, the state of the HTML survey, and the state of the JavaScript survey, as well as valuable insights from Levon Kasatze, who developed a software package to analyze and clean up Gmail mailboxes. Tune in for an insightful and engaging discussion on software development.Social MediaUnvoidLinkedIn @unvoidweb https://www.linkedin.com/company/unvoidwebInstagram @unvoidweb https://www.instagram.com/unvoidwebLucas PaganiniYouTube @lucaspaganiniweb https://youtube.com/@lucaspaganiniwebLinkedIn @lucaspaganiniweb https://www.linkedin.com/in/lucaspaganiniwebTwitter @lucaspaganini https://twitter.com/LucasPaganiniInstagram @lucaspaganini https://www.instagram.com/lucaspaganiniChris FrewinGitHub @princefishthrower https://github.com/princefishthrowerBlog Chris Frewin https://chrisfrew.in/Levan KatsadzeGitHub @leodevbro https://github.com/leodevbroBlog Levan Katsadze https://leodevbro.github.io/Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

5 Juni 202447min

Populärt inom Business & ekonomi

framgangspodden
varvet
badfluence
rss-borsens-finest
uppgang-och-fall
svd-ledarredaktionen
avanzapodden
lastbilspodden
rikatillsammans-om-privatekonomi-rikedom-i-livet
rss-kort-lang-analyspodden-fran-di
fill-or-kill
rss-dagen-med-di
affarsvarlden
kapitalet-en-podd-om-ekonomi
dynastin
borsmorgon
tabberaset
montrosepodden
rss-inga-dumma-fragor-om-pengar
borslunch-2