estamos tan acostumbrados a estar en línea y con un teléfono celular con nuestras manos, que a menudo ni siquiera nos detenemos a pensar en qué tipo de tecnología nos está ayudando a ejecutar esta o aquella aplicación. Por lo general, eso no es un problema, no pensamos en la electricidad cuando encendemos las luces., Sin embargo, cuando se enfrenta a la decisión de crear una aplicación para su negocio, entonces es propicio entender lo que significa SPA (aplicación de una sola página) y en qué se diferencia de las aplicaciones de varias páginas (MPA).

en este artículo, hablaremos sobre qué es la aplicación de una sola página (SPA), qué beneficios aporta SPA a los usuarios y empresas, cómo funciona con SEO, cuáles son sus pros y contras y, finalmente, cómo funciona SPA con tecnologías como Blazor, Angular, React.js, y Vue.js.,

======================

en este número:

• Definición de aplicación de Página única
• Ventajas de la aplicación de Página única
• Desventajas de la aplicación de Página única
• Problemas de migración de aplicaciones de Página única
• beneficios de SPA para usuarios
• beneficios de SPA para empresas
• arquitectura de aplicación de Página única
• SPA y Angular, React.js, Vue.js, and .,NET

======================

Qué significa la aplicación de una sola página y por qué necesitamos la aplicación de una sola página

una aplicación de una sola página es una aplicación que no necesita recargar la página durante su uso y funciona dentro de un navegador. Piensa en las aplicaciones que usas a diario: Facebook, Google Maps, Gmail, Twitter, Google Drive o incluso GitHub. Todos estos son ejemplos de un SPA.

una de las mejores ventajas de un SPA correctamente configurado es la experiencia de usuario (UX), donde el usuario disfruta de un entorno natural de la aplicación sin tener que esperar a que la página se vuelva a cargar y otras cosas., Usted permanece en la misma página, que es alimentado por el lenguaje de programación JavaScript.

antes de ir más lejos, hay tres abreviaturas que verá en este artículo:

• SPA-aplicación de una sola página (como hemos mencionado anteriormente)
• MPa – aplicación de varias páginas (una aplicación tradicional que carga nuevas páginas cuando hace clic en un enlace)
• PWA-aplicación web progresiva (un sitio web que se construye utilizando JavaScript o sus marcos y puede actuar como una aplicación, es decir,,, puede, por ejemplo, agregarlo a la página de inicio de su teléfono móvil como una aplicación)

ventajas de la aplicación de una sola página: ¿por qué usar la aplicación de una sola página?

la principal ventaja de las aplicaciones de una sola página es su velocidad. La mayoría de los recursos que SPA necesita (HTML + CSS + Scripts) se cargan al iniciar la aplicación y no es necesario recargarlos durante el uso. Lo único que cambia son los datos que se transmiten hacia y desde el servidor. Como resultado, la aplicación es muy sensible a las consultas del usuario y no tiene que esperar a la comunicación cliente-servidor todo el tiempo.,

numerosos estudios de Google y hallazgos clave de empresas como Amazon y Wal*Mart muestran que si una página tarda más de 200 milisegundos en cargarse, tiene el potencial de arruinar su negocio o, al menos, le costará mucho dinero. Por ejemplo, Amazon dice que 1 segundo de retraso adicional en la carga de la página les cuesta el 1% de las ventas (que, teniendo en cuenta la cantidad de ventas de Amazon, es de $1.6 mil millones por año.)

desde el punto de vista del desarrollador, la creación de dicha aplicación se optimiza y optimiza., No es necesario escribir código para renderizar las páginas en el servidor. Ni siquiera necesitas un servidor para comenzar el proceso de desarrollo. Puede comenzar desde un archivo para comenzar. Además, el desarrollador puede reutilizar completamente el mismo código backend del lado del servidor y la API eficiente para la aplicación web y una aplicación móvil nativa.

Las aplicaciones de una sola página son excelentes cuando tienes un equipo de desarrolladores trabajando juntos., Permite a los desarrolladores de backend centrarse en la API, mientras que los desarrolladores de frontend pueden prestar más atención a la creación de la mejor experiencia de usuario basada en la API de backend y la implementación de una hermosa interfaz de usuario.

