javascript desventajas - Gran diseño de aplicaciones AngularJS




2 Answers

Muchas buenas preguntas para preguntar; parecen estar en dos grupos principales: el primero es una cuestión de estructura de código y el segundo es sobre métricas (registros, etc.).

¿Cómo puede un servicio dentro de un módulo hablar con otro módulo?

Lo ideal sería utilizar directivas para sus módulos. De esta manera, puede aprovechar la capacidad de vincular controladores a través de la propiedad require . Aquí hay una página para compartir datos entre las directivas y los controladores .

¿El módulo debe desarrollarse y ejecutarse de forma independiente?

Supongo que estás pensando en pruebas de unidad. Sí, lo ideal es que sus módulos estén lo más ajustados posible para facilitar las pruebas.

¿Cómo se puede manejar la comunicación entre módulos con la transferencia de datos?

Aquí es donde los services se usan típicamente. Nota: los servicios, las fábricas y los proveedores significan lo mismo en AngularJS, solo se declaran de formas ligeramente diferentes. Elija el que le resulte más cómodo.

¿Cómo integrar todos los elementos anteriores, particularmente el manejo de excepciones, el registro?

El registro es un tema aparte. La belleza de AngularJS es que puede aumentar muy fácilmente las partes existentes del marco para agregar funcionalidades o comportamientos como mejor le parezca. Haces esto usando decorators . Este es un ejemplo de registro de excepciones que creo que cubrirá cualquier caso de uso en el que pueda estar interesado

Los desarrolladores deben entender la convención que hemos definido?

La respuesta a esto es siempre la misma: la comunicación es cómo lo saben. Los desarrolladores necesitan socializar la convención, de lo contrario nunca obtendrás la aceptación.

¿Qué método para solicitar el registro, envío de información entre el módulo?

Contestado arriba.

que programacion

Necesito asesoramiento sobre el diseño de una aplicación AngularJS con múltiples módulos complejos y, en función de la función del usuario, el módulo se carga después de la autenticación y la autorización. Algunos usuarios podrían tener acceso a un módulo simple y otros podrían tener un panel de control y algunos podrían tener acceso a más de 2 módulos.

Hay muchas directivas que hemos identificado que pueden reutilizarse en diferentes módulos. Durante la fase de diseño, hemos identificado las siguientes cosas que deberían existir y tenemos respuestas para algunos de los siguientes elementos, pero aún necesitamos el asesoramiento de expertos:

  • Un Módulo podría tener
    • Parciales
    • Controladores
    • Directiva
    • Servicios
  • Manejo de excepciones (código de estado HTTP o errores empresariales)
  • Registro (con número de línea, desde qué función)
  • También puede ser necesario guardar la información registrada en el servidor.
  • Debe tener la capacidad de activar y desactivar el registro
  • widgets personalizados a través de la clase de fábrica (reutilizados en otros módulos)
  • Directivas compartidas (alcance aislado)
  • Módulos compartidos
  • Utilidades compartidas (clasificación, filtrado, etc.)
  • Los enumeradores según los datos maestros
  • Constantes via singleton
  • Autenticación (CSRF)
  • almacenamiento fuera de línea
  • Servicios de descanso
  • Manejo de eventos para despacho desde un módulo y manejo en otro.

La interfaz de usuario de la aplicación se ve como una barra de menú fija en la parte superior de la página con una navegación desplegable en la parte superior izquierda con múltiples enlaces, dependiendo de la función del usuario. Cuando el usuario hace clic en un enlace, el módulo correspondiente debe cargarse en la página. Tiene que haber un proyecto vacío que se inicia manualmente y carga los otros módulos en tiempo de ejecución.

Nuestro enfoque es tener la siguiente estructura de carpetas:

  • aplicación
    • bienes
      • css
      • lib js
      • imágenes
    • componentes comunes
      • directivas
      • utilidades
      • autenticación
      • Servicio proxy para retener las $ llamadas de recursos.
      • Enums
      • Constantes
    • Modelo
      • entidad json (ejemplo cliente, producto, etc.)
    • módulo empresarial A
      • Parciales
      • Directivas
      • Servicios
      • Controladores
    • Módulo de negocios B
    • Módulo de negocios C
    • index.html
    • Requirejs config file

Entonces mis preguntas son:

  • ¿Cómo puede un servicio dentro de un módulo hablar con otro módulo?
  • ¿El módulo debería ser desarrollado y ejecutado independientemente?
  • ¿Cómo se puede manejar la comunicación entre módulos con la transferencia de datos?
  • ¿Cómo integrar todos los elementos anteriores, particularmente el manejo de excepciones, el registro?
  • Los desarrolladores deben entender la convención que hemos definido?
  • ¿Qué método para llamar para el registro, el envío de información entre módulos?



Organización de código en aplicaciones AngularJS y JavaScript grandes

Muchos desarrolladores tienen dificultades para organizar la base de códigos de una aplicación una vez que crece de tamaño. Lo he visto recientemente en aplicaciones AngularJS y JavaScript, pero históricamente ha sido un problema en todas las tecnologías, incluidas muchas aplicaciones Java y Flex en las que he trabajado en el pasado.

La tendencia general es la obsesión por organizar las cosas por tipo. Tiene un parecido sorprendente con la forma en que las personas organizan su ropa.

Pilas en el piso

Echemos un vistazo a angular-seed, el punto de inicio oficial de las aplicaciones AngularJS. El directorio "aplicación" contiene la siguiente estructura:

css / img / js / app.js controllers.js directives.js filters.js services.js lib / partials / El directorio de JavaScript tiene un archivo para cada tipo de objeto que escribimos. Esto es muy parecido a organizar tu ropa en diferentes pilas en el suelo. Tienes un montón de calcetines, ropa interior, camisas, pantalones, etc. Sabes que tus calcetines de lana negra están en ese montón en la esquina, pero te llevará un tiempo desenterrarlos.

Esto es un desastre. La gente no debería vivir así y los desarrolladores no deberían codificar así. Una vez que supera la mitad de una docena de controladores o servicios, estos archivos se vuelven difíciles de manejar: los objetos que busca son difíciles de encontrar, los conjuntos de cambios de archivos en el control de origen se vuelven opacos, etc.

El cajón de calcetines

El siguiente paso lógico para organizar JavaScript implica crear un directorio para algunos de los arquetipos y dividir objetos en sus propios archivos. Para continuar con la metáfora de la ropa, ahora hemos invertido en una cómoda mohaghony y planeamos poner calcetines en un cajón, ropa interior en otro y doblar prolíficamente nuestros pantalones y camisas en otros más.

Imaginemos que estamos construyendo un sitio simple de comercio electrónico con un flujo de inicio de sesión, un catálogo de productos y una UI de carrito de compras. También hemos definido nuevos arquetipos para Modelos (lógica de negocios y estado) y Servicios (proxies para puntos finales HTTP / JSON) en lugar de agruparlos en el único arquetipo de "servicio" de Angular. Nuestro directorio JavaScript ahora puede verse así:

Controladores / LoginController.js RegistrationController.js ProductDetailController.js SearchResultsController.js directives.js filters.js models / CartModel.js ProductModel.js SearchResultsModel.js UserModel.js services / CartService.js UserService.js ProductService.js ¡Agradable! Ahora los objetos se pueden ubicar fácilmente al explorar el árbol de archivos o al usar accesos directos del IDE, los conjuntos de cambios en el control de fuente ahora indican claramente lo que se modificó, etc. Esta es una mejora importante, pero aún tiene algunas limitaciones.

Imagínese que está en la oficina y se da cuenta de que necesita algunos trajes de limpieza en seco para un viaje de negocios mañana por la mañana. Llamas a casa y le pides a tu pareja que lleve tus trajes de rayas negras y azul carbón a los limpiadores. Y no olvide la camisa gris con la corbata de paisley negra y la camisa blanca con la corbata de color amarillo sólido. Imagine que su pareja no conoce por completo su tocador y vestuario. Mientras tamizan a través de su cajón de corbata, ven tres corbatas amarillas. ¿Cuál escoger?

¿No sería agradable si tu ropa fuera organizada por equipo? Si bien existen restricciones prácticas, como el costo y el espacio, que dificultan esto con la ropa en el mundo real, se puede hacer algo similar con el código a costo cero.

Modularidad

Esperemos que las metáforas trilladas no hayan sido demasiado tediosas, pero aquí está el resumen:

Tu otro importante es el nuevo desarrollador del equipo al que se le ha pedido que corrija un error en una de las muchas pantallas de tu aplicación. El desarrollador examina la estructura del directorio y ve todos los controladores, modelos y servicios perfectamente organizados. Desafortunadamente, no le dice nada sobre qué objetos están relacionados o tienen dependencias entre sí. Si en algún momento el desarrollador desea reutilizar parte del código, debe recopilar archivos de varias carpetas diferentes e invariablemente olvidará el código de otra carpeta en otro lugar. Créalo o no, rara vez necesita volver a utilizar todos los controladores de la aplicación de comercio electrónico en la nueva aplicación de informes que está creando. Sin embargo, es posible que tenga que reutilizar parte de la lógica de autenticación. ¿No sería agradable si todo estuviera en un solo lugar? Vamos a reorganizar la aplicación basada en áreas funcionales:

cart / CartModel.js CartService.js common / directives.js filters.js product / search / SearchResultsController.js SearchResultsModel.js ProductDetailController.js ProductModel.js ProductService.js user / LoginController.js RegistrationController.js UserModel.js UserService.js Any El desarrollador aleatorio ahora puede abrir la carpeta de nivel superior e inmediatamente obtener información sobre lo que hace la aplicación. Los objetos en la misma carpeta tienen una relación y algunos tendrán dependencias en otros. Comprender cómo funciona el proceso de inicio de sesión y registro es tan fácil como explorar los archivos en esa carpeta. La reutilización primitiva a través de copiar / pegar se puede lograr al menos copiando la carpeta en otro proyecto.

Con AngularJS podemos llevar esto un paso más allá y crear un módulo de este código relacionado:

1 2 3 4 5 6 7 8 9 10 11 12 13 var userModule = angular.module ('userModule', []); userModule.factory ('userService', ['$ http', function ($ http) {return new UserService ($ http);}]);
userModule.factory ('userModel', ['userService', function (userService) {devolver nuevo UserModel (userService);}]);
userModule.controller ('loginController', ['$ scope', 'userModel', LoginController]); userModule.controller ('registrationController', ['$ scope', 'userModel', RegistrationController]); ver rawUserModule.js alojado con ❤ por GitHub Si luego colocamos UserModule.js en la carpeta de usuario, se convierte en un "manifiesto" de los objetos utilizados en ese módulo. Este también sería un lugar razonable para agregar algunas directivas de cargador para RequireJS o Browserify.

Consejos para el Código Común

Cada aplicación tiene un código común que es utilizado por muchos módulos. Solo necesitamos un lugar para ello que puede ser una carpeta llamada "común" o "compartida" o lo que quieras. En aplicaciones realmente grandes, suele haber mucha superposición de funcionalidades y problemas transversales. Esto se puede hacer manejable a través de algunas técnicas:

Si los objetos de su módulo requieren acceso directo a varios objetos "comunes", escriba una o más Fachadas para ellos. Esto puede ayudar a reducir el número de colaboradores para cada objeto, ya que tener demasiados colaboradores suele ser un olor de código. Si su módulo "común" se hace grande, subdivídalo en submódulos que aborden un área funcional o preocupación particular. Asegúrese de que los módulos de su aplicación usen solo los módulos "comunes" que necesitan. Esta es una variante del "principio de segregación de interfaz" de SOLID. Agregue métodos de utilidad en $ rootScope para que puedan ser utilizados por los ámbitos secundarios. Esto puede ayudar a evitar tener que conectar la misma dependencia (como "PermissionsModel") a todos los controladores de la aplicación. Tenga en cuenta que esto debe hacerse con moderación para evitar saturar el alcance global y hacer que las dependencias no sean obvias. Use eventos para desacoplar dos componentes que no requieren una referencia explícita el uno al otro. AngularJS hace esto posible a través de los métodos $ emitir, $ difusión y $ en el objeto Alcance. Un controlador puede activar un evento para realizar alguna acción y luego recibir una notificación de que la acción se completó. Nota rápida sobre activos y pruebas

Creo que hay más espacio para la flexibilidad con respecto a la organización de HTML, CSS e imágenes. Colocarlos en una subcarpeta de "activos" del módulo probablemente logre el mejor equilibrio entre encapsular las dependencias de activos del módulo y no saturar demasiado las cosas. Sin embargo, creo que una carpeta separada de nivel superior para este contenido que contiene una estructura de carpetas que refleja la estructura del paquete de la aplicación también es razonable. Creo que funciona bien para las pruebas también.

Por favor, eche un vistazo al siguiente enlace,

https://blog.safaribooksonline.com/2014/03/27/13-step-guide-angularjs-modularization/




Related

javascript angularjs