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

Question

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

MVC parecía un ajuste al principio. Pero con los componentes de la interfaz de usuario anidados en varias profundidades (cada uno con su propia forma de actuar/reaccionar ante los datos del modelo, y cada uno generando eventos que ellos mismos pueden o no manejar directamente), no parece que MVC pueda aplicarse limpiamente. (Pero por favor, corríjanme si ese no es el caso.)

-

(This question dio lugar a dos sugerencias de uso de AJAX, que es obviamente necesario para otra cosa que la aplicación de una página más trivial.)

Answer 1

La arquitectura MVC de PureMVC/JS es la IMO más elegante. Aprendí mucho de eso. También encontré Scalable JavaScript Application Architecture de Nicholas Zakas útil para investigar las opciones de arquitectura del lado del cliente. otros

Dos consejos

1. que he encontrado vista, el enfoque y la gestión de entrada son áreas que necesitan atención especial en una sola página web apps
2. También me pareció muy útil para abstraer la biblioteca JS, dejando la puerta abierta para cambiar de opinión sobre lo que usa o mezcle & si fuera necesario.

Answer 2

me gustaría ir con jQuery MVC

Answer 3

salida http://bennadel.com/projects/cormvc-jquery-framework.htm Ben es bastante afilada y si cavar alrededor en su blog que tiene algunos mensajes agradables sobre cómo CorMVC se junta y por qué.

Answer 4

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

Answer 5

La forma construyo aplicaciones:

• marco ExtJS, aplicación de una sola página, cada componente se define en un archivo JS separada, cargado a la carta
• Cada componente entra en contacto con su propio servicio web dedicado (a veces más de uno), buscando datos en tiendas ExtJS o estructuras de datos de propósito especial
• El procesamiento usa componentes ExtJS estándar, de modo que puedo vincular tiendas a cuadrículas, cargar formularios de registros, ...

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

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

Answer 6

La aplicación web en la que estoy trabajando actualmente usa JQuery y no lo 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 usan espacios de nombres en sus bibliotecas, pero JQuery no, y esto es un inconveniente importante.

Si su sitio web está destinado a ser pequeño, entonces JQuery estaría bien, pero si tenía la intención de construir un sitio grande, le recomendaría consultar 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 objetos para el javascript podría hacerse como json que realmente regresa del servidor a través de ajax y 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.

Answer 7

Alternativa: echar un vistazo a ItsNat

Piense en JavaScript pero el código del mismo en Java en el servidor con las mismas API DOM, en el servidor es la forma más fácil de gestionar su solicitud sin cliente personalizado/puentes debido a la interfaz de usuario y los datos están juntos.

Answer 8

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

Answer 9

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

Answer 10

presentación de Nicholas Zakas como compartida por Dean es un muy buen lugar para empezar. También estaba 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. Echar un vistazo a:

http://boilerplatejs.org/

Se ocupa de las preocupaciones comunes de desarrollo de Javascript tales como:

• estructuración de soluciones
• Creación de jerarquía módulo complejo
• autónomo componentes de interfaz de usuario
• basado en eventos comunicación entre módulos
• Rou ting, Historia, Marcadores
• pruebas unitarias
• localización
• generación de documentos

etc.

Answer 11

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

TodoMVC presenta muchos marcos de SPA.

Answer 12

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 único archivo de salida en el extremo.

Answer 13

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 sea desconocida o parcialmente entendida. Ejemplo: La teoría de la gravedad aún hoy en día es complejo para mí, pero no a Sir Isaac Newton, quien la descubrió en 1655.

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

respuesta - Comprensión y simplicidad.

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

Respuesta - Piense dos veces, porque la comprensión y la complejidad no coexisten. Si entiendes una gran aplicación enorme, estoy seguro de que estarás 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 algún tipo de tecnología de la base de que se ha inventado recientemente para lo cual necesitamos reinventar la rueda para un montón de cosas que estamos haciendo en el desarrollo de aplicaciones.

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

-> Es un patrón de diseño recién identificado, por lo que una comprensión de SPA como patrón de diseño puede ayudar a tomar decisiones informadas sobre la arquitectura de un SPA.

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

Question - What about the use of Frameworks ? 

respuesta - Los marcos son de calderas código de placa/solución para algunos patrones comúnmente identificados y genéricos, por lo que pueden despegar x% (variable, en función de la aplicación) carga desde el desarrollo de aplicaciones, pero luego no mucho deben estar espera de ellos especialmente para aplicaciones pesadas y en crecimiento. Siempre es un buen caso para tener el control completo de la estructura y el flujo de la aplicación, pero lo más importante es el código para ello. 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 según 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, úselo, si no lo encuentra, le sugiero que siga adelante con el suyo. Crear un marco es todo un esfuerzo inicial, pero produce mejores resultados a largo plazo.Algunos componentes básicos en mi marco SPA serán: Fuente

• datos: Modelos/colecciones de modelos

• Marcos Hasta para los datos de la presentación: Plantillas

• interacción con la aplicación: Eventos

• Captación y navegación del estado: Enrutamiento

• Utilidades, widgets y plugins: bibliotecas

Quiero saber si esto ayudó de ninguna manera y buena suerte con su arquitectura SPA !!

Answer 14

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

Por ejemplo:

si decide utilizar angularjs, hay una Yeoman generator, que le dan una estructura para el enrutamiento, vistas, servicios, etc. También permitirá poner a prueba, Minify su código, etc. .

Si decide utilizar la espina dorsal, la caja this generator