He estado trabajando como desarrollador front-end durante aproximadamente dos años, participé en la creación de una amplia variedad de proyectos. Una de las lecciones que aprendí: la interacción entre diferentes grupos de desarrolladores unidos por un solo objetivo, pero con diferentes tareas y un cierto grado de responsabilidad, no es una tarea fácil.
En consulta con otros miembros del equipo, diseñadores y desarrolladores, creé un ciclo de creación de sitios web diseñado para equipos pequeños (5-15 personas). Incluye herramientas como Confluence, Jira, Airtable y Abstract. En este artículo compartiré las características de la organización del flujo de trabajo.
Skillbox recomienda: Curso práctico de dos años "Soy un desarrollador web PRO" .
Le recordamos: para todos los lectores de "Habr": un descuento de 10.000 rublos al registrarse en cualquier curso de Skillbox con el código de promoción "Habr".
¿Por qué necesitas todo esto?
El equipo mínimo necesario para crear un sitio desde cero es un diseñador, programador y gerente de proyectos. En mi caso, se formó el equipo. Pero después del lanzamiento de un par de sitios, tuve la sensación de que algo andaba mal con ella. A veces simplemente no entendíamos completamente nuestras responsabilidades, la comunicación con el cliente dejaba mucho que desear. Todo esto ralentizó el proceso y molestó a todos.
Comencé a trabajar en una solución al problema.
La búsqueda de Google da buenos resultados sobre nuestro problema.Para hacer el trabajo más visual, creé un diagrama de flujo de trabajo que da una idea de cómo se hace el trabajo con nosotros.
Al hacer clic, la imagen se abrirá en resolución completa.Metas y objetivos
Una de las primeras técnicas que decidí probar fue el "Modelo en cascada" (Cascada). Lo apliqué para resaltar problemas y entender cómo resolverlos.
Problema: con frecuencia, el cliente no evalúa el proceso de creación de un sitio de forma modular, como lo hacen los desarrolladores. Él lo percibe como un sitio normal, es decir, piensa en términos de páginas individuales. Según él, los diseñadores y programadores crean páginas separadas, una tras otra. Como resultado, el cliente simplemente no comprende lo que se sigue durante el proceso real.
Tarea: convencer al cliente de lo contrario no vale la pena; la mejor opción es desarrollar un proceso modular para crear un sitio dentro de la empresa basado en un modelo de página.
Los tokens y componentes de diseño universal son administrados por desarrolladores y diseñadores.
Problema: esta es una situación común, que se dedica a una gran cantidad de estrategias. Hay muchas soluciones interesantes, en la mayoría de los casos se propone crear un sistema de diseño controlado por una guía de estilo / generadores de biblioteca. Pero en nuestra situación, era simplemente imposible agregar otro componente al proceso de desarrollo que permitiera administrar los niveles de acceso para los diseñadores.
Tarea: construir un sistema universal en el que los diseñadores, desarrolladores y gerentes puedan trabajar sincrónicamente sin interferir entre sí.
Seguimiento preciso del proceso de desarrollo.
Problema: a pesar del hecho de que hay muchas herramientas útiles para rastrear problemas y evaluar el progreso general, la mayoría de ellos no se pueden llamar flexibles u óptimos. La herramienta puede ser útil, ahorrando tiempo al equipo, que en una situación normal se gasta en preguntas y aclaraciones sobre tareas específicas. También facilita la vida de los gerentes al darles una comprensión más precisa de todo el proyecto.
Objetivo: crear un panel de control para seguir el progreso de las tareas de los diferentes miembros del equipo.
Kit de herramientas
Después de experimentar con diferentes herramientas, me decidí por el siguiente conjunto: Confluence, Jira, Airtable y Abstract. A continuación revelaré los beneficios de cada uno.
ConfluenciaEl papel de la herramienta: centro de información y recursos.El espacio de trabajo de Confluence es relativamente fácil de organizar, tiene muchas funciones, integración con diferentes aplicaciones y plantillas personalizadas individuales. No puede llamarse una solución universal para todos los problemas, pero es ideal como centro de información y recursos. Esto significa que cualquier enlace o detalle técnico relacionado con el proyecto debe incluirse en la base de datos.
La herramienta le permite documentar correctamente cada componente y cualquier otro detalle sobre el proyecto.
La principal ventaja de Confluence es la personalización de las plantillas de documentos. Además, se puede utilizar para implementar un único repositorio de especificaciones y diversos documentos del proyecto, dividiendo los niveles de acceso de los participantes. Ahora no tiene que preocuparse de tener la versión anterior de la especificación en sus manos, como sucede si envía documentos por correo electrónico.
Más información sobre la herramienta está
disponible en el sitio web oficial del producto .
JiraPapel de la herramienta: seguimiento de problemas y gestión de tareas.
Jira es una herramienta muy poderosa de planificación y gestión de proyectos. La parte principal de la funcionalidad es la creación de procesos de trabajo personalizados. Para gestionar eficazmente las tareas (que es lo que necesitamos), vale la pena prestar especial atención al uso correcto del tipo de consulta y la tarea (tipo de problema).
Por lo tanto, para asegurarse de que los desarrolladores creen componentes basados en el diseño correcto, deben ser notificados cada vez que algo cambie en el diseño. Tan pronto como se actualiza el componente, el diseñador debe abrir la tarea, asignar un desarrollador responsable y asignarle el tipo de tarea correcto.
Con Jira, puede estar seguro de que absolutamente todos los participantes en el proceso (le recuerdo que en nuestro caso 5–15) reciben las tareas correctas que no se pierden y encuentran a su artista.
Más información sobre Jira
está disponible en el sitio web oficial del producto .
AirtableRol de la herramienta: gestión de componentes y tabla de progreso.Airtable es una mezcla de hojas de cálculo y bases de datos. Todo esto permite personalizar el funcionamiento de todas las herramientas mencionadas anteriormente.
Ejemplo 1. Gestión de componentes.En cuanto al generador de guía de estilo, usarlo no siempre es conveniente; el problema es que los diseñadores no pueden editarlo. Además, la decisión de usar la biblioteca de componentes Sketch no será demasiado correcta, ya que tiene muchas limitaciones. Lo más probable es que usar esta biblioteca fuera del programa simplemente no funcione.
Airtable tampoco es ideal, pero es mejor que muchas otras soluciones similares. Aquí hay una demostración de la plantilla de la tabla de administración de componentes:
Cuando un desarrollador acepta un componente de diseño, evalúa el resultado basado en ABEM, registrando el componente en la tabla. Hay 9 columnas en total:
- Nombre: el nombre del componente de acuerdo con el principio ABEM.
- Vista previa: aquí se coloca una captura de pantalla o una imagen de un componente descargado de otra fuente.
- Una página vinculada es un enlace a la página de un componente.
- Componente secundario: una referencia a componentes secundarios.
- Modificador: verificar la presencia de opciones de estilo y determinarlas (por ejemplo, activo, rojo, etc.).
- La categoría de componente es una categoría general (texto, promoción, barra lateral).
- Estado de desarrollo: el progreso real del desarrollo y su definición (completado, en progreso, etc.).
- El responsable es el desarrollador responsable de este componente.
- El nivel atómico es la categoría atómica de este componente (de acuerdo con el concepto de diseño atómico).
- Puede hacer referencia a los datos en la misma tabla o en tablas diferentes. La conexión de puntos no le permitirá confundirse en caso de escala. Además, los datos se pueden filtrar, ordenar y cambiar sin ningún problema.
Ejemplo 2: progreso del desarrollo de la páginaPara evaluar el progreso del desarrollo de una página, necesita una plantilla creada específicamente para este propósito. La tabla puede servir tanto para las necesidades del equipo como para el cliente.
Cualquier información sobre la página se puede marcar aquí. Esta es una fecha límite, un enlace a un prototipo de InVision, un destino, un componente secundario. Inmediatamente se hace evidente que las operaciones son muy convenientes de realizar, tanto en lo que se refiere a documentar como a actualizar el diseño, así como al estado de desarrollo de la interfaz y el backend. Además, estas operaciones se realizan simultáneamente.
ResumenEl papel de la herramienta: una fuente única para el control de versiones de los activos de diseño.
Abstract se puede llamar GitHub para los activos en Sketch, ya que evita que los diseñadores necesiten copiar y pegar archivos. La principal ventaja de la herramienta es que es un repositorio de diseño, que actúa como "la única fuente de verdad". Los diseñadores deben actualizar la rama principal a la última versión del diseño aprobado. Después de eso, tienen que notificar a los desarrolladores. Aquellos, a su vez, solo deberían trabajar con los activos de diseño de la rama principal.
Como conclusión
Después de que presentamos el nuevo proceso de desarrollo y todas las herramientas mencionadas anteriormente, la velocidad de nuestro trabajo se duplicó al menos. Esta no es una solución ideal, pero muy buena. Es cierto que para que funcione, debe hacer un gran esfuerzo: requiere "trabajo manual" para actualizar y mantener todo esto en condiciones de funcionamiento.
Skillbox recomienda: