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)

All Astro with Fred Schott - RRU 198

All Astro with Fred Schott - RRU 198

Today we talk with Fred Schott , the co-creator of Astro, a web framework focused on improving performance. Built around island architecture, it leverages HTML over javascript where it’s an option. Astro is a great option for those who focus on content, marketing, or personal blogs, and it is a great option to use with React. In this episode we talk about when it makes sense to use Astro, and how to implement it. SponsorsTop End DevsRaygun | Click here to get started on your free 14-day trialCoaching | Top End DevsLinksastro.new Astro | Build faster websitesAstro LoungeTwitter: @FredKSchottTwitter: @astrodotbuildPicksFred- Over the Garden WallJack- Pizza: The Ultimate Cookbook Featuring More Than 300 Recipes (Italian Cooking, Neapolitan Pizzas, Gifts for Foodies, Cookbook, History of Pizza)TJ- The Vergecast PodcastAdvertising 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.

21 Sep 202250min

The Controversies Panelist Episode - RRU 197

The Controversies Panelist Episode - RRU 197

In today's all panelist episode we address web development controversies: state management tools, CSS in JS, GraphQL or REST, and, of course, tabs versus spaces. And the rule is: there's no saying "It depends." Listen to the panelists take hard line stances on things that matter (and things that don't), and try to defend their choices. It's a fun episode for everyone, and we'd love to hear about your own controversial coding decisions.  SponsorsTop End DevsCoaching | Top End DevsLinksDiscord - A New Way to Chat with Friends & CommunitiesPicksJack- Solo StovePaige- BULLET TRAINTJ- Portal Companion Collection for Nintendo Switch - Nintendo Official SiteAdvertising 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 Sep 202254min

Gherkin with Chris Frewin from InClub - RRU 196

Gherkin with Chris Frewin from InClub - RRU 196

Today we talk with Chris Frewin, a full-stack software engineer at private experience startup InClub, located in Zurich, Switzerland.  Involved with all coding aspects, from the back-end, mobile app, CMS, and everything in-between, we learn about the challenges of being a solo developer at a startup.  We learn a lot about Gherkin, the format for cucumber specifications. SponsorsTop End DevsRaygun | Click here to get started on your free 14-day trialCoaching | Top End DevsLinksHomeGherkin SyntaxJest10 Minute Tutorial - Cucumber DocumentationDetoxcypress.ioThe Clean Code BlogAdvanced Code Organization Patterns: The Case For One Function Per FileOne Year as the Chief Technology Officer at InClubStructure and Interpretation of Test Cases - Kevlin HenneyChris' Full Stack BlogPicksChris- The Lean Startup: How Today's Entrepreneurs Use Continuous Innovation to Create Radically Successful BusinessesChris- The Complete Isaac Asimov's Foundation Series Books 1-7 (Foundation, Foundation and Empire, Second Foundation, Foundation's Edge, Foundation and Earth, Prelude to Foundation, Forward the Foundation)Jack- Millennium Falcon™ 75192 | Star Wars™ | Buy online at the Official LEGO® Shop USPaige- Amazon.com : plastic wrap dispenser with cutterTJ- Amazon.com: Amazon GoAdvertising 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.

7 Sep 202240min

Ancillary Skills Associated with Web Development - RRU 195

Ancillary Skills Associated with Web Development - RRU 195

In today’s all-panelist episode, we discuss many ancillary skills that you might be tempted to avoid learning but are very beneficial to know.  Included in the conversation are CSS, DNS & HTTP, caching, API styles, knowing how to interact with back ends and databases, and command line. SponsorsTop End DevsCoaching | Top End DevsLinksDiscord - A New Way to Chat with Friends & CommunitiesPicksJack- Watch Day Shift | Netflix Official SitePaige- Star Trek: Deep Space Nine - Watch Full Episodes - CBS.comTJ- Only Murders in the BuildingAdvertising 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.

31 Aug 202247min

Next.js, Remix and Xata with Atila Fassina - RRU 194

Next.js, Remix and Xata with Atila Fassina - RRU 194

In today’s episode we talk with Atila Fassina, a developer experience engineer working at Xata.  As a fan of both, Atila compares Next.js and Remix, comparing their similarities and differences.   We also talk about how Xata makes dealing with databases more comfortable.  This server-less database, which is hidden behind an API, provides users with some nice abstractions, such as instant migrations, and analytics and a search engine right out of the box.  Our discussion includes partial routing, Remix mutations, and layout RFC. SponsorsTop End DevsCoaching | Top End DevsLinksThe Go-To Serverless Database | XataAuthor Atila Fassina - Smashing MagazineLayouts RFCRFC: Layouts · Discussion #37136 · vercel/next.jsJoin the Xata Discord Server!Atila − Web DevelopmentTwitter: @AtilaFassinaPicksAtila- Watch The Sandman | Netflix Official SiteJack- The BearPaige- Amazon.com : cooking spray bottleAdvertising 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.

24 Aug 202249min

Navigating the Management Route with Tommy Groshong - RRU 193

Navigating the Management Route with Tommy Groshong - RRU 193

Today’s guest, Tommy Groshong, walks us through some questions to consider when thinking about pursuing a higher-level role.  After a second go-around into management, we get some insight into how the culture can be very different at higher levels and the importance of having good questions to ask.  We talk about two separate tracks you could pursue based on your skills and desires, and how to handle the requirements of management and stay connected with your coding craft and new trends in the industry. SponsorsTop End DevsRaygun | Click here to get started on your free 14-day trialCoaching | Top End DevsLinksDiscord - A New Way to Chat with Friends & CommunitiesTommyGroshong.comTwitter: @tgroshonPicksJack- Westworld | Official Website for the HBO Series | HBO.comPaige- Outlander SeriesTJ- Only Murders in the BuildingTommy- Should I See This Movie?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.

17 Aug 202251min

Islands Architecture with Jack Herrington - RRU 192

Islands Architecture with Jack Herrington - RRU 192

Jack leads us through some of the history of how we got to where we are with client side rendering, and how island architecture helps to reduce the workload handled on the client-side.   We talk process and tips on transitioning to Islands Architecture, and in the process talk about BUN, Fresh, and other island architecture frameworks. SponsorsTop End DevsCoaching | Top End DevsLinksIslands Architecturefresh - The next-gen web framework.AstroBun is a fast all-in-one JavaScript runtimeEleventy, a simpler static site generatorThe 4 things it takes to be an expertPicksJack- MacBook Pro 13-inchPaige- Top Gun | Official Website | Now Playing Only In TheatresTJ- Summoning SaltAdvertising 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.

10 Aug 202248min

Bedrock Layout with Travis Waith-Mair - RRU 191

Bedrock Layout with Travis Waith-Mair - RRU 191

Today we talk with Travis Waith-Mair, a senior software engineer at Plex, and creator of Bedrock Layout Primitives library.  Bedrock layout allows you to build a complex layout without with reusable components without needing to be an expert at the underlying CSS.  We talk about the success of his library, and along the way discuss Lerna, a tool for JS Monorepos, and the AVO (Attributes Verbs and Objects) and method.SponsorsTop End DevsCoaching | Top End DevsLinks- Top End DevsOverview / Bedrock Layout Primitives - Page ⋅ StorybookDocumentation | LernaTravis Waith-Mair - MediumGitHub: Travis Waith-MairTwitter: @travisWaithMairPicksPaige- Formula 1: Drive to SurviveTJ- Join Bytes - Your weekly dose of JavaScriptTravis- Only Murders in the BuildingAdvertising 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.

27 Juli 202247min

Populärt inom Business & ekonomi

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