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)

RRU 006: Setting Up and Getting Used to Gatsby with Aman Mittal

RRU 006: Setting Up and Getting Used to Gatsby with Aman Mittal

Panel: Charles Max WoodCory HouseTara ManicsicKent C Dodds Special Guests: Aman Mittal In this episode of React Round Up, the panel discuss setting up and getting used to Gatsby with Aman Mittal. Aman is a computer science graduate, has been working in web development for the past two years, and has worked with companies such as freeCodeCamp. He has been working with React for the past 6 months and started working with Gatsby in January of 2018. They talk about what Gatsby is, why you would want to use it, and what a simple Gatsby site would look like. In particular, we dive pretty deep on: Aman introductionWhat is your experience with React?Working with Gatsby because of a clientWhat is Gatsby?Gatsby uses ReactHas become quite matureWhy Choose Gatsby?Good with small and medium business clientsGatsby and PWAsDoes it rely heavily on GraphQL?GraphQL is useful with Gatsby but it is not necessaryWhat would a simple Gatsby site look like?Index componentHas support for CSS and JSThe distinction between a static site generator and a normal web appIs Gatsby interactive on the front-end?More mature than other static site generatorsGenerate HTML files for all of your routesGatsby gives you the best of both worldsGatsby’s own websiteWorkshop.meHow would you suggest people get started with Gatsby?And much, much more! Links: freeCodeCampReact GatsbyGraphQLJavaScriptWorkshop.meAman’s GitHubAman’s Medium@AmanhimselfReadingbooks.blog Picks: Charles Get involved in your local governmentOvercast Cory The Reusable JavaScript Revolution - talk by Cory HouseConsole Log ArticleBuilding large scale react applications in a monorepo by Luis Vieira Tara React Videos on YouTube ChannelCoco Kent CocoThe Greatest ShowmanReact Testing LibraryNetlify Aman Gatsby ThemesThe Southern Reach Trilogy by Jeff VanderMeerSpecial Guest: Aman Mittal. 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 Apr 201845min

RRU 005: Prisma and GraphCool with Nikolas Burk

RRU 005: Prisma and GraphCool with Nikolas Burk

Panel: Charles Max WoodTara ManicsicKent C DoddsNader Dabit Special Guests: Nikolas Burk In this episode of React Round Up, the panel discusses Prisma and GraphCool with Nikolas Burk. Nikolas works as a developer at GraphCool, which is a small startup based in Berlin. Their latest product is Prisma, which is a GraphQL database proxy that turns your database into a GraphQL API. They talk about why you would want to use Prisma and the pros to utilizing GraphQL. They also touch on why they made GraphCool and Prisma open source so that more people could use it. In particular, we dive pretty deep on: Nikolas introductionWhat is GraphCool?PrismaPrisma is the core technology that is powering GraphCoolSequel databasesHow do you communicate differences to Prisma?Using GraphQL as the interface to the databaseGraphQL is much simplerGraphQL Schema Definition LanguageWhy use Prisma?Prisma as the database layerPrisma is working on supporting more databasesWhat are the steps from database to messing with GraphCool and Prisma?MongoDBSchema driven or Schema first development2 GraphQL APIsPrisma services3 types of clustersPrisma CloudBoilerplate projectsWhy open source?And much, much more! Links: GraphCoolPrismaGraphQL Schema Definition LanguageGraphQLMongoDBPrisma CloudReact@NikolasBurkNikolasBurk.com Picks: Charles Code SponsorReactDevSummitGet a Coder Job CourseSimpleProgrammer.com@CMaxWT-Shirts to come Tara The Eccentricities of Hammer and Nail by Suz HintonMad Mattr Kent Polyfill.ioWorkshop.me Nader Workshop.meReact Native Training React Native Radio Episode 90 Nikolas GraphQL EuropeGraphQL DayThe Beginner's Guide to ReactJS by Kent C DoddsSpecial Guest: Nikolas Burk. 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 Apr 20181h 1min

RRU 004: Redux-Bundler with Henrik Joreteg

RRU 004: Redux-Bundler with Henrik Joreteg

Panel: Charles Max WoodTara ManicsicKent C Dodds Special Guests: Henrik Joreteg In this episode of React Round Up, the panel discusses redux-bundler with Henrik Joreteg. Henrik spoke at the first Node Conf, leans towards progressive web apps and single-page apps, and recently has gotten into independent consulting. He also has written a book called Human JavaScript and is working on his second book right now. They talk about his redux-bundler on GitHub and the ability to make changes behind the scenes without having to bother the user. He gives a general background on why he created the bundler and how you can use it in your programming to make your life easier. In particular, we dive pretty deep on: Henrik introductionWhat is the redux-bundler?He despises using behavioral componentsIf it can be local, keep it localDon’t bother the user if you don’t need toService Workers vs redux-bundlerMaking changes behind the scenesHe loves to build appsCan you see any case where it would be useful to have a Service Worker in the background?Redux-bundler exampleRedux-bundler worker exampleWhat are the pros and cons to using the redux-bundler?At what point do you need Redux?ReactHow did you get to the point to where you decided to make this bundler?Uses React as a glorified templating languageHe gets nervous when people start writing a lot of application codeSpeedy.giftEasier to use this from the beginningThis bundler is used to show patternsAnd much, much more! Links: React Dev SummitHuman JavaScriptRedux-bundlerRedux-bundler exampleRedux-bundler worker exampleReduxReactSpeedy.GiftHenrik’s blog@HenrikJoretegReduxbook.com coming soon Picks: Charles Black PantherDevChat.tv/15minutesReact Dev SummitDevChat.tvAdventures in AngularViews on Vue Tara Women Who CodeWomen Techmakers Kent International Women’s DayGirl Develop ItApplication State Management blog postTools without config blog postConcerning toolkits blog post Henrik AnkiPartial JSDeviate by Beau LottoSpecial Guest: Henrik Joreteg. 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.

27 Mars 20181h 8min

RRU 003: Advanced Component Patterns and Downshift with Kent C Dodds

RRU 003: Advanced Component Patterns and Downshift with Kent C Dodds

Panel: Charles Max WoodNader DabitKent C DoddsCory House In this episode of React Round Up, the panel discusses advanced component patterns and Downshift. They talk about different component patterns, especially render prop patters, and the fact that Downshift allows for your components to be much more useful generally for more people. They also note that the render prop patterns can help to separate logic from view, which makes things easier to develop. In particular, we dive pretty deep on: Component patternsDownshiftEgghead courseWhat makes it advanced?Requires taking a step back and think about your components a little differentlyIs there a React Native version?ReactRender prop patternsCode abstraction or code re-useWhy Downshift is powerfulCan use regular HTML and CSS with DownshiftAllows you to be in charge of renderingWhat other places is the render prop pattern useful?What is the benefit of using a react component over a JS component?Awesome React Render Props GitHub RepoDownshift is highly accessiblejQuery UI@MarcySuttonRender props reduce the amount of opinion that component hasChoosing render props gives the consumer more power as well as more responsibilityRender props are best used with open source projectsAnd much, much more! Links: React Dev SummitDownshiftEgghead CourseReact NativeReactAwesome React Render Props GitHub RepojQuery UI@MarcySuttonKent’s GitHubKent’s Website (with links to courses) Picks: Charles Kent’s blogHogwarts Battle Board GameTake time to write leisure codeSign up for React Dev Summit with code KentCDodds for 10% off Cory Manorisms YouTube Videos Kent React Component ComponentWinamp2-jsHis NewsletterBeyond React 16 by Dan AbramovSpecial Guest: Kent C. Dodds. 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 Mars 20181h 4min

RRU 002: Webpack the Good Parts with Juho Vepsäläinen

RRU 002: Webpack the Good Parts with Juho Vepsäläinen

Panel: Charles Max WoodNader DabitCory House Special Guests: Juho Vepsäläinen In this episode of React Round Up, the panel discusses Webpack the good parts with Juho Vepsäläinen. He talks a lot about the book he has written on Webpack, which helps people understand Webpack and how to work with it. They also discuss the advantages to using Webpack and discuss how you can use it in your coding to your benefit. In particular, we dive pretty deep on: For 10% off, use “Juho” to sign up for React Dev SummitWhat is Webpack?Juho’s Webpack book: SurviveJSReactHow can someone get into learning about Webpack if they’re not from a React background?It’s all about the contents behind WebpackHow popular is Webpack and how large is it?You don’t need to read all 400 pages of his bookIs there a certain way to write with Webpack?You can learn things as you go with WebpackHow to approach code using WebpackHow new updates with change the philosophy behind WebpackIt’s good for Webpack to have pressure from the outsideThere is no reason to use a newer tool if it already works in an older toolAre there particular plug-ins that you use in Webpack that you really like?HTML plug-inReact NativeInteresting Webpack project usesJuho’s GitHubDecreasing need to be a Webpacker expertAnd much, much more! Links: React Dev SummitWebpackSuviveJSReactReact NativeJuho’s GitHubNGconfReact Finland Conference Picks: Charles React Dev SummitView on Vue PodcastThe Whole-Brain Child by Daniel J. Siegel and Tina Payne BrysonScott Beebe Nader React blogpostReady Player One by Ernest Cline Cory The Knowledge Project Podcast Juho JAMstackSpecial Guest: Juho Vepsäläinen. 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.

13 Mars 201853min

RRU 001: Getting Started with React

RRU 001: Getting Started with React

Panel:  Charles Max Wood Tara Manicsic Nader Dabit Kent C. Dodds Cory House Special Guests: None In this episode of React Round Up, the panel discusses how they each got into React and they provide some great resources for people who want to learn more about React and what it’s all about. They emphasize the fact that React is a very straightforward language and can be used relatively painlessly with a little bit of learning before jumping in. In particular, we dive pretty deep on: How each of the panelists got into ReactAngular beginningsReact NativeReact Native TrainingReact JS ConsultingNode developer beginningsBackbone to ReactRuby backgroundHow to get into React yourselfLearn things in the right orderReact-HowtoBeginners Guide to ReactJSYou Don’t Know JS, ES6, and Beyond by Kyle SimpsonCodeSandbox.ioES6Get comfortable with JavaScript firstBiggest mistake people make when learning about reactES6 and Beyond WorkshopReact CommunityHow did the panel learn ES6?And much, much more! Links: React Native Training React JS ConsultingReact-HowtoBeginners Guide to ReactJSYou Don’t Know JS, ES6, and Beyond by Kyle SimpsonCodeSandbox.ioES6 and Beyond WorkshopTara’s Twitter and GitHubCory’s Twitter, Medium Blog, and BitNative BlogNader’s Twitter, Medium, GitHub, React Native Training Blog, React Native Training YouTubeKent’s Twitter and GitHubCharles’ Twitter and DevChat.tv Picks: Charles React Course on PluralsiteReact Dev Summit 2018Ready Player One Tara JazzCon#toshmagosh Nader Viro MediaAWS AppSync Kent DogsNitin Tulswani Cory Node TipReact: The Big PictureReact RallyAdvertising 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 Mars 20181h 8min

Populärt inom Business & ekonomi

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