title
Why We Should Ditch React 👎

description
🚀 If you're learning to code, check out my website 👉 https://codehawke.com/all_access.html 🔥 📣 Other Social: https://twitter.com/RealChrisHawkes https://www.linkedin.com/in/christopher-hawkes-130aa835/ https://github.com/chawk https://stackoverflow.com/users/836277/chris-hawkes

detail
{'title': 'Why We Should Ditch React 👎', 'heatmap': [], 'summary': "Features a testimonial of hosting with linode for eight years, scaling to 250,000 customers in a month using 5-10% resources on a $20/month account, and explores the challenges and benefits of react's virtual dom and web components, emphasizing trade-offs between the two and their impact on state management and component structure.", 'chapters': [{'end': 38.492, 'segs': [{'end': 38.492, 'src': 'embed', 'start': 0.089, 'weight': 0, 'content': [{'end': 3.43, 'text': 'hey guys, this video is brought to you by Linode, one of my favorite companies.', 'start': 0.089, 'duration': 3.341}, {'end': 5.95, 'text': "I've been doing business with Linode for eight years now.", 'start': 3.43, 'duration': 2.52}, {'end': 7.49, 'text': "they're growing all over the world.", 'start': 5.95, 'duration': 1.54}, {'end': 9.591, 'text': "they're opening data centers all over the place.", 'start': 7.49, 'duration': 2.101}, {'end': 10.811, 'text': 'mine is in New Jersey.', 'start': 9.591, 'duration': 1.22}, {'end': 14.852, 'text': "however, they're opening up in Canada, Australia, India, everywhere.", 'start': 10.811, 'duration': 4.041}, {'end': 17.252, 'text': 'Linode makes it easy and affordable to host your app.', 'start': 14.852, 'duration': 2.4}, {'end': 18.853, 'text': 'like I pay $20 a month,', 'start': 17.252, 'duration': 1.601}, {'end': 28.017, 'text': "I've scaled it to 250,000 customers in a single month with just using about five to ten percent of my available resources on a twenty dollar a month account.", 'start': 18.853, 'duration': 9.164}, {'end': 33.966, 'text': "so if you guys are looking to host something yourself, there's really no better company that I recommend than Linode.", 'start': 28.017, 'duration': 5.949}, {'end': 35.208, 'text': 'so make sure you guys check them out.', 'start': 33.966, 'duration': 1.242}, {'end': 36.711, 'text': 'the link is in the description tab below.', 'start': 35.208, 'duration': 1.503}, {'end': 38.492, 'text': "Hey guys, what's up?", 'start': 37.932, 'duration': 0.56}], 'summary': 'Linode has been used for 8 years, has 250,000 customers, and costs $20 a month.', 'duration': 38.403, 'max_score': 0.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iRo18pUs61Q/pics/iRo18pUs61Q89.jpg'}], 'start': 0.089, 'title': 'Linode hosting testimonial', 'summary': 'Details a testimonial of hosting with linode for eight years, highlighting their global expansion and affordability, with the speaker scaling to 250,000 customers in a single month using only 5-10% of resources on a $20/month account.', 'chapters': [{'end': 38.492, 'start': 0.089, 'title': 'Linode hosting testimonial', 'summary': 'Details a testimonial of hosting with linode for eight years, highlighting their global expansion and affordability, with the speaker scaling to 250,000 customers in a single month using only 5-10% of resources on a $20/month account.', 'duration': 38.403, 'highlights': ["The speaker has been doing business with Linode for eight years and highlights the company's global expansion and growth, including the opening of data centers in multiple countries such as Canada, Australia, and India.", 'The affordability of hosting with Linode is emphasized, with the speaker paying $20 a month and scaling to 250,000 customers in a single month while using only 5-10% of available resources on a $20/month account.', 'The speaker recommends Linode as the top choice for hosting, emphasizing the lack of a better company for hosting than Linode.']}], 'duration': 38.403, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iRo18pUs61Q/pics/iRo18pUs61Q89.jpg', 'highlights': ["The speaker has been doing business with Linode for eight years and highlights the company's global expansion and growth, including the opening of data centers in multiple countries such as Canada, Australia, and India.", 'The affordability of hosting with Linode is emphasized, with the speaker paying $20 a month and scaling to 250,000 customers in a single month while using only 5-10% of available resources on a $20/month account.', 'The speaker recommends Linode as the top choice for hosting, emphasizing the lack of a better company for hosting than Linode.']}, {'end': 972.297, 'segs': [{'end': 199.879, 'src': 'embed', 'start': 171.883, 'weight': 1, 'content': [{'end': 178.385, 'text': 'instead of these plugins that required separate files and you had to drag them all in and they conflict with all these other portions of your page,', 'start': 171.883, 'duration': 6.502}, {'end': 182.808, 'text': 'We talked about web components and using something called the Shadow DOM,', 'start': 179.045, 'duration': 3.763}, {'end': 187.191, 'text': 'which could basically self-contain and encapsulate certain pieces of functionality.', 'start': 182.808, 'duration': 4.383}, {'end': 193.255, 'text': "So, instead of actually having to drag in a bunch of libraries and such, you're dragging in one specific component,", 'start': 187.231, 'duration': 6.024}, {'end': 199.879, 'text': 'and that component uses something called the Shadow DOM in order to apply the styling and some JavaScript, and it was all self-contained,', 'start': 193.255, 'duration': 6.624}], 'summary': 'Web components with shadow dom encapsulate functionality, reducing conflicts and simplifying page setup.', 'duration': 27.996, 'max_score': 171.883, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iRo18pUs61Q/pics/iRo18pUs61Q171883.jpg'}, {'end': 267.071, 'src': 'embed', 'start': 230.758, 'weight': 0, 'content': [{'end': 232.259, 'text': 'It uses a virtual DOM.', 'start': 230.758, 'duration': 1.501}, {'end': 239.888, 'text': "Which means that all the DOM manipulation is occurring with JavaScript code that's being downloaded and installed on the client's computer.", 'start': 232.839, 'duration': 7.049}, {'end': 245.254, 'text': "So it's running inside the browser and it's handling all the HTML.", 'start': 239.908, 'duration': 5.346}, {'end': 247.937, 'text': "So it's all done virtually, meaning that it's all JavaScript.", 'start': 245.314, 'duration': 2.623}, {'end': 250.861, 'text': "So it's done within memory and it makes it very quick.", 'start': 247.957, 'duration': 2.904}, {'end': 255.701, 'text': "Now, React was very successful because of Angular's failure.", 'start': 252.498, 'duration': 3.203}, {'end': 256.922, 'text': 'Now Angular 1.0,.', 'start': 255.761, 'duration': 1.161}, {'end': 259.224, 'text': 'when that came out, everybody was using it,', 'start': 256.922, 'duration': 2.302}, {'end': 267.071, 'text': 'everybody was hyping it up and everybody said that this React thing from Facebook was garbage because Angular was created by Google and everybody wants to use Angular.', 'start': 259.224, 'duration': 7.847}], 'summary': "React's success was due to angular 1.0's failure, as it uses virtual dom for quick html handling in memory.", 'duration': 36.313, 'max_score': 230.758, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iRo18pUs61Q/pics/iRo18pUs61Q230758.jpg'}, {'end': 515.748, 'src': 'embed', 'start': 486.201, 'weight': 2, 'content': [{'end': 490.787, 'text': 'When I look back on writing Flux, I really did not like that experience.', 'start': 486.201, 'duration': 4.586}, {'end': 497.456, 'text': 'So Redux comes along and it promises to be this much easier way of maintaining state.', 'start': 490.827, 'duration': 6.629}, {'end': 500.078, 'text': 'But it does so synchronously.', 'start': 498.377, 'duration': 1.701}, {'end': 508.123, 'text': "So one of the things that Redux failed at was essentially like it wasn't built for updating state that could use things like promises.", 'start': 500.158, 'duration': 7.965}, {'end': 515.748, 'text': "So if you had to have Ajax calls to get some sort of piece of data and you needed to update your shared state, Redux couldn't do that.", 'start': 508.143, 'duration': 7.605}], 'summary': 'Redux promised easier state maintenance but failed with asynchronous updates.', 'duration': 29.547, 'max_score': 486.201, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iRo18pUs61Q/pics/iRo18pUs61Q486201.jpg'}, {'end': 573.887, 'src': 'embed', 'start': 543.755, 'weight': 3, 'content': [{'end': 548.876, 'text': "It's too much code to write these class-based components using the React library.", 'start': 543.755, 'duration': 5.121}, {'end': 551.417, 'text': 'So React then reacted to that.', 'start': 549.156, 'duration': 2.261}, {'end': 554.657, 'text': "And they said, you know what? This class-based system, it's using too much code.", 'start': 551.597, 'duration': 3.06}, {'end': 556.718, 'text': "It's using too much memory and all this other stuff.", 'start': 554.697, 'duration': 2.021}, {'end': 559.699, 'text': "So we're like, hey, let's use these pure function components instead.", 'start': 556.758, 'duration': 2.941}, {'end': 560.439, 'text': 'These functional..', 'start': 559.719, 'duration': 0.72}, {'end': 567.443, 'text': "components that take in some props and they're basically just JavaScript functions and they spin out some HTML.", 'start': 560.939, 'duration': 6.504}, {'end': 573.887, 'text': 'So here is an example of one of those functional components that does not have the class-based inheritance.', 'start': 567.463, 'duration': 6.424}], 'summary': 'React library shifted from class-based to functional components to reduce code and memory usage.', 'duration': 30.132, 'max_score': 543.755, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iRo18pUs61Q/pics/iRo18pUs61Q543755.jpg'}, {'end': 788.131, 'src': 'embed', 'start': 759.639, 'weight': 4, 'content': [{'end': 766.142, 'text': 'And then we wonder why we have to pay developers $140,000 a year because they have to relearn this crap like every six months.', 'start': 759.639, 'duration': 6.503}, {'end': 768.122, 'text': 'And this is what is called framework hell.', 'start': 766.222, 'duration': 1.9}, {'end': 771.543, 'text': "So what is my proposal? I don't really know for sure.", 'start': 768.502, 'duration': 3.041}, {'end': 773.464, 'text': "I'm just spitballing ideas here.", 'start': 771.864, 'duration': 1.6}, {'end': 781.087, 'text': 'But I will tell you that when the Shadow DOM was first coming out and everybody was like, oh, the Shadow DOM is promising with web components.', 'start': 773.884, 'duration': 7.203}, {'end': 788.131, 'text': 'But React kind of built their own component system using the virtual DOM, and they seem to be having success with that.', 'start': 781.687, 'duration': 6.444}], 'summary': "Developers face relearning cycles, react's virtual dom shows success.", 'duration': 28.492, 'max_score': 759.639, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iRo18pUs61Q/pics/iRo18pUs61Q759639.jpg'}, {'end': 951.103, 'src': 'embed', 'start': 921.413, 'weight': 5, 'content': [{'end': 925.737, 'text': 'it seems like we just keep rewriting the same libraries and then having to relearn how to use them.', 'start': 921.413, 'duration': 4.324}, {'end': 933.505, 'text': 'So the reason why I find Google Polymer convincing is because its goal is to not exist one day and that your code base will just work.', 'start': 926.377, 'duration': 7.128}, {'end': 936.309, 'text': "It's just like using the old HTML5 shim.", 'start': 933.846, 'duration': 2.463}, {'end': 944.878, 'text': "There was a JavaScript shim file that would eventually its purpose was you had it in your website for so long and then eventually it's just not there anymore,", 'start': 936.629, 'duration': 8.249}, {'end': 946.12, 'text': "because the browser's caught up.", 'start': 944.878, 'duration': 1.242}, {'end': 951.103, 'text': "Honestly, it's almost to the point where it's like one day and now we have static websites, too.", 'start': 946.32, 'duration': 4.783}], 'summary': 'Google polymer aims to eventually not exist, allowing seamless code transitions like html5 shim.', 'duration': 29.69, 'max_score': 921.413, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iRo18pUs61Q/pics/iRo18pUs61Q921413.jpg'}], 'start': 38.512, 'title': 'Evolution of web components and framework trade-offs', 'summary': "Explores the challenges and benefits of react's virtual dom, web components, and the trade-offs between the two, highlighting the impact on state management, component structure, and the industry's tendency to adopt new technologies.", 'chapters': [{'end': 250.861, 'start': 38.512, 'title': 'Is it time to ditch react?', 'summary': "Discusses the concept of framework hell, the evolution of web components, and the trade-offs between react's virtual dom and web components, highlighting the challenges and benefits of each approach.", 'duration': 212.349, 'highlights': ["React's use of virtual DOM enables quick DOM manipulation and efficient handling of HTML, contrasting with the slower real DOM manipulation of web components.", 'The concept of framework hell is explored, comparing the different approaches and challenges posed by React, Vue, and Angular in achieving similar goals.', 'The evolution of web components and the introduction of the Shadow DOM are discussed, highlighting their self-contained nature and avoidance of conflicts with other page elements.', 'The drawbacks of jQuery libraries, such as conflicting CSS and JavaScript interactions, are highlighted, emphasizing the need for a more encapsulated approach like web components.']}, {'end': 445.316, 'start': 252.498, 'title': 'React vs angular: evolution and challenges', 'summary': 'Discusses the success of react following the failure of angular 1.0, the challenges faced with jsx, the transition to es6, and the architectural issue of communication between separate high-level components in react.', 'duration': 192.818, 'highlights': ["React's success compared to Angular 1.0 failure React gained popularity as a response to Angular 1.0's failure, leading to Angular's rewrite and adoption of TypeScript.", 'Challenges with JSX and ES5 The introduction of JSX posed challenges with memory usage and required transpilation, while the transition to ES6 and class-based system brought architectural changes to React.', 'Architectural issue with separate high-level components in React The architectural challenge of communication between separate high-level components in React raised concerns about component state management.']}, {'end': 773.464, 'start': 445.336, 'title': 'Evolution of react and its impact', 'summary': "Discusses the evolution of react, from the challenges with flux architecture to the emergence of redux and react hooks, highlighting the impact on state management and component structure, as well as the industry's tendency to constantly adopt new technologies, leading to framework hell and the need for constant relearning.", 'duration': 328.128, 'highlights': ["React's transition from Flux to Redux and the challenges with synchronous state management, leading to the emergence of additional libraries like Redux Funk and Redux Saga. The difficulties with Flux architecture and Redux's limitations in managing asynchronous state, requiring the use of additional libraries like Redux Funk and Redux Saga.", "The shift from class-based components to functional components and the development of React hooks as a reaction to performance and code complexity issues. The industry's shift from class-based components to functional components and the introduction of React hooks to address performance and code complexity concerns.", "The industry's tendency to constantly adopt new technologies, leading to framework hell and the need for constant relearning, impacting developers and companies. The continuous adoption of new technologies leading to framework hell, impacting developers and companies with the need for constant relearning and rewriting of code bases."]}, {'end': 972.297, 'start': 773.884, 'title': 'Challenges with polymer and react', 'summary': 'Discusses the challenges with using polymer and react, including the issues with encapsulation and styling, the evolution of web development libraries, and the goal of google polymer to eventually be natively supported within browsers.', 'duration': 198.413, 'highlights': ["Google Polymer's goal is to not exist one day and for its features to be natively supported within browsers. The goal of Google Polymer is to eventually not exist as a library and have its features natively supported within browsers, similar to the HTML5 shim, which eventually became unnecessary as browsers caught up.", 'Challenges with encapsulation problems and global styling rules in React components led to the use of inline styling and additional CSS libraries. React components initially faced encapsulation and styling issues, leading to the use of inline styling and external CSS libraries to encapsulate styles for specific components.', 'The difficulties with pre-version 1.0 Google Polymer were attributed to its large size and the need for multiple polyfills to run and use the Shadow DOM on various browsers. Pre-version 1.0 Google Polymer had challenges due to its large size and the requirement for multiple polyfills to enable the use of Shadow DOM across different browsers, including earlier versions of IE.']}], 'duration': 933.785, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iRo18pUs61Q/pics/iRo18pUs61Q38512.jpg', 'highlights': ["React's use of virtual DOM enables quick DOM manipulation and efficient handling of HTML, contrasting with the slower real DOM manipulation of web components.", 'The evolution of web components and the introduction of the Shadow DOM are discussed, highlighting their self-contained nature and avoidance of conflicts with other page elements.', "React's transition from Flux to Redux and the challenges with synchronous state management, leading to the emergence of additional libraries like Redux Funk and Redux Saga.", 'The shift from class-based components to functional components and the development of React hooks as a reaction to performance and code complexity issues.', 'The continuous adoption of new technologies leading to framework hell, impacting developers and companies with the need for constant relearning and rewriting of code bases.', 'The goal of Google Polymer is to eventually not exist as a library and have its features natively supported within browsers, similar to the HTML5 shim, which eventually became unnecessary as browsers caught up.']}], 'highlights': ["The speaker has been doing business with Linode for eight years and highlights the company's global expansion and growth, including the opening of data centers in multiple countries such as Canada, Australia, and India.", 'The affordability of hosting with Linode is emphasized, with the speaker paying $20 a month and scaling to 250,000 customers in a single month while using only 5-10% of available resources on a $20/month account.', 'The speaker recommends Linode as the top choice for hosting, emphasizing the lack of a better company for hosting than Linode.', "React's use of virtual DOM enables quick DOM manipulation and efficient handling of HTML, contrasting with the slower real DOM manipulation of web components.", 'The evolution of web components and the introduction of the Shadow DOM are discussed, highlighting their self-contained nature and avoidance of conflicts with other page elements.', "React's transition from Flux to Redux and the challenges with synchronous state management, leading to the emergence of additional libraries like Redux Funk and Redux Saga.", 'The shift from class-based components to functional components and the development of React hooks as a reaction to performance and code complexity issues.', 'The continuous adoption of new technologies leading to framework hell, impacting developers and companies with the need for constant relearning and rewriting of code bases.', 'The goal of Google Polymer is to eventually not exist as a library and have its features natively supported within browsers, similar to the HTML5 shim, which eventually became unnecessary as browsers caught up.']}