React Round Up30 Loka 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.

Kokeile Premiumia

Nauti 14 päivää ilmaiseksi

Tilaa Premium

Jaksot(310)

Performance Testing and THREE.js With Giulio Zausa - RRU 213

Giulio Zausa is a Software Engineer at Flux. They build next-generation collaborative tools for hardware design. He joins the show to talk about his projects on Flux. He also shares some of his tips and experiences on how to improve your application performance. Moreover, he dives into what the react-three-fiber library is all about and its functions. About This EpisodeChrome ProfilerPerformance TestingUsing React in building appsTHREE.js and react-three-fiber librarySponsorsChuck's Resume TemplateDeveloper Book Club Become a Top 1% Dev with a Top End Devs MembershipLinksFluxScaling 3D Graphics on the Web (GrazJS #34)react-three-fiberGiulio ZausaGitHub: giuliozTwitter: @giuliozausaPicksGiulio - v86Paige - OpenAPI Initiative: HomeTJ - Poker Face (TV Series 2023– ) - IMDbAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

8 Helmi 202352min

User Authorization With Cerbos - RRU 212

Alex Olivier is a Product Lead at Cerbos. It is a self-hosted, open-source authorization layer that separates your authorization logic from your core application code. He joins the show to talk about the company in more detail and what it can offer to its users. Additionally, he explains the process of Testing and Setting it up. About this EpisodeHow authorization enables a company to scale, win enterprise clients, and meet regulatory requirementsThe ongoing shift in decoupling applications into specialized services, authentication was first, and now authorization being the next big oneStateful vs Stateless authorizationConfiguration vs Code - Cerbos policiesBeing ‘Cloud Native’ - first class support for metrics, telemetry, observabilityLearning about Cerbos for new usersSponsorsChuck's Resume TemplateDeveloper Book Club Become a Top 1% Dev with a Top End Devs MembershipLinksCerbosCerbos @ CollisionConf 2022 - YouTubeCerbos #3 - How Cerbos Works - YouTubeLinkedIn: CerbosLinkedIn: Alex OlivierPicksAlex - Wireless Flight Adapter Jack - Fusion 360Paige - Your Best Portable Monitor On-the-Go – Arzopa StoreTJ - Sign Up for National Geographic NewslettersAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

1 Helmi 202346min

Shifting Away From CSS-in-JS With Sam Magura - RRU 211

Sam Magura is a Software developer at Spot. He joins the show alongside, Jack and TJ to talk about his article, "Why We're Breaking Up with CSS-in-JS". He was the second most active maintainer of Emotion, a widely-popular CSS-in-JS library for React. But realized it came with a big performance cost and added unnecessary complexity. He describes the specific inefficiencies that he has encountered while using it and how he came to realize them. Moreover, he talks about his solution to these performance problems. SponsorsChuck's Resume TemplateDeveloper Book Club starting with Clean Architecture by Robert C. MartinBecome a Top 1% Dev with a Top End Devs MembershipLinksWhy We're Breaking Up with CSS-in-JS - DEV Community 👩‍💻👨‍💻emotion-js/emotionGitHub: srmaguraLinkedIn: Sam MaguraPicksJack - Watch The Midnight Gospel | Netflix Official SiteSam - Skiing in ColoradoTJ - M3GAN (2022) - IMDbAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

25 Tammi 202342min

A Shift In Focus With Jack Franklin - RRU 210

Jack Franklin is working on Chrome DevTools as a Frontend Engineer at Google. He joins the show to talk about his article, "Why I don't miss React: a story about using the platform". He explains why he wrote his article and about his experience working with ChromeDevTools. Additionally, he dives into the advantages of Web components and its difference from React. He tackles all of the key points of his article. SponsorsChuck's Resume TemplateDeveloper Book Club starting with Clean Architecture by Robert C. MartinBecome a Top 1% Dev with a Top End Devs MembershipLinksWhy I don't miss React: a story about using the platformJack FranklinJack (@jack@indieweb.social)Twitter: @Jack_FranklinPicksJack F. - Ben VallackJack H. - Midjourney - DiscordPaige - Watch Mythic Quest | Apple TV+TJ - BokksuAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

18 Tammi 202349min

Predictions For 2023 - RRU 209

