FIRED For Using React?? | Prime Reacts

ThePrimeTime
29 Aug 202333:15
EducationalLearning
32 Likes 10 Comments

TLDRThis script narrates the gripping experience of a developer who chose React for an enterprise application, only to face a series of roadblocks and regrets. It highlights the challenges of adapting React to a large-scale, grid-based project with a team of .NET developers who wanted to implement their own design patterns. The story unfolds through various technical hurdles, from slow build times and increasing dependencies to the dying Redux Saga library and inconsistent coding approaches. Ultimately, the developer concludes that while React excels for personal projects, he would not recommend it for enterprise applications after this unpleasant experience.

Takeaways
  • 😬 Choosing React for an enterprise application with complex data grids, large data volumes, and a need for modularity was a poor decision that led to numerous roadblocks and performance issues.
  • πŸ€·β€β™‚οΈ Compromising on architectural decisions to appease multiple stakeholders often leads to a suboptimal middle ground where no one is truly satisfied.
  • 🧩 Introducing too many third-party libraries and dependencies can significantly increase build times, complexity, and maintenance overhead.
  • πŸ”„ Long-lived projects often end up with inconsistent coding patterns and practices due to evolving technologies and changing team preferences.
  • ⏰ Spending excessive time on upgrading dependencies, resolving bugs, and revalidating decisions can significantly slow down development progress.
  • πŸ•΅οΈβ€β™‚οΈ Lack of backbone and an inability to effectively advocate for the right technical choices can lead to poor decision-making and project issues.
  • πŸ’° In enterprise applications, the cost of inefficiencies and suboptimal choices can quickly add up, potentially costing tens of thousands of dollars or more per year.
  • 🚨 Relying on experimental or unmaintained libraries can pose a high risk, especially in large, long-term projects.
  • πŸ€Όβ€β™‚οΈ Too many decision-makers can lead to paralysis and an inability to make timely, cohesive decisions that benefit the project.
  • πŸ’” Even with the best intentions, choosing the wrong technology stack or architectural approach can result in a painful and frustrating experience for developers.
Q & A
  • What was the main issue that led to the developer almost getting fired?

    -The developer chose to use React for building a large enterprise application, which created several roadblocks and challenges during development.

  • Why did the CTO initially favor React over Angular?

    -The CTO wanted to use a future-proof technology, and he was not in favor of Angular due to its bad reputation after AngularJS got deprecated.

  • What were some of the roadblocks faced during the React project?

    -Some major roadblocks included integrating .NET developers into the project, dealing with the introduction of React Hooks, slow development due to large dependencies and build times, and issues with Redux Saga becoming outdated.

  • How did the team's approach to decision-making contribute to the problems?

    -The team spent a significant amount of time discussing and deciding on various third-party libraries and patterns, leading to delays and inconsistencies. Too many decision-makers made it challenging to reach a consensus and stick to a consistent approach.

  • What was the developer's perspective on using React for enterprise applications after this experience?

    -After the unpleasant experience, the developer stated that they would not encourage using React for enterprise applications again, although they still love React and would recommend it for new work initiatives.

  • How did the introduction of React Hooks impact the project?

    -The introduction of React Hooks led to a mixed response from developers, with some embracing the new coding pattern while others preferred class components. This resulted in a lack of consistency in the codebase, with new components using Hooks and older ones sticking to class components.

  • What were some of the concerns raised about Redux Saga?

    -The concerns about Redux Saga included it becoming outdated (lack of updates and increasing GitHub issues), and the belief that it added unnecessary complexity when Thunk could have been sufficient for handling async actions.

  • How did the build times and dependencies impact the development process?

    -Over time, the build times increased significantly due to the large number of dependencies, reaching up to 15 minutes for a full build. Hot reloading also stopped working after extended development sessions, further slowing down the process.

  • What was the developer's recommendation for improving the decision-making process?

    -The developer did not explicitly provide a recommendation for improving the decision-making process. However, the script suggests that having too many decision-makers can lead to inconsistencies and delays, implying that a more streamlined approach with fewer decision-makers could be beneficial.

  • What was the overall lesson learned from this experience?

    -The overall lesson learned was that while React can be a great choice for personal projects and new work initiatives, it may not be the best fit for large-scale enterprise applications due to the challenges faced during this project, such as managing dependencies, build times, and keeping up with the evolving ecosystem.

Outlines
00:00
😩 Frustrated with React and the challenges in an enterprise project

The narrator recounts his frustrating experience working on an enterprise project involving migrating a massive desktop application to the web using React. He describes the initial enthusiasm for React, the proof of concept's success, and the subsequent roadblocks encountered when the .NET developers joined the team. These roadblocks included disagreements over coding patterns, third-party library choices, and architectural decisions. The narrator expresses regret over choosing React for such a large, grid-based application due to performance concerns.

05:02
🀯 Dealing with diverging opinions and technical debt

The narrator discusses the challenges of diverging opinions within the team, particularly around the adoption of React hooks. Some developers favored class components, while others embraced hooks, leading to inconsistencies in coding patterns and guidelines. Additionally, the narrator highlights the difficulties of working with an ever-growing codebase, third-party libraries, and the need for continuous upgrades and revalidation, which contributed to development slowing down and increased build times.

10:03
πŸ€·β€β™‚οΈ React's opinionated nature and the challenge of maintaining consistency

The narrator questions the claim that React is an unopinionated library, arguing that it is highly opinionated and leaks its interface whenever JavaScript is used. He also discusses the lack of consistency across React projects, with each project having different dependencies, project structures, and guidelines, making knowledge transfer difficult. The narrator expresses concerns about the need to make decisions on various cross-cutting concerns, such as routing, state management, forms, and styling, which led to lengthy discussions and proofs of concept.

15:04
πŸ₯΄ Functional components, hooks, and the pursuit of consistency

The narrator discusses the release of React hooks and the mixed reactions within the team. While some developers were enthusiastic about the new coding pattern, others were offended by the suggestion that classes were confusing. The team decided to use Redux hooks and allow new pages and components to be built with hooks, while leaving existing ones as-is. However, this led to further inconsistencies in the codebase, with three different ways of implementing components. The narrator also touches on the potential drawbacks of functional components, such as excessively long functions and difficulties in finding and managing hooks.

20:05
😰 Build time woes and the cost of inefficiency

The narrator describes the escalating build times and performance issues faced by the project over time. As the codebase grew, with over 1200 dependencies and a total size of 600MB, build times increased from 3 minutes to 15 minutes, and hot reloading stopped working after 45-60 minutes of development. Developers frequently had to delete node_modules and download dependencies again to resolve issues. The narrator calculates the potential cost of these inefficiencies, estimating a potential annual bonus equivalent to the cost of a Tesla Model 3 for the project sponsors.

25:06
😬 Redux Saga's decline and the CTO's frustration

The narrator discusses the issues surrounding Redux Saga, which was being left behind with infrequent updates and an increasing number of unresolved GitHub issues. The narrator marked Redux Saga as a high risk in the risk assessment due to a significant portion of the business logic residing within sagas. This incited frustration from the CTO, who blamed the narrator for making poor decisions during the project's inception. The product manager seized this opportunity to question the time spent on upgrading libraries, the slowing development, and the application's bugginess and instability.

30:07
πŸ˜” Reflecting on lessons learned and hesitance towards React for enterprise projects

The narrator reflects on the unpleasant experience with the enterprise project, expressing regret over not fighting harder for the right decisions early on. Despite loving React for personal projects, the narrator expresses hesitance in recommending it for enterprise applications due to the challenges faced. The narrator emphasizes the importance of having a backbone and fighting for the future, as well as being mindful of the number of decision-makers involved in a project to avoid too many compromises and a suboptimal outcome.

Mindmap
Keywords
πŸ’‘React
React is a JavaScript library for building user interfaces. It is the main focus of the video script, where the developer discusses the pros and cons of using React for an enterprise application. React is described as being simple, flexible, and having a large ecosystem, but the developer ultimately concludes that it may not be suitable for large, complex projects due to issues like performance concerns, development speed, and the constantly evolving ecosystem.
πŸ’‘Enterprise application
An enterprise application is a software system designed to meet the needs of an organization rather than individual users. The video script revolves around the development of an enterprise application, which is described as a large, complex project with over 220 pages, many of which are maintenance screens, and requiring features like handling large amounts of data, grids, grouping, and column freezing. Enterprise applications often have specific requirements, such as modularity, offline support, and quick onboarding for new team members.
πŸ’‘Technology stack
A technology stack refers to the set of programming languages, frameworks, and tools used to develop a software application. In the script, the developer's role is to create a technical proposal that includes the technology stack to be used for the enterprise application. The choice of React as the primary library, along with other third-party libraries like Redux and Redux Saga, becomes a source of contention and roadblocks throughout the project.
πŸ’‘Third-party libraries
Third-party libraries are software components developed by external parties and integrated into a project to provide additional functionality. The script highlights the extensive use of third-party libraries in the React ecosystem, which the developer sees as both a advantage and a disadvantage. While these libraries offer valuable features, they also introduce complexity, compatibility issues, and the need for constant upgrades and revalidation.
πŸ’‘Redux
Redux is a predictable state container for JavaScript apps, often used in conjunction with React. In the script, Redux is chosen as part of the technology stack to handle application state management. However, the developer later questions this decision, citing issues like the complexity introduced by Redux Saga and the potential for using simpler solutions like React's built-in state management capabilities.
πŸ’‘Hooks
Hooks are functions that allow developers to use state and other React features without writing class components. The introduction of React Hooks during the project's development causes confusion and inconsistency within the team, as some developers embrace the new pattern while others prefer the traditional class components approach. This highlights the challenges of managing a large codebase as the underlying technology evolves.
πŸ’‘Build times
Build times refer to the duration required to compile and package a software application for deployment. In the script, the developer highlights the increasing build times as a significant roadblock, with builds taking up to 15 minutes and causing issues like hot reloading failures. This is attributed to the large number of dependencies (over 1200) and the complexity of the project, leading to concerns about developer productivity and project costs.
πŸ’‘Ecosystem
An ecosystem, in the context of software development, refers to the collection of tools, libraries, and resources surrounding a particular technology or framework. The developer in the script initially praises React's ecosystem as a strength but later criticizes it for being unstable and constantly evolving, with old experiments being left behind as new features and patterns are introduced. This ecosystem volatility is presented as a challenge for large, long-term projects.
πŸ’‘Refactoring
Refactoring is the process of restructuring existing code without changing its external behavior, with the aim of improving its internal structure, readability, and maintainability. The script touches on the difficulties of refactoring functional components and class components in React, highlighting the potential for inconsistencies and the challenges of managing a codebase as it evolves over time.
πŸ’‘Decision-making
Decision-making is the process of identifying and choosing alternatives based on the values, preferences, and beliefs of the decision-makers. The script highlights the challenges of decision-making in a team environment, particularly when there are conflicting opinions and priorities. The developer notes that too many decision-makers can lead to paralysis and suboptimal compromises, ultimately affecting the project's success.
Highlights

When I hear a grid of a lot of data, when I hear This plus react that sounds crazy... like solid.js felt view like anything but something that requires a diffing in JavaScript than to update the dot like this is crazy, it had to be so slow.

I feel like we just read something about how you should only learn react and you should only use react classic golden Hammer problem, right you can use react you just gotta know when it is completely a terrible choice to make.

After angularjs got deprecated oh, that's why, huh I always thought it was because it's terrible I didn't realize I didn't realize that I got a bad reputation, after deprecating, jeez I've been misinformed by the internet again.

I am not convinced Redux is good I'm not, I am not convinced I have become that, hat hayos hadios person to the core, which is application state is the HTML.

Hooks are just complicated, classes change my mind change my mind I, wish they would have doubled down on, classes and just figured out a better, way to do state and then we wouldn't, have had this really big mess with, everything they're doing anyways.

Where is the retry policy for the API, let's Implement using one name polyjs, okay, is it crazy to me that people reach for, libraries for everything, like everything a retry policy is like, not we're not talking, we're not talking something crazy here, it's called cringe is that what it's, called.

It's clear to me they want to, use.net guidelines and design patterns, in react I have seen this happen many, times developers who've had a hard time, adapting to new technologies uh way of, doing things.

React is an, unopinionated library that is like the, most false thing that anyone has ever, literally said in its lifetime react is, single-handedly the most opinionated, Library out there.

When you go into some my only, one big critique I see with a lot of, functional components is because you get, one function to accomplish things who, here has been in a project where there's, a functional component that's literally, 300 lines long of these just giant one, use effect call followed by some other, big call followed by some other big call, and it just happens and you're just like, I hate what I'm looking at I hate what's, happening here and this is just the, worst thing ever.

Of course of course just just, extract them all and make them into, their own groups grow group them by, something first off you get into just, the worst world here which is when you, when you reach a sufficient level of, hooks it becomes impossible to find what, you want and you don't even know it, exists you spend all day perusing, through files try to find the thing you, need because all the names suck.

What can you expect when there are 1200, plus dependencies and node modules with, a total of 600 megabytes in size, what, dude you're writing, you're right, like I mean let's just be real here, you're writing a web application that, displays some data, have we jumped the shark in engineering, yes we have.

For an Enterprise application everything, is about cost let's say a developer has, to restart six times a day and an hourly, rate of 40 per hour wow that's a you're, getting some cheap developers over there, six times a day times five minutes is, 240 days times this times 40 an hour, times eight developer equals uh forty, thousand dollars a year that is not a, big enough a big amount uh for, Enterprise but it makes a nice annual, bonus for the project sponsors after all, it's equal to a brand new Tesla Model 3.

What's your build time costs our build, time in JavaScript costs one Tesla three, and one Tesla Model three I like you, know what I we did this actually so, actually at Netflix when Tesla first, came out uh I did qualify everything I, spent money on by how many Teslas I, could buy, we had one that we could buy 200 Teslas, a year, if they would just make one change, that's a 200 Tesla idea can we get this, 200 Tesla idea going right.

Most developers disagree with me but I, feel that the big part of the business, uh logic inside Redux async actions, let's see hold on but I feel that a big, part of the business logic is inside, Redux async actions most the time it's, only place where you can do uh the, validation API calls error handling, trigger Redux mutations or trigger, notification toaster if these are not, considered a business Logic on the, front-end applications what is well we, use Redux Saga uh which was a poor, decision because it adds unnecessary, complexity thunk would have been good, enough.

Developers, love react for three reasons Simplicity, flexibility and ecosystem what ecosystem, we already talked about this one it's, funny I don't believe react has a good, ecosystem for everything that needs to, exist also has to exist with an adapter, layer right you want charts JS you need, react charts JS you want some other, Library you need react Dash whatever, that library is whereas when you go to, svelte or you go to these other ones you, just use charts JS so is there an, ecosystem Force felt yes there is it's, actually bigger because it's, javascript's the ecosystem it's not some, sort of react adapter that's required, right you don't need a lot of these, things.

Transcripts
Rate This

5.0 / 5 (0 votes)

Thanks for rating: