SOLIDifica Tu Código React

Rate this content
Bookmark
Slides

Escribiendo un código más limpio en React siguiendo los Principios SOLID

This talk has been presented at React Day Berlin 2023, check out the latest edition of this React Conference.

FAQ

El principio de responsabilidad única (SRP) en React sugiere que cada componente debe encargarse de una sola funcionalidad. Esto asegura que cada componente tenga solo una razón para cambiar, facilitando su mantenimiento y escalabilidad.

Para aplicar el principio de apertura-cierre en React, se debe estructurar un componente de manera que sea fácil de extender sin modificar su código fuente. Por ejemplo, en lugar de usar múltiples roles para un botón que dicten su comportamiento, se puede pasar un icono como prop para hacerlo más extensible.

El principio de sustitución de Liskov (LSP) establece que los objetos de un componente hijo en React deben poder ser intercambiables por objetos de un tipo similar sin afectar la funcionalidad. Esto asegura la flexibilidad y reutilización de los componentes.

El principio de segregación de interfaces (ISP) en React implica que los componentes no deben depender de props que no necesitan. Esto ayuda a evitar la creación de interfaces demasiado grandes y monolíticas, promoviendo componentes más ligeros y mantenibles.

El principio de inversión de dependencias (DIP) en React fomenta que los módulos de alto nivel no dependan de los módulos de bajo nivel, sino de abstracciones. Esto se logra, por ejemplo, pasando funciones como props en lugar de tener dependencias directas con implementaciones concretas, permitiendo así un diseño más flexible y mantenible.

Islem Maboud
Islem Maboud
11 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

El código limpio es fácilmente entendible, legible, modificable, extensible y mantenible. Los principios SOLID imponen buenas prácticas para un software escalable y mantenible. El Principio de Responsabilidad Única (SRP) asegura que los componentes tengan una sola razón para cambiar. El Principio de Abierto-Cerrado (OCP) permite que los componentes se extiendan fácilmente sin modificar el código fuente subyacente. El Principio de Sustitución de Liskov (LSP) permite intercambiar elementos hijos dentro de un componente de subtipo. El Principio de Segregación de Interfaz (ISP) establece que los componentes solo deben depender de las props que realmente utilizan.
Available in English: SOLIDify Your React Code

1. Introducción a Clean Code y los Principios SOLID

Short description:

Hola a todos. Soy Islam Aboud, un ingeniero de software full stack que trabaja con TopTel. Hoy, cubriremos la Introducción a Clean Code y los cinco principios SOLID. El código limpio es fácil de entender, legible, modificable, extensible y mantenible. Los principios SOLID, introducidos por Robert C. Martin, imponen buenas prácticas para un software escalable y mantenible. Son Responsabilidad Única, Abierto Cerrado, Sustitución de LispConv, Segregación de Interfaces y Inversión de Dependencia. SOLID funciona bien en entornos de equipo, y el uso de TypeScript con React permite un código más limpio siguiendo estos principios.

Hola a todos. Soy Islam Aboud y bienvenidos a la charla de hoy sobre cómo solidificar su código React. Así que un poco más sobre mí. Soy Islam Aboud, un ingeniero de software full stack que trabaja con TopTel. Soy el fundador del canal de YouTube Code One en youtube.com codeone. También, soy un gran fan de ayudar a los desarrolladores a construir mejores aplicaciones web con tutoriales educativos y tutoriales en video en YouTube y publicaciones de blog y cosas así. Y puedes encontrar mi portafolio en islamaboud.com.

Así que esto es lo que vamos a cubrir hoy desde la Introducción a Clean Code hasta realmente pasar por los diferentes principios SOLID y exactamente cómo puedes aplicarlos dentro de React. Así que primero, vamos a ver una rápida introducción a Clean Code. Entonces, decimos que el código es un código limpio si puede ser entendido fácilmente por todos en el equipo. Así que el código limpio puede ser leído y mejorado por el desarrollador que no sea su autor original. Así que cualquier persona en el equipo, incluso si no es la persona correcta o la persona original que escribió ese fragmento de código, puede entender fácilmente exactamente lo que está pasando. Así que con la comprensibilidad viene la legibilidad, la capacidad de cambio, la extensibilidad y lo más importante, la mantenibilidad. Así que aquí puedes leer sobre, ya sabes, el código limpio, las best practices, y cómo escribir código limpio. Cuáles son las best practices para hacer tu código más limpio, más fácil de leer por todos, y por supuesto, eventualmente, serías capaz de escribir un código mejor.

Ahora, cuando se trata de los principios SOLID, hay cinco principios de design conocidos como SOLID y se utilizan para crear software orientado a objetos escalable y mantenible. Fueron introducidos originalmente por Robert C. Martin. Él es el tipo que originalmente escribió y publicó el libro Clean Code, y realmente propuso estas ideas dentro de ese libro. Desde entonces, han estado involucrados en la guía de cómo escribir un código más limpio en diferentes lugares. Y uno de estos lugares es React. Así que hay cinco de ellos empezando con el Principio de Responsabilidad Única, el Principio Abierto Cerrado, el Principio de Sustitución de LispConv, el Principio de Segregación de Interfaces, y lo más importante, el Principio de Inversión de Dependencia. Así que SOLID impone un conjunto de buenas prácticas que básicamente te permitirá escribir un código más simple, más fácil de leer y mejor o más limpio, y funciona realmente, realmente bien especialmente cuando se trabaja en un entorno de equipo. Así que si estás trabajando con un equipo de desarrolladores, seguir los principios SOLID, te ayudará mucho a escribir un código más limpio que puede ser entendido y mantenido por todos en el equipo. Y por supuesto estos principios fueron originalmente creados para la programación orientada a objetos así que algo como Java tal vez o C++. Algunos lenguajes tienen OOP. Pero por supuesto, porque usamos JavaScript con React mucho, JavaScript no es un lenguaje que apoye mucho el OOP, así que tenemos que introducir y usar el hermano mayor de JavaScript, que es TypeScript. Así que usando TypeScript con React, nos puede permitir escribir un código más limpio siguiendo los principios SOLID. Por supuesto, tendremos que hacer una adaptación menor y un pequeño cambio minúsculo a esos principios SOLID para hacer que funcione el flujo de trabajo de React. Así que vamos a ver los principios SOLID aplicados en React.

2. Principio de Responsabilidad Única (SRP)

Short description:

El principio de responsabilidad única (SRP) establece que cada componente debe hacer exactamente una cosa. Asegura que los componentes y funciones tengan una sola razón para cambiar. Por ejemplo, un mal componente puede tener múltiples responsabilidades, lo que lo hace difícil de leer y entender. En contraste, un buen componente sigue el SRP encapsulando la lógica en hooks y renderizando componentes encapsulados.

Así que empezamos con el principio de responsabilidad única o el SRP. Así que para la definición original, cada clase debería tener solo una responsabilidad para la definición extrapolada para hacerla funcionar con React. Así que cada componente debería hacer exactamente una cosa. Así que SRP es la regla para asegurar que nuestro componente y funciones o modules son responsables de hacer solo una cosa y por lo tanto tienen solo una razón para cambiar.

Para entender mejor el SRP, por ejemplo, podemos tomar este simple componente React aquí que es como el mal componente aquí. Es un componente normal. Utiliza el useState aquí. Tiene una función para buscar el producto, tiene un useFx aquí para llamar a la búsqueda del producto y aquí hay alguna función para manejar la calificación y el clic del botón y todo otro usando useMemo para filtrar los productos dependiendo de la calificación. Y por supuesto, renderiza un montón y quiero decir un montón como un montón de GSX aquí. Todo esto es realmente complicado y es realmente difícil de leer. No sabes exactamente qué está pasando. Así que todas las cosas de filtrado están sucediendo. Se está renderizando el componente de calificación. Estoy como mapeando a través del SVG aquí para renderizar las estrellas o las estrellas de calificación y un montón de cosas y literalmente muy difícil de leer. Ahora si vamos a una mejor implementación como el buen componente aquí, es mucho mejor y ahora en realidad utiliza un hook que es used products para hacer la búsqueda. Eso en realidad ha encapsulado toda la búsqueda. Usa otro. Usa el filtrado de tasa aquí para hacer las cosas de filtrado. Así que todo está encapsulado dentro de ese hook y solo renderizamos estos dos componentes. Así que toda la lógica en el GSX ha sido encapsulada en el componente de filtrado y aquí solo lo estamos mapeando y estamos renderizando este componente de producto encapsulado.

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

SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
Enfrentando la Crisis Existencial del Frontend
React Summit 2024React Summit 2024
37 min
Enfrentando la Crisis Existencial del Frontend
I'm honored to be here today. The past decade has been dominated by single-page apps. Loading JavaScript is about 35 times slower than images on low-end devices. Server rendering involves sending more JavaScript and HTML, increasing payload and effort. React was developed for complex apps, but business needs have pushed towards simpler websites. Metrics for testing frameworks include code execution costs, bundle size, and payload size. Islands, popularized by frameworks like Astro and Fresh, break up apps into sections for server rendering. React's solution is to use islands and communicate in a diffing format. Quik reduces code execution and size, eliminating double-serializing. Frameworks like Solid Start provide tools for server rendering in a lightweight package. WASM frameworks have improved in performance. Next.js partial pre-rendering and HTMX offer solutions for sites with less interactivity.
SolidStart 1.0: Echando un vistazo bajo el capó
React Summit 2024React Summit 2024
30 min
SolidStart 1.0: Echando un vistazo bajo el capó
SolidStart is an efficient, unopinionated, and ergonomic full-stack framework that provides great defaults and flexibility. It includes features such as a bundler, a serializer, a server, and a router. The serializer, Seroval, enables streaming and real-time state synchronization between server and client. SolidStart offers powerful file routes, RPCs, and single-flight mutations. It is recommended for building UIs in full applications, Spark, single-page apps, and native apps.