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)

Using and Teaching React with Kay Plößer - RRU 235

Using and Teaching React with Kay Plößer - RRU 235

In this episode of React Round Up, the panel talks with Kay Plößer, describing their experiences learning React. Kay is a software developer from Stuttgart, Germany and the author of the book React from Zero. They discuss the best approach to learning React from scratch. Kay describes the process of writing and producing his book 'React from Zero'. Initially he started with tutorials and lessons and then turned those into a book. It is constructed in two sections: basic and advanced and it's purpose is to help developers learn React without being overwhelmed. He has received great feedback from the people who have bought the book.Kay then describes his experiences teaching React to developers and talks about his blog post React Hooks Demystified which became really popular. The panel then about how developers can increase and diversify income through writing books and side projects.SponsorsChuck's Resume TemplateDeveloper Book Club Become a Top 1% Dev with a Top End Devs MembershipLinksKay's Book: React from ZeroKay's Blog Post: React Hooks DemystifiedKay’s LinkedInKay’s TwitterKay’s GitHubKay's WebsiteKay's SkillshareKay's Facebookhttps://www.facebook.com/React-Round-Uphttps://twitter.com/reactroundupPicksNader - Finite and Infinite Games by James CarseLucas - An Introduction and Guide to the CSS Object ModelLucas - AST ExplorerCharles - Charles' New Devchat.tv Build on Eleventy on GitHubKay - Wardley mapsAdvertising 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 Okt 202352min

The State Machines in React with David Khourshid - RRU 234

The State Machines in React with David Khourshid - RRU 234

David Khourshid is the author of a library called Xstate, He has been a developer for 7 years, currently works for Microsoft, his passion is frontendTalks a. In college, he actually studied piano performance, and so he talks about how he got into programming and where he started. The panel discusses his unique husky animation and how he came up with the idea for it and went about programming it.The panel discusses what a state is in React. David defines a state as a moment in time. States can change, when they do, that’s a state transition. They talk about the utility of states and thinking about your app as a state machine. They agree that describing your code as a state machine makes it easier to communicate and connect with non developers. The panel discusses the importance of learning from other industries, such as approaching programming the same way construction workers build a house. They debate the Waterfall versus the Agile mindset. They talk about the advantages of programming in React and focusing on the state machine, especially because it is important to be intentional about dealing with concepts separate from other concepts. They share different ways to switch to state machine thinking, one of which is to look at your event handlers and make sure they are doing anything besides dispatching events. David talks about his library called Xstate and the basics of his library and his inspiration, and who else is working in state machines. The finish by discussing industry standards. SponsorsChuck's Resume Template Raygun - Application Monitoring For Web & Mobile AppsBecome a Top 1% Dev with a Top End Devs MembershipLinksXstateKeyframersBootstrapDavid’s husky animationThe Checklist ManifestoSion SCXMLQTElmThunkObservableNoFloSketch SystemsState Charts PicksDavid - Atomic Habits by James Clear David - Bullet JournalThomas - The Checklist ManifestoThomas - Thomas’ Youtube ChannelDavid Khourshid - Constructing The User Interface with State Charts (check the library first)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.

4 Okt 202351min

React Best Practices - RRU 233

React Best Practices - RRU 233

In this week’s episode of React Round Up the panel works their way through a blog post outlining best practices for React. The first is “keeping components small and function-specific”. The panel discusses the pros of using this best practice and how it relates to the single responsibility principle. This best practice also helps with the next, “reusability is important”.The panel considers this second best practice and points out some of its flaws. It recommends avoiding the creation of new components. The panel explains that by avoiding creating new components it saves time but can also cause problems as you adapt components to fit more projects. SponsorsChuck's Resume TemplateDeveloper Book Club Become a Top 1% Dev with a Top End Devs MembershipLinkshttps://teachablemachine.withgoogle.com/ Practical React Hooks: How to refactor your app to use Hooks 12 React Best Practices You Need to Follow in 2020 https://github.com/nadeesha/saul https://www.facebook.com/React-Round-Uphttps://twitter.com/reactroundupPicksCharles - White Christmas Charles - Holiday Inn Charles - The MaxCoders Guide To Finding Your Dream Developer Job Christopher - https://github.com/microsoft/vscode-eslint Christopher - https://www.playingwithfire.co/ Thomas - test && commit || revertAdvertising 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 Sep 202340min

Game Development in React & Typescript with Maksim Ivanov - RRU 232

Game Development in React & Typescript with Maksim Ivanov - RRU 232

