Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

unidades:15_avanzado:01_ficheros [2014/10/28 17:23]
admin [Único módulo]
unidades:15_avanzado:01_ficheros [2014/11/03 11:03] (actual)
admin [Variaciones]
Línea 107: Línea 107:
  
   * ''​common'':​ Es una carpeta que contiene los servicio, directivas , filtros, etc que son comunes a toda la aplicación.   * ''​common'':​ Es una carpeta que contiene los servicio, directivas , filtros, etc que son comunes a toda la aplicación.
-  ​* ''​directives''​ : Carpeta con cada una de las directivas que son comunes en la aplicación. Cada fichero de esta carpeta contiene una única directiva. +    ​* ''​directives''​ : Carpeta con cada una de las directivas que son comunes en la aplicación. Cada fichero de esta carpeta contiene una única directiva. 
-  * ''​filters''​ : Carpeta con cada uno de los filtros que son comunes en la aplicación. Cada fichero de esta carpeta contiene un único filtro. +    * ''​filters''​ : Carpeta con cada uno de los filtros que son comunes en la aplicación. Cada fichero de esta carpeta contiene un único filtro. 
-  * ''​services'':​ Carpeta con cada uno de los servicios que son comunes en la aplicación. Cada fichero de esta carpeta contiene un único servicio.+    * ''​services'':​ Carpeta con cada uno de los servicios que son comunes en la aplicación. Cada fichero de esta carpeta contiene un único servicio.
  
 ==== Variaciones ==== ==== Variaciones ====
