Arquitectura de una sola página de aplicaciones web JavaScript?

StackOverflow https://stackoverflow.com/questions/3050869

Pregunta

¿Cómo debería una sola página de aplicaciones web complejas JS estructurarse en el lado del cliente? Específicamente tengo curiosidad por saber cómo se estructura limpiamente la aplicación en términos de sus objetos del modelo, componentes de interfaz de usuario, los controladores, y la manipulación de objetos persistencia servidor.

MVC parecía como un ajuste al principio. Pero con componentes de interfaz anidados a varias profundidades (eventos, cada uno con su propia manera de actuar sobre / reaccionar a los datos del modelo, y cada generación que ellos mismos pueden o no pueden manejar directamente), no parece como MVC puede aplicarse limpiamente. (Pero por favor, corríjanme si ese no es el caso.)

-

( Esta pregunta dio lugar a dos sugerencias de uso de AJAX, que es obviamente necesario para que no sea la aplicación de una página más trivial nada.)

¿Fue útil?

Solución

PureMVC / JS es el más elegante de la OMI . Aprendí mucho de eso. También encontré escalable arquitectura de aplicaciones JavaScript por Nicholas Zakas útiles en la investigación del lado del cliente opciones de arquitectura.

Otros dos extremidades

    vista, el enfoque y la gestión de entrada
  1. que he encontrado son las áreas que necesitan una atención especial en aplicaciones individuales de las páginas web
  2. También encontrado útil abstraer la biblioteca JS, dejando la puerta abierta al cambio mente en lo que se utiliza, o mezcla y del partido en caso de necesidad.

Otros consejos

La presentación de Nicolás Zakas como compartida por Dean es un muy buen lugar para empezar. Yo también estaba luchando para responder a la misma pregunta por un tiempo. Después de hacer par de grandes productos de Javascript, pensado en compartir los aprendizajes como una arquitectura de referencia en caso de que alguien lo necesita. Echar un vistazo a:

http://boilerplatejs.org/

Se ocupa de los problemas de desarrollo comunes de Javascript tales como:

  • Solución estructuración
  • Creación de jerarquía módulo complejo
  • Autónomo componentes de interfaz de usuario
  • Evento basada la comunicación entre el módulo
  • Routing, Historia, Marcadores
  • Pruebas de Unidad
  • Ubicación
  • Generación de documentos

etc.

Las aplicaciones de generación manera I:

  • marco ExtJS, app sola página, cada componente definido en un archivo JS separado, se cargó en-demanda
  • Cada contactos componentes de su propio servicio web dedicado (a veces más de uno), ir a buscar los datos en ExtJS tiendas o estructuras de datos para fines especiales
  • La prestación utiliza componentes estándar ExtJS, por lo que puede obligar a las tiendas a las redes, las formas de carga de registros, ...

Sólo tienes que elegir un marco Javascript, y siga sus mejores prácticas. Mis favoritos son ExtJS y GWT, pero YMMV.

No haga rodar su propia solución para esto. El esfuerzo requerido para duplicar lo que hacen los marcos de JavaScript moderna es demasiado grande. Es siempre más rápido es adaptar algo existente que construir todo desde cero. 

Question - What makes an application complex ?

Respuesta - El uso de la palabra 'complejo' en la propia pregunta. Por lo tanto, una tendencia común será la de buscar una solución adecuada compleja desde el principio. 

Question - What does the word complex means ?

respuesta - Todo lo que es desconocido o parcialmente entendido. Ejemplo:. La teoría de la gravedad aún hoy en día es complejo para mí, pero no a Sir Isaac Newton, que lo descubrió en 1655 

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

Respuesta -. La comprensión y la simplicidad 

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

Respuesta - Piense dos veces, porque la comprensión y la complejidad no co-existir. Si usted entiende una enorme 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 sencillas. 

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 capacidad de mantenimiento de las aplicaciones web.

-> Es un patrón de diseño bastante recientemente identificado, por lo que la comprensión de SPA como un patrón de diseño va largo camino en la toma de decisiones informadas acerca de la arquitectura de un SPA.

-> A nivel de la raíz sin SPA es complejo, porque después de la comprensión de 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 la misma manera que lo hizo antes con algunas modificaciones y reordenaciones 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 tanto, se pueden despegar x% (variable, en función de la aplicación) carga desde el desarrollo de aplicaciones, pero luego no mucho se debe esperar de ellos especialmente para aplicaciones pesadas y en crecimiento. Siempre es un buen caso de estar en completo control de su aplicación y estructura de flujo, pero lo más importante es el código para ello. No debe haber zonas 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. componentes de la aplicación de clasificar. Busque un marco existente que está cerca de su marco derivada, si lo encuentra luego usarlo, si no lo encuentra, entonces le sugiero seguir adelante con el suyo propio. La creación de un marco es bastante adelantado esfuerzo, pero produce mejores resultados en el largo plazo. Algunos componentes básicos en mi marco SPA serán los siguientes:

  • Fuente de datos: Modelos / colecciones de modelos

  • Marcar Encima para presentar los datos de plantilla:

  • La interacción con la aplicación: Events

  • captura de Estado y de navegación: Enrutamiento

  • Utilidades, widgets y plug-ins: bibliotecas

Avísame si esto ayudó de ninguna manera y buena suerte con su arquitectura SPA !!

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

TodoMVC vitrinas muchos muchos marcos de SPA.

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

La aplicación web que estoy trabajando actualmente en uso jQuery y yo no lo recomendaría para cualquier aplicación Web grande de una sola página. La mayoría de los marcos de Dojo es decir, Yahoo, Google y otros utilizan espacios de nombres en sus bibliotecas JQuery pero no lo hace y esto es un inconveniente importante.

Si su sitio web está diseñado para ser pequeño, entonces jQuery sería bien, pero si la intención de construir un sitio grande, entonces te recomiendo mirar todo el Javascript marcos disponibles y decidir cuál de ellos responde a sus necesidades.

Y yo recomendaría aplicar el patrón MVC a tu JavaScript / HTML y, probablemente, la mayor parte de su modelo de objetos para el código JavaScript se podría hacer como el JSON que en realidad se regresa desde el servidor a través de Ajax y el javascirpt utiliza el JSON para representar HTML .

Yo recomendaría leer el libro Ajax en acción, ya que cubre la mayor parte de las cosas que necesita saber.

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

Me gustaría ir con jQuery MVC

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é.

Alternativa: echar un vistazo a ItsNat

Piense en JavaScript, pero el mismo código 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.

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 una sola archivo de salida al final.

Yo recomendaría para explorar Yeoman . Se permite usar existente "mejores prácticas" para su nuevo proyecto.

Por ejemplo:

Si usted decide utilizar angularjs, hay una Yeoman generador , que le dan una estructura para el encaminamiento, vistas, servicios, etc. también permite a prueba, minify su código, etc.

Si usted decide usar la espina dorsal, la caja este generador

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top