Olvida el mal código, concéntrate en el sistema

Rate this content
Bookmark

El prop drilling está bien. La duplicación es genial. Las funciones largas son amor.

Hablamos mucho sobre el mal código complicado porque es fácil ver el problema. Pero la investigación muestra que los ingenieros pueden trabajar bien con el mal código autónomo. Lo que realmente los confunde es algo completamente diferente: la complejidad arquitectónica.

La complejidad arquitectónica hace que tu código sea difícil de trabajar, causa 3 veces más errores, reduce a la mitad la productividad y puede incluso hacer que los desarrolladores abandonen por frustración. En esta charla exploramos lo que puedes hacer.

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

FAQ

La charla enfatiza que, más allá de concentrarse solo en el código bueno o malo, es crucial enfocarse en cómo se configura todo el sistema y la arquitectura para mejorar la eficiencia y la gestión del mismo.

JSX es una extensión de sintaxis para JavaScript usada en React para describir la interfaz de usuario. Inicialmente, fue recibido con escepticismo y críticas por mezclar HTML con JavaScript, lo que fue visto como una violación de la separación de preocupaciones.

Se utiliza el ejemplo de los sets de LEGO, donde la organización de las piezas por etapas del montaje del Saturno 5 ofrece una forma más eficiente y divertida de construir, comparada con la clasificación detallada de cada pieza pequeña.

La construcción modular, que implica prefabricar piezas completas de un edificio y ensamblarlas, ofrece beneficios como reducción de costos, mayor velocidad de construcción y simplificación del proceso constructivo.

La alta complejidad arquitectónica puede llevar a una caída del 50% en la productividad, un aumento de tres veces en la densidad de defectos y un aumento de la rotación de personal, según un estudio citado en la charla.

Se menciona una herramienta llamada 'madge' que puede visualizar importaciones y dependencias, ayudando a analizar la complejidad arquitectónica.

Se sugiere identificar módulos naturales y moverlos organizadamente, utilizando herramientas como TypeScript y VSCode para facilitar y corregir las importaciones automáticamente durante la reorganización.

Swizec Teller
Swizec Teller
27 min
13 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Configurar el sistema y separar las preocupaciones son importantes en el desarrollo de software. La construcción modular y las unidades prefabricadas son una nueva tendencia que hace que la construcción sea más rápida y fácil. La complejidad arquitectónica puede llevar a una caída en la productividad y un aumento en los defectos. Medir la complejidad arquitectónica puede ayudar a identificar módulos naturales en el código. Las mejores prácticas para evitar la complejidad arquitectónica incluyen organizar el código por dominio empresarial y usar prop drilling. El diseño atómico y la organización de un monorepo son enfoques recomendados para gestionar la complejidad arquitectónica.

1. Configuración del sistema y separación de preocupaciones

Short description:

Deberías centrarte en cómo configuras todo tu sistema, tu arquitectura. JSX de React y CSS en JS causaron preocupaciones similares en el pasado. Separar las preocupaciones por dominio empresarial es un enfoque diferente.

Esperamos que disfrutes el resto de la charla. Gracias, y nos vemos la próxima vez. Adiós.

Así que voy a intentar convencerte hoy de que te estás centrando en lo incorrecto. Hablas demasiado sobre el código bueno o malo, y en lo que realmente deberías estar enfocado es en cómo configuras todo tu sistema, tu architecture.

Ahora, ¿alguien ha visto esta diapositiva de la Conferencia de NextJS que se hizo bastante popular en Twitter? Esto es una acción de servidor, y lo que está pasando es que tienes un componente de React con SQL justo ahí en el componente de React, lo cual es un poco extraño. Y más temprano hoy, David de Redwood también anunció que ahora pueden hacer lo mismo, donde tienes cosas de SQL mezcladas con cosas de JSX. Ahora, ¿cómo te hace sentir esto cuando lo ves? ¿Cómo te sientes? ¿Alguien se siente enfadado? Sí, de acuerdo. ¿Alguien se siente molesto, como algo raro, como si esto fuera algo malo y extraño que hacer? De acuerdo. Ahora, ¿qué pasaría si te dijera que así es exactamente como nos sentimos acerca de JSX hace 10 años. React se lanzó, inventaron JSX, y todos los barbones en internet estaban como, oh Dios mío, ¿estás mezclando HTML y JavaScript? ¿Qué demonios te pasa? ¿Por qué harías eso? Es la separación de preocupaciones, todo eso. Y luego llegó CSS, CSS en JS y el internet se volvió loco de nuevo. ¿Por qué estás mezclando todo esto? Y ¿qué pasaría si te dijera que todo el punto de todo esto es, de hecho, la separación de preocupaciones.

Ahora, se siente, ya sabes, digo separación de preocupaciones, y podrías estar pensando, espera, pero estás mezclando todas las preocupaciones. Tienes el estilo mezclado con la lógica de la database, tienes la búsqueda mezclada con todo lo ‑‑ ¿puedo ver mis notas? De acuerdo. Así que estás mezclando todo. Eso no parece una separación de preocupaciones. Pero hay una forma diferente de pensar en la separación de preocupaciones. ¿Y si separaras tus preocupaciones por dominio empresarial, no por la tecnología que estás utilizando? La palabra negocio está haciendo mucho trabajo aquí. Nos gusta ‑‑ no sé, ¿quién aquí ha trabajado con arquitectos sofisticados y personas que tienen títulos que suenan muy altos como ingeniero principal y cosas así? Solo da un grito. Vale. Algunos de ustedes. Vale. ¿Quién aquí ha escuchado hablar de modelado de dominio o negocio esto, negocio aquello, ese tipo de cosas? De acuerdo. Perfecto. Así que esto es mucho trabajo y ‑‑ oh, maldita sea, me falta ‑‑ se suponía que había otra diapositiva allí. Vale. Así que la palabra dominio de negocio está haciendo mucho trabajo allí. Lo que quiero decir con eso es un buen ejemplo de eso es Lego. Así que estos son dos sets de Lego.

2. Sets de Lego y Proceso de Construcción

Short description:

El super coche de Lego de los 90 venía en una caja grande con 1.300 piezas. Ordenarías las piezas en diferentes cajas. El Saturno 5, mi segundo set de Lego, tenía 1.969 piezas y venía en bolsitas. Construir el cohete Saturno 5 fue más fácil y divertido porque las piezas estaban separadas por etapa, lo que facilitaba su búsqueda y construcción.

Ambos resultan ser mis primeros grandes sets de Lego. A la derecha tienes cómo solían ser los grandes sets de Lego en los 90. Aquí está el super coche de Lego. Viene en una caja realmente grande. Me encantó. Como niño esto era como oh, Dios mío, obtienes 1.300 piezas y lo primero que haces, lo abres y clasificas cada pequeña pieza en su propia cajita. Toma un tiempo. Y luego finalmente puedes empezar a construir tu Lego y puedes encontrar todas las piezas. Si necesitas un engranaje, está en la caja de engranajes. Si necesitas una rueda, está en la caja de ruedas.

Ahora, más tarde, cuando me di cuenta de que, hey, ahora soy un adulto, puedo simplemente comprar Lego cuando quiera. Lo sé, como una idea loca. Compré el Saturno 5, que fue mi segundo set de Lego. Ese tiene 1.969 piezas, que creo que está cuidadosamente calibrado para coincidir con cuando Apollo 1 aterrizó en la luna y todo eso, porque subió en el Saturno 5. Ese no venía con una caja en la que clasificar los Legos. Venía en un montón de bolsitas. Construyes el cohete Saturno 5 yendo etapa por etapa. Para aquellos de ustedes que no lo saben, los cohetes son multi-etapa. Se lanza. La primera etapa quema su combustible. Suelta la primera etapa, y el resto del cohete sigue adelante. Así es como construyes el Saturno 5. En cada bolsita, obtienes exactamente las piezas para una etapa del cohete. Lo construyes desde el suelo, y todas las piezas están mezcladas. Tienes piezas que son del revestimiento exterior. Tienes piezas que van para la estructura interna y todo eso. Todo está revuelto. Lo realmente genial es que es mucho más fácil y mucho más divertido de construir que el super coche porque nunca tienes que buscar entre más de 200 o 300 piezas, lo cual es mucho más fácil de hacer. Puedes esparcirlas sobre una mesa y dices, oh sí, esa, esa, esa, y simplemente la construyes y disfrutas del proceso de construcción en lugar de pasar mucho tiempo buscando el Lego correcto. Ahora sé que algunas personas dicen que esa es la parte divertida.

QnA

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

IA y Desarrollo Web: ¿Exageración o Realidad?
JSNation 2023JSNation 2023
24 min
IA y Desarrollo Web: ¿Exageración o Realidad?
Top Content
This talk explores the use of AI in web development, including tools like GitHub Copilot and Fig for CLI commands. AI can generate boilerplate code, provide context-aware solutions, and generate dummy data. It can also assist with CSS selectors and regexes, and be integrated into applications. AI is used to enhance the podcast experience by transcribing episodes and providing JSON data. The talk also discusses formatting AI output, crafting requests, and analyzing embeddings for similarity.
Confesiones de un Impostor
JSNation 2022JSNation 2022
46 min
Confesiones de un Impostor
Top Content
The Talk discusses imposter syndrome and reframes it as being a professional imposter. It emphasizes the importance of sharing and starting, embracing imposterism, and building inclusively for the web. The speaker shares personal experiences of being an imposter in various technical disciplines and highlights the significance of accessibility. The Talk concludes with the idea of building a collective RPG game to remove excuses for not making things accessible.
Mejorando la Felicidad del Desarrollador con IA
React Summit 2023React Summit 2023
29 min
Mejorando la Felicidad del Desarrollador con IA
GitHub Copilot is an auto-completion tool that provides suggestions based on context. Research has shown that developers using Copilot feel less frustrated, spend less time searching externally, and experience less mental effort on repetitive tasks. Copilot can generate code for various tasks, including adding modals, testing, and refactoring. It is a useful tool for improving productivity and saving time, especially for junior developers and those working in unfamiliar domains. Security concerns have been addressed with optional data sharing and different versions for individuals and businesses.
¡VS Code puede hacer eso!
JSNation Live 2021JSNation Live 2021
28 min
¡VS Code puede hacer eso!
The Talk covers various tips and features of using VS Code, including the command palette, Zen mode, external terminals, and debugging. It also highlights advanced editing and refactoring features, Git integration, and the use of dev containers. The speaker demonstrates how to set up a dev container for a Python app, run code in a container, and create and configure dev containers. The benefits of using dev containers are also discussed, such as eliminating manual configuration, handling dependencies, and facilitating team-based development.
Una Guía Rápida y Completa para Medir tu Deuda Técnica y Utilizar los Resultados
TechLead Conference 2023TechLead Conference 2023
27 min
Una Guía Rápida y Completa para Medir tu Deuda Técnica y Utilizar los Resultados
This Talk discusses the measurement and interpretation of tech lead, focusing on tech debt. Tech debt is a tool to temporarily speed up development but can have negative consequences if not managed properly. Various tech debt metrics, including heuristic metrics and second-tier metrics, can help identify and manage tech debt. Tech debt interest is crucial for measuring the impact of tech debt and allows for prioritization. It is important to collect and analyze tech debt metrics to ensure software and team health.
Desarrollo web adaptado para 2024
React Summit 2024React Summit 2024
7 min
Desarrollo web adaptado para 2024
Today's Talk covers native features in browsers, including upcoming ones and the Interop Project. Native features offer speed, compatibility, and improved debugging. Notable examples include dynamic viewport units, flexbox/grid gap, container queries, and motion path. The Interop Project ensures consistent web platform features across different browsers. Upcoming features like native CSS nesting and entry/exit animations are on the horizon.