Arquitectura de una aplicación web JavaScript de una sola página

¿Cómo se debe estructurar una aplicación web JS compleja de una sola página en el lado del cliente? Específicamente, tengo curiosidad sobre cómo estructurar limpiamente la aplicación en términos de sus objetos de modelo, componentes de UI, cualquier controlador y objetos que manejen la persistencia del servidor.

MVC parecía encajar al principio. Pero con los componentes de la interfaz de usuario anidados a varias profundidades (cada uno con su propia forma de actuar / reaccionar a los datos del modelo, y cada uno genera eventos que ellos mismos pueden o no manejar directamente), no parece que MVC se pueda aplicar limpiamente. (Pero corríjame si ese no es el caso).

-

( Esta pregunta resultó en dos sugerencias de uso de ajax, que obviamente es necesario para cualquier otra cosa que no sea la aplicación de una página más trivial).

La arquitectura MVC de PureMVC / JS es la OMI más elegante. Aprendí mucho de eso. También encontré la Arquitectura de Aplicación Escalable de JavaScript de Nicholas Zakas útil para investigar las opciones de arquitectura del lado del cliente.

Otros dos consejos

1. Descubrí que la visualización, el enfoque y la gestión de entradas son áreas que necesitan especial atención en las aplicaciones web de una sola página.
2. También me resultó útil abstraer la biblioteca JS, dejando la puerta abierta para cambiar de opinión sobre lo que usa, o mezclar y combinar si surge la necesidad.

La presentación de Nicholas Zakas compartida por Dean es un muy buen lugar para comenzar. También estuve luchando por responder la misma pregunta por un tiempo. Después de hacer un par de productos Javascript a gran escala, pensé en compartir los aprendizajes como una arquitectura de referencia en caso de que alguien lo necesite. Mira esto:

http://boilerplatejs.org/

Aborda problemas comunes de desarrollo de Javascript como:

• Estructuración de soluciones
• Crear una jerarquía de módulos compleja
• Componentes de IU autónomos
• Comunicación entre módulos basada en eventos
• Enrutamiento, historial, marcadores
• Examen de la unidad
• Localización
• Generación de documentos

etc.

La forma en que creo aplicaciones:

• Marco ExtJS, aplicación de una sola página, cada componente definido en un archivo JS separado, cargado bajo demanda
• Cada componente contacta con su propio servicio web dedicado (a veces más de uno), obteniendo datos en las tiendas ExtJS o estructuras de datos de propósito especial
• La representación utiliza componentes estándar de ExtJS, por lo que puedo vincular tiendas a cuadrículas, cargar formularios desde registros, ...

Simplemente elija un marco de JavaScript y siga sus mejores prácticas. Mis favoritos son ExtJS y GWT, pero YMMV.

NO desarrolle su propia solución para esto. El esfuerzo requerido para duplicar lo que hacen los frameworks javascript modernos es demasiado grande. Siempre es más rápido adaptar algo existente que construirlo todo desde cero.

Question - What makes an application complex ? 

Respuesta: el uso de la palabra "complejo" en la pregunta misma. Por lo tanto, una tendencia común será buscar una solución compleja desde el principio.

Question - What does the word complex means ?

Respuesta: cualquier cosa que se desconozca o se comprenda parcialmente. Ejemplo: la teoría de la gravedad incluso hoy en día es COMPLEJA para mí, pero no para Sir Isaac Newton, quien la descubrió en 1655.

Question - What tools can I use to deal with complexity ?

Respuesta: comprensión y sencillez.

Question - But I understand my application . Its still complex ?

Respuesta: Piénselo dos veces, porque la comprensión y la complejidad no coexisten. Si comprende una aplicación enorme, estoy seguro de que estará de acuerdo en que no es más que una integración de unidades pequeñas y simples.

Question - Why all of the above philosophical discussion for a question on 
           Single Page Application (SAP)?

Respuesta - Porque,

-> SPA no es un tipo de tecnología central que se haya inventado recientemente para lo cual necesitamos reinventar la rueda de muchas cosas que estamos haciendo en el desarrollo de aplicaciones.

-> Es un concepto impulsado por la necesidad de un mejor rendimiento, disponibilidad, escalabilidad y mantenibilidad de las aplicaciones web.

-> Es un patrón de diseño identificado recientemente, por lo que comprender el SPA como un patrón de diseño ayuda mucho a tomar decisiones informadas sobre la arquitectura de un SPA.

-> A nivel raíz, ningún SPA es complejo, porque después de comprender las necesidades de una aplicación y el patrón de SPA, se dará cuenta de que todavía está creando una aplicación, más o menos de la misma manera que lo hacía antes con algunas modificaciones y reorganizaciones en el enfoque de desarrollo.

Question - What about the use of Frameworks ?

Respuesta: Los marcos son un código / solución de placa de caldera para algunos patrones genéricos y comúnmente identificados, por lo tanto, pueden quitar un x% (variable, según la aplicación) de la carga del desarrollo de la aplicación, pero no se debe esperar mucho de ellos, especialmente para aplicaciones pesadas. y aplicaciones en crecimiento. Siempre es un buen caso tener el control total de la estructura y el flujo de su aplicación, pero lo más importante es el código. No debe haber áreas grises o negras en el código de la aplicación.

Question - Can you suggest one of the many approaches to SPA architecture ?

Respuesta: piense en su propio marco basado en la naturaleza de su aplicación. Categorizar los componentes de la aplicación. Busque un marco existente que esté cerca de su marco derivado, si lo encuentra, utilícelo, si no lo encuentra, le sugiero que siga adelante con el suyo. Crear un marco es un gran esfuerzo por adelantado, pero produce mejores resultados a largo plazo. Algunos componentes básicos en mi marco de SPA serán:

• Fuente de datos: modelos / colecciones de modelos

• Marcar para presentar datos: Plantillas

• Interacción con la aplicación: Eventos

• Captura de estado y navegación: enrutamiento

• Utilidades, widgets y complementos: bibliotecas

¡Avíseme si esto ayudó de alguna manera y buena suerte con la arquitectura de su SPA!

Lo mejor que puede hacer es mirar ejemplos de usos de otros marcos:

TodoMVC muestra muchos marcos de SPA.

Puede usar javascript MVC framework http://javascriptmvc.com/

La aplicación web en la que estoy trabajando actualmente usa JQuery y no la recomendaría para ninguna aplicación web grande de una sola página. La mayoría de los marcos, es decir, Dojo, yahoo, google y otros, utilizan espacios de nombres en sus bibliotecas, pero JQuery no lo hace y esto es un inconveniente importante.

Si su sitio web está destinado a ser pequeño, entonces JQuery estaría bien, pero si tuviera la intención de construir un sitio grande, le recomendaría mirar todos los marcos de Javascript disponibles y decidir cuál satisface mejor sus necesidades.

Y recomendaría aplicar el patrón MVC a su javascript / html y probablemente la mayor parte de su modelo de objeto para el javascript podría hacerse como el json que realmente devuelve del servidor a través de ajax y el javascirpt usa el json para renderizar html.

Recomendaría leer el libro Ajax en acción, ya que cubre la mayoría de las cosas que necesitará saber.

Estoy usando Samm.js en varias aplicaciones de una página con gran éxito

Yo iría con jQuery MVC

Echa un vistazo a http://bennadel.com/projects/cormvc-jquery-framework.htm Ben es bastante agudo y, si buscas en su blog, tiene algunas publicaciones interesantes sobre cómo se arma CorMVC y por qué.

Alternativa: echa un vistazo a ItsNat

Piense en JavaScript pero codifique lo mismo en Java en el servidor con las mismas API DOM, en el servidor es mucho más fácil administrar su aplicación sin clientes / puentes personalizados porque la interfaz de usuario y los datos están juntos.

O eche un vistazo a https://github.com/flosse/scaleApp

NikaFramework le permite crear aplicaciones de una sola página. También le permite escribir HTML , CSS ( SASS ), JavaScript en archivos separados y agruparlos en un solo archivo de salida al final.

Recomendaría explorar Yeoman . Le permite utilizar las "mejores prácticas" existentes para su nuevo proyecto.

Por ejemplo:

si decide usar Angular.js, hay un generador Yeoman , que te da una estructura para enrutamiento, vistas, servicios, etc. También te permite probar, minificar tu código, etc.

Si decide utilizar Backbone, consulte este generador