RRU 035: Optimizing React Virtual DOM Explained Article with Alexey Ivanov and Andy Barnov
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.

Jaksot(310)

RRU 022: RxJS and redux-observable with Tracy Lee, Jay Phelps, and Ben Lesh

RRU 022: RxJS and redux-observable with Tracy Lee, Jay Phelps, and Ben Lesh

Panel: Nader DabitSia Karamalegos Special Guests: Tracy Lee, Jay Phelps, and Ben Lesh In this episode, the React Round Up panelists talk to Tracy Lee, Jay Phelps, and Ben Lesh about RxJS and redux-observable. Tracy, Jay, and Ben are the RxJS ThisDot Media group and where they do support contracts for RxJS, staff augmentation, developer relations, and put on events. They talk about what observables are and what they are trying to solve, the most common use cases for getting started with observables, and what Promises and Async/Await are. They also touch on what they like most about RxJS, how versatile it is, and more! In particular, we dive pretty deep on: Tracy, Jay, and Ben introThisDotRxJSWhat is an observable?What problems are observables trying to solve?JavaScriptLearn observablesMaking everything functional in the libraryMeans of encapsulating values you want pushed at you later onDownside to observablesLittle bit of a learning curveMost common uses for getting started with observablesCan Promises and Async/Await be mixed with observables?What do Promises and Async/Await allow you to do?Defer functionAwait values coming in from observablesWhat do you like about RxJS?Allows you to work with all different languagesRxJS is very versatilengrx“Rx all the things”What inspired you to write Redux observable?Redux-observableRxJS docsEpicsAnd much, much more! Links: ThisDotJavaScriptRxJSngrxReduxRedux-observableRxJS docs@ladyleetTracy’s GitHub@BenLeshBen’s MediumBen’s GitHub@_jayphelpsJay’s GitHubRxJS GitHub@ThisDotLabs Sponsors Kendo UIDigital Ocean FreshBooks Picks: Nader JSCamp Sia Sprint by Jake Knapp Tracy Fashionnova.comFrancesca’s Jay denoapplitools Ben react-streamsStackBlitzSpecial Guests: Ben Lesh, Jay Phelps, and Tracy Lee. 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.

31 Heinä 201858min

RRU 021: Building SharePoint Extensions with JavaScript with Vesa Juvonen LIVE at Microsoft Build

RRU 021: Building SharePoint Extensions with JavaScript with Vesa Juvonen LIVE at Microsoft Build

Panel: Charles Max Wood Special Guests: Vesa Juvonen In this episode, the React Round Up panel talks to Vesa Juvonen about building SharePoint extensions with JavaScript. Vesa is on the SharePoint development team and is responsible for the SharePoint Framework, which is the modern way of implementing SharePoint customizations with JavaScript. They talk about what SharePoint is, why they chose to use JavaScript with it, and how he maintains isolation. They also touch on the best way to get started with SharePoint, give some great resources to help you use it, and more! In particular, we dive pretty deep on: Vesa introWhat is SharePoint?Has existed since 2009People either know about it and use it or don’t know what it isBaggage from a customization perspectiveWhy JavaScript developers?Modernizing developmentSharePoint FrameworkMicrosoft Ignite ConferenceIs there a market for it?System integratorsAngular Element and ReactReact for SharePoint Framework back-endSupports VueReact Round Up PodcastHow do you maintain isolation?What’s the best way to get started with SharePoint extensions?Office 365 Developer ProgramSharePoint documentationSharePoint YouTubeWhat kinds of extensions are you seeing people build?And much, much more! Links: SharePointJavaScriptSharePoint FrameworkMicrosoft Ignite ConferenceAngular ElementReactVueReact Round Up PodcastOffice 365 Developer ProgramSharePoint documentationSharePoint YouTube @OfficeDev@vesajuvonenVesa’s blogVesa’s GitHub Sponsors Angular Boot CampDigital Ocean FreshBooks Picks: Charles Zig ZiglarConversations with My Dog by Zig ZiglarPimsleur Lessons on Audible Vesa Armada by Ernest ClineSpecial Guest: Vesa Juvonen. 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.