depurar una aplicación de una sola página también es fácil utilizando el navegador Chrome, ya que tiene herramientas especiales para Angular Batarang y React (las tecnologías utilizadas para SPAs.) Mediante una consola, puede supervisar las operaciones de red, así como investigar varios elementos de Página y datos asociados.,

el proceso de almacenamiento en caché también es bastante eficiente: la aplicación envía solo una solicitud, almacena todos los datos transmitidos y puede usar estos datos. Esto es especialmente importante en momentos en que el usuario puede tener una conectividad deficiente: aún puede usar su aplicación, ya que se sincroniza con el servidor cuando la conexión mejora.

hemos mencionado las aplicaciones web progresivas (PWA) anteriormente, y los SPAs se pueden transformar fácilmente en una PWA. A su vez, esto permite a los desarrolladores proporcionar almacenamiento en caché local y ofrecer la experiencia fuera de línea a los clientes y usuarios.,

desventajas de la aplicación de una sola página: ¿por qué no una aplicación de una sola página?

a pesar de todas las ventajas de las aplicaciones de una sola página, nada es perfecto. Echemos un vistazo a los momentos en que el SPA puede no ser una solución ideal.

¿Qué queremos decir con desventajas de aplicación de una sola página?

Las aplicaciones de una sola página ponen una carga más significativa en el navegador. Por ejemplo, si sus usuarios tienen dispositivos de bajo consumo, tendrán una experiencia de aplicación pobre en términos de velocidad.

surgen problemas adicionales con JavaScript porque debe asegurarse de que no haya fugas de memoria., Dado que la aplicación puede ejecutarse durante mucho tiempo, horas a la vez (a diferencia del MPA, donde la vida útil de una página se contaba en minutos), debe asegurarse de que su SPA no consuma más memoria de la que necesita. De lo contrario, el placer de las páginas de carga rápida será destruido por la lentitud de la memoria no disponible en el dispositivo del usuario.

una desventaja más de JavaScript es que los usuarios simplemente pueden deshabilitarlo en sus dispositivos, y luego debe pensar en formas adicionales de cómo pueden acceder a la información en su sitio web o su aplicación sin JavaScript.,

otra cosa crítica a recordar sobre el uso o la construcción de un SPA es la seguridad. Debido a cross-site scripting (XSS) y al hecho de que no se cargan nuevas páginas, los hackers pueden obtener acceso a su sitio web e inyectar nuevos scripts en el lado del cliente.

por lo tanto, si está pensando en construir una aplicación de una sola página para su negocio, asegúrese de tomar las precauciones necesarias para que esto no suceda.

otro problema de seguridad es la privacidad de los datos confidenciales. La carga inicial de la página no debe contener ninguna información que no esté disponible para todos los usuarios., Dado que todo el SPA se carga de inmediato al dispositivo del Usuario, es posible que accidentalmente regale datos que deberían estar detrás de un inicio de sesión o que no estén disponibles en absoluto.

optimización SEO para aplicaciones de una sola página

la optimización SEO es complicada cuando se tiene una aplicación de una sola página, por lo que decidimos dedicarle una sección separada en el spa desventajas.

es más seguro usar SPAs cuando no confías tanto en la optimización de motores de búsqueda (SEO), por ejemplo, si solo se puede acceder a tu aplicación a través de un inicio de sesión.,

Si tiene un blog, por otro lado, es más difícil para los motores de búsqueda indexar su sitio web de SPA en comparación con las páginas tradicionales renderizadas por servidor. Esto se debe a que la URL realmente no cambia, y las diferentes páginas generalmente no tienen sus direcciones URL.

por lo tanto, nuestro consejo para usted: si no desea molestarse con la configuración de URL, elija un marco que admita el renderizado del lado del servidor (SSR). Además, no utilice ventanas iframe, utilice direcciones URL estáticas y optimice los scripts en su página para acelerarlos., Finalmente, asegúrate de que tus páginas tengan HTML5 para que Google crawler pueda acceder a ellas.

también debe prestar especial atención a los mensajes del servidor, especialmente los errores 200 y 404.

problemas de migración de aplicaciones de una sola página

las aplicaciones de una sola página suenan como si hubieran sido enviadas desde el cielo para simplificar la experiencia de los usuarios con el sitio web. Es rápido y conveniente; es casi perfecto. ¿Es realmente así?,

cuando esté pensando en migrar a la aplicación de una sola página desde un MPA, debe detenerse y considerar los pros y los contras (que hemos mencionado anteriormente.)

cuándo usar un SPA

usted podría estar preguntando, » ¿cuándo debo usar una aplicación de una sola página?»Cuando tienes un negocio o un sitio web personal que necesita una plataforma dinámica y un pequeño volumen de datos, la aplicación de una sola página es una buena idea. También es una gran opción si está planeando desarrollar una aplicación móvil en el futuro, ya que, como hemos mencionado anteriormente, la API backend se puede utilizar tanto para la web como para aplicaciones móviles.,

el principal inconveniente es el SEO, pero la arquitectura es adecuada para plataformas de Software como servicio (SaaS), comunidades cerradas y redes sociales (por lo que Facebook lo usa). La razón de esto es que estos sitios no necesitan optimización para la búsqueda en Google.

cuándo usar un MPA

Las grandes empresas con una amplia gama de servicios y productos se beneficiarían de una aplicación más tradicional de varias páginas. Tales negocios incluyen tiendas en línea, sitios de empresas, catálogos y mercados., Administrar una aplicación de este tipo también sería mucho más fácil, ya que es posible conectarla a múltiples bases de datos de usuarios.

finalmente, este tipo de empresas necesitarían opciones de optimización de motores de búsqueda ya que muchas de ellas querrían encontrarse en Google, Bing y otros motores de búsqueda (para vender los productos o servicios que ofrecen).)

beneficios del SPA para los usuarios

la principal ventaja de las aplicaciones de una sola página para los usuarios finales es, por supuesto, la velocidad a la que se carga la aplicación, así como la capacidad de trabajar sin conexión.,

SPA ofrece una experiencia de usuario lineal, lo que significa que es fácil navegar por el sitio web y comprender dónde encontrar esto o aquello. Por ejemplo, el Saucony SPA tiene un comienzo, medio y final claros. Utilizando el diseño UI / UX, los desarrolladores de la aplicación Saucony han utilizado el desplazamiento de paralaje y las transiciones para hacer que el viaje del cliente sea placentero.

las aplicaciones de una sola página también son excelentes en dispositivos móviles, ya que la mayoría de las veces, todo lo que los usuarios necesitan es desplazarse (piense en el muro de Facebook sin fin). No tienes que hacer clic en ningún enlace, y solo disfrutar del desplazamiento.,

beneficios del SPA para empresas

Cuando se trata de empresas, el desarrollo de aplicaciones de una sola página generalmente toma menos tiempo, ya que la misma API de backend se puede usar tanto para la web como para dispositivos móviles. Como resultado, el flujo de información se optimiza y se vuelve mucho más fácil crear una aplicación móvil nativa independiente.

Teniendo en cuenta las ventajas en la optimización de la velocidad del SPA, las empresas también pueden beneficiarse porque los usuarios estarían más interesados en usar una aplicación que sea rápida (ergo, comprar algo o simplemente usar la aplicación más a menudo.,)

arquitectura de aplicación de una sola página y cómo funciona la aplicación de una sola página

¿Cómo funcionan las aplicaciones de una sola página? La arquitectura de aplicación de una sola página es bastante sencilla: consiste en las tecnologías del lado del cliente (en HUSPI, confiamos en React.JS, Angular y Vue.js) y las tecnologías del lado del servidor (para las que solemos usar Node.js)

en términos de la forma en que el sitio se presenta al usuario, hay tres opciones para elegir.,

renderización del lado del cliente (CSR)

1. El navegador envía una solicitud de archivo HTML desde el servidor
2. El servidor responde rápidamente con un simple archivo HTML con estilos y scripts vinculados
3. El usuario ve una página vacía o alguna imagen de cargador mientras el JS está ejecutando
4. La aplicación obtiene datos, genera vistas e inyecta en DOM
5. La aplicación está lista para usar

puede ser una opción para sitios web simples, pero tenga en cuenta que la representación de la información en el lado del cliente requiere una gran cantidad de recursos del dispositivo y podría sobrecargar el navegador., Como resultado, esta opción podría ser la más lenta de las tres. Al mismo tiempo, si tiene un sitio web de alto tráfico, CSR sería mejor, ya que presentaría la información al usuario sin tener que hablar demasiado con el servidor.

Además, si necesita opciones para compartir en redes sociales, tenga en cuenta que todas las páginas en CSR generalmente tienen los mismos valores de open graph (og:), por lo que debe usar SSR o SSG.,ng (SSR)

1. El navegador envía una solicitud de archivo HTML desde el servidor
2. El servidor obtiene todos los datos necesarios, renderiza la aplicación y genera el archivo HTML de la aplicación sobre la marcha
3. El usuario ve el contenido disponible
4. El marco de aplicación de una sola página es lo que une eventos, genera un DOM virtual y realiza otras acciones
5. La aplicación está lista para usar

confiamos en huspi, porque combina la velocidad de la aplicación de una sola página y no sobrecarga el navegador del usuario, haciendo que la aplicación sea rápida.,

Static Site Generators (SSG)

1. El navegador envía una solicitud de archivo HTML desde el servidor
2. El servidor responde rápidamente con un archivo HTML ya preparado
3. El usuario ve la página
4. La aplicación obtiene datos, genera vistas e inyecta en DOM
5. La aplicación está lista para usar

buena opción y rápida, pero recuerde que si tiene contenido dinámico en su sitio web, los generadores de sitios estáticos no serían tus mejores amigos porque están orientados más a páginas estáticas (como ya podrías haber adivinado por el nombre.,)

cómo hacer una aplicación de Página única usando Angular, React.js, y Vue.js

mientras escribía este artículo, he consultado con nuestros desarrolladores para entender cuáles son las mejores prácticas del mundo en términos de creación de aplicaciones de una sola página que se utilizan aquí en HUSPI.

los desarrolladores de HUSPI han probado numerosos frameworks y tienen diferentes fondos de trabajo, pero se unen para decir que hay tres frameworks principales para el frontend-Angular, React y Vue – y hay uno principal (su favorito) para el backend – Node.js., Hay un puñado de otros frameworks disponibles en el mercado (como Ember o Knockout), pero no los usamos tanto.

para crear una aplicación de una sola página, necesita AJAX y HTML5 para crear páginas responsivas, mientras que Angular, React y Vue son responsables de manejar el «trabajo pesado» en el lado del cliente de un SPA.

¿Qué elegir – Reaccionar, Angular, o Vue?

hemos escrito varios artículos sobre el tema de la comparación entre estos marcos., Sin embargo, vamos a compararlos de nuevo para ver si tienen ventajas en términos de creación de aplicaciones de una sola página.

Angular y aplicaciones de una sola página

Angular es un marco de JavaScript que fue introducido por Google en 2010. Entre las tres opciones que estamos comparando, Angular es la más antigua, y está basada en TypeScript. Debido a TypeScript, Angular es una gran opción para usar por grandes equipos de desarrolladores y empresas que ya utilizan esta tecnología en sus otros productos.

es el más maduro entre los frameworks y tiene un número decente de colaboradores en GitHub., Puede ser más difícil en términos de la curva de aprendizaje, pero al mismo tiempo, vale la pena.

entre los clientes que usan Angular para sus aplicaciones de una sola página están Google (y sus productos como Gmail y Google Drive) y Wix, por lo que si decides crear una aplicación de una sola página usando Angular, estarás en gran compañía.

# Contributors on GitHub: 997 (as of September 2019)
# Library size: 500+ KB

Angular community está a punto de lanzar Angular 9.0.0 – ¿qué esperar de la nueva versión de Angular?

React.las aplicaciones js y de una sola página

reaccionan.js es una biblioteca JavaScript creada en 2013 por Facebook., Lo Facebook Instagram y WhatsApp lo utilizan ampliamente en toda su línea de productos, incluidas aplicaciones de una sola página tan conocidas como Facebook, Instagram y WhatsApp. Además de Facebook, Uber también utiliza React.biblioteca js para sus productos.

de los tres competidores, React tiene la cantidad más considerable de colaboradores en GitHub, más de mil, lo que ayuda a mantenerse al día con los diversos desafíos que los desarrolladores enfrentan todos los días.

nuestros desarrolladores aquí en HUSPI también prefieren React para los proyectos que desarrollamos (a menos que haya requisitos para otro framework)., Es lo suficientemente ligero y maduro para ser probado y probado y ser encontrado digno.

React es la opción correcta para aquellos que recién están comenzando con los frameworks frontend de JavaScript, así como para startups y desarrolladores a los que les gusta ser flexibles. React ofrece buenas opciones de integración con otras tecnologías y frameworks, lo que es muy útil cuando se trabaja en un proyecto con un gran ecosistema.

# Contributors on GitHub: 1,336 (as of September 2019)
# Library size: 100KB

Vue.JS y aplicaciones de una sola página

Vue es la más joven de las tres, creada en 2014 por un ex empleado de Google Yuxi (Evan) You., A pesar de que ninguna gran corporación apoya su desarrollo, Vue ha logrado aumentar su popularidad. Actualmente, empresas como GitLab, Baidu y Alibaba utilizan Vue.js para sus necesidades.

si prefiere simplicidad y flexibilidad en sus frameworks front-end, entonces Vue es una buena opción. Además, es el más ligero de todos.

# Contributors on GitHub: 281 (as of September 2019)
# Library size: 80KB

recientemente, escribimos un artículo sobre React.js vs Vue.JS

aplicaciones de una sola página y ASP.NET (Blazor)

decidimos añadir el ASP.NET opción a la lista de frameworks y tecnologías para las aplicaciones de una sola página., Hay un chico nuevo en la cuadra llamado Blazor. Es un. NET framework que utiliza C#/Razor y HTML que se ejecuta en el navegador con WebAssembly, de acuerdo con el repositorio GitHub.

Microsoft anunció el lanzamiento de este marco a principios de 2019 y actualmente, parece que la versión 1.0 está lista. Este serio respaldo de una gran corporación es una gran ventaja de Blazor porque inmediatamente hace que este instrumento de código abierto sea parte de la comunidad de más de 60,000 colaboradores de OSS con más de 3,700 colaboradores de empresas de OSS.,

Blazor es una herramienta conveniente porque no hay necesidad de TypeScript o JavaScript, puede escribir toda la lógica en C#. Dicho esto, Blazor ofrece interoperabilidad con API y bibliotecas de JavaScript, por lo que si su ecosistema es grande y consta de bibliotecas JS, no se pierde en la transición.

. NET Blazor también ofrece dos opciones diferentes: Blazor solo para el cliente y Blazor del lado del servidor. Este último debe enviarse con. NET Core 3.0.

¿significa que Blazor matará a Angular, React o Vue? No lo creemos. Sin embargo, es algo que hay que vigilar.

para usar SPA .,Red, también puede utilizar ASP.NET básica y ASP.NET MVC. Cómo crear una aplicación de una sola página en ASP.NET ¿MVC? Lo configura en el backend para servir el HTML en el frontend.

# Contributors on GitHub: 67 (as of November 2019) + .NET contributors of 60K+

conclusión

Teniendo en cuenta el auge de los dispositivos móviles y un estilo de Vida on-the-go, las aplicaciones de una sola página son excelentes. Si su negocio iría para un SPA o un MPA-que es más de una pregunta para sus analistas de negocios y requisitos.,

en HUSPI, tenemos analistas de negocios en el equipo que pueden ayudar a comprender y definir las necesidades técnicas del proyecto (y desarrolladores que pueden construir la arquitectura y el proyecto desde cero).