¿Cuáles son las ventajas de SPA (aplicación de una sola página) sobre una aplicación web normal?

Pros

1. Sin actualización de página

Esto es obvio, pero ¿los beneficios son tan claros para el diseñador? Hay una razón por la cual los sitios de una sola página se están convirtiendo rápidamente en estándar en dispositivos móviles. Un sitio sin actualización de página es como un buffet sin una línea: los usuarios obtienen exactamente lo que quieren cuando quieren. La capacidad de respuesta aumenta enormemente, y el mantenimiento de back-end también se vuelve más fácil.

2. Calidad sobre cantidad

Una vez eliminada la carga del diseño y la optimización de página por página, los desarrolladores pueden centrarse en una sola página de calidad. Después de todo, no nos engañemos: el buen diseño requiere tiempo y concentración. Cuantas menos páginas tenga que tratar, mejor será la experiencia general del usuario.

3. Mejor ranking de la página de Google

Los expertos en SEO pueden llegar a esta conclusión antes que nadie. Los sitios de una sola página son, de hecho, una sola página. ¿Todos los enlaces entrantes que normalmente se dividirían en su sitio de varias páginas? Sí, todos están vinculados a una página en su lugar. Esto explota tu ranking de página de Google. ¿Mencionamos que las arañas de los motores de búsqueda adoran los sitios de una sola página debido a su alta densidad de contenido?

4. Móvil preferido

Una gran cantidad de estadísticas revela que los usuarios de dispositivos móviles tienen más probabilidades de salir de un sitio de carga lenta (o un sitio con varias páginas de carga lenta), que los usuarios de computadoras de escritorio / portátiles, que pueden permitirse ser un poco más pacientes. Por lo tanto, no debería sorprendernos que los sitios de una sola página sean el paradigma de diseño receptivo de elección para el mercado móvil.
También hay algo que decir sobre el pequeño tamaño de las pantallas de los teléfonos inteligentes. Las limitaciones exigen simplicidad, por lo que un marco mental de “aplicación nativa” de una sola página funciona a su favor.

5. Destacarse de la multitud

Por último, los sitios de una sola página todavía no son la norma. Use esto para su ventaja y únase a las filas de la multitud de una sola página. El diseño de una sola página está (al menos por ahora) asociado con nuevas empresas inteligentes y lean. Use ese atractivo principal para su ventaja.

Contras

1. Tamaño de archivo grande

No hace falta decir que si su página es demasiado gorda, se cargará lentamente. Más lento que una página de inicio normal. Pero esto no es tanto una advertencia como un consejo: el diseño bueno y receptivo de una sola página no debe ser apilado de video o imagen de todos modos. ¡Tranquilízate con los guiones! El desplazamiento no es lo peor del mundo, y muchos usuarios están de acuerdo.

2. Mayor riesgo, mayor recompensa

Dado que los sitios de una sola página no son la norma, corre el riesgo de incomodar (o peor aún, molestar ) a su base de usuarios. Una vez más, más consejos que advertencias: no intentes reinventar la rueda aquí. El sitio web tradicional de varias páginas es un retroceso a las editoriales y la era pasada de la impresión. Un sitio de una sola página es como un desplazamiento con CSS3. Diseñe según sus fortalezas y defienda siempre la experiencia del usuario.

El SPA tiene los siguientes beneficios.