24 Heinä 201830min

RRU 020: How to Get a Job (Especially for New Developers) with Charles Max Wood

RRU 020: How to Get a Job (Especially for New Developers) with Charles Max Wood

Panel: Charles Max WoodLucas ReisSia Karamalegos In this episode, the React Round Up panelists talk about finding a job as a developer. Charles is getting ready to release a course on finding a job and he finds that he is always getting asked about how new developers can find a job. They talk about how they all found their first coder job, picking your target company, and understanding what you want in a job. They also touch on Charles’ upcoming course, the importance of showing initiative, and more! In particular, we dive pretty deep on: Sign up to chat with Charles at DevChat.tv/15MinutesWhy they want to touch on this topicGet used to failureCodeSchoolHack Night meetupGoing to meetups to slowly start networkingMaking friends with developers in your communityNetworking before you need a jobLearning and helping mindsetDon’t be afraid to ask if people are hiringHow did you figure out what your target company was?Checking out the culture of a companyUnderstanding the travel involvedFigure out what you like in a job as you goAlways be looking at your portfolio and resumeGain as much experience as you can everywhere you goStick to learning one language/systemReally master the languages/systems of the company you want to usesShow initiativeFinding a champion at your target companyAnd much, much more! Links: DevChat.tv/15MinutesCodeSchoolHack Night meetupCharles’ CourseHow to interview your interviewers blog postRuby Rogues Episode 184 Sponsors Kendo UIDigital Ocean FreshBooks Picks: Charles Orphan BlackHis Course Lucas The Best Software Engineering Paper You Haven’t Read Sia FamilyAdvertising 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 Heinä 20181h 16min

RRU 019: Error Tracking and Troubleshooting Workflows with David Cramer LIVE at Microsoft Build

RRU 019: Error Tracking and Troubleshooting Workflows with David Cramer LIVE at Microsoft Build

Panel: Charles Max WoodAlyssa NichollWard Bell Special Guests: David Cramer In this episode, the React Round Up panelists talk to David Cramer about error tracking and troubleshooting workflows. David is the founder and CEO of Sentry, and is a software engineer by trade. He started this project about a decade ago and it was created because he had customers telling him that things were broken and it was hard to help them fix it. They talk about what Sentry is, errors, workflow management, and more! In particular, we dive pretty deep on: David introFounder and CEO of SentryWhat is Sentry?Working with PHPDe-bugger for productionFocus on workflowGoal of SentryTriaging the problemWorkflow managementSentry started off as an open-source side projectInstrumentation for JavaScriptEmber, Angular, and npmGot their start in PythonLogsTotally open-sourceMost compatible with run-timeCan work with any languageDeep contextsDetermining the root causeAnd much, much more! Links: SentryJavaScriptEmberAngularnpmPythonSentry’s GitHub@getsentryDavid’s GitHubDavid’s Website@zeeg Sponsors Kendo UILoot CrateFreshBooks Picks: Charles Socks as Swag David VS CodeKubernetesSpecial Guest: David Cramer. 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.

10 Heinä 201828min

RRU 018: Evolving Patterns in React with Alex Moldovan

RRU 018: Evolving Patterns in React with Alex Moldovan

