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)

Piral Framework for Microfrontend with Florian Rappl - RRU 190

Piral Framework for Microfrontend with Florian Rappl - RRU 190

Today we talk with Florian Rappl the creator of Piral, a next generation portal applications, which utilizes microfrontend architecture.  Piral is all about scalability, allowing easy reusability between multiple teams.  We learn of the background of how it was developed, and how out of the box it comes with bundles customized to your industry.  We discuss when it makes sense to use microfrontend based on client requests and needs, and give some tips on when to start incorporating it. SponsorsTop End DevsRaygun | Click here to get started on your free 14-day trialCoaching | Top End DevsLinksPiral - Portal Solutions using MicrofrontendssmapiotGitHub - smapiot/piral: Framework for next generation web apps using micro frontends.Piral - DocumentationTwitter: @FlorianRapplGitHub: FlorianRapplNews - Florian RapplPicksFlo- Watch Stranger Things | Netflix Official SiteFlo- Bun is a fast all-in-one JavaScript runtimeFlo- The God Equation: The Quest for a Theory of EverythingJack - fresh - The next-gen web framework.Paige- GrillGrates - Custom BBQ Grill Grates | GrillGrateTJ- Watch Stranger Things | Netflix 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.

20 Juli 202247min

CSS Properties with Dillion Megida - RRU 189

CSS Properties with Dillion Megida - RRU 189

Today we talk with Dillion Megida, a developer advocate and content creator originally from Nigeria, but living in the Netherlands.  We discuss his blog article about the aspect ratio property in CSS.  Much of his effort at a developer advocate is writing articles and creating video content to promote the products for Stream, where he currently works.  He gives us his insight on preparing for and pursuing the developer advocate role at a company.  We also discuss debouncing in JavaScript, which helps to reduce unnecessary expression executions. SponsorsTop End DevsCoaching | Top End DevsLinksDillion Megida - Developer AdvocateThe Aspect Ratio Property in CSS - Dillion's BlogTailwind UI Kit - The most loaded tailwind css UI Kit on the planetJavaScript String Comparison - How to Compare Strings in JSDillion MegidaInstagram: dillionmegidaTwitter: @iamdillionPicksDillion- Amazon.com : air fryerJack- Discord - A New Way to Chat with Friends & CommunitiesJack- Pizza Ovens | Make Pizza | Ooni Pizza OvensPaige- Instant Read ThermometersAdvertising 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.

13 Juli 202254min

Setting Up Server Side Rendering with Adam Berg - RRU 188

Setting Up Server Side Rendering with Adam Berg - RRU 188

Today Jack and TJ talk with Adam Berg, VP of Engineering at Dubsado.  We discuss an article he wrote based on lessons learned while his place of work was transitioning from AngularJS to React, called starting with How to Set Up Server Side Rendering (SSR) With React, express.js, and esbuild.  We also discuss several of his other articles, including Hey Siri, We’re Breaking Up, and 3 Lines of Code Shouldn’t Take All Day. SponsorsTop End DevsRaygun | Click here to get started on your free 14-day trialCoaching | Top End DevsLinksHow to Set Up Server Side Rendering (SSR) With React, express.js, and esbuild | dev/tailsdev / tailsHow to Replace Webpack in Create React App With esbuild Hey Siri, We're Breaking UpTaking Flight Without a Smart Phone3 Lines of Code Shouldn’t Take All DayHomeTwitter: @devtailsGitHub: adamjbergPicksAdam- Upload - Season 1Jack- Micro State Management with React Hooks: Explore custom hooks libraries like Zustand, Jotai, and Valtio to manage global statesTJ- Netlify FunctionsAdvertising 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.

6 Juli 202252min

All About Equipment - RRU 187

All About Equipment - RRU 187

In today’s all-panelist episode, we cover our favorite equipment from keyboards and mouse, to computers and monitors, from webcams to microphones. SponsorsTop End DevsCoaching | Top End DevsLinksDiscord - A New Way to Chat with Friends & CommunitiesGitHub Copilot · Your AI pair programmerPicksJack - Donate to the Red CrossJack- Pizza Ovens | Make Pizza | Ooni Pizza OvensPaige- The White Lotus | Official Website for the HBO Series | HBO.comTJ- Lilo & StitchAdvertising 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.