Talking about their 2023 Hot Takes and predictions, Jack, Paige, and TJ tackle this week's Panelist episode. They discuss their hopes for this year as well as potential improvements to the various languages and technologies. Additionally, they also dive into some of the software development tools and share their recommendations and expectations for them. SponsorsChuck's Resume TemplateDeveloper Book Club starting with Clean Architecture by Robert C. MartinBecome a Top 1% Dev with a Top End Devs MembershipPicks Jack - Four Thousand WeeksPaige - ErGear Height Adjustable Electric Standing DeskTJ - Buy AirPods ProAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

11 Tammi 202346min

Jumpstart Your React Career With Collin Pfeifer - RRU 208

Collin Pfeifer, writer, software engineer, and student at Indiana University joins the React Round Up panel to discuss the intricacies and pitfalls in Create React App, the roadmap of being a self-taught developer, and how the computer education system has changed over the years.SponsorsChuck's Resume TemplateDeveloper Book Club starting with Clean Architecture by Robert C. MartinBecome a Top 1% Dev with a Top End Devs MembershipLinksWhy Create React App is Outdated in 2022Collin PfeiferTwitter: @pfeifer_collinPicksCollin - GitHub student developer packCollin - Thrifting mystery packsJack - Rubik's CubeTJ - Lensa AI: photo & video editor 4+ - App StoreAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

4 Tammi 202347min

New Features in Storybook with Shaun Evening - RRU 207

Chromatic developer experience engineer Shaun Evening joins the React Round Up hosts to talk about all the new features rolling out with the release of Storybook 7. Have you ever wanted to combine your Storybook integration with Material UI, Ant Design, or any other component library? Well, Storybook's making it easier than ever, and that's just the beginning. A new offering called Integrations allows users to add all sorts of plugins to their Storybook workflows for even more functionality, and has "recipes" to help you get the most out of your Storybook. Follow Shaun on Twitter for all the latest and greatest happening at Chromatic: https://twitter.com/Integrayshaun SponsorsChuck's Resume TemplateDeveloper Book Club starting with Clean Architecture by Robert C. MartinBecome a Top 1% Dev with a Top End Devs MembershipPicksJack - Rice CookersJack - Arc from The Browser CompanyShaun - Warp: The terminal for the 21st centuryPaige - Trinidad's Ponche de Créme (Cream Punch)Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

22 Joulu 202251min

New React features, MDX and Docusaurus with Sebastien Lorber - RRU 206

Sebastien Lorber, Docusaurus maintainer at Meta and This Week in React newsletter creator, joins the React Round Up panel to discuss the latest and greatest in React 18, including lesser-known hooks and features that are making the framework more useful and performant than ever before. He also deep dives into why Docusaurus (maintained by Meta/Facebook) has become such a popular static site generator for companies and dev teams in all industries to document their products, APIs, software, and more. Learn more about the most exciting new developments in the React ecosystem by listening now and stay up to date with new developments by signing up for Sebastien's free This Week in React newsletter. SponsorsChuck's Resume TemplateDeveloper Book Club starting with Clean Architecture by Robert C. MartinBecome a Top 1% Dev with a Top End Devs MembershipLinksDocusaurusThis Week In ReactuseSyncExternalStore - The underrated React API | This Week In ReactRecords & Tuples for ReactTwitter: @sebastienlorberSébastien Lorber's websitePicksJack - Console Ninja - Visual Studio MarketplacePaige - Top Gear UK TV SeriesSebastien - Remotion | Make videos programmatically in ReactSebastien - Three.js Journey - Learn WebGL with Three.jsTJ - Electric Wine OpenerAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

14 Joulu 202249min

Kaikki yhdessä sovelluksessa

Kuuntele kaikki suosikkipodcastisi ja -äänikirjasi yhdessä paikassa.

Sinulle valikoitua sisältöä

Podme-sovelluksessa kokoat suosikkisi helposti omaan kirjastoosi. Saat meiltä myös kuuntelusuosituksia!

Jatka kuuntelua koska tahansa

Voit jatkaa siitä mihin jäit, myös offline-tilassa.

Premium

9,99 €/kk

Kaikki premium-podcastit
Ei mainoksia
Ei sitoutumista, peruuta koska tahansa

Aloita 14 päivän kokeilu

Premium

13,99 €/kk

Kaikki premium-podcastit
Ei mainoksia
Ei sitoutumista, peruuta koska tahansa
Yksi lisäkäyttäjä

Kokeile 14 päivää maksutta

Suosittua kategoriassa Liike-elämä ja talous

Tarinat ja äänet, joita rakastat kuunnella

Kuuntele kaikki suosikkipodcastisi ja -äänikirjasi

Lue lisää