Arquitectura y diseño de una aplicación con AngularJS

Presentación utilizada en el meetup del grupo AngularJS Madrid

Transcript

1. ARQUITECTURA Y DISEÑO DE UNA APLICACIÓN @felixzapata @gruizdevilla @adesis
2. SOBRE MÍ Desarrollador Senior Front End y Consultor de Accesibilidad Web. Coorganizador del grupo meetup Accesibilidad Spain. Organizador del grupo meetup WordPress Madrid. Organizador del grupo meetup Madrid Sass & Compass. Aerotranstornado: piloto online P1 y controlador S1 en la red VATSIM.
3. ANTES DE COMENZAR... En Adesis buscamos gente con ganas de trabajar con AngularJS. Aquellos que estéis interesados enviad vuestro cv a rrhh@adesis.com
5. Mastering Web Application Development with AngularJS - capítulo 2: Building and testing “ There were times when JavaScript was used as a toy language, those days are long over. ”
6. Building large apps with AngularJS “ My first few weeks with AngularJS I was like a kid on Christmas morning, unwrapping presents as fast as I could and running around showing everybody. ”
8. LA IMPORTANCIA DE UN MÉTODO No importa que tu proyecto sea grande o pequeño... pero usa uno. Vale, la documentación de AngularJS es un poco "extraña" pero hay muchos desarrolladores que han compartido y comparten sus experiencias.
9. ORGANIZACIÓN DE FICHEROS ¿Pero empezamos de forma manual o usamos un generador? (...propongo este otro logo para Grunt.)
10. POR FICHEROS p a r t i a l s / h o m e . h t m l l o g i n . h t m l u s e r s . h t m l o r d e r s . h t m l j s / c o n t r o l l e r s . j s d i r e c t i v e s . j s f i l t e r s . j s s e r v i c e s . j s a p p . j s
11. POR CARPETAS j s / c o n t r o l l e r s / h o m e C o n t r o l l e r . j s l o g i n C o n t r o l l e r . j s d i r e c t i v e s / u s e r s D i r e c t i v e . j s o r d e r s D i r e c t i v e . j s f i l t e r s / s e r v i c e s / u s e r S e r v i c e . j s o r d e r S e r v i c e . j s l o g i n S e r v i c e . j s p a r t i a l s / h o m e . h t m l l o g i n . h t m l u s e r s . h t m l o r d e r s . h t m l a p p . j s
12. POR FUNCIONES o r d e r s / d i r e c t i v e s / o r d e r s . h t m l o r d e r s D i r e c t i v e . j s s e r v i c e s / o r d e r S e r v i c e . j s u s e r s / d i r e c t i v e s / u s e r s . h t m l u s e r s D i r e c t i v e . j s s e r v i c e s / u s e r S e r v i c e . j s h o m e / c o n t r o l l e r s / h o m e . h t m l h o m e C o n t r o l l e r . j s l o g i n . h t m l l o g i n C o n t r o l l e r . j s s h a r e d / s e r v i c e s / i 1 8 n S e r v i c e . j s f i l t e r s / i 1 8 n F i l t e r . j s a p p . j s
13. EL MODELO Manten tus datos en servicios de AngularJS y usa los controladores para exponer los datos a tus vistas. Hay que conocer los distintos tipos de servicios en AngularJS.
14. MÓDULOS
15. DIFERENTES TIPOS DE ORGANIZACIÓN múltiples módulos en un único fichero de JavaScript. múltiples módulos en múltiples ficheros de JavaScript. un único módulo por fichero de JavaScript.
16. MÚLTIPLES MÓDULOS EN UN ÚNICO FICHERO Puede resultar complejo encontrar un módulo en concreto si nuestro código es muy grande. Útil en proyectos relativamente simples para no tener que manejar demasiados ficheros.
17. MÚLTIPLES MÓDULOS EN MÚLTIPLES FICHEROS Esta opción debería evitarse, ya que nos empieza a influir el orden en el que se cargan los ficheros (las declaraciones necesitan estar antes que los providers por ejemplo). En cuanto los módulos empiezan a crecer, dificultan su mantenimiento.
18. UN ÚNICO MÓDULO POR FICHERO FICHERO Resulta la mejor opción por independencia y para facilitar la labor de los tests.
19. Veamos lo que dice AngularJS.... y los comentarios de la gente también.
20. BONUS TRACK Lazy Loading In AngularJS Cargar sólo lo que necesitamos cuándo lo necesitamos.
21. ENLACES DE INTERÉS Building large apps with AngularJS AngularJS Tutorial: Learn to Build Modern Web Apps AngularJS: Conceptual Overview AngularJS CRUD application demo Leveling Up in Angular
22. ENLACES DE INTERÉS A bunch of links to blog posts, articles, videos, etc for learning AngularJS Advanced Design Patterns and Best Practices ng-newsletter Mis enlaces sobre AngularJS Learning JavaScript Design Patterns
23. Y AL FINAL, NOS ACABA PASANDO IGUAL