en este artículo, lo guiaré a través de algunos conceptos fundamentales para crear aplicaciones de una sola página (SPA) y algunos ejemplos de aplicación de una sola página creados usando componentes esenciales de Syncfusion Js 2.
¿qué es la aplicación de una sola página (SPA)?,
una aplicación de una sola página (SPA) es una aplicación web en la que se cargará una sola página de vista raíz desde el servidor y luego, en función de la interacción del usuario, la aplicación actualizará dinámicamente el contenido en el lado del cliente sin recargar la página.
los SPAs son más fluidos y receptivos que las aplicaciones multipágina convencionales y son los más adecuados para crear SaaS (Software como Servicio), Paneles empresariales y otras aplicaciones web basadas en formularios.,
ciclo de vida del SPA
hay múltiples marcos para construir un SPA, pero el concepto del SPA en cada marco sigue siendo el mismo. Obtenga toda la interfaz de usuario o vista del lado del cliente desde el servidor durante la carga inicial. Luego, según las interacciones del usuario o la navegación a través de la aplicación, la interfaz de usuario se actualizará dinámicamente en el lado del cliente.
SPA utiliza un ancho de banda mínimo para ponerse en contacto con el servidor para actualizar los datos de las interacciones del usuario, y para obtener los datos actualizados mientras se actualiza la página web.,
fuente de la imagen: https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
las ventajas de SPA
las aplicaciones de una sola página son más fluidas y receptivas que las aplicaciones de varias páginas. Debido a esto, estas aplicaciones también son adecuadas para dispositivos móviles, sin necesidad de construir una aplicación móvil nativa separada.
SPA Admite interacciones enriquecidas con múltiples componentes, como editores y ventanas emergentes, en la página de vista. Estos componentes pueden tener estados intermedios que pueden ser más difíciles de implementar con el renderizado del lado del servidor.,
aparte de la carga inicial de la página, SPA utiliza menos ancho de banda para actualizar la interfaz de usuario. No hay actualizaciones de Página mientras un usuario navega por la aplicación, lo que hace que la aplicación sea más cómoda de usar en dispositivos móviles.
como la capa de vista y la capa de datos se mantienen por separado en el SPA, será mucho más fácil implementarla en producción.
conceptos importantes de SPA
enrutamiento
en SPA, todo el contenido se mantiene con Url separadas y se puede navegar a contenido diferente rápidamente utilizando estas URL.,
Las aplicaciones de una sola página mantienen el estado mediante URLs o rastrean Estados internamente mientras un usuario navega por la aplicación.
el caso de uso principal con el enrutamiento de páginas en SPA es cuando una persona comparte la URL. Esa persona puede estar segura de que cualquiera que abra ese enlace verá exactamente el mismo contenido navegando a la URL exacta en la aplicación.
enlace y sincronización de datos
SPA utiliza un ancho de banda mínimo para ponerse en contacto con el servidor para obtener datos o para actualizar el modelo de datos después de la interacción del usuario en la aplicación.,
mientras un usuario navega por la aplicación, el modelo de datos en el servidor se actualizará simultáneamente utilizando una solicitud HTTP asíncrona (AJAX).
en función de las interacciones del usuario, los datos se actualizan al modelo de datos en el servidor. Y estos cambios de datos se actualizan de nuevo a la interfaz de usuario simultáneamente, lo que hace que el usuario siempre pueda ver una página web actualizada sin actualizarla.
tiempo de respuesta rápido y fluido
SPA es conocido por sus respuestas rápidas y sin fisuras a la interacción del usuario., Sus interfaces enriquecidas manejan la acción del usuario y actualizan la interfaz de usuario dinámicamente sin demora ni solicitud del servidor. De este modo, pueden evitar interrupciones en la experiencia y hacer que la aplicación web se comporte más como una aplicación de escritorio.
la separación de la vista y la capa de datos
SPA se construye utilizando patrones Modelo-Vista-controlador (MVC) y Modelo-Vista-modelo de vista (MVVM), pero aún puede construir la aplicación en su propio patrón MV*.,
el archivo de vista (junto con el paquete CSS) que contiene la representación de la interfaz de usuario para la aplicación y la capa de datos de la aplicación se mantienen bien por separado en la arquitectura SPA.
la separación de la vista y la capa de datos está destinada a que el usuario reutilice la página de vista para diferentes conjuntos de datos o altere la página de vista sin afectar el modelo de datos en producción.
la separación de la vista y la capa de datos en SPA facilita el control de versiones y los votos de reversión en la producción.,
ejemplos de aplicaciones de una sola página y demos
Estos son algunos de los ejemplos de aplicaciones de una sola página del mundo real creados con controles esenciales de Js 2.
Rastreador de gastos
El Ejemplo de aplicación de una sola página del Rastreador de Gastos Muestra varios controles esenciales de JS 2 juntos para rastrear y visualizar los gastos diarios con una excelente interfaz de usuario.,
Expense tracker – SPA
las diferentes páginas web de la aplicación, Dashboard, Transactions, y About, utilizan la cuadrícula de datos, gráficos y otros controles esenciales de JS 2 para visualizar el modelo de datos. Esta aplicación utiliza un mecanismo de enrutamiento de páginas para que las transiciones de páginas naveguen entre vistas.
Los usuarios pueden navegar entre estas vistas utilizando las URL, que se crearán para cada página web debido al enrutamiento., Dado que esta aplicación se construye utilizando la arquitectura SPA, todas las páginas web se descargarán en la carga inicial de la aplicación web. Entonces las transiciones de página sucederán completamente en el lado del cliente sin solicitar ninguna página web del servidor. Mientras navega a diferentes vistas, la URL de la aplicación se actualizará en consecuencia.
el enlace de datos tiene un papel importante en el SPA. Dado que todas las páginas web se descargan en el lado del cliente, los componentes de la interfaz de usuario deben actualizarse con los datos actualizados en ese momento., Al realizar cualquier acción de edición en la página web de la Transacción, los cambios se actualizarán al modelo de datos simultáneamente. Estos cambios también se reflejarán en los componentes de la interfaz de usuario disponibles en otras páginas.
dado que los SPA son muy adecuados para renderizar tanto en navegadores de escritorio como en entornos móviles, esta aplicación está construida con un diseño fluido y receptivo para renderizar en dispositivos móviles.
la demostración en vivo de esta aplicación está disponible en nuestro sitio web y puedes encontrar la fuente en GitHub aquí.,
Expense Tracker – Mobile view
Web Mail
Web Mail es un ejemplo de aplicación de una sola página con una interfaz de usuario similar a Outlook creada para administrar un buzón.
esta aplicación está construida con interfaces enriquecidas y un diseño interactivo utilizando componentes Syncfusion como el acordeón, ListView y Sidebar como una página web de vista única. La aplicación se divide en tres secciones para administrar el buzón de correo: carpetas de correo, elementos de correo y el área de contenido de correo., Debido a su diseño responsivo, esta aplicación se puede representar con facilidad a través de dispositivos móviles y navegadores de escritorio.
el enlace de Datos juega un papel importante en esta aplicación para actualizar el buzón y para mostrar el contenido del correo basado en la interacción del usuario. Los elementos de la lista de correo se actualizarán con el contenido apropiado según la selección del usuario en las carpetas de correo. El área de correo se actualizará con el contenido actualizado cuando el usuario seleccione un elemento de correo de la lista de correo.
Puede encontrar la demostración en vivo de esta aplicación en nuestro sitio web y puede encontrar la fuente en GitHub.,
Web Mail – SPA
La aplicación maneja múltiples interacciones de usuario y actualiza el contenido en consecuencia sin ninguna actualización de página, haciendo que la aplicación parezca una aplicación de escritorio.
el diseño responsivo de esta aplicación hace que sea fácil de renderizar en dispositivos móviles con la mejor interfaz de usuario.,
Calculadora de préstamos
La calculadora de préstamos es un ejemplo de aplicación de una sola página que muestra componentes como la cuadrícula de Datos, Gráficos, control deslizante y otros juntos en una página de vista única para calcular el pago de un préstamo en función del monto, el interés y el plazo del préstamo.,
Loan Calculator – SPA
el enlace de datos en esta aplicación funciona de tal manera que, al ajustar los valores de un monto de préstamo, interés y plazo utilizando el componente deslizante, los datos para los componentes de gráfico y cuadrícula se actualizarán con los datos apropiados en consecuencia.
también se puede actualizar el contenido del gráfico eligiendo el mes deseado para ser visto usando el control DatePicker. Cuando se cambia el mes a visualizar, los datos del mes correspondiente se devolverán desde el modelo., Lo mismo se actualizará en el control de gráficos también.
Puede encontrar la demostración en vivo de esta aplicación en nuestro sitio web y puede encontrar su fuente en GitHub.
Health Tracker
El Health Tracker es otro ejemplo de aplicación de una sola página para rastrear la salud de una persona mediante el seguimiento de su ingesta de alimentos, la distancia recorrida, el agua consumida y la duración del sueño.
esta aplicación está construida con interfaces enriquecidas y un diseño interactivo utilizando controles Syncfusion como gráficos y tarjetas como una página web de una sola vista. El enlace de datos se utiliza para mostrar los datos en el gráfico., La fuente de esta muestra se puede encontrar en esta ubicación de GitHub.
Health Tracker – SPA
Diagram Builder
El diagram Builder es una aplicación que ayuda en la creación de varios diagramas para diferentes casos de uso, como organigramas, árboles jerárquicos y mapas mentales.
esta aplicación está construida con controles potentes y ricos en funciones como diagrama, selector de Color, diálogo y control deslizante de rango. La fuente de esta muestra se puede encontrar en esta ubicación de GitHub.,
Diagram Builder – SPA
Story Estimator
El Story Estimator es una herramienta eficaz y ágil para estimar puntos de historia para historias utilizando técnicas de planificación de Poker.
esta aplicación está construida con controles como DataGrid, gráficos, Máscara de entrada, Botón, Botón de opción y casilla de verificación. La fuente de esta muestra se puede encontrar en esta ubicación de GitHub.,
Story Estimator – SPA
gráfico de acciones
El Gráfico de acciones se utiliza para rastrear y visualizar el precio de las acciones de cualquier empresa durante un período de tiempo específico.
esta aplicación está construida con los controles de gráficos, barra de herramientas, DateTimePicker, desplegable y botón. Puedes encontrar su fuente en GitHub.,
Stock Chart – SPA
Asset Management
La aplicación de gestión de activos es un ejemplo de aplicación de una sola página que se utiliza para rastrear y visualizar los activos de software y hardware de una organización.
esta aplicación está construida con los controles DataGrid, Charts, TreeMap y DateRangePicker. Puedes encontrar su fuente en GitHub.,
Asset Management – SPA
Consideraciones para SPA
Además de las múltiples ventajas de la aplicación de una sola página, hay algunas consideraciones especiales a tener en cuenta con SPA:
- Uno debe garantizar principios orientados a objetos al crear un SPA. Si se ignora, dará lugar a fugas de memoria dentro del navegador. Por lo tanto, haciendo que la aplicación se ralentice, degradando así su rendimiento.
- maneje el botón Atrás del navegador correctamente en aplicaciones de una sola página., Si no, el usuario puede hacer clic en el botón de retroceso del navegador, lo que lleva a la pérdida del flujo de trabajo.
sin embargo, las técnicas adecuadas pueden abordar todos estos problemas.
resumen
en esta publicación de blog, vimos los beneficios de las aplicaciones de una sola página sobre las aplicaciones de varias páginas. Además, vimos los ejemplos de aplicaciones de una sola página del mundo real construidos con múltiples controles Syncfusion Essential Js 2.
los ejemplos de aplicación de una sola página discutidos anteriormente también están disponibles para Angular, JavaScript, ASP.NET núcleo, y ASP.,Net MVC plataformas, y usted puede encontrar la demostración en vivo de estas aplicaciones en nuestro sitio web. También puede consultar otras aplicaciones del mundo real creadas con componentes Syncfusion aquí.
recomendamos revisar el código fuente usted mismo, Disponible en GitHub, que se puede ejecutar fácilmente, para ver cómo se construyen las aplicaciones de una sola página utilizando componentes Syncfusion.