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.

Transcript

1. Slide / 1 HOLA HELLO BONJOUR MERHABA WITAM Francisco Vena Diseñador Gráfico y Desarrollador Web @fvena
2. MARK04 como adoptar un desarrollo modular en tu empresa y no morir en el intento
3. Nosolosoftware Slide / 3 OBJETIVOS DESARROLLO MODULAR 01 PROBLEMAS AL ADOPTAR UNA METODOLOGÍA 02 COMO conseguirlo 03
4. MARK04
5. 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
6. 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”
7. Slide / Nosolosoftware 7 ALEX GÓMEZ CEO Nosolosoftware SOMOS Eficaces, SIEMPRE sacamos LOS TRABAJOS, PERO NO SOMOS eficientes. “ “Siempre hay margen de mejora”
8. MARK04 momento del cambio
9. MARK04 PORNO PARA DESARROLLADORES
10. 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
11. 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”
12. Slide / Nosolosoftware development in legoland 12
13. Nosolosoftware Slide / 13 DESARROLLO MODULAR
 FEATURES ASÉPTICO  CONSISTENTE  FLEXIBLE  PRODUCCIÓN 
14. Nosolosoftware Slide / 14 DESARROLLO MODULAR reutilizar
15. Nosolosoftware Slide / 15 DESARROLLO MODULAR
 VELOCIDAD 20-60% VELOCIDAD DE DESARROLLO A mayor número de proyectos mayor reutilización y mayor velocidad.
16. Nosolosoftware Slide / 16 DESARROLLO MODULAR
 calidad 20 proyectos 1 login 19 REFACTORIZACIONES
17. Slide / 17 PRIMER INTENTO ¿QUE NO HAY HUEVOS?
18. MARK04
19. MARK04
20. MARK04
21. MARK04
22. MARK04
23. MARK04
24. Nosolosoftware Slide / 24 conclusión autocontrol 01 Deja de ver porno 02 cambios a nivel de empresa 03
25. Slide / 25 segundo INTENTO evangelizar
26. MARK04
27. MARK04
28. MARK04
29. Nosolosoftware Slide / 29 RESULTADO 3 Componentes Retrasos Sin documentación Alta especificidad No encapsulados Depresión, peleas, amenazas,…
30. Nosolosoftware Slide / 30 conclusión el proceso actual no sirve 01 Hay que estandarizar 02
31. MARK04
32. Slide / 32 tercer INTENTO HAY QUE CAMBIar los procesos
33. Slide / Nosolosoftware lo que PIENSA TU JEFE 33
34. Slide / Nosolosoftware lo que PIENSAN TUS COMPAÑEROS 34
35. Slide / Nosolosoftware lo que debe ser 35
36. MARK04 v
37. MARK04 v siempre lo hemos hecho así
38. MARK04
39. 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.
40. 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.
41. 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
42. Slide / Nosolosoftware 42 Estrategia 4 puntos IMPLANTAR UNA CULTURA MODULAR variar 
 el proceso de desarrollo documentar y estandarizar Desarrollar herramientas
43. Slide / DIJISTES: “SOLO SERÁN ALGUNOS CAMBIOS”
44. Slide / Nosolosoftware 44 cambios pocos son, pero muchas cosas nuevas hacerse habrá. “ ”
45. MARK04 pensamiento modular
46. Slide / 46 INPUT y OUTPUT 01 paso configuración y opciones documentar y publicar 02 paso 03 paso
47. MARK04 Nuevos procesos
48. 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.
49. 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
50. 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
51. 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
52. 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
53. 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
54. MARK04 Documentar y estandarizar
55. 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.
56. 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.
57. 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.
58. MARK04 TOOLS
59. 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.
60. 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.
61. 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.
62. 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, …).
63. Slide / Nosolosoftware SDD STYLE GUIDE DRIVEN DEVELOPMENT 63
64. 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, …)
65. 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
66. MARK04 Ejemplo
67. nosolosoftware Slide / 67 Rizzo Lonely Planet Live style guide  componentes  documentación 
68. Slide / Nosolosoftware
69. Slide / Nosolosoftware
70. Slide / Nosolosoftware
71. Slide / Nosolosoftware
72. Slide / Nosolosoftware
73. Slide / Nosolosoftware
74. Slide / Nosolosoftware
75. MARK04 Road map
76. 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
77. MARK04 didor Nuestra herramienta
78. nosolosoftware Slide / 78 didor fvena Framework css  plantillas  cli 
79. Slide / Nosolosoftware
80. MARK04 Conclusión
81. NOSOLOSOFTWARE Slide / 81 Adoptar Desarrollo Modular 03 02 01 CULTURA MODULAR PROCESOS DE DESARROLLO DOCUMENTAR Y ESTANDARIZAR
82. MARK04 Siempre en movimiento el futuro ESTÁ
83. Slide / MUCHAS GRACIAS www.nosolosoftware.es hola@nosolosoftware.es @nosolosoftware www.fvena.es https://github.com/fvena fvena32@gmail.com @fvena