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

Swizec Teller

Plasmidsaurus

Recording is available to Multipass and Full ticket holders only

Please login if you have one.

Get Multipass

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.

productivity

Swizec Teller

27 min

13 Nov, 2023

Comments

Christos kuznos
None
nice one
08:27 Apr 17, 2025

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.

Available in English: Forget Bad Code, Focus on the System

Video transcription and chapters available for users with access.

Available in other languages:

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 2023

24 min

IA y Desarrollo Web: ¿Exageración o Realidad?

Top Content

Kyle Simpson

Software Engineer, Public Speaker, and Teacher

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.

productivity builders and founders mental health

Mejorando la Felicidad del Desarrollador con IA

React Summit 2023

29 min

Mejorando la Felicidad del Desarrollador con IA

Senna Parsa

Solutions Engineer at GitHub

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.

best practices tooling productivity artificial intelligence developer experience

Maximize Productivity with AI Agents

Productivity Conf for Devs and Tech Leaders

25 min

Maximize Productivity with AI Agents

Tejas Kumar

Author of the "Fluent React" bestselling book, software engineer with 23 years of experience, and host of the developer-loved ConTejas Code podcast.

I'm Tejas Kumar, a software developer with over 20 years of experience. AI agents are defined as entities that act on behalf of users or groups to produce specific effects. Agents consist of an orchestration layer, a language model, and tools represented as JSON functions. Langflow is an open-source tool that allows users to build their own AI agents by connecting language models and tools. Composio is a tool that enhances agent capabilities by offering integrations and apps, such as Google Calendar integration. MCP (Model Context Protocol) is a way to share context with models and extend their capabilities. It allows functions to be made available to models over standard input/output or an HTTP endpoint. MCP can be used with GitHub to perform various tasks like searching and fixing code issues. The Talk covered the basics of AI agents, building agents with Langflow and enhancing them with Composio, and using MCP with GitHub. The speaker encouraged audience questions and exploration of these concepts.

automation productivity

¡VS Code puede hacer eso!

JSNation Live 2021

28 min

¡VS Code puede hacer eso!

John Papa

Microsoft

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.

devtools productivity

Desarrollo Frontend Potenciado por IA: Construyendo Mejores UIs Más Rápido

Productivity Conf for Devs and Tech Leaders

19 min

Desarrollo Frontend Potenciado por IA: Construyendo Mejores UIs Más Rápido

Steve Sewell

Builder.io

Today's Talk introduces the use of large language models (LLMs) to enhance front-end development. LLMs can act like our brains by maximizing the good parts and minimizing the bad parts. A demo in Cursor, an IDE, showcases how LLMs can be used with the builder.io Figma plugin. The Talk emphasizes the automation of tasks, such as adding a settings button and resolving errors, with the AI agent. Feedback and manual verification are crucial to ensure desired results. Tests and continuous iteration are recommended for stronger guarantees of correctness. Monitoring and guiding the AI agents is important to stay on track. Connecting to other tools like Figma and using AI prompting can further enhance code generation. The CLI enables code base integration and parallel development. Visual prototyping and seamless updates are possible with the Builder tool. Overall, the Talk highlights how LLMs can revolutionize front-end development by automating tasks, improving efficiency, and facilitating collaboration.

productivity UX UI

Workshops on related topic

Cómo Crear una Aplicación Web de Manera (Casi) Autónoma Usando Clean Coder

Productivity Conf for Devs and Tech Leaders

95 min

Cómo Crear una Aplicación Web de Manera (Casi) Autónoma Usando Clean Coder

Workshop

Grigorij Dudnik

Imagina reemplazarte a ti mismo con un programador de IA multi-agente para desarrollar tu aplicación web de producción. Eso es exactamente lo que hicimos en mi startup takzyli.pl. Para lograr esto, diseñamos y utilizamos el Clean Coder - marco de agentes de IA para la escritura autónoma de código (https://github.com/GregorD1A1/Clean-Coder-AI), que es un proyecto de código abierto, con suerte. Si funcionó para nosotros, ¿por qué no debería funcionar para ti?En esta masterclass, te mostraré cómo crear una aplicación web completa de manera (casi) autónoma y reducir drásticamente el tiempo que tú o tus empleados pasan escribiendo código.

productivity web apps

Test, Code, Repeat: Dominando el Desarrollo Asistido por AI

Productivity Conf for Devs and Tech Leaders

53 min

Test, Code, Repeat: Dominando el Desarrollo Asistido por AI

Workshop

Marco Pierobon

"Test, Code, Repeat: Dominando el Desarrollo Asistido por AI" introduce a los desarrolladores a una forma transformadora de codificación con AI como un socio colaborativo. Esta masterclass se centra en cómo los flujos de trabajo iterativos, como la técnica de emparejamiento ping pong, permiten una interacción mejorada entre la creatividad humana y la eficiencia de AI.

productivity