tutorial spa single react page application javascript design-patterns web-applications architecture singlepage

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



react spa (14)

Alternativa: echa un vistazo a ItsNat

Piensa en JavaScript pero codifica lo mismo en Java en el servidor con las mismas API de DOM, en servidor es mucho más fácil administrar tu aplicación sin cliente / puentes personalizados porque la IU y los datos están juntos.

¿Cómo debería 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 ataque 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ígeme si ese no es el caso).

-

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

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

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, usan espacios de nombres en sus bibliotecas, pero JQuery no, y esto es un inconveniente significativo.

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 json para representar html.

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

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

Otros dos consejos

  1. Descubrí que la vista, el enfoque y la administración de entradas son áreas que requieren atención especial en las aplicaciones web de una sola página
  2. También me pareció útil abstraer la biblioteca de JS, dejando la puerta abierta para cambiar de opinión sobre lo que usas, o mezclar y combinar en caso de necesidad.

La forma en que construyo aplicaciones:

  • Marco ExtJS, aplicación de página única, cada componente definido en un archivo JS separado, cargado a pedido
  • Cada componente se contacta con su propio servicio web dedicado (a veces más de uno), obteniendo datos en tiendas ExtJS o estructuras de datos de propósito especial
  • La representación utiliza componentes ExtJS estándar, por lo que puedo unir almacenes 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 aplique 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.

La presentación de Nicholas Zakas tal como la compartió Dean es un muy buen lugar para comenzar. 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. Mira esto:

http://boilerplatejs.org/

Responde a preocupaciones comunes de desarrollo de Javascript tales como:

  • Estructuración de la solución
  • Crear jerarquía de módulos complejos
  • Componentes de UI autónomos
  • Comunicación entre módulos basada en eventos
  • Enrutamiento, Historia, Marcadores
  • Examen de la unidad
  • Localización
  • Generación de documentos

etc.

Lo mejor que puedes hacer es mirar los usos de ejemplo de otros marcos:

TodoMVC presenta muchos marcos de SPA.

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

Por ejemplo:

Si decide usar Angular.js, hay un generador Yeoman que le proporciona una estructura para enrutamiento, vistas, servicios, etc. También le permite probar, minificar su código, etc.

Si decide utilizar Backbone, consulte este generador

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.

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 incluso 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: 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 un tipo de tecnología central inventada recientemente para la cual tenemos que 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 mantenimiento de las aplicaciones web.

-> Es un patrón de diseño recientemente 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 modificaciones. en el enfoque de desarrollo.

Question - What about the use of Frameworks ?

Respuesta: los marcos son el código / solución de placa de caldera para algunos patrones genéricos comúnmente identificados, por lo que pueden quitar x% (variable, según la aplicación) carga del desarrollo de la aplicación, pero no deberían esperarse demasiado de ellos especialmente para pesados y crecientes aplicaciones. 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 de SPA serán:

  • Fuente de datos: Modelos / Colecciones de modelos

  • Marcar para presentar datos: Plantillas

  • Interacción con la aplicación: Eventos

  • Captura y navegación del estado: enrutamiento

  • Utilidades, widgets y complementos: bibliotecas

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