Panel: Charles Max WoodLucas ReisNader Dabit Special Guests: Alex Moldovan In this episode of React Round Up, the panel discusses the article Evolving Patterns in React with its author, Alex Moldovan. Alex is from Romania and works at Fortech as an engineering manager where he works mostly with the front-end development. He also is one of the co-founders of JSHeroes, which is the biggest JavaScript conference in Romania that also has a growing international community behind it. They answer some of Charles questions about React, talk about his article, their thoughts on the new changes, and more! In particular, we dive pretty deep on: Lucas was on React Round Up Episode 11Lucas intro – works for Zocdoc as a senior front-end developerAlex introAt Fortech as an engineering managerCo-founder of JSHeroesHis article Evolving Patterns in ReactReact.createClass rather than ES6 classStarted working with React in 2015React and ReduxNobody knew how to actually build an application in React in the beginningMixinsWhat has replaced the idea of mixins?Higher Order ComponentsRender Props article by Michael JacksonImplicit with mixins to explicit with render propsWhat about Context?Do you think these new changes are addressing how we build React apps?Thoughts on the new APIs and changes from 16 to 17Error boundariesSuspenseServer-side renderingUsing the ConstructorEvolving patternsAnd much, much more! Links: React Round Up Episode 11ZocdocFortechJSHeroesJavaScriptEvolving Patterns in ReactReactReduxRender Props article by Michael JacksonReact ContextReact ConstructorAlex’s MediumAlex’s GitHub@alexnmoldovan Sponsors Kendo UILoot CrateFreshBooks Picks: Charles Star RealmsHogwarts Battles Lucas SpeedCurve Nader AWS AppSync GitHub RepoBuilding AI Enabled GraphQL Applications by Naderappsync-lambda-ai Alex GraphcoolPrismaTensorFlow.jsSpecial Guest: Alex Moldovan. 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.

3 Heinä 20181h

RRU 017: Cloud-Hosted DevOps with Ori Zohar and Gopinath Chigakkagari LIVE at Microsoft Build

RRU 017: Cloud-Hosted DevOps with Ori Zohar and Gopinath Chigakkagari LIVE at Microsoft Build

Panel: Charles Max Wood Special Guests: Ori Zohar and Gopinath Chigakkagari In this episode, the React Round UP panelists discuss Cloud-Hosted DevOps with Ori Zohar and Gopinath Chigakkagari at Microsoft Build. Ori is on the product team at VSTS focusing on DevOps specifically on Azure. Gopinath is the group program manager in VSTS primarily working on continuous integration, continuous delivery, DevOps, Azure deployment, etc. They talk about the first steps people should take when getting into DevOps, define DevOps the way Microsoft views it, the advantages to automation, and more! In particular, we dive pretty deep on: Ori and Gopi introVSTS – Visual Studio Team ServicesVSTS gives developers the ability to be productiveDeveloper productivityWhat’s the first big step people should be taking if they’re getting into DevOps?The definition of DevOpsThe people and the processes as the most important pieceDevOps as the best practicesAutomating processesWhat people do when things go wrong is what really countsLetting the system take care of the problemsHave the developers work on what they are actually getting paid forTrend of embracing DevOpsShifting the production responsibility more onto the developer’sIncentivizing developersPeople don’t account for integrationContinuous integrationTrends on what customers are asking forSafetyDocker containersAnd much, much more! Links: AzureMicrosoft BuildVSTS@orizhrOri’s GitHubGopi’s GitHub@gopinach  Sponsors Kendo UILinodeFreshBooks Picks: Charles .NET Rocks!Shure SM58 MicrophoneZoom H6 Ori FitbitPacific Northwest Hiking Gopinath Seattle, WASpecial Guests: Gopinath Chigakkagari and Ori Zohar. 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.

26 Kesä 201850min

RRU 016: React, Redux, and JavaScript Architecture with James Sinclair

RRU 016: React, Redux, and JavaScript Architecture with James Sinclair

