Radar: Tech Stack in 2024

Nuestro equipo invierte un tiempo considerable en validar ideas y construir MVP. Por lo tanto, establecer un conjunto tecnológico sólido es crucial para nosotros. Con el inicio frecuente de nuevos proyectos, hemos tenido tiempo de sobra para probar varias tecnologías en situaciones reales, compararlas y seleccionar las que resulten más eficaces para nuestras necesidades.

En este artículo, examinaremos detenidamente la pila que utiliza nuestro equipo para crear MVP y productos para empresas emergentes.

Estos son los criterios clave que priorizamos al seleccionar tecnologías para nuestra gama:

• Desarrollo rápido: La pila elegida debería facilitar el rápido desarrollo de nuevas funciones.
• Facilidad de mantenimiento: Debe ser perfecto para mantener las características existentes, garantizando la sostenibilidad a largo plazo.
• Escalabilidad: La oferta tecnológica debería ampliarse fácilmente para adaptarse a una base de usuarios cada vez mayor.
• Active maintenance: Todos los marcos y bibliotecas deben mantenerse activamente para evitar depender de tecnologías obsoletas de terceros.
• Reclutamiento amigable: La pila debería facilitar la contratación de nuevos miembros del equipo con facilidad.
• Documentación completa: Una tecnología bien documentada es esencial para que los procesos de desarrollo y solución de problemas sean eficientes.

Para mejorar la claridad, hemos asignado uno de los siguientes estados a cada tecnología:

• ✅ Siga usando: tenemos un historial de uso y planeamos continuar.
• ❌ Deja de usarlo: lo hemos usado en proyectos existentes, pero no lo usaremos en otros nuevos.
• ▶️ Inicie la adopción: no lo hemos usado antes, pero planeamos integrarlo en nuevos proyectos.
• ⏩ Continuar con la adopción: recientemente comenzamos a usarlo y continuaremos en nuevos proyectos.
• ⏸️ Espere con la adopción: nos gusta la tecnología, pero creemos que es demasiado pronto para incorporarla a nuestro flujo de trabajo.

‍

IA Tools

Este año se registró un crecimiento significativo en las herramientas de inteligencia artificial, y nuestro equipo exploró la entrada al mercado de varias herramientas y productos nuevos.

‍

Chat GPT

Confiamos en ChatGPT para una amplia gama de tareas, desde ayudar a redactar el correo electrónico hasta corregir este artículo 😅.

‍Link: https://chat.openai.com
Estado: ✅ Siga usando

‍

GitHub Copilot

Como una de las mejores herramientas para desarrolladores basadas en IA disponibles, GitHub Copilot se ha convertido en una parte indispensable de nuestro flujo de trabajo desde mediados de 2023.

Link: https://github.com/features/copilot
Estado: ✅ Siga usando

‍

DALL·E 3

La última versión de DALL·E es muy prometedora, ya que produce imágenes que superan a las de su predecesora y superan a la competencia.

Link: https://openai.com/dall-e-3
Estado: ▶️ Start the adoption

‍

bases de datos

La era en la que los desarrolladores utilizaban MongoDB por defecto sin razones específicas, simplemente por su facilidad para crear prototipos, ha pasado. Hemos evitado constantemente seguir las tendencias y, en su lugar, hemos elegido bases de datos adaptadas a cada proyecto. Según nuestra experiencia, las bases de datos relacionales a menudo han demostrado ser más eficaces para nuestras necesidades.

PostgresSQL

Como base de datos principal, hemos utilizado PostgreSQL en todos nuestros proyectos anteriores y lo hemos encontrado adecuado para diversas configuraciones.

Link: https://www.postgresql.org
State: ✅ Siga usando

‍

Infraestructura

Empaquetamos nuestra sencilla infraestructura en imágenes de Docker. A medida que aumenta la complejidad, pasamos a utilizar clústeres de Kubernetes gestionados.

‍

Estibador

Docker Image es la forma habitual de ofrecer nuestros servicios tanto para el backend como para el frontend.

Link: https://www.docker.com
State: ✅ Siga usando

‍

Hospedaje

Por lo general, optamos por soluciones de alojamiento que se alinean con las preferencias de nuestros clientes. Muchas empresas emergentes reúnen los requisitos para participar en los programas para empresas emergentes que ofrecen los principales proveedores de servicios en la nube, como AWS, Google Cloud, Microsoft Azure, Oracle Cloud, etc. Sin embargo, si un cliente no quiere o no puede obtener créditos a través de estos programas, le sugerimos una alternativa sencilla y fácil de usar que pueda gestionar y entender fácilmente, incluso para personas sin conocimientos técnicos.

‍

Oceano digital

Digital Ocean se destaca como un proveedor de alojamiento sencillo y elegante que atiende a varios clientes. Hemos alojado con éxito proyectos íntegramente en Digital Ocean, que van desde entornos de ensayo básicos con un consumo mínimo de recursos hasta entornos de producción autoampliables. Esto incluye funciones como la replicación de bases de datos, las copias de seguridad periódicas y otros elementos esenciales para las empresas emergentes en cada etapa inicial.‍

Link: https://www.digitalocean.com
State: ✅ Siga usando

‍

Pagos

La gestión de los pagos es un aspecto crucial de todas las plataformas SaaS, y garantizar un método rápido y sencillo para las transacciones en línea es una prioridad para nosotros.

‍

Rayas

Confiamos en Stripe para gestionar tanto los pagos individuales como las suscripciones. Ofrece soporte para varias funciones, como los códigos de cupones, la generación de facturas y otras funcionalidades esenciales para las plataformas SaaS.

Link: https://stripe.com
State: ✅ Siga usando

‍

Plantillas de correo electrónico

La comunicación eficaz por correo electrónico es fundamental para cualquier aplicación web moderna y, después de experimentar con varias soluciones, nos hemos decidido por las opciones que utilizamos actualmente.

Correo electrónico de React

Tras explorar varios lenguajes de plantillas de correo electrónico, hemos encontrado una biblioteca óptima para crear plantillas de correo electrónico. Esta biblioteca nos permite crear plantillas con React y renderizarlas sin problemas en el servidor en tiempo real, incorporando todos los datos necesarios.

Link: https://react.email
State: ✅ Siga usando

‍

Email Shipping

Enviar cuadrícula

en el ámbito del envío de correos electrónicos, SendGrid ha sido nuestra solución preferida para casi todos los proyectos. Su plan gratuito es ideal para proyectos de MVP hasta que atraigan a usuarios de pago genuinos. El panel de control fácil de usar de SendGrid proporciona información valiosa sobre las estadísticas relacionadas con los correos electrónicos enviados a través de la aplicación.

Link: https://sendgrid.com
State: ✅ Siga usando

‍

Reenviar

Resend es un jugador relativamente nuevo en el mercado, desarrollado por el mismo equipo detrás de React Email. Estamos pensando en probar Resend en lugar de Sendgrid en nuestros futuros proyectos internos.

Link: https://resend.com
Estado: ▶️ Start the adoption

‍

Backend

Si nuestro backend funciona con NodeJS, las complejidades de la codificación en NodeJS puro pueden ser un desafío. Por lo tanto, aprovechamos los marcos creados sobre NodeJS para lograr un proceso de desarrollo más eficiente.

‍

NestJS

NestJS, un marco de NodeJS obstinado, está construido exclusivamente en TypeScript y ofrece una excelente extensibilidad. Este marco nos permite separar nuestro backend en módulos independientes, lo que mejora significativamente la capacidad de mantenimiento del código. Con una documentación completa y excelentes materiales de aprendizaje, NestJS demuestra ser una excelente opción para incorporar nuevos miembros al equipo.

Link: https://nestjs.com
State: ✅ Siga usando

‍

NORMA (1)Objects Relational Mapeador)

‍

Prisma

Prisma destaca por su compatibilidad con TypeScript, aunque tiene sus propias consideraciones. El diseño del modelo de datos en Prisma implica un solo archivo, lo que puede resultar difícil de mantener en proyectos más grandes. Además, la generación de todos los tipos requiere que el ORM modifique el directorio node_modules, lo que plantea posibles problemas en algunos casos.

‍

Link: https://www.prisma.io
State: ✅ Siga usando

‍

Llovizna ORM

Drizzle ORM es un ORM basado en TypeScript presentado recientemente que cuenta con características impresionantes, facilidad de aprendizaje y rendimiento de alta velocidad, como afirman sus autores. Si bien preferimos probar nuevas tecnologías en nuestros pequeños proyectos internos antes de adoptarlas para los clientes, Drizzle ORM está en nuestro punto de mira para futuros proyectos. Sus prometedoras características sugieren que podría solucionar algunos de los problemas que hemos encontrado con Prisma.

Link: https://orm.drizzle.team
Estado: ▶️ Start the adoption

‍

Interfaz

‍

Reacciona

Durante los últimos 7 años, ReactJS ha sido nuestra elección principal como marco de frontend de referencia, y nuestro compromiso con él sigue siendo sólido.

Su estabilidad duradera, caracterizada por la ausencia de cambios importantes a lo largo de su historia, junto con el apoyo de varias grandes empresas, la convierten en una base confiable para nuestros proyectos.

Link: https://react.dev
Estado: ✅ Siga usando

‍

Componentes de React Server

La introducción de React Server Components marca uno de los cambios más importantes en la historia de React, y estamos siguiendo de cerca sus desarrollos con entusiasmo.

Si bien es compatible con NextJS y otros marcos, la adopción más amplia en varios marcos y bibliotecas aún está en marcha para una integración perfecta con los componentes del servidor.

Link: https://vercel.com/blog/understanding-react-server-components
Estado: ⏸️ Espere con la adopción

‍

Siguiente JS

NextJS se ha convertido en nuestro marco preferido para la pila de React, ya que aborda la mayoría de los casos de uso esenciales para nuestros proyectos.

Con el respaldo de una empresa exitosa y una comunidad dinámica, NextJS se mantiene constantemente actualizado y gestiona con prudencia los cambios más importantes, lo que consolida aún más su posición en nuestro conjunto de herramientas.

Link: https://nextjs.org
State: ✅ Siga usando

‍

Interfaz de usuario de bibliotecas

Al priorizar la velocidad sobre el diseño en el desarrollo de un MVP, es práctico utilizar bibliotecas de componentes prediseñadas. Aquí es donde realmente brillan bibliotecas como Material UI, Bootstrap, Radix y otras.

‍

Chakra II

Si Chakra UI se destaca como una biblioteca de componentes sólida, tiene sus limitaciones. No tener un archivo oficial de Figma supone un desafío en nuestros flujos de trabajo, donde la visualización rápida del diseño es crucial. Otro inconveniente notable es el uso del enfoque css-in-js en la interfaz de usuario de Chakra, que puede provocar problemas de rendimiento, especialmente en proyectos grandes con renderizado del lado del servidor.

Link: https://chakra-ui.com
Estado: ❌ Deje de usar

‍

Primitivas RadixUI

In 2022, our friend Tair Asimov sugirió Radix y, después de experimentar con él, comenzamos a adoptarlo oficialmente en todos nuestros nuevos proyectos en 2023. La experiencia ha sido positiva y Radix ha demostrado que funciona a la perfección.

‍

Link: https://www.radix-ui.com/primitives
Estado: ⏩ Mantenga la adopción

‍

Equipos | RadixUI

Lanzado a finales de 2023, RadixUI Themes ganó popularidad rápidamente dentro de la comunidad de RadixUI. Estamos pensando en probarlos, que podrían reemplazar la interfaz de usuario de Chakra, que utilizábamos en el pasado.

Linkacije: https://www.radix-ui.com
Estado: ▶️ Start the adoption

‍

Administration estatale

La administración del estado fue el tema más difícil en React en los últimos años, pero recientemente cambió de una manera muy positiva. La mentalidad de los desarrolladores de React se ha desplazado hacia la separación del estado del servidor y del cliente, y aparecieron bibliotecas como React Query y SWR.

Reaction query

Uno de los desarrollos más revolucionarios del ecosistema de React es React Query, que cambia radicalmente la forma en que se escribe el código de React. Elimina la necesidad de usar código repetitivo, alivia la complejidad de las declaraciones de estado que se ven en Redux y elimina las preocupaciones sobre cuándo recuperar los datos del servidor.

Vale la pena mencionar que React Query tiene una excelente documentación y una colección de videos tutoriales creados por los mantenedores de la biblioteca.

Link: https://tanstack.com/query
Estado: ✅ Siga usando

‍

Zustand de Jotai

Para almacenar el estado de la aplicación fuera de React, recurrimos a Zustand o Jotai, según el caso específico. Ambas bibliotecas, creadas por la misma persona, ofrecen simplicidad, documentación exhaustiva y un mantenimiento eficaz.

Link: https://zustand-demo.pmnd.rs y https://jotai.org
Estado: ✅ Siga usando

‍

Señales

Las señales se incorporan cada vez más en varios marcos. En cuanto a la experiencia de los desarrolladores, Signals ofrece ventajas notables con respecto a los Hooks, lo que las convierte en una posible alternativa a otras bibliotecas de administración estatales. Nuestro amigo, Ilya Zayats, recientemente compartió una implementación de Signals del equipo de Preact. Si bien apreciamos la dirección que está tomando este enfoque, optamos por esperar hasta que se generalice su uso antes de adoptarlo por completo.

Link: https://preactjs.com/blog/introducing-signals/‍

Estado: ⏸️ Espere con la adopción

‍

Formularios

El manejo de formularios es quizás el segundo aspecto más desafiante después de la administración estatal. En un principio, nos propusimos mejorar la experiencia de nuestros desarrolladores (DX) creando nuestras propias soluciones, con el apoyo de los administradores estatales. Sin embargo, con el tiempo nos damos cuenta de que hay bibliotecas que superan nuestras soluciones personalizadas.

Formik

En proyectos anteriores, utilizamos Formik y nos sirvió bien. Sin embargo, nos encontramos con algunas limitaciones. La razón principal para dejar de usarlo es que se limitaba a bibliotecas de validación específicas y, en particular, carecía de soporte para Zod.

No nos malinterpretes; es una biblioteca encomiable que cumple su propósito, pero hemos descubierto otra biblioteca que se adapta mejor a nuestros casos de uso.

Link: https://formik.org
Estado: ❌ Deje de usar

‍

Forma React-Hook

Hicimos la transición de Formik a React-Hook-Form, ¡y ha demostrado ser una excelente opción para nosotros! Esta biblioteca usa elementos de formulario nativos y rastrea meticulosamente cada aspecto del estado del formulario.

En lugar de registrar directamente los campos del formulario, hemos desarrollado envoltorios para los campos, optimizando la forma en que describimos los formularios.

Link: https://react-hook-form.com
Estado: ✅ Siga usando

‍

Validación

En el ámbito de las bibliotecas de validación, todas realizan más o menos la misma tarea de manera admirable, con diferencias sutiles. No estamos muy a favor de ninguna biblioteca de validación en particular.

‍

Sí

En nuestros proyectos anteriores, utilizamos Yup, pero encontramos problemas con los tipos de TypeScript. En consecuencia, decidimos explorar bibliotecas alternativas para identificar una que se adaptara mejor a nuestras necesidades.

Link: https://github.com/jquense/yup
Estado: ❌ Deje de usar

‍

Zod

Zod se creó teniendo en cuenta TypeScript, lo que facilita la interacción con TypeScript. Además, tiene una definición de esquema más fluida y se integra perfectamente con la localización.

Link: https://zod.dev
Estado: ✅ Siga usando

‍

Estilismo

Existen varios enfoques para diseñar aplicaciones web modernas, como CSS puro, preprocesadores como Sass, bibliotecas css-in-js como componentes con estilo y marcos de estilo como Bulma y Tailwind. A pesar de experimentar con todas estas opciones, nos hemos decidido por usar CSS con posprocesamiento a través de PostCSS.

‍

Módulos CSS

Los módulos CSS ofrecen una forma más limpia de escribir estilos, eliminando la necesidad de anidar CSS al limitar el alcance del estilo al nivel de los componentes. Cada componente puede tener sus propios nombres de clase únicos sin necesidad de prefijos. Esto simplifica las hojas de estilo y facilita considerablemente la resolución de problemas.

Link: https://github.com/css-modules/css-modules
Estado: ✅ Siga usando

‍

Probando

En nuestro enfoque de pruebas, priorizamos la capacidad de mantenimiento y una experiencia positiva para los desarrolladores. Como resultado, nos inclinamos por las tecnologías establecidas en lugar de por la experimentación exhaustiva, lo que garantiza un entorno de pruebas estable y eficiente.

Bromear

En nuestras prácticas de prueba, nos inclinamos por el enfoque tradicional y probado, y nos quedamos con Jest, una herramienta que ha resistido el paso del tiempo.

Link: https://jestjs.io
Estado: ✅ Siga usando

‍

React Testing Library

Si bien los métodos de prueba de React existentes nos dejan un poco insatisfechos, la realidad es que no hay muchas alternativas viables en este momento. La biblioteca de pruebas de React sigue siendo nuestra opción por defecto.

Link: https://testing-library.com
Estado: ✅ Siga usando

‍

Dramaturgo

Durante las etapas iniciales del desarrollo de MVP, normalmente renunciamos a las pruebas de extremo a extremo. Sin embargo, a medida que los proyectos se amplían, resulta prudente cubrir los flujos de trabajo clave con este tipo de pruebas. El dramaturgo, una incorporación relativamente reciente, aborda las deficiencias de las herramientas de prueba integrales anteriores. Planeamos explorarlo más a fondo cuando surja la necesidad de realizar pruebas de principio a fin.

Link: https://playwright.dev
Estado: ▶️ Start the adoption

‍

¿Hemos olvidado algo?

Cubrir todos los aspectos del desarrollo de aplicaciones es un desafío y es posible que nos hayamos perdido algo. Si hay partes específicas de nuestra oferta tecnológica sobre las que le gustaría obtener más información, háganoslo saber en Twitter y LinkedIn. ¡Estamos más que felices de compartir nuestros conocimientos con la comunidad!

‍