Front-end developer Maksim Ivanov talks about working for Mojang, the company behind the ridiculously popular game Minecraft. As it turns out, Maksim uses React to build different pieces of the game, and runs the code through a custom renderer to make it work in the game world. In addition to his day job, he also found time to write a book about TypeScript after realizing how much easier getting familiar with new code bases could be if TypeScript was used instead of JavaScript. The panel has used TypeScript to varying degrees themselves, but nobody's gone all in, and they talk about the pros and cons of it, including the initial learning curve and how it can help prevent bugs in the code. Maksim's book covers many aspects of TypeScript in great detail, and it sounds like a good read for anyone just picking up the language.SponsorsChuck's Resume Template Raygun - Application Monitoring For Web & Mobile AppsBecome a Top 1% Dev with a Top End Devs MembershipLinksCustom Rendererreact-game-engine - npmreact-unity-webgl - npmgettextnewline@tjfuller • InstagramReact Hook FormCheatsheets for experienced React developers getting started with TypeScriptThe RSpec BookTypeStrongPicksMaksim - Follow Maksim on YoutubeMaksim -Harry Potter and the Methods of RationalityCharles - Iron druid chroniclesCharles - Percy JacksonPaige - The Name of the WindTJ - OmniDiskSweeper, OmniWeb, and OmniPresence - The Omni GroupTJ - https://rtmccormick.com/2018/01/10/clear-node-modules-folders-recursively-mac-linux/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.

20 Sep 202359min

All Astro with Fred Schott - RRU 231

All Astro with Fred Schott - RRU 231

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.SponsorsChuck's Resume TemplateDeveloper Book Club Become a Top 1% Dev with a Top End Devs MembershipLinksastro.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.

13 Sep 202346min

React Architecture with Tommy Groshong - RRU 230

React Architecture with Tommy Groshong - RRU 230

In today's episode, we talk about state management, dependency injection, react hooks, API access best practices and more with Tommy Groshong a React UI architect.SponsorsChuck's Resume Template Raygun - Application Monitoring For Web & Mobile AppsBecome a Top 1% Dev with a Top End Devs MembershipLinksReact Context for Dependency Injection Not State ManagementReduce State Management Footprint with React QueryReduce State Management Footprint with React QueryTest DoubleTommyGroshong.comLinkedIn: Thomas Groshong Twitter: Tommy Groshong ( @tgroshon ) PicksJack- Deno DeployPaige- Ted LassoPaige- GitHub | foambubble/foamTJ- Land of the GiantsTommy- The CourierTommy- The Anarchist HandbookAdvertising 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 Sep 202353min

Data Visualization at Scale with Andrey Goncharov - RRU 229

Data Visualization at Scale with Andrey Goncharov - RRU 229

Software Engineer Andrey Goncharov joins the React Round Up crew to discuss how his company Hazelcast has approached visualizing hundreds of data points on potentially hundreds of computers in a way that makes sense to users. Dust off your math skills - it gets a little technical along the way as they discuss graphs, charts, performance optimizations, and bottlenecks, and even handling accessibility of these data-intensive graphs. If you ever have to debug system failures and anomalies, this will be a worthwhile episode to check out.SponsorsChuck's Resume TemplateRaygun - Application Monitoring For Web & Mobile AppsBecome a Top 1% Dev with a Top End Devs MembershipLinksHazelcast | The Leading In-Memory Computing Platform Chart.js | Open Source HTML5 Charts for your WebsitePicksAndrey- Designing Data-Intensive Applications by Martin KleppmannPaige-  Netflix Series | The Queen’s GambitTJ- City of Stairs: A Novel (The Divine Cities) by Robert Jackson BennettSpecial Guest: Andrey Goncharov.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.

23 Aug 202343min

How to Organize Your React App ft. Tania Rascia - RRU 228

How to Organize Your React App ft. Tania Rascia - RRU 228

Tania Rascia joins the round up to discuss how to organize your code across files, directories, components, and repos within your React app. The panel chimes in with what they've seen and clarify how these approaches effect the overall application functionality of your app.SponsorsChuck's Resume TemplateDeveloper Book Club Become a Top 1% Dev with a Top End Devs MembershipLinksReact Architecture: How to Structure and Organize a React Application | Tania RasciaBackends for Frontends pattern - Cloud Design Patterns | Microsoft DocsChakra UIFront End Tables: Sorting, Filtering, and Pagination | Tania RasciaPicksJack- react-location - npmPaige - Newline.coPaige- Fullstack React with Typescript courseTania - NetlifyTJ - Edge ImpulseAdvertising 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.

16 Aug 202345min

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