Panel: Charles Max WoodSia KaramalegosNader Dabit Special Guests: Jared Palmer In this episode of React Round Up, the panel discusses the article React, Redux, and JavaScript Architecture with the author James Sinclair. James is a web developer in Australia and he works at Squiz were he focuses on building a digital web place. They talk about his article and why he chose to write it, where he falls on the whole Redux debate, how to convince people to come to Redux, and much more! In particular, we dive pretty deep on: James introReact, Redux, and JavaScript ArchitectureWhy were the people you are working with wary of leaving JavaScript?jQueryGreat article on explaining why we use ReactWhy React can be fastIs your team now moving to React or have they already moved over?Where do you fall on the Redux debate?Redux’s “disadvantages” are actually advantagesWhat is your current stack of choice?DownshiftConditioner.jsMost React tutorials assume you’re working on a single-page web appSprinkles of jQueryLearning Redux helps to learn in a more functional wayFunctional programming as an influence to learn ReduxManaging stateHow do you convince someone to learn Redux?Thoughts on GraphQLApollo Server and PrismaStimulusApollo Link StateAnd much, much more! Links: React, Redux, and JavaScript ArchitectureSquizJavaScriptjQueryReactReduxDownshiftConditioner.jsGraphQLApollo ServerPrismaStimulusApollo Link Statejrsinclair.com@jrsinclairJames’ LinkedInJames’ GitHub Sponsors Kendo UILoot CrateFreshBooks Picks: Charles Being around family and friendsSpend your life doing the things that really matter Sia Artificial IntelligenceMachine Learning Nader React Native Training YouTube ChannelNader’s YouTube James Highland.jsFunctional ProgrammingSpecial Guest: James Sinclair. 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.

19 Kesä 201854min

RRU 015: Visual Studio Code with Rachel MacFarlane and Matt Bierner LIVE at Microsoft Build

RRU 015: Visual Studio Code with Rachel MacFarlane and Matt Bierner LIVE at Microsoft Build

Panel: Charles Max Wood Special Guests: Rachel MacFarlane and Matt Bierner In this episode, the React Round Up panelists discuss Visual Studio Code with Rachel MacFarlane and Matt Bierner, who are both developers on Visual Studio Code. They talk about what the workflow at Visual Studio Code looks like, what people can look forward to coming out soon,  and how people can follow along the VS Code improvements on GitHub and Twitter. They also touch on their favorite extensions, like the Docker extension and the Azure extension and their favorite VS Code features. In particular, we dive pretty deep on: Rachel and Matt introMonth to month workflow of Visual Studio CodeVS Code JavaScript, TypeScript, and Mark Down supportWorking on GitHub and within the communityCheck out new features incrementally with insidersCommunity-driven workWhat is coming out in Visual Studio Code?GitHub helps to determine what they work onWorking on Grid ViewImproved settings UIHighlighting unused variables in your codeImprovements with JS DocsDartVisual Studio Extension APIHow do people follow along with the VS Code improvements?Follow along on GitHub and TwitterDownload VS Code InsidersHave a general roadmap of what the plan is for the yearTechnical debt weekWhat do you wish people knew about VS Code?Favorite extensionsDocker extension and Azure extensionAnd much, much more! Links: Visual Studio CodeJavaScriptTypeScriptDartVS Code GitHub@CodeVS Code InsidersDocker extensionAzure extensionRachel’s GitHubMatt’s GitHubMattBierner.com@mattbierner Sponsors LinodeAngular Boot CampFreshBooks Picks: Charles Orphan BlackAvengers: Infinity WarFishing Rachel GitLens Matt The Bronx WarriorsSpecial Guests: Matt Bierner and Rachel MacFarlane. 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.

12 Kesä 201834min

Suosittua kategoriassa Liike-elämä ja talous

sijotuskasti
psykopodiaa-podcast
mimmit-sijoittaa
rss-rahapodi
puheenaihe
ostan-asuntoja-podcast
rss-rahamania
hyva-paha-johtaminen
pomojen-suusta
rss-startup-ministerio
rss-seuraava-potilas
rss-paasipodi
taloudellinen-mielenrauha
rss-lahtijat
rss-bisnesta-bebeja
herrasmieshakkerit
oppimisen-psykologia
rss-myyntipodi
rss-doulapodi
rss-markkinointitrippi