Línea 146: Línea 146:
       ​       ​
 Realmente no hace falta explicar todo ésto, un poco de sentido común nos ayudará a organizar la carpeta ''​common''​. Realmente no hace falta explicar todo ésto, un poco de sentido común nos ayudará a organizar la carpeta ''​common''​.
 +
 +Para acabar veamos un ejemplo real de la carpeta ''​common''​ de la aplicación de compañia de vuelos [[https://​www.virginamerica.com/​|Virgin America]], sacada de [[http://​www.slideshare.net/​workandco/​vx-ng-europe/​48|ngEurope 2014 | Responsive Takes Flight]]
 +
 +{{:​unidades:​15_avanzado:​common.png?​nolink&​200|}}
 +
 ===== Librerias ===== ===== Librerias =====
 Ahora vamos a añadir una carpeta con las librerías CSS, JavaScript , etc. de terceros. Pueden ser tanto módulos de AngularJS como otro tipo de librerías web. Ahora vamos a añadir una carpeta con las librerías CSS, JavaScript , etc. de terceros. Pueden ser tanto módulos de AngularJS como otro tipo de librerías web.
Línea 184: Línea 189:
  
   * ''​lib''​ : La carpeta donde se guardan cada una de las librerías de terceros que vamos a usar.   * ''​lib''​ : La carpeta donde se guardan cada una de las librerías de terceros que vamos a usar.
-  ​* ''​bootstrap'' ​ y ''​angularjs'':​ Dentro de ''​lib''​ creamos una subcarpeta con el nombre de la librería de terceros que vamos a usar, en este caso son ''​bootstrap''​ y ''​AngularJS''​ +    ​* ''​bootstrap'' ​ y ''​angularjs'':​ Dentro de ''​lib''​ creamos una subcarpeta con el nombre de la librería de terceros que vamos a usar, en este caso son ''​bootstrap''​ y ''​AngularJS''​ 
-  * ''​css''​ , ''​fonts''​ y ''​js'':​ Dentro de cada librería creamos las subcarpetas para los estilos CSS, las fuentes y el JavaScript. La idea de esta estructura está sacada de la propia distribución de bootstrap y la he aplicado tambien a AngularJS o cualquier otra librería.+      * ''​css''​ , ''​fonts''​ y ''​js'':​ Dentro de cada librería creamos las subcarpetas para los estilos CSS, las fuentes y el JavaScript. La idea de esta estructura está sacada de la propia distribución de bootstrap y la he aplicado tambien a AngularJS o cualquier otra librería.
  
 <note tip>Es importante en bootstrap mantener la estructura de ''​css''​ , ''​fonts''​ y ''​js''​ ya que los CSS de bootstrap hacen referencia a una ruta relativa llamad "​../​fonts"​ por lo que debemos seguir esa estructura.</​note>​ <note tip>Es importante en bootstrap mantener la estructura de ''​css''​ , ''​fonts''​ y ''​js''​ ya que los CSS de bootstrap hacen referencia a una ruta relativa llamad "​../​fonts"​ por lo que debemos seguir esa estructura.</​note>​
Línea 294: Línea 299:
  
   * ''​seguromedico''​ : Esta carpeta tiene la funcionalidad para hacer un CRUD ((O lo que necesite la aplicación)) sobre la entidad SeguroMedico. Lo mismo ocurre con la carpeta ''​usuario''​ que haría referencia a la entidad ''​Usuario''​.   * ''​seguromedico''​ : Esta carpeta tiene la funcionalidad para hacer un CRUD ((O lo que necesite la aplicación)) sobre la entidad SeguroMedico. Lo mismo ocurre con la carpeta ''​usuario''​ que haría referencia a la entidad ''​Usuario''​.
-  ​* ''​seguromedico-list.html'':​ Contiene el HTML para mostrar una lista (Tabla HTML) con los seguros médicos. +    ​* ''​seguromedico-list.html'':​ Contiene el HTML para mostrar una lista (Tabla HTML) con los seguros médicos. 
-  * ''​seguromedico-list.js''​ :  Es el JavaScript específico de ''​seguromedico-list.html''​ , lo normal es que solo tenga el/los controlador/​es específico/​s de ''​seguromedico-list.html''​ +    * ''​seguromedico-list.js''​ :  Es el JavaScript específico de ''​seguromedico-list.html''​ , lo normal es que solo tenga el/los controlador/​es específico/​s de ''​seguromedico-list.html''​ 
-  * ''​seguromedico-detail.html'':​ Contiene el HTML para mostrar el detalle de un único seguro médico. +    * ''​seguromedico-detail.html'':​ Contiene el HTML para mostrar el detalle de un único seguro médico. 
-  * ''​seguromedico-detail.js'':​ Es el JavaScript específico de ''​seguromedico-detail.html''​ , lo normal es que solo tenga el/los controlador/​es específico/​s de ''​seguromedico-detail.html''​ +    * ''​seguromedico-detail.js'':​ Es el JavaScript específico de ''​seguromedico-detail.html''​ , lo normal es que solo tenga el/los controlador/​es específico/​s de ''​seguromedico-detail.html''​ 
-  * ''​seguromedico.js''​ : Este fichero se llamará igual que la carpeta y definimos lo siguiente:​ +    * ''​seguromedico.js''​ : Este fichero se llamará igual que la carpeta y definimos lo siguiente:​ 
-    * Las constantes +      * Las constantes 
-    * Los bloques config , incluyendo las rutas de las funcionalidades de estas página. **Fíjate que finalmente aquí es donde finalmente se ponen las rutas de la cada funcionalidad.** +      * Los bloques config , incluyendo las rutas de las funcionalidades de estas página. **Fíjate que finalmente aquí es donde finalmente se ponen las rutas de la cada funcionalidad.** 
-    * Los bloques run+      * Los bloques run
  
 <note important>​ <note important>​
Línea 358: Línea 363:
  
 ===== Único módulo ===== ===== Único módulo =====
-Una cosa que puede chocar mucho en esta estructura de ficheros es que solo se cree un módulo y se use la variable global ''​app''​ con ese único módulo. En todas las páginas ​en las que hablan de este tema como pueden ser +Una cosa que puede chocar mucho en esta estructura de ficheros es que solo se cree un módulo y se use la variable global ''​app''​ con ese único módulo. En la gran mayoría de páginas que hablan de este tema explican que **no** hay que usar la variable global ''​app''​ y que hay que separar la aplicación en diversos módulos. ​
- +
- +
-explican que **no** hay que usar la variable global ''​app''​ y que hay que separar la aplicación en diversos módulos. ​+
  
 La forma que recomienda todo el mundo es la siguiente: La forma que recomienda todo el mundo es la siguiente:
Línea 403: Línea 405:
  
  
-¿Porque recomiendo tener un único módulo en vez de varios y usar la variable global ''​app''​ en vez de obtener el módulo cada vez que se necesita? ​+¿Porque recomiendo tener un único módulo en vez de varios y usar la variable global ''​app''​ en vez de obtener el módulo cada vez que se necesita? ​Pues la verdad es que no he encontrado ninguna razón para usar varios módulos en una aplicación. Cosa distinta es si estás haciendo una librería que será usada por terceros, en ese caso es necesario crear tu propio módulo ya que no sabes si vas a tener la variable ''​app''​ ni sabes el nombre del módulo de la aplicación,​ pero en el código de la propia aplicación no le veo mucho sentido.
  
- ​[[https://​plus.google.com/​+BrianFord|Briant Ford]] , uno de los desarrolladores de AngularJS comenta en su post [[http://​briantford.com/​blog/​huuuuuge-angular-apps|Building Huuuuuge Apps with AngularJS]] ​//"​From a performance perspective,​ it doesn'​t really matter how you organize your modules, so choose whatever method best suits your project."//​. Es decir que no ayuda para nada al rendimiento separar la aplicación en módulo y en la [[https://​docs.google.com/​presentation/​d/​1XQP0_NTzCUcFweauLlkZpbbhNVYbYy156oD--KLmXsk|presentación]] que hicieron en el [[http://​ngeurope.org/​|ng-europe]] sobre Angular 2.0 no parece ​que haya nada sobre éste tema. Así que no hay ninguna justificación relativa ​al rendimiento para tener varios módulos.+Un posible motivo para tener varios módulos en una aplicación podría ser mejorar el rendimiento pero  ​[[https://​plus.google.com/​+BrianFord|Briant Ford]] , uno de los desarrolladores de AngularJS comenta en su post [[http://​briantford.com/​blog/​huuuuuge-angular-apps|Building Huuuuuge Apps with AngularJS]] ​lo siguiente ​//"​From a performance perspective,​ it doesn'​t really matter how you organize your modules, so choose whatever method best suits your project."//​. Es decir que no ayuda para nada al rendimiento separar la aplicación en varios módulos. Sin embargo por otro lado en la [[https://​docs.google.com/​presentation/​d/​1XQP0_NTzCUcFweauLlkZpbbhNVYbYy156oD--KLmXsk|presentación]] que hicieron en la conferencia de [[http://​ngeurope.org/​|ng-europe]] sobre Angular 2.0 explican ​que van a usar los módulos de ES6 , habrá ​que ver como afecta ésto al rendimiento para tener uno o varios módulos.
  
-====== Referencias ​======+Un motivo que he leído en algún post es que al hacer los test unitarios es mejor que cada módulo tenga pocos artefactos pero no veo como puede influir en los test que el módulo tenga pocos o muchos artefactos. 
 + 
 +Otro motivo para tener varios módulos es porque al crear el módulo principal puedo ver de que módulos depende y así me hago una idea de las funcionalidades de la aplicación pero viendo los directorios puedo averiguar también eso mismo y es aun mas sencillo.  
 + 
 +Una posible ventaja es la posibilidad de quitar una funcionalidad de la aplicación simplemente quitando dicho su módulo correspondiente como dependencia del módulo principal y todo ello sin quitar el código fuente de la aplicación.Y mejor mejor aun que el interfaz de usuario muestre o no esa funcionalidad dependiendo de si está o no el módulo. Quizás sea útil para alguien pero no creo que ese sea el objetivo de los módulos. 
 + 
 +Por último la experiencia nos dice a todos que no es bueno clases muy grandes, ni métodos muy grandes ni directorios muy grandes, etc. Así que siguiendo ese sentido común tampoco sería muy recomendable tener módulos muy grandes. Pero no parece que sea un motivo de peso. 
 + 
 +Ahora , ¿que ventajas me ofrece tener un solo módulo y la variable ''​app''?​ Pues la simplicidad,​ siempre que quiero crear algún artefacto en AngularJS es tan sencillo como recurrir a la variable ''​app''​ que siempre estará disponible en la aplicación. También lo normal es que la carpeta de funcionalidades y el nombre del módulo tengan nombres similares. Si cambio el nombre de la carpeta debo recordar de cambiar el nombre el módulo en todos los ficheros JavaScript de esa carpeta. ¿Y ese trabajo para que quiero hacerlo si no sirve para nada tener varios módulos? Luego cuando creas un artefacto tienes otro punto donde equivocarte al escribir el nombre del módulo, con lo fácil que es escribir ''​app''​. Todo estos son pequeños inconvenientes que no tendría problema en //sufrir// si tener varios módulo sirviera para algo pero como no sirve para nada , ¿para que complicarnos la existencia aunque sea solo un poco? 
 + 
 +<note tip> 
 +Sigue el principio [[http://​es.wikipedia.org/​wiki/​Principio_KISS|KISS]] y crea un solo módulo en tu aplicación con la variable global ''​app''​. 
 +</​note>​ 
 + 
 +===== Referencias =====
   * [[http://​briantford.com/​blog/​huuuuuge-angular-apps|Building Huuuuuge Apps with AngularJS]]   * [[http://​briantford.com/​blog/​huuuuuge-angular-apps|Building Huuuuuge Apps with AngularJS]]
-  * [[https://​blog.safaribooksonline.com/​2014/​03/​27/​13-step-guide-angularjs-modularization/​|13 Steps to AngularJS Modularization]] 
   * [[https://​github.com/​johnpapa/​angularjs-styleguide|John Papa-AngularJS Style Guide]]   * [[https://​github.com/​johnpapa/​angularjs-styleguide|John Papa-AngularJS Style Guide]]
   * [[https://​github.com/​toddmotto/​angularjs-styleguide|Todd Motto-AngularJS styleguide]]   * [[https://​github.com/​toddmotto/​angularjs-styleguide|Todd Motto-AngularJS styleguide]]
Línea 419: Línea 434:
   * [[http://​henriquat.re/​modularizing-angularjs/​modularizing-angular-applications/​modularizing-angular-applications.html|Modularizing AngularJS Applications]]   * [[http://​henriquat.re/​modularizing-angularjs/​modularizing-angular-applications/​modularizing-angular-applications.html|Modularizing AngularJS Applications]]
   * [[http://​danorlando.com/​angularjs-architecture-understanding-modules/​|AngularJS Architecture,​ Part 2: Understanding Modules]]   * [[http://​danorlando.com/​angularjs-architecture-understanding-modules/​|AngularJS Architecture,​ Part 2: Understanding Modules]]
 +  * [[https://​blog.safaribooksonline.com/​2014/​03/​27/​13-step-guide-angularjs-modularization/​|13 Steps to AngularJS Modularization]]
   * [[http://​clintberry.com/​2013/​modular-angularjs-application-design/​|Modular AngularJS App Design]]   * [[http://​clintberry.com/​2013/​modular-angularjs-application-design/​|Modular AngularJS App Design]]
- 
unidades/15_avanzado/01_ficheros.1414513395.txt.gz · Última modificación: 2014/10/28 17:23 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0