29 Juni 202244min

3D Modeling in React with Jennifer Fu - RRU 186

3D Modeling in React with Jennifer Fu - RRU 186

Today we have special guest Jennifer Fu, a software engineer who specializes in front end development.  Currently working at Domino Data Lab, she comes with 20 years of experience in many programming languages, but loves React!  Much of her recent work is with Web3.js and Three.js.  We discuss how to work with the 3D JavaScript library, and discuss how easy it is to use.  As a bonus, we get some of her insight to excelling during the coding interview process.  Make sure to check out her extensive library of articles at medium.com (link below).SponsorsTop End DevsRaygun | Click here to get started on your free 14-day trialCoaching | Top End DevsLinksJennifer Fu - MediumJennifer Fu - Cupertino, California, United States | Professional Profile | LinkedInModeling - blender.orgGitHub: Where the world builds softwareThree.js - JavaScript 3D libraryPicksJennifer- Baltimore Museum of ArtTJ- TMNT Shredder's RevengePaige- Watch The Great British Baking Show | Netflix 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.

22 Juni 202248min

Design Systems - RRU 185

Design Systems - RRU 185

In this all-panelist episode, we discuss Design Systems, what they are and why you might want one. As a great way to help companies to standardize the look and feel and behavior of their web applications across the enterprise, we discuss the challenges of implementation. We also discuss how useEffect gets called twice when in developer mode and strict mode to test your component. It mounts it, un-mounts it, the re-mounts it - looking to see if there are leaks. What do we do about this? SponsorsTop End DevsCoaching | Top End Devs LinksDiscord - A New Way to Chat with Friends & CommunitiesReact 18 useEffect Double Call for APIs: Emergency FixStorybook: UI component explorer for frontend developers PicksJack- Land Rover Defender 42110 | Technic™ | Buy online at the Official LEGO®Paige - Magnetized screwdriversTJ - Heated BlanketsAdvertising 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.

15 Juni 202245min

React Code Quality with Iva Kop - RRU 184

React Code Quality with Iva Kop - RRU 184

Today we talk with Iva Kopraleva, a technical article writer, and React developer at CitizenLab, a digital engagement platform helping citizen involvement in public decision-making. We delve into some tips and tricks she has learned to make her coding process better, as well as recommendations for new developers in finding their first job. SponsorsTop End DevsCoaching | Top End Devs LinksWhere is the mouse?Iva Kop, Author at LogRocket BlogIva Kop - freeCodeCamp.orgLinkedIn: Iva KopTwitter: @iva_kopGitHub: Iva ( IvaKop )Discord: React Round Up PicksIva - Horseback RidingJack - Everything Everywhere All At OnceJack - Chip ’n Dale Rescue RangersTJ- Postman API PlatformAdvertising 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 Juni 202253min

Insider Views from Shubham Khatri at Meta - RRU 183

Insider Views from Shubham Khatri at Meta - RRU 183

Today we talk with software engineer Shubham Khatri, a front end developer at Meta. As someone who is really passionate about React, we discuss Strict Mode and Flock among other things. We also talk about his experience working for the company, insights on getting hired at Meta, and tips for getting a good response from developer help. Sponsors Top End DevsCoaching | Top End Devs Links What is StrictMode in ReactMeta | Social Metaverse CompanyHow to Build a Custom Pagination Component in ReactShubham Khatri - MediumTwitter: @ShubhamReacts Picks Jack - Touch PortalPaige - OzarkTJ- Podcasts - FreakonomicsShubham - This Is UsSpecial Guest: Shubham Khatri.Sponsored By:Coaching | Top End Devs: Do you want to level up your career? or go freelance? or start a podcast or youtube channel? Let Charles Max Wood Help You Achieve Your DreamsTop End Devs: Learn to Become a Top 5% Developer. Join our community of ambitious and engaged programmers to learn how.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.

25 Maj 202244min

Populärt inom Business & ekonomi

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