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)

The Evolution of Prime React with Cagatay Civici - RRU 259

Cagatay Civici is the founder of PrimeFaces, PrimeNG, PrimeReact and PrimeVue. In this episode, they delve into the world of UI component libraries and the business of open source. Join them as they explore Primetech's journey from consulting work to a thriving team focused on UI component development and the value of selling a library of components with a premium paid version. They also take a closer look at the tailored features and commercial aspects of the Primary Act library and gain insights into creating and monetizing open-source projects. With a focus on UX, product launch strategies, and ongoing development, this episode offers a wealth of knowledge for developers and entrepreneurs navigating the world of open source and library monetization. LinksPrimeFacesSocialsTwitter: @cagatayciviciGitHub: cagatayciviciBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

29 Touko 202446min

Navigating React and React Native Evolution - RRU 258

Jamon Holmgren is the Co-founder & CTO at Infinite Red, Inc. They dive into the captivating world of React and React Native, exploring the evolution of these technologies and their implications for developers. They engage in thought-provoking discussions on deployment challenges, user expectations in mobile app development, and the intricate process of integrating React Native into existing apps. Join them as they dissect the nuances of React Native, compare it to other frameworks like Flutter, and unravel the complexities of managing dependencies in React Native projects. From success stories to industry insights, this episode offers a wealth of knowledge for developers navigating the realm of web and native mobile development. SocialsLinkedIn: Jamon HolmgrenJamon HolmgrenBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

22 Touko 202454min

Mastermind Groups and Staying Current with Sean Merron - RRU 257

In this episode, The panelist of React Round-Up, View on Vue, Adventures in Angular, Ruby Rogues, and JavaScript Jabber speak with Sean Merron about Mastermind Groups of Startups and much more. Sean is the founder of today's topic and product “Mastermind Hunt.” This product is design to skillfully find a mastermind to take your business and skills to the next level.SponsorsChuck's Resume TemplateDeveloper Book ClubBecome a Top 1% Dev with a Top End Devs MembershipLinksSean’s Twitter2frugaldudes podcastSean’s LinkedInPicksShai - Bob Proctor Joe - CoolstuffincJoe - luxorJoe - NG Conf Minified Lucas - Radical Candor Divya - Alan WattsDivya - Framework Summit Videos Divya - Several Short Sentence about Writing Charles - CES - devchat.tv/eventsCharles- Modern MedicineSean - (757) Area CodeSean - RevolutionConf.comBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

9 Touko 20241h 7min

Lambda School with Ben Nelson - RRU 256

In this episode, the panelists talk with Ben Nelson who is a co-founder and CTO of Lambda School. The panelists and Ben talk about Lambda School, the pros & cons of the 4-year university program for developers, and much more. Check it out!SponsorsChuck's Resume TemplateDeveloper Book ClubBecome a Top 1% Dev with a Top End Devs MembershipLinksRuby on RailsAngularJavaScriptElmPhoenixGitHubGet A Coder JobIncome Share Agreement’s DefinitionDevMountainCharles Max Wood’s TwitterNader Dabit’s TwitterLucas Reis’ GitHubBen Nelson’s Talk: Rethinking Higher Education – ICERI 2016 Keynote SpeechBen Nelson’s LinkedInBen Nelson’s TwitterLambda SchoolPicksLucas - CypressLucas - Looking a Cypress as a Development Environment.Nader - Egghead.ioNader - Nader’s courses on Egghead.ioNader - Suggestions for coursesCharles - Opportunity to help liberate developersCharles - Extreme OwnershipCharles - Hiring a developerCharles - Sales Rep. for selling sponsorshipsCharles - Show note writerBen - Air Table Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

1 Touko 202450min

Inside Apache Superset with Evan Rusackas - RRU 255

Evan Rusackas is a UI/UX designer, front-end developer, and data visualizer. They delve into the world of open-source development and commercialization. They explore the differences in managing open source and closed source code bases, the complexities and advantages of selling a commercial version of an open source project, and the challenges and rewards of earning money from open source work.Evan shares insights into the governance and code base management of the Apache Software Foundation, the creation of preset.io to address the needs of Apache Superset users and the commercial features offered by preset.io. They also touch on the benefits of using Apache Superset for business intelligence and data visualization, as well as the workflow for a related React-centric project.Join them as they uncover the intricacies of open-source development, the evolution of Apache Superset, and the journey of Preset as they explore the intersection of open-source and commercial software.SponsorsChuck's Resume TemplateDeveloper Book ClubBecome a Top 1% Dev with a Top End Devs MembershipSocial 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/Evan RusackasLinkedIn: Evan RusackasBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

