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

La presentación de Nicholas Zakas compartida por Dean es un muy buen lugar para comenzar. Yo también estaba luchando para responder a 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. Echa un vistazo a:

Http://boilerplatejs.org/

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

• Estructuración de soluciones
• Creando complejo jerarquía de módulos
• Componentes de interfaz de usuario autocontenidos
• Comunicación entre módulos basada en eventos
• Enrutamiento, Historial, Marcadores
• Pruebas unitarias
• Localización
• Generación de documentos

Etc.

La forma en que compilo 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 almacenes ExtJS o estructuras de datos de propósito especial
• El renderizado utiliza componentes ExtJS estándar, por lo que puedo enlazar almacenes a cuadrículas, cargar formularios desde registros, ...

Simplemente elija un marco de javascript y siga su mejor practicar. Mis favoritos son ExtJS y GWT, pero YMMV.

NO ruede su propia solución para esto. El esfuerzo requerido para duplicar lo que hacen los marcos 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 sea desconocida o parcialmente comprendida. Ejemplo: La teoría de la Gravedad aún hoy 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 simplicidad.

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

Respuesta-Piénsalo dos veces, porque la comprensión y la complejidad no co-existen. Si usted entiende una enorme enorme aplicación, 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 recién inventada para la que necesitamos reinventar la rueda para 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 la web aplicación.

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

- > A nivel de raíz ningún SPA es complejo, porque después de entender 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 desarrollo enfoque.

Question - What about the use of Frameworks ?

Answer - Frameworks son código de placa de caldera / solución para algunos patrones comúnmente identificados y genéricos, por lo tanto, pueden quitar x% (variable, basado en la aplicación) de carga de desarrollo de aplicaciones, pero entonces no se debe esperar mucho 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 su aplicación, pero lo más importante es el código para ella. No debe haber áreas grises o negras en el código de 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. Categorice los componentes de la aplicación. Busque un marco existente que esté cerca de su marco derivado, si lo encuentra y luego lo usa, si no lo encuentra, le sugiero que siga adelante con el suyo propio. 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

• Marcado para la presentación de datos: Plantillas

• Interacción con la aplicación : Eventos

• Captura de estado y navegación : Enrutamiento

• Utilidades, widgets y plug-ins : bibliotecas

Hágame saber si esto ayudó de alguna manera y buena suerte con la arquitectura de su SPA !!

Lo mejor que puedes hacer es mirar ejemplos de uso de otros frameworks:

TodoMVC muestra muchos muchos marcos de SPA.

Puede utilizar 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 de una sola página grande. La mayoría de los frameworks, es decir, Dojo, yahoo, google y otros utilizan espacios de nombres en sus bibliotecas, pero jQuery no lo hace y esto es un inconveniente significativo.

Si su sitio web está destinado a ser pequeño, entonces jQuery estaría bien, pero si tiene la intención de construir un sitio grande, le recomendaría mirar todos los marcos de Javascript disponibles y decidir cuál uno que más satisfaga sus necesidades.

Y yo 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 el json que realmente devuelve desde el servidor a través de ajax y el javascirpt utiliza el json para representar 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 http://bennadel.com/projects/cormvc-jquery-framework.htm Ben es bastante agudo y si usted cavar alrededor en su blog que tiene algunos mensajes agradables acerca de cómo CorMVC se pone juntos y por qué.

Alternativa: echa un vistazo a ItsNat

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

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

NikaFramework le permite crear una aplicación de una sola página. También permite escribir HTML, CSS (SASS), JavaScript en archivos separados y juntarlos en sólo un archivo de salida en la final.

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

Por ejemplo:

Si decide utilizar Angular.js, hay un Yeoman generator , que te da una estructura para enrutamiento, vistas, servicios, etc. También le permiten probar, minificar su código, etc.

Si decide utilizar Backbone, checkout este generador