En este primer capítulo de Coderbox esperamos poder darte una mano con algunas de las preguntas que nos hacemos todos cuando queremos empezar un proyecto desde cero, desde cómo plantear una idea, hasta qué cosas mínimas deberías tener en cuenta para definir tu stack de tecnologías y herramientas de trabajo en equipo, ¡y vamos a contarte cuáles elegimos nosotros!

En sus marcas, listos….. ¡EMPECEMOS!

Definiciones

El primer paso cuando arrancamos un proyecto, es definir en detalle la idea que sustenta todo el trabajo que vamos a realizar. Para dar forma a esta idea inicial uno de los recursos más útiles que tenemos disponible es la creación de un brief.

¿Qué es un Brief?

Es un documento que nos permite centrarnos en entender qué problema estamos resolviendo con nuestra idea y para quién es útil. El brief contiene la síntesis de las decisiones que toma un equipo en la fase de descubrimiento de un proyecto.

¿Cómo se genera?

Para generar el brief necesitamos hacernos preguntas, y empezar a buscar las respuestas que nos permitan ir puliendo esa idea inicial que tenemos. Este es un proceso que en general puede requerir de:

• Varias reuniones de equipo
• Ejercicios de brainstorming
• Búsqueda de referentes similares al proyecto que queremos llevar a cabo
• Incluso entrevistas con potenciales usuarios

El brief final condensa todas las conclusiones que podemos obtener de estas experiencias. Este documento nos acompañará a lo largo del proceso de diseño y desarrollo como una guía para no perder el foco de lo que estamos creando.

¿Qué necesito definir si o si en el brief inicial?

Si bien cada proyecto necesita definiciones particulares, en el caso de coder-box nos ayudó mucho pensar estas preguntas como guía:

• ¿Qué es coder-box?
• ¿Quiénes son los usuarios principales?
• ¿Por qué es útil? ¿Qué problema resuelve?
• ¿Existen proyectos similares? ¿Qué podemos aprender de ellos?
• ¿Qué funcionalidades básicas necesitan los usuarios? ¿Qué pueden hacer con este producto?

Stack

Una vez definida la funcionalidad tenemos que empezar a pensar en el stack tecnológico que vamos a utilizar.

¿Qué es un stack?

Es la lista de todos los servicios tecnológicos (lenguajes de programación, frameworks, librerías, herramientas) que van a formar parte del proceso de desarrollo y ejecución de nuestra web.

¿Cómo se define un stack de tecnologías?

La elección de las tecnologías se realizan luego de conocer los requerimientos del proyecto y no en el orden contrario. Vamos con una analogía, no voy a usar una prensa hidráulica para poner 3 clavos en un estante que quiero colgar. Seguramente pueda, pero no es lo más eficiente para ese trabajo. Lo mismo pasa con las tecnologías, usar React para una landing page es innecesario, se puede pero es un gasto de tiempo y recursos.

Entonces, una vez que tenemos la idea del proyecto, buscamos y vamos eligiendo teniendo en cuenta las necesidades que necesitamos y nos puedan surgir.

Algunos tips que pueden servirte para la elección de tu stack:

-Pensar en los elementos que componen tu app y qué necesitas para llevarlos a cabo.

-Conocer cuáles son las tecnologías que suelen usarse en proyectos similares al que vas a encarar.

-Tener en cuenta el tamaño de tu proyecto(¿Es necesario un framework?)

-En relación al punto anterior, pensar en la escalabilidad de tu proyecto, ¿Querés agregarle funcionalidades más adelante?

-Conocimiento y experiencia propia y de tus compañeros de equipo, ¿Qué tecnologías conocen? ¿Con cuáles trabajaron?

¿Cuál vamos a usar para el desarrollo de Coder-box? ¿Por qué?

Para este proyecto decidimos utilizar como base el stack MERN (MongoDB – Express – React– NodeJS) que nos permite cubrir el ciclo completo de desarrollo, frontend y backend, utilizando Javascript o Typescript en este caso , además es uno de los más populares por lo tanto cuenta con el respaldo de una gran comunidad.

Vamos a completar el stack tecnológico con el uso de NextJs que es un framework para React que nos regala un conjunto de ventajas. Por ejemplo, nos facilita y ahorra un sin fin de configuraciones de herramientas que son necesarias al iniciar un proyecto de mediano y gran calibre, como por ejemplo webpack que nos ayuda con la creación de páginas dinámicas del lado del servidor. Esto último es una gran ventaja si pensamos en el posicionamiento en los buscadores(SEO). Y otras ventajas, tales como manejo de rutas dinámicas, control del intercambio de datos con el servidor, reacción inmediata a los cambios de datos, etc.

Los estilos se van a crear usando Styled-components, librería con la que podemos escribir css en archivos js. Entre otros beneficios nos evita tener que preocuparnos por la superposición de clases a través de los componentes de nuestra app, ya que genera de forma automática un nombre único para cada clase.

Luego usaremos librerías para diferentes necesidades, tal como React Hook Form,  para el manejo de formularios, o Lodash para la manipulación de datos dentro de la app. Y seguramente alguna otra que necesitemos cuando se nos presenten diferentes problemas a resolver.

En cuanto al backend vamos a estar utilizando NodeJS como entorno de ejecución ya que nos permite crear todo tipo de herramientas del lado del servidor utilizando javascript como lenguaje.

Al mismo tiempo como framework de NodeJS vamos a elegir ExpressJS, que proporciona mecanismos para facilitarnos el manejo de rutas y la utilización de middlewares entre otros.

Tenemos que nombrar también a MongoDB como base de datos que nos va a servir en este proyecto y JWT(JSON Web Tokens) como herramienta elegida para la etapa de autenticación.

En resumen…

Front-end:

• ReactJS
  • Virtual DOM (+ velocidad de carga)
  • Reutilización de componentes
  • Amplia comunidad (+ información + recursos)
• NextJS
  • Renderización del lado del servidor(Mejor performance)
  • Rutas en el sistema de archivos
  • Mejoras en el SEO (isomorfismo - next/head)
  • Permite crear rutas de API
  • Soporte a typescript
  • Facilidad de deploy con Vercel
• Typescript
  • Código más legible y predecible
  • Permite encontrar errores anticipadamente
  • Código más fácil de mantener
  • Facilita trabajo en equipo
  • Muy requerido en el mercado
• Styled-components
  • Clases automáticas (evita colisión de clases)
  • Evita que haya css en desuso
  • Facilidad al crear estilos dinámicos
  • Mantenimiento sencillo
• Otras librerías:
  • React-hook-Form
  • Lodash

Back-end

• NodeJS
  • Utiliza Javascript como lenguaje (gracias a que utiliza el motor v8 de chrome)
  • Asincronía
  • Es de código abierto y cuenta con el apoyo de una gran comunidad
  • Multiplataforma
• Express
• MongoDB
• Mongoose
• JWT

Trabajo en equipo

La organización en un proyecto es extremadamente importante. La asignación, priorización y el análisis de las tareas, son la diferencia de un proyecto exitoso o un fracaso, ya sea porque no se pudo llegar al objetivo o porque el tiempo fue inmensamente mayor al necesario. Por estas y otras razones más, haremos mucho hincapié en la correcta organización del equipo. Usaremos un gestor de tareas llamado Asana, el mismo nos permite tener un tablero y usar la metodología kanban. La estructura del tablero a trabajar nos permite estar en constante conocimiento de cómo van las tareas del proyecto, saber si una tarea es dependiente de otra y así poder priorizar las que son más críticas.

Nunca debemos subestimar las reuniones de equipo. Estas se pueden realizar con diferente frecuencia, en forma de daily(diarias, no más de 15 min), weekly(semanales,no más de 45 min ) o a demanda(dependiendo del estado del proyecto). El objetivo es contar en que se estuvo trabajando, que sigue y si hay algún bloqueo, es decir, si hay alguna razón que impida que puedas seguir realizando la tarea asignada.

La buena comunicación es primordial en un trabajo en equipo, esa inversión de tiempo en una correcta organización, rendirá sus frutos tarde o temprano.

Próximo capítulo

El próximo capítulo será dedicado al diseño, veremos más de cerca las herramientas necesarias para crear los bosquejos, guías y todo lo necesario para crear nuestra página web. Haremos un repaso por algunas características a tener en cuenta en la creación del mismo, temas referentes a cómo pensar de cara al usuario, y muchas otras cosas más.

¡No te lo pierdas!

Ah.. Y no te olvides que podes contactarnos por los siguientes medios