Lecciones para Construir Bases de Código Resilientes

Rate this content
Bookmark

La cruda realidad es que el desarrollo de software es desordenado. Comienzas con las mejores herramientas, la mejor arquitectura y las mejores intenciones, pero la calidad inevitablemente decae con el tiempo. El código frontend es particularmente frágil en el tiempo, ya que se encuentra en la intersección de producto, diseño e ingeniería. Hace un tiempo comencé a preguntarme si todas las bases de código están destinadas a fallar y volverse obsoletas. Luego comencé a recopilar lecciones de éxitos y fracasos pasados y noté cuán importante era la resiliencia para el éxito de un proyecto a largo plazo.


La resiliencia es la capacidad de una base de código para sobrevivir a oleadas de desarrollo caótico y cambios no planificados. La resiliencia tiene menos que ver con las herramientas y frameworks que implementas, y más que ver con la disciplina de escribir y mantener un código limpio. ¿Alguna vez te has preguntado cuánto trabajo se requerirá para actualizar el código que estás escribiendo hoy, dentro de 6 meses? Veamos si podemos responder eso con un simple: "no mucho".

This talk has been presented at JSNation 2024, check out the latest edition of this JavaScript Conference.

Alex Moldovan
Alex Moldovan
29 min
13 Jun, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Las bases de código degradan con el tiempo, por lo que es importante construir una capa protectora y aceptar imperfecciones. La colocación y dejar rastros en el código son clave para una mejor comprensión. Las estrictas comprobaciones de nulos y la tipificación explícita de TypeScript pueden mejorar la confiabilidad del código. Las pautas y convenciones de nomenclatura son cruciales para mantener una arquitectura consistente y escalable. La complejidad del control de versiones no se ve significativamente afectada al tener múltiples componentes en un archivo.

1. Understanding Resilient Code Bases

Short description:

Estoy aquí para hablar desde el rol de ingeniero de productos en Code Sandbox. El problema con las bases de código es que se degradan con el tiempo. ¿Cómo te aseguras de que estas bases de código soporten este estrés?

¡Hola a todos! Wow. Estoy sorprendido con tanta gente aquí. Estaba bromeando, como, el mayor miedo que tengo con un evento de múltiples pistas es estar frente a cinco personas en la primera fila y hablar. Pero, sí, muchas gracias por unirse a esta sesión. Como mencioné antes, vengo de Rumania, de una ciudad llamada Cluj. Soy uno de los organizadores de JS Heroes. No estoy seguro si alguien ha oído hablar de JS Heroes o ha estado en JS Heroes. Bien. Unas pocas manos, genial. Sí. Ven a encontrarme después si quieres hablar más sobre conferencias y organización y eventos de community. Encantado de charlar hasta la noche sobre eso, si quieres. Hoy estoy aquí para hablar desde el rol de ingeniero de productos en Code Sandbox. Si quieres seguir las diapositivas, ya están en línea en bit.ly. Puedes obtenerlas más tarde. Hay un par de referencias a lo largo de las diapositivas. No necesitas tomar fotos ni nada. Estoy hablando desde la experiencia de un ingeniero de productos y básicamente trabajando en Code Sandbox durante los últimos cuatro años, trabajando en empresas anteriores en roles similares, y lidiando con bases de código, ¿verdad? El problema con las bases de código es que se degradan con el tiempo. Esto es simplemente inevitable. ¿Qué quiero decir con bases de código resilientes? Hablemos un poco sobre por qué esto es incluso algo. Cuando trabajas en una empresa de productos, o trabajas en general en un proyecto de tamaño mediano, una startup, un proyecto a gran escala, la mayoría de las veces, la prioridad se va a desplazar hacia las características, las necesidades del usuario, las necesidades del negocio, no tanto en el lado de la ingeniería. Seamos honestos, no tienes tiempo cada seis meses para reescribir todo o repensar la architecture o construir lo que sea el framework más popular en la actualidad. Esto me hizo pensar a lo largo de los años. Comencé a recopilar estas lecciones de construir estas bases de código. ¿Cómo te aseguras de que estas bases de código soporten este estrés? Básicamente, si tomas el código, la base de código que tienes, con el tiempo, hay presiones que se aplican a tu base de código, ¿verdad? Esas presiones pueden ser cambios de equipo, personas que inicialmente construyeron la architecture tal vez ya no forman parte del equipo. Puedes tener cambios de prioridades en la empresa donde la base de código tal vez no esté en un rol central en este momento. Puedes tener el roadmap del producto que ejerce mucha presión nuevamente sobre la base de código, características que ni siquiera consideraste al principio cuando escribiste las primeras líneas de código que ahora se han convertido en la parte central de tu base de código. El negocio puede pivotar hacia algo más pero aún estás utilizando parte del trabajo fundamental que construiste al principio. Eso se vuelve cada vez más interesante con eso.