17 Huhti 202442min

Designing Your Life - RRU 254

In this episode of React Round Up Charles Max Wood hosts a solo podcast sharing his perspective on designing your perfect life. In this episode he addresses finding your dream job, building your dream life, and staying current. Start by deciding where you want to end up. Do you see yourself retiring? Working forever? Charles shares his vision for his future and discusses the retirements of others in his life. Working back from the end of your life, Charles has you ask yourself what kind of life and career you want. Charles shares his vision for both his personal life and his career. After you pick your goal, build the skills, and knowledge to reach that goal. He uses the example of becoming a speaker at conferences. He also recommends you find a mentor or someone who has done what you want to and get their help.Charles explains how important it is to get out of your own way mentally. Many people find reasons real or imagined as to why they can’t reach their goals. He agrees that the world is unfair and barriers can be real. The best way to show others they can overcome barriers is by doing it yourself and working towards your goals. You can if you believe you can and you work for it. SponsorsChuck's Resume TemplateDeveloper Book Club Become a Top 1% Dev with a Top End Devs MembershipLinkshttps://www.facebook.com/React-Round-Uphttps://twitter.com/reactroundupPicksCharles - The Riftwar CycleCharles - The Man in the High CastleBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

10 Huhti 202427min

The Impact of Open Source Companies and Industry Insights - RRU 253

Max Stoiber is the CEO at Stellate. They delve into the open-source versus closed source debate, featuring insights from prominent figures in the tech industry. From the challenges and complexities of transitioning from engineering to leadership to the evolution of open-source contributions and community support, this episode covers a wide range of compelling topics. They also explore the success and challenges of open-source businesses, with a focus on their sustainability in a global digital landscape. Get ready for an engaging conversation that delves deep into the world of open source, business models, and the future of technology.SponsorsChuck's Resume TemplateDeveloper Book Club Become a Top 1% Dev with a Top End Devs MembershipSocial 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/Max Stoiber LinkedIn @MaxStoiber https://www.linkedin.com/in/mxstbr/Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

3 Huhti 20241h 19min

Building Resilient Architecture with Monica Lent - RRU 252

Monica Lent has been interested in software from a very young age, and made her first domain name when she was 9 years old. She left her job and founded a startup, analytic tool designed for bloggers designed around affiliate marketing. She talks about some of the lessons she’s learned, including how to sift through data and how to make it useful for people. The panel discusses how to distill the priorities from the project manager so you know where to spend your time, something that takes a lot of experience and failure. They also talk about the merits of different practices such as whether or not to deploy on Friday and having engineers on call. Monica explains her opinion on how copying and pasting code instead of adding dependencies is a positive constraint. She prefers this method most of the time but not in all cases because it keeps your code flexible and avoids unnecessary specialization. However, she is not advocating for copy/paste over dependencies in every situation : rather the point comes down to using copy/paste instead of inappropriate coupling.They also dive into how so much programming deals with other people and the importance of keeping your ego out of it when designing constraints, especially since developers hate other developer’s abstractions. They debate whether pride is a characteristic of junior or senior developers. They note that it is easier to get prideful and opinionated when you’re not working on a team. SponsorsChuck's Resume TemplateDeveloper Book ClubBecome a Top 1% Dev with a Top End Devs MembershipLinksMonica's React Finland talkNarcissistic design talkA Philosophy of Software DesignReact HooksRelayTypeScriptWebpackgRPCPrettier7 Absolute Truths I Unlearned as a Junior DeveloperPicksLeslie - Xochimilco, Mexico City, MexicoLeslie - List of CSS mistakesThomas - Get the Truth bookLucas - LoveveryLucas - Zero Fasting appMonica - The Mom Test by Rob FitzpatrickBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

27 Maalis 20241h 1min

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ää