javascript - diferencias - ¿Por qué necesitamos una aplicación de una sola página?

title html css (1)

La aplicación de una sola página (SPA) ha llegado a nosotros. También vienen muchas cosas nuevas, como enrutamiento, ciclo de vida de la página en el lado del cliente, patrón MVC, patrón MVVM, patrón MV *, ... y algunos de los patrones de Javascript también nos llegan como patrón de AMD , Singleton , Facade , ..

También se desarrollaron muchos marcos y bibliotecas de SPA. Podemos encontrar algo de esto en internet. Son AngularJs , Reactjs , BackboneJs , DurandalJs , ... y una gran cantidad de componentes de terceros para hacer que la codificación Javascript sea más fácil como RequireJs , Amplifyjs , BreezeJs ...

¿Pero solo pienso por qué necesitamos el SPA? Porque se ha visto que introduce algunas cosas nuevas y complejas en el desarrollo de la aplicación web. A pesar del SPA, podemos utilizar la aplicación web tradicional, cada solicitud de cada página de carga. Solo veo un beneficio como que podemos ser fáciles de ejecutar en el móvil y adaptarnos a una nueva tendencia de desarrollo de aplicaciones web. ¿Podría alguien explicar más claramente sobre eso?

Una cosa más, si usamos muchos componentes de terceros para componer solo un SPA. Entonces, ¿hace una consistencia para esta aplicación web? Creo que debería ser un complejo para mantener un gran componente dentro de nuestra aplicación web. ¿Cómo piensas sobre eso?

Todas las sugerencias son bienvenidas

Creo que esta es la dirección en la que deberían moverse la mayoría de los sitios web teniendo en cuenta la cantidad de dispositivos que los usuarios utilizan actualmente y las capacidades y limitaciones de cada uno.

IMPORTANTE:

Antes de leer el resto de esto, comprenda que este concepto se basa en los principios básicos de diseño para la web. Para diseñar una aplicación de una sola página para todos los dispositivos y situaciones, no se puede ejecutar exclusivamente como una aplicación de una sola página. Debe construir una base que funcione en los navegadores más básicos con características muy limitadas y mejorar la experiencia del usuario de acuerdo con las capacidades de su dispositivo.

Esto puede causar más trabajo para usted, pero podrá satisfacer a un público más amplio y diverso, lo que es mucho más impresionante que crear una aplicación web diseñada específicamente para los navegadores modernos de escritorio o de teléfono.

Disminuir el tiempo de carga y / o el peso

Las aplicaciones de una sola página son más capaces de disminuir el tiempo de carga de las páginas y la cantidad de transferencia de datos de un servidor a otro.

Algunas de las características más impactantes de este método incluyen:

almacenar cualquier funcionalidad global una vez que se carga la primera vez,
permitiendo una transferencia de datos más fácil entre páginas y una interfaz de usuario más compleja
eliminando el costo de cargar una página completa después de una devolución de datos cuando solo necesita componentes específicos

Mayor posibilidad de sobrecomplicación

Este método de diseño puede permitir la pereza en el desarrollador y más interferencia de un usuario final. Como desarrollador, asegúrese de que su UI haga su trabajo (obtener, visualizar y enviar al servidor) y que el servidor haga su trabajo (proporcionar, validar y enviar a la base de datos). La mayoría de los usuarios finales no intentarán romper su sistema utilizando la información en un archivo javascript, pero incluir información sobre su estructura de datos es, en mi opinión, un problema.

Comience con una arquitectura fuerte!

Al igual que con cualquier página web, el procesamiento de los datos se puede mover directamente a los controladores de servicio en lugar de a las páginas, lo que podría dar como resultado una arquitectura que utiliza las siguientes capas:

Base de datos (almacenamiento de datos)
BL (Manejo y transporte de datos)
Interfaz de usuario (Visualización de datos e interacción del usuario)

Servicios sobre el manejo de la página

En mi opinión, el uso de servicios es casi un requisito para el código organizado y modulado en un sitio web. Los métodos estándar de obtención y publicación utilizados en sitios web compatibles con versiones anteriores también pueden usar estos servicios para acceder a servicios que representan objetos comerciales en lugar de páginas. Esto permite que su código sea más general en todos los módulos relacionados con los mismos objetos.

La actualización de una aplicación de una sola página se vuelve simplista, ya que puede inicializar cualquier UI para recoger los métodos de obtención o publicación y realizarlos utilizando métodos AJAX en lugar de generar una devolución de datos para eventos, por lo tanto, una instancia de página única.

Un efecto secundario del uso de estos servicios para manejar eventos de IU es que elimina la necesidad de manejar eventos en un código detrás del archivo, excepto en los eventos del ciclo de vida. Los eventos del ciclo de vida son útiles para manejar y modificar datos relevantes para mostrar en función de la situación, así como para modificar el html devuelto para aligerar la carga en el dispositivo del usuario.

¡Carga diferida!

Cualquier sitio web complejo vendrá con módulos complejos y muchos componentes únicos.

Un beneficio que obtiene al usar una aplicación de una sola página es que tiene la opción de defferir el tiempo de carga a un proceso ajax y hacerlo cuando lo desee para cualquier parte de su aplicación (es decir, primer intento de usar un módulo, tiempo muerto después de la inicial carga de página, etc.), haciendo que la carga inicial sea más rápida y el tiempo de procesamiento más controlado.

Mi lista de mejores prácticas

En cuanto a las mejores prácticas ... hay bastantes optimizaciones que podrían y deberían realizarse para un diseño que tenga la intención de utilizar este método, como por ejemplo:

almacenar información tal como viene, borrando cuando ya no es relevante
cargando en archivos script, html y js a través de ajax solo cuando sea necesario
utilizando datos cargados en una página en otra si puede ser en lugar de volver a cargar para cada nueva "página"
estructura de datos minimalista para la UI, ya que es un medio para mostrar y no para procesar.
no se obsesione con la validación en la IU porque sus servicios ya deberían estar construidos para validar cualquier información que se le envíe

Estas optimizaciones son útiles con el tiempo de carga, manejo de datos y asociaciones de objetos. Obviamente, esta no es una lista completa, pero es una gran ventaja comenzar a construir su aplicación de una sola página.

Finalmente, sugiero que investigue conceptos para diseñar para una web para ayudar a construir una base sólida. Después de eso, el resto son mejoras relativamente simples. (SUGERENCIA: una de esas mejoras es capturar todas las acciones que resultan en una devolución de datos y usar la información para crear una llamada asincrónica en su lugar).

Hay todo tipo de información sobre esto, y todo tipo de bibliotecas para usar, pero sugeriría usar su propio código tanto como sea posible para la funcionalidad básica y acceder al código de la biblioteca que resuelve sus problemas y hacer algunas investigaciones en lugar de tratando de implementar un sistema complejo con código de biblioteca genérico. Usar su código como ejemplo puede llevar a una sobrecarga más pequeña y un código más fuerte para su situación específica.

¡Buena suerte!