Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Implementar Desarrollo Modular en tu empresa y ...

fvena
November 18, 2016

Implementar Desarrollo Modular en tu empresa y no morir en el intento

El desarrollo modular basado en componentes no es algo nuevo. Pero ahora con la proliferación de frameworks frontend como Angular, React o Backbone, es mucho más fácil.

La teoría es sencilla, crear bloques desacoplados de código para que puedan ser reutilizados dentro del proyecto o en otros. El problema viene cuando quieres instarurar esta metodología a nivel de empresa, ya que implica cambios en el proceso de trabajo en todas las fases, desde la propio definición de producto hasta el desarrollo backend.

Durante la charla me gustaría explicar como ha sido esa transición dentro de nuestra empresa, los problemas que nos encontramos, los pasos que tuvimos que dar y las herramientas que hemos tenido que desarrollar.

fvena

November 18, 2016
Tweet

Other Decks in Programming

Transcript

  1. Slide / 1 HOLA HELLO BONJOUR MERHABA WITAM Francisco Vena

    Diseñador Gráfico y Desarrollador Web @fvena
  2. Nosolosoftware Slide / 3 OBJETIVOS DESARROLLO MODULAR 01 PROBLEMAS AL

    ADOPTAR UNA METODOLOGÍA 02 COMO conseguirlo 03
  3. Nosolosoftware Slide / 5 NUESTRa historia l 24 PROYECTOS v

    +120 SPRINT r 6 AÑOS DE ANDADURA C 4 PREMIOS 25 COMPAÑEROS <> +500.000 LÍNEAS DE CÓDIGO
  4. Slide / Nosolosoftware 6 PEDRO NAVAJAS Desarrollo de negocio Nosolosoftware

    CONSIDERO QUE HEMOS LLEGADO A UN PUNTO DE CONSOLIDACIÓN DE PROCESOS SUFICIENTE COMO PARA PODER DISEÑAR UNOS MEJORES. “ “O te mueves, o caducas”
  5. Slide / Nosolosoftware 7 ALEX GÓMEZ CEO Nosolosoftware SOMOS Eficaces,

    SIEMPRE sacamos LOS TRABAJOS, PERO NO SOMOS eficientes. “ “Siempre hay margen de mejora”
  6. Slide / Nosolosoftware GRANDES CLÁSICOS 10 TU APP MULTIPLAFORMA EN

    20 LÍNEAS API REST EN 10 MINUTOS CON NODE 2 DESARROLLO MODULAR CON ANGULAR
  7. Slide / Nosolosoftware 11 PORNO VS REALIDAD HOY HE IDO

    A LA PANADERÍA Y LA DEPENDIENTA NO ME HA DICHO SI QUIERO VER SUS BOLLITOS. “Joey a Chandler - Friend”
  8. Nosolosoftware Slide / 15 DESARROLLO MODULAR
 VELOCIDAD 20-60% VELOCIDAD DE

    DESARROLLO A mayor número de proyectos mayor reutilización y mayor velocidad.
  9. Nosolosoftware Slide / 29 RESULTADO 3 Componentes Retrasos Sin documentación

    Alta especificidad No encapsulados Depresión, peleas, amenazas,…
  10. Nosolosoftware Slide / 39 ¿como? OBJETIVOS Es necesario tener claros

    los objetivos que se pretenden alcanzar. T 7 ESTRATEGIAS No todo está mal, hay que buscar donde se puede mejorar y como hacerlo. P implantación Como vamos a introducir los cambios para que el proceso sea lo más fácil posible.
  11. Nosolosoftware Slide / 40 ¿como? OBJETIVOS Es necesario tener claros

    los objetivos que se pretenden alcanzar. T 7 ESTRATEGIAS No todo está mal, hay que buscar donde se puede mejorar y como hacerlo. P implantación Como vamos a introducir los cambios para que el proceso sea lo más fácil posible.
  12. Slide / 41 CALIDAD Es una característica que debería definirnos,

    los nuevos procesos deben mejorar la calidad de nuestro producto. VELOCIDAD Optimizar los procesos para desarrollar más rápido, obtener mayores beneficios. OBJETIVOS
  13. Slide / Nosolosoftware 42 Estrategia 4 puntos IMPLANTAR UNA CULTURA

    MODULAR variar 
 el proceso de desarrollo documentar y estandarizar Desarrollar herramientas
  14. Slide / 46 INPUT y OUTPUT 01 paso configuración y

    opciones documentar y publicar 02 paso 03 paso
  15. Slide / 48 7 = W F o PRODUCTO DISEÑO

    FRONTEND BACKEND CALIDAD 01 03 04 02 05 DESARROLLO MODULAR Afecta a todas las fases del desarrollo, y comienza por la fase de definición de producto.
  16. Nosolosoftware Slide / 49 procesos NO EXISTA NINGÚN COMPONENTE 1

    EXISTA UN COMPONENTE PERO HAY QUE MODIFICARLO 2 EXISTE UN COMPONENTE QUE SE ADAPTA PERFECTAMENTE 3
  17. Nosolosoftware Slide / 50 No existe componente DEFINE LA FUNCIONALIDAD

    DEL COMPONENTE - No solo debe cumplir la funcionalidad de la historia Padre, también debe pensarse en futuras funcionalidades. AÑADE DISEÑO + USABILIDAD + INTERACCIÓN - El diseño será lo más simple posible, para facilitar su integración en los distintos proyectos. DESARROLLA + DOCUMENTA + TESTEA - Usará un mismo framework en todos los proyectos, 
 para evitar problemas de integración. - Es importante que desarrolle el componente teniendo en cuenta su fácil configuración e integración. - Si el componente requiere datos de un backend, los simulará mediante un archivo JSON, tiene que ser 100% funcional. PRODUCTO DISEÑO FRONTEND
  18. Nosolosoftware Slide / 51 No existe componente f REVISIÓN DEL

    CÓDIGO - Dado que el módulo se reutilizará muchas veces, 
 es importante asegurarse que además de funcionar 
 está bien desarrollado. COMPROBACIÓN REQUISITOS Y SOPORTE PUBLICACIÓN REVISIÓN CALIDAD
  19. Nosolosoftware Slide / 52 Modificar componente FORK O MODIFICAR UN

    COMPONENTE - Dependiendo de si la nueva definición afecta al funcionamiento normal del proceso se creará un nuevo componente a partir del existente o se modificará el actual. aplicaN LOS CAMBIOS NECESARIOS DISEÑO COMPROBACIÓN REQUISITOS Y SOPORTE CALIDAD DEFINE LA NUEVA FUNCIONALIDAD - Es importante que resalte que funcionalidad nueva se añade, cual se modifica o cual se elimina. PRODUCTO FRONTEND f PUBLICACIÓN
  20. Nosolosoftware Slide / 53 Usar Componente DEFINE LA FUNCIONALIDAD -

    En lo posible debe intentar ajustarse al máximo a la funcionalidad descrita en el componente. aplica el DISEÑO del proyecto - En la mayoría de los casos será solo ajustar colores y tipografías. INTEGRACIÓN EN EL PROYECTO - Aplicar los estilos específicos. - Configurar los parámetros de entrada y salida. PRODUCTO DISEÑO FRONTEND COMPROBACIÓN REQUISITOS Y SOPORTE CALIDAD
  21. Nosolosoftware Slide / 55 Documentar Y ESTANDARIZAR 01 PRODUCTO -

    Plantillas documentar un producto. - Guía de como documentar. - Plantillas de historias de usuario. 00 general - Wiki con todas las guías para documentar, buenas prácticas, … - Página con la documentación de todos los proyectos. - Página con todos los componentes.
  22. Nosolosoftware Slide / 56 Documentar Y ESTANDARIZAR 03 frontend -

    Guía buenas prácticas desarrollo. - Guía documentar y desarrollar un componente. - Guía documentar el frontend. 02 DISEÑO - Plantillas de Sketch (Branding y Proyecto). - Plantilla de guía de estilo. - Guía de como pasar los diseños a los desarrolladores.
  23. Nosolosoftware Slide / 57 Documentar Y ESTANDARIZAR 05 calidad -

    Plantilla para reportar errores. 04 Backend - Guía buenas prácticas desarrollo. - Guía documentar el backend.
  24. Nosolosoftware Slide / 59 Framework Css Requisitos - Basado en

    metodologías y buenas prácticas para grandes proyectos, como SACSS, BEM, ITCSS, … - Debe permitir un desarrollo modular integrado con nuestro proceso. - Ligero. - Cross Browser y Responsive. - Bien documentado.
  25. Nosolosoftware Slide / 60 Project Template Requisitos - Herramientas para

    desarrollo (browser sync, SASS, Slim, linter, …) - Herramientas para producción (compresores, … ) - Generador de Live Style Guide. - Generador documentación. - Generador de archivos en base a plantillas (scss, rutas, servicios, directivas, …). - Servidor de desarrollo y de producción. - Estructura de archivos rígida basada en buenas prácticas que mantenga homogeneidad con otros proyectos. - Integración con nuestro sistema de desarrollo modular. - Frameworks integrados.
  26. Nosolosoftware Slide / 61 component Template Requisitos - Mismos requisitos

    Proyect Template. - Estructura rígida basada en buenas prácticas y que permita la fácil integración con otros proyectos. - Plantilla Readme.md para facilitar la documentación del documento. - Plantilla con test unitario y toda la configuración para facilitar la realización de test. - CRUD básico integrado mediante archivo json, para simular una interacción con una BD. - Repositorio configurado donde subir los componentes.
  27. Nosolosoftware Slide / 62 Páginas de recursos Requisitos - Wiki

    de la empresa, con todos los procesos, buenas prácticas, guías de desarrollo y documentación. - Cheatsheet, chuletas con procesos, guías de desarrollo, herramientas, … - Repositorio con todas las plantillas. - Web con la documentación y guía de estilos de todos los proyectos. - Web y repositorio de los componentes desarrollados. - Dropbox con recursos (libros, iconos, fuentes, imágenes, …).
  28. Slide / Nosolosoftware 64 DINÁMICAS LIVE STYLE GUIDE • Se

    generan a partir del código, siempre están actualizadas. • Además de los estilos, también incluyen los componentes con su documentación. Style Guides ESTÁTICAS • Son archivos pdf o sketch, con los elementos del proyecto a nivel global (colores, fuentes, botones, listas, páginas, …)
  29. Slide / Nosolosoftware 65 VENTAJAS STYLE GUIDE DRIVEN DEVELOPMENT •

    Desarrollo aséptico, permite reutilizar en cualquier parte del proyecto  • Código escalable, modular y facil 
 de mantener  • Facilita desarrollo y reduce dependencias con maquetación  • La documentación facilita mantenimiento futuro y el acceso 
 de nuevos miembros  • Ayuda a mantener la imagen de marca en futuros desarrollos  Q No estamos desarrollando aplicaciones, estamos desarrollando sistemas de componentes
  30. Slide / 76 ROAD MAP 1 2 3 4 5

    6 7 8 9 10 11 12 13 14 Documentar & Estandarizar - Producto - Diseño - Frontend - Backend - Sistemas Implantar Procesos - Desarrollo Modular - SDD Semanas
  31. NOSOLOSOFTWARE Slide / 81 Adoptar Desarrollo Modular 03 02 01

    CULTURA MODULAR PROCESOS DE DESARROLLO DOCUMENTAR Y ESTANDARIZAR