2. Mantener Bases de Código Resilientes

Short description:

El código se degrada con el tiempo, ¿cómo lidiar con ello? Construye una capa protectora alrededor de tu código. Acepta la imperfección y concéntrate en hacer un trabajo lo suficientemente bueno. La colocación es importante tanto para escribir como para leer código.

Además, con el paso del tiempo, como dije, el code simplemente se degrada, tal vez se acumule una profundidad técnica, eso es inevitable, ¿entonces cómo lidiar con esto?

El problema es que cuanto más tienes todas estas diferentes presiones en tu code, es más probable que la base de code se desmorone o se convierta en esa cosa legada a la que todos odian volver y tener que mantener algo en ella. Entonces, sí, el objetivo aquí es hablar de cómo puedes mejorar esto. ¿Cómo puedes construir esta capa protectora alrededor del code que escribes o qué cosas puedes hacer para asegurarte de que con el tiempo, ya sabes, las bases de code mantengan esta resiliencia y sobrevivan a este tipo de presiones externas?

La lección número uno es aceptar la imperfección, y lo que quiero decir con eso es que perfecto, en nuestro caso, es el enemigo de lo bueno, porque tienes que hacer un trabajo lo suficientemente bueno. No estoy diciendo imperfección en el sentido de que puedas, ya sabes, es mejor hacer como spaghetti code y simplemente escribir todo donde quieras. Tienes que hacer un trabajo lo suficientemente bueno para la base de code, ¿verdad? Y cuanto más sigas esa idea de que, okay, esto, ya sabes, la architecture necesita ser perfecta, las capas deben estar claramente separadas, ya sabes, las guidelines deben ser estrictamente, ya sabes, respetadas, más lucharás contra este tipo de, ya sabes, la presión inevitable que se acumula en la base de code.

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

Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
Solucionando Problemas de Rendimiento en React
React Advanced Conference 2023React Advanced Conference 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced Conference 2023React Advanced Conference 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
De Monolito a Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
De Monolito a Micro-Frontends
Top Content
Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.

Workshops on related topic

Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Construye una sala de chat con Appwrite y React
JSNation 2022JSNation 2022
41 min
Construye una sala de chat con Appwrite y React
WorkshopFree
Wess Cope
Wess Cope
Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!
Problemas difíciles de GraphQL en Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Problemas difíciles de GraphQL en Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.

Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.
De 0 a Autenticación en una Hora para tu Aplicación JavaScript
JSNation 2023JSNation 2023
57 min
De 0 a Autenticación en una Hora para tu Aplicación JavaScript
WorkshopFree
Asaf Shen
Asaf Shen
La autenticación sin contraseña puede parecer compleja, pero es fácil de agregar a cualquier aplicación utilizando la herramienta adecuada.
Mejoraremos una aplicación JS de pila completa (backend Node.js + frontend Vanilla JS) para autenticar usuarios con contraseñas de un solo uso (correo electrónico) y OAuth, incluyendo:
- Autenticación de usuario: Gestión de interacciones de usuario, devolución de JWT de sesión / actualización- Gestión y validación de sesiones: Almacenamiento seguro de la sesión para solicitudes posteriores del cliente, validación / actualización de sesiones
Al final del masterclass, también abordaremos otro enfoque para la autenticación de código utilizando Flujos de Descope en el frontend (flujos de arrastrar y soltar), manteniendo solo la validación de sesión en el backend. Con esto, también mostraremos lo fácil que es habilitar la biometría y otros métodos de autenticación sin contraseña.