AngularJS Modular

Transcript

1. AngularJS Modular Orlando Romero @oromeroalo
2. Modular? • Aplicación organizada en módulos • Agrupación de archivos por features • Estructura jerárquica recursiva
3. El problema
4. La estructura por defecto o con la que nos iniciamos no es la más ordenada y escalable
5. Primeros pasos en AngularJS app/ images/ scripts/ controllers.js directives.js filters.js services.js styles/ partials/ main.html .. bower_components/ node_modules/ Estructura de proyecto
6. Primeros pasos en AngularJS app/ images/ scripts/ controllers.js directives.js filters.js services.js styles/ partials/ main.html .. bower_components/ node_modules/ Estructura de proyecto
7. Encontrando un mejor orden app/ images/ scripts/ controllers/ home.js about.js contactus.js services/ contactus.js directives/ filters/ styles/ partials/ home.html about.html contactus.html test/ controllers/ home.js Estructura de proyecto
8. app/ images/ scripts/ controllers/ home.js about.js contactus.js products.js orders.js wishilist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js services/ contactus.js products.js orders.js wishlist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js … styles/ home.css about.css contactus.css products.css orders.css wishlist.css portfolio.css services.css login.css profile.css register.css messages.css notifications.css partials/ home.html about.html contactus.html products.html orders.html wishlist.html portfolio.html services.html login.html profile.html register.html messages.html notifications.html test/ controllers/ home.js about.js contactus.js products.js orders.js wishlist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js app/ images/ scripts/ controllers/ home.js about.js contactus.js services/ contactus.js directives/ filters/ styles/ partials/ home.html about.html contactus.html test/ controllers/ home.js app/ images/ scripts/ controllers/ home.js about.js contactus.js products.js orders.js wishilist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js home.js about.js contactus.js products.js orders.js wishilist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js services/ contactus.js products.js orders.js wishlist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js contactus.js products.js orders.js wishlist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js … styles/ home.css about.css contactus.css products.css orders.css wishlist.css portfolio.css services.css login.css profile.css register.css messages.css notifications.css home.css about.css contactus.css products.css orders.css wishlist.css portfolio.css services.css login.css profile.css register.css messages.css notifications.css partials/ home.html about.html contactus.html products.html orders.html wishlist.html portfolio.html services.html login.html profile.html register.html messages.html notifications.html about.html contactus.html products.html orders.html wishlist.html portfolio.html services.html login.html profile.html register.html messages.html notifications.html test/ controllers/ home.js about.js contactus.js products.js orders.js wishlist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js home.js about.js contactus.js products.js orders.js wishlist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js app/ images/ scripts/ controllers/ home.js about.js contactus.js products.js orders.js wishilist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js home.js about.js contactus.js products.js orders.js wishilist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js about.js contactus.js products.js orders.js wishilist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js home.js about.js contactus.js products.js orders.js wishilist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js services/ contactus.js products.js orders.js wishlist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js contactus.js products.js orders.js wishlist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js products.js orders.js wishlist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js contactus.js products.js orders.js wishlist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js … styles/ home.css about.css contactus.css products.css orders.css wishlist.css portfolio.css services.css login.css profile.css register.css messages.css notifications.css home.css about.css contactus.css products.css orders.css wishlist.css portfolio.css services.css login.css profile.css register.css messages.css notifications.css home.css about.css contactus.css products.css orders.css wishlist.css portfolio.css services.css login.css profile.css register.css messages.css notifications.css home.css about.css contactus.css products.css orders.css wishlist.css portfolio.css services.css login.css profile.css register.css messages.css notifications.css partials/ home.html about.html contactus.html products.html orders.html wishlist.html portfolio.html services.html login.html profile.html register.html messages.html notifications.html about.html contactus.html products.html orders.html wishlist.html portfolio.html services.html login.html profile.html register.html messages.html notifications.html home.html about.html contactus.html products.html orders.html wishlist.html portfolio.html services.html login.html profile.html register.html messages.html notifications.html about.html contactus.html products.html orders.html wishlist.html portfolio.html services.html login.html profile.html register.html messages.html notifications.html test/ controllers/ home.js about.js contactus.js products.js orders.js wishlist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js home.js about.js contactus.js products.js orders.js wishlist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js home.js about.js contactus.js products.js orders.js wishlist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js home.js about.js contactus.js products.js orders.js wishlist.js
9. app/ images/ scripts/ controllers/ home.js about.js contactus.js products.js orders.js wishilist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js services/ contactus.js products.js orders.js wishlist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js … styles/ home.css about.css contactus.css products.css orders.css wishlist.css portfolio.css services.css login.css profile.css register.css messages.css notifications.css partials/ home.html about.html contactus.html products.html orders.html wishlist.html portfolio.html services.html login.html profile.html register.html messages.html notifications.html test/ controllers/ home.js about.js contactus.js products.js orders.js wishlist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js
10. La solución
11. Organizar el código por features
12. Organización por feature contactus/ contactus-controller.js contactus-controller_test.js contactus-service.js contactus-service_test.js contactus.html contactus.css app/ images/ scripts/ controllers/ home.js about.js contactus.js products.js orders.js wishilist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js services/ contactus.js products.js orders.js wishlist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js … styles/ home.css about.css contactus.css products.css orders.css wishlist.css portfolio.css services.css login.css profile.css register.css messages.css notifications.css partials/ home.html about.html contactus.html products.html orders.html wishlist.html portfolio.html services.html login.html profile.html register.html messages.html notifications.html test/ controllers/ home.js about.js contactus.js products.js orders.js wishlist.js portfolio.js services.js login.js profile.js register.js messages.js notifications.js Estructura de proyecto
13. Organización por feature Estructura de proyecto app/ images/ styles/ components/ website/ home/ about/ contactus/ portfolio/ services/ profile/ shop/ products/ auth/ login/ messages/ register/ contactus/ contactus.js contactus-controller.js contactus-controller_test.js contactus-service.js contactus-service_test.js contactus.html contactus.css
14. Beneficios
15. Beneficios Estructura de proyecto app/ images/ styles/ components/ website/ home/ about/ contactus/ contactus.js contactus-controller.js contactus-controller_test.js contactus-service.js contactus-service_test.js contactus.html contactus.css portfolio/ services/ profile/ profile.js profile-controller.js profile-controller_test.js profile-service.js profile-service_test.js profile.html profile.css shop/ products/ auth/ login/ messages/ register/ Trabajo por feature mejor centralizado Menor riesgo de mover/modificar código ajeno al feature sobre el que trabajamos
16. Beneficios Estructura de proyecto profile/ profile.js profile-controller.js profile-controller_test.js profile-service.js profile-service_test.js profile.html profile.css Crear controller Crear prueba Crear service Crear prueba
17. Beneficios Estructura de proyecto profile/ profile.js profile-controller.js profile-controller_test.js profile-service.js profile-service_test.js profile.html profile.css Portable Templates adyacentes Más fácil de mantener Menor riesgo de mover código de otros features Pruebas adyacentes … Más natural
18. Esto es nuevo?
19. https://github.com/yeoman/generator-angular/issues/109
20. https://github.com/yeoman/generator-angular/issues/553
21. http://angularjs.blogspot.com/2014/02/an-angularjs-style-guide-and-best.html
22. https://docs.google.com/document/d/1XXMvReO8- Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub
23. Consideraciones
24. Consideraciones • Mayor cantidad de archivos • Más niveles de carpetas • Configuración adicional para crear “builds”
25. Automatizando
26. Automatizando clean wiredep useminPrepare concurrent autoprefixer concat ngAnnotate copy cdnify cssmin uglify filerev usemin htmlmin Asegurar que las declaraciones de los módulos estén antes que sus referencias Procesar las hojas de estilo por módulo Procesar los templates por módulo
27. Demo https://github.com/oromero/angular-modular-seed
28. Más opciones • ngBoilerplate by Josh Miller • https://github.com/ngbp/ngbp • http://joshdmiller.github.io/ng-boilerplate/#/home • Yeoman generator for Enterprise Angular projects by Chris Gross • https://github.com/cgross/generator-cg-angular
29. Orlando Romero me@oromero.com @oromeroalo Presentación: https://speakerdeck.com/oromero/angularjs-modular Código: https://github.com/oromero/angular-modular-seed