1. SPA es casi como la tecnología del servidor del cliente, donde la página HTML es estática y todos los cambios dinámicos ocurren en el navegador. En anteriores PHP, JSP, ASP, HTML se mezclaba con la lógica del lado del servidor y se generaba en el servidor. El servidor tuvo que procesar más carga.
2. El SPA separa la IU y los datos, el SPA se comunica con el servidor solo con la API JSON REST (Enviar / Recibir JSON usando AJAX), esto también permite que ambas partes se desarrollen y prueben independientemente.
3. Puede falsificar fácilmente la comunicación de datos JSON para probar SPA, y también puede falsificar fácilmente las solicitudes JSON al servidor para escribir pruebas unitarias.
4. El SPA es rápido, ya que la mayoría de los recursos HTML + CSS + Scripts solo se cargan una vez, a lo largo de la vida útil de la aplicación, solo los datos se transmiten de un lado a otro. (Reducir el uso de ancho de banda también es una ventaja).
5. SPA puede utilizar el almacenamiento en caché y el almacenamiento local de manera efectiva.
6. Es fácil de escalar y es fácil almacenar en caché los recursos.
7. SPA funciona y se siente más como una aplicación que como una página web.
8. Problema con el botón Atrás, la mayoría de las comunicaciones se realizan utilizando las promesas de AJAX, la pérdida de la página posterior no es un problema. En la operación HTTP Post, la falla en el lado del servidor requeriría principalmente rehacer toda la entrada de datos. Perdería el botón de retroceso y la navegación accidental en otras páginas resultaría en rehacer la entrada de datos. Estos problemas se pueden solucionar muy bien.
9. Los SPA son fáciles de depurar con Chrome, ya que puede monitorear las operaciones de la red, investigar los elementos de la página y los datos asociados.

Dicho todo esto, también es difícil, ya que existen numerosos marcos JavaScript y hay una gran curva de aprendizaje con cada uno de ellos.

Descargo de responsabilidad: soy autor de Atoms.js, eche un vistazo a nuestro framework neurospeech / atom.js, que es de código abierto y está listo para la pila de aplicaciones empresariales.

Echa un vistazo a https://github.com/neurospeech/a …

Twitter: Atoms.js (@atomsjs) | Gorjeo
Fuente de GitHub: neurospeech / átomos.js
Documentación: Componentes web JavaScript de grado empresarial inspirados en Flex y Silverlight

Cuando nació la web, originalmente solo eran documentos de hipertexto vinculados entre sí. Luego hubo una introducción de una etiqueta de formularios que inició la era de las “aplicaciones web”.

En estos días hay una gran demanda de aplicaciones web muy sofisticadas y complejas que están reemplazando a las antiguas aplicaciones de escritorio en todas partes. Y aunque el mundo se está moviendo lentamente de las aplicaciones web basadas en navegador al dominio móvil, todavía existen dos patrones de diseño principales para el desarrollo de aplicaciones web: aplicaciones web de múltiples páginas (MPA) y aplicaciones web de una sola página (SPA).

MPA es un tipo tradicional de aplicación web. Esto significa que cada vez que la aplicación necesita mostrar los datos o enviarlos al servidor, debe solicitar una nueva página del servidor y luego presentarla en el navegador web. No hay nada malo con este enfoque para aplicaciones simples. Pero si es necesario crear una interfaz de usuario enriquecida, la página puede volverse muy compleja y estar cargada de muchos datos. Generar páginas complejas en un servidor y transferirlas al cliente a través de Internet y procesarlas en el navegador lleva tiempo y degrada la experiencia del usuario debido a eso. A principios de la década de 2000, el MPA se mejoró al introducir AJAX, que permitió actualizar solo partes de la página y no toda la página. Ayudó a mejorar la experiencia del usuario, pero agregó complejidad a la página en sí.

Diez años después surgió el patrón SPA. SPA es esencialmente una evolución del patrón de diseño MPA + AJAX, donde la única página de shell se genera en el servidor y toda la interfaz de usuario se representa mediante el código JavaScript del navegador. SPA solicita el marcado y los datos por separado, y muestra las páginas directamente en el navegador. Podemos hacer esto debido a los nuevos marcos JavaScript MVVM avanzados que surgieron como AngularJS y KnockoutJS.

¿Cuáles son las ventajas y desventajas que tiene el SPA sobre el AMP?

Ventajas de SPA sobre MPA:

• Tiempos de carga de página más rápidos
• Experiencia de usuario mejorada porque los datos se están cargando en el servidor de formulario en segundo plano
• No es necesario escribir el código para representar páginas en el servidor
• Desacoplamiento del desarrollo front-end y back-end
• Desarrollo móvil simplificado; puede reutilizar el mismo backend para la aplicación web y la aplicación móvil nativa

Desventajas de SPA para MPA:

• Marcos de cliente pesados ​​que deben cargarse en el cliente
• El código de la interfaz de usuario no se compila, por lo que es más difícil de depurar y está expuesto a posibles usuarios malintencionados
• Implicaciones de SEO (optimización de motores de búsqueda); Como sus páginas están construidas en el navegador, el rastreador del motor de búsqueda verá una versión diferente de la página que la de sus usuarios

Así es como las aplicaciones web han evolucionado a lo largo de los años.

1. Las aplicaciones web tradicionales (no SPA) tienden a actualizar toda la página cuando un usuario envía datos nuevos críticos (por ejemplo, tipo de solicitud) o solicitudes (por ejemplo, enviar formulario). Ejemplos de esto incluyen aplicaciones creadas con JSP.
• Obliga a que la mayor parte de la actividad de validación de datos ocurra en el servidor.
• La determinación de que el envío de la página X con los datos Y debería llevar al usuario a la página Z se realiza utilizando la arquitectura modelo-vista-controlador (MVC), que se implementa en el servidor
2. Con el advenimiento de AJAX, las aplicaciones web comenzaron a actualizar solo la parte relevante de la página cuando un usuario envía nuevos datos o solicitudes. Por ejemplo, si un usuario selecciona state = Massachusetts, la aplicación web puede usar inmediatamente una solicitud AJAX para validar si el código postal ingresado es válido para el estado de MA. Sin embargo, una vez que el usuario envía un formulario, normalmente la aplicación web lo lleva a una nueva página HTML.
• Parte o la mayor parte de la actividad de validación de datos puede ocurrir en el cliente
• La implementación MVC está en el servidor
3. Finalmente, un SPA mueve gran parte de la implementación de MVC al cliente (usando marcos de plantillas como bigotes y / o marcos MVC como Backbone, Ember o Angular). Por lo tanto, la nueva “página” ahora es virtual y simplemente implica la determinación del conjunto correcto de widgets y datos para representar el nuevo estado de la página, pero no requiere una nueva página HTML real . Por lo tanto, se llama una aplicación de página única.
• Gran parte de la actividad de validación de datos puede ocurrir en el cliente
• La implementación MVC está en el cliente

Lo que siento es la razón principal por la cual las personas se están cambiando a SPA porque es nuevo y único y sorprendería a los usuarios que están buscando un sitio de este tipo por primera vez. UX es obviamente mejor, pero de nuevo depende de qué tipo de sitio sea. Tener un sitio de cartera en un SPA, por ejemplo, es preferible a tener páginas separadas para trabajo / investigación / contacto, etc. A las personas que visitan su sitio no les gustaría cavar a través de múltiples niveles de un sitio, esperando que la página cargue cada hora. Lo encontrarían útil y consumiría menos tiempo si pueden encontrar todo lo que desean en una sola carga de página. Obligaría a los visitantes a la acción y puede hacer que los visitantes se concentren en lo que usted quiere que se concentren. Además, siempre es más fácil diseñar una sola página para varios tamaños de pantalla y también llevaría menos tiempo probarla.

También puede consultar la siguiente respuesta de la pregunta de Stackoverflow donde la gente mencionó sobre el rendimiento y las flexibilidades también verifique la discusión de comentarios sobre la pregunta.
http://stackoverflow.com/questio …

Gracias por el A2A.

Aquí tiene una comparación entre SPA y páginas web dinámicas y algunas palabras sobre las ventajas de usar SPA:

Aplicaciones de una sola página + REST vs páginas web dinámicas

Ventajas:

1. Toda la información podría ser consumida por el visitante en una página y no tener que cambiar de página para obtener los detalles.
2. Podrías capturar el plomo allí
3. Puede colocar sus códigos y rastrear el comportamiento de los visitantes.
4. La velocidad de carga es alta ya que solo es una página