Separando la Separación de Preocupaciones

Rate this content
Bookmark
Slides

Todos sabemos que separar las preocupaciones es diferente de separar las tecnologías. Eso es de lo que se trata React. Pero, ¿qué es una preocupación? ¿Qué significa separarlas? ¿Por qué debería preocuparme por las preocupaciones o la separación?

7 min
24 Oct, 2022

Video Summary and Transcription

Mi preocupación es lograr mi comprensión de mi preocupación. Una aplicación de tareas pendientes puede tener más que solo administrar tareas. Las preocupaciones transversales deben estar ubicadas en el mismo lugar. La separación de preocupaciones es una técnica efectiva para ordenar los pensamientos. React no es más lento que JS. React puede estar más cerca de una biblioteca con la preocupación de la programación. Volver a renderizar los componentes con demasiada frecuencia es un problema en React. React es una biblioteca de gestión de estado que ayuda a separar las preocupaciones y los estados, lo que resulta en una aplicación más eficiente y legible. La separación adecuada de preocupaciones, estados y componentes conduce a componentes más pequeños, más rápidos, más ligeros y más legibles.

Available in English

1. Preocupaciones en React y Separación de Preocupaciones

Short description:

Mi preocupación es lograr mi comprensión de mi preocupación. Una aplicación de tareas pendientes puede tener más que solo administrar tareas. Las preocupaciones transversales deben estar ubicadas en el mismo lugar. La separación de preocupaciones es una técnica efectiva para ordenar los pensamientos. React no es más lento que JS. React puede estar más cerca de una biblioteca con una preocupación de programación. Volver a renderizar los componentes con demasiada frecuencia es un problema en React.

Mi nombre es Jacob. Vivo aquí, trabajo aquí y mi preocupación hoy es decirles que mi preocupación es lo que estoy intentando hacer y cómo logro eso necesariamente reflejará mi comprensión de mi preocupación. Un excelente primer ejemplo es hablar de una aplicación de tareas pendientes. Si elijo concebir mi aplicación de tareas pendientes como la administración de una lista de tareas no interconectadas, entonces probablemente escribiré código que mapee de una matriz de tareas no interconectadas a una matriz de elementos, y lo insertaré en el DOM, y eso será mi funcionalidad principal, pero eso no será toda la aplicación. Probablemente al menos tendré un encabezado y tendré un div alrededor de eso y tal vez un pie de página y tal vez algunos análisis y tal vez algunos rastreadores. Y voy a representar todo eso como una estructura de árbol, y para instanciar esa estructura de árbol, voy a usar el DOM porque la web es buena. Y lo que nos encontramos de inmediato es que nuestros encabezados no son solo una semántica presentacional. No tienen simplemente esa preocupación. Al enmarcar la funcionalidad, habilitan la funcionalidad. No podríamos interactuar con esta aplicación si no supiéramos qué es y cómo hacerlo. Entonces, este tipo de preocupaciones transversales, es útil ubicarlos en el mismo lugar en lugar de separarlos en archivos HTML, CSS, JavaScript. Y eso es lo que React quería decir cuando hablaba de separación de preocupaciones en lugar de separación de tecnologías. Otro conjunto de preocupaciones que hemos ubicado en todos nuestros componentes son nuestras preocupaciones de funcionalidad y nuestras preocupaciones de eficiencia. Y estas fueron las dos preocupaciones principales de las que hablaba Dijkstra cuando introdujo el término separación de preocupaciones en su artículo seminal sobre el papel del pensamiento científico. El pasaje más pertinente es el siguiente. Un programa debe ser correcto y solo podemos estudiarlo desde ese punto de vista. También sabemos que debe ser eficiente. Podemos estudiar su eficiencia en otro momento, pero no se gana nada abordando estos diversos aspectos simultáneamente. Es lo que a veces llamo la separación de preocupaciones, que es la única técnica disponible para un ordenamiento efectivo de los pensamientos. Y cuando hablamos de eficiencia en el mundo de React y en la industria en general, es como si fuera el inverso preciso de la abstracción. Porque React es más abstracto que JS, se deduce que podemos esperar que React sea significativamente más lento que JS, pero esto no es realmente el caso. Si observamos un fragmento de JS, digamos 3JS, y observamos React 3 fiber, vemos que React 3 fiber es en realidad más rápido que el vanilla 3. Y lo que esto nos dice es que podemos estar concebiendo mal a React. Podemos estar pensando que React es todo un marco cuando puede ser algo más cercano a una biblioteca que tiene una preocupación particular de tratar, en este caso, la programación. Y una de las desventajas de este modo de concebir es que cuando estructuramos nuestras aplicaciones incorrectamente, no podemos aprovechar React. Uno de los mayores problemas en React es que nuestros componentes se vuelven a renderizar con demasiada frecuencia. Demasiado frecuente, entre comillas. Y para lidiar con esto, sacamos nuestro estado de esos componentes. Por ejemplo, redux a distancia y ahora señales sacándolo completamente de React. Creo que esto

2. React State Management and Separation of Concerns

Short description:

React es una biblioteca de gestión de estado que se incluye con React mismo. Ayuda a separar las preocupaciones y los estados, lo que resulta en una aplicación más eficiente y legible. Al aprovechar la conexión implícita entre los componentes y el árbol de componentes, podemos evitar hablar explícitamente sobre la conexión entre las piezas de estado. La separación adecuada de preocupaciones, estados y componentes conduce a componentes más pequeños, más rápidos, más ligeros y más legibles.

se pierde un poco el punto. Y creo que el equipo principal de React podría estar de acuerdo con nosotros. Porque en realidad, ellos crearon una biblioteca de gestión de estado justo cuando crearon React. Esta biblioteca de gestión de estado se llama React. Y cada vez que instalas React a través de NPM, también estás instalando React. Veamos qué hace este React. Si observo mi componente, notaré que hay en realidad dos, más de dos, pero al menos dos preocupaciones que están todas mezcladas dentro de él. Si soy una lista, no me importa cada letra que ingresa en este campo de entrada. Eso no es lo que me preocupa. Y tenerlo en este campo de entrada significa que este campo de entrada se volverá a renderizar con cada letra que ingrese. Parece razonable para React, y ese era el objetivo principal de React, que se volviera a renderizar cada vez que cambia el estado. Así es como reacciona. Eso es a lo que está reaccionando. Son las operaciones de cambio de estado. El mensaje principal de los primeros tiempos de React era que la interfaz de usuario es una función del estado, y eso es lo que forma el componente es, estamos tomando todo el estado y lo estamos agrupando junto con la interfaz de usuario, estamos diciendo que los dos son inseparables. Y lo que hace React es aprovechar esto, aprovecha esta conexión implícita entre los componentes y el árbol de componentes para decir que no necesitamos hablar explícitamente sobre la conexión entre las piezas de estado. El árbol de componentes es esa conexión entre las piezas de estado. Y mientras separemos adecuadamente nuestras preocupaciones, nuestros estados y nuestros componentes, no solo obtendremos una aplicación más eficiente, sino que también obtendremos una aplicación mucho más fácil de leer. Obtendremos componentes que son más pequeños, más rápidos, más ligeros y más legibles. Y eso es lo que encuentro asombrosamente hermoso de React, que si pensamos adecuadamente en nuestras preocupaciones, como deberíamos hacer de todos modos, nuestra aplicación casi siempre será lo suficientemente rápida para manejar lo que queremos hacer. Y si no lo es, entonces supongo que deberías usar Svelte.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Day Berlin 2022React Day Berlin 2022
29 min
Fighting Technical Debt With Continuous Refactoring
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt. In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.
React Summit Remote Edition 2020React Summit Remote Edition 2020
32 min
AHA Programming
Top Content
Are you the kind of programmer who prefers to never see the same code in two places, or do you make liberal use of copy/paste? Many developers swear the Don't Repeat Yourself (DRY) philosophy while others prefer to Write Everything Twice (WET). But which of these produces more maintainable codebases? I've seen both of these approaches lay waste to codebases and I have a new ideology I would like to propose to you: Avoid Hasty Abstractions (AHA). In this keynote, we'll talk about abstraction and how you can improve a codebase applying and creating abstractions more thoughtfully as well as how to get yourself out of a mess of over or under-abstraction.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Featured WorkshopFree
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)