javascript - que - single page application example

¿Los SPA(aplicaciones de una sola página) son adecuados para sitios destinados a teléfonos móviles?

Question

Estoy planeando crear un sitio web con alrededor de 20 vistas / páginas principales para teléfonos móviles.

Si quiero centrarme en hacer que la experiencia del usuario sea muy receptiva (como en rápido) mientras cambio entre las páginas, ¿es una buena idea crear el sitio como una aplicación de una sola página?

Sé que hay muchos consejos que puede hacer para aumentar el rendimiento general de un sitio web móvil:

http://www.slideshare.net/blazeio/mobile-web-performance-optimization-tips-and-tricks

Pero mi principal preocupación es que el JavaScript del lado del cliente (como AngularJS) en realidad disminuiría el rendimiento, cuando necesita hacer solicitudes AJAX y luego mostrar / ocultar / crear elementos dinámicamente, en comparación con la creación de una solicitud HTTP tradicional para obtener la página y su contenido y mostrando eso directamente.

¿Algún recurso o comentario que pueda ayudarme a entender qué arquitectura sería más adecuada para los sitios móviles?

Answer 1

El punto de inflexión para esta decisión es la complejidad del desarrollo. Las aplicaciones habituales basadas en servidores web son más fáciles de desarrollar porque hay muchos más desarrolladores que conocen todos los trucos para lograr que la aplicación funcione con la máxima eficacia. Por otro lado, SPA puede lograr un mejor rendimiento en todas las áreas 1) transferencia de datos más rápida, 2) operaciones de GUI (DOM) más rápidas, 3) UX más inteligente, pero todas requerirán desarrolladores más experimentados (caros) que puedan hacerlo rápido y de confianza. Esos desarrolladores son menos. Si planea hacer todo usted mismo, significa una curva de aprendizaje más larga para usted y mucho para prueba / error. Esto se debe principalmente a que los SPA son nuevos en comparación con la WWW normal.

Para hacer un SPA efectivo, necesita conocer muy bien la conexión / parte del socket, conocer los cuellos de botella, cómo se eligen los protocolos, qué plataformas (dispositivos) admiten qué protocolos de conexión. Simplemente elegir su solución preferida no es fácil: Engine, IO, Socket.IO, SockJS y otros.

Necesitará conocer muy bien la manipulación DOM en términos de rendimiento dinámico, para elegir sabiamente entre divs / tables / canvas.

Necesitará usar efectivamente las capacidades del lado del navegador para almacenar datos, es decir, cookies, caché, instalaciones de almacenamiento de datos locales (archivos / db) para almacenar datos durante la sesión y entre las sesiones.

JavaScript en estos días es muy rápido en iOS / Android, por lo que la velocidad del lenguaje en sí no debería ser un problema de todos modos. La gran ventaja es usar Node.js para que pueda programar en el mismo idioma tanto el cliente como el servidor. No es necesario sincronizar las funciones hashThisPassword() en dos (o más) idiomas.

Answer 2

Hay dos grandes maneras en que ir a la ruta de SPA le brinda oportunidades que puede aprovechar para mejorar la experiencia del usuario:

Contenido menos descargado

Si tiene diferentes páginas HTML para cada página en su aplicación, tendrá que descargar cada una de ellas en su totalidad. Si su sitio comparte marcado común entre las páginas, se volverá a descargar para cada página. Compare esto con un SPA donde, como mínimo, solo descarga los cambios necesarios para pasar de la página actual a la siguiente. En algunos casos habrá poca mejora, en otros será bastante significativa.

Otra forma en que SPA puede ser más eficiente es si separa la lógica de creación del marcado y sus datos. Considere el ejemplo de tener una lista con 100 nombres y puntajes:

Tradicional:

<ul id="myList">
  <li><strong>Name 1</strong> score 1</li>
  <li><strong>Name 2</strong> score 2</li>
  <li><strong>Name 3</strong> score 3</li>
  ...
  <li><strong>Name 100</strong> score 100</li>
<ul>

SPA:

<ul id="myList"></ul>

var myData = { 
  "Name 1" : "score 1",
  "Name 2" : "score 2",
  "Name 3" : "score 3",
  ...  
  "Name 100" : "score 100"
}
var html = '''';
for (var name in myData) {
  var html += ''<li><strong>'' + name + ''</strong> '' + myData[name] + ''</li>'';
}
document.getElementById(''myList'').innerHTML = html;

El modelo SPA puede ahorrar bytes incluso cuando se construye el DOM. Además, la lógica es reutilizable, por lo que si necesita volver a compilar la lista con más contenido, solo necesita agregar cosas a un objeto y llamar a un método.

Lograr el perfecto equilibrio entre el tamaño de descarga y el procesamiento requerido es un problema muy difícil y depende de muchos problemas, incluidas las particularidades de la aplicación, el dispositivo, otros trucos que se pueden realizar, etc. Afortunadamente, un enfoque de sentido común da buenos resultados la mayor parte del tiempo.

Transiciones

Aparte de algunos experimentos de IE, no puede realizar ningún cambio en las transiciones entre diferentes páginas en el navegador. Este es un importante punto de venta para SPA porque con transiciones inteligentes puede dar la apariencia de velocidad incluso cuando el sitio no es tan rápido. Incluso sin transiciones, un SPA es mucho más adecuado para dar retroalimentación al usuario durante la carga que un sitio regular.

Una cosa a tener en cuenta es que debe enfocarse en la carga de la página inicial para que sea lo más suave posible (solo cargando el mínimo) y luego de que el lote solicite tanto como sea posible. Un gran problema con la latencia móvil es que si el dispositivo no necesita usar la radio por un tiempo, se apagará. Al volver a encenderlo se produce una sobrecarga significativa, por lo que las solicitudes se deben agrupar siempre que sea posible.

Mi consejo personal es que si puede ir a SPA, debería hacerlo. Es muy poco lo que se puede hacer para mejorar la eficiencia de los sitios HTML regulares, mientras que sospecho que las SPA continuarán mejorando constantemente en el futuro. Por lo menos, puede esperar un rendimiento similar de un SPA cuidadosamente creado, ya que obtiene con HTML normal y las posibles oportunidades pueden dar grandes recompensas.

Answer 3

La respuesta aceptada es muy buena y estoy de acuerdo con ella, las últimas aplicaciones que he desarrollado se hicieron principalmente con SPA.

Pero agregaría que SPA no es la solución mágica para todas las aplicaciones, especialmente cuando se habla de "Critical Path Rendering" .

Una breve historia

Para lograr un " tiempo para el primer tweet " rápido, el procesamiento de un marco completo como AngularJS podría ser un problema.

Nos dimos cuenta de que sería más difícil lograr lo que el cliente quería usando Angular. Entonces creamos la aplicación sin ella. La aplicación hizo un uso extensivo de las solicitudes AJAX y otras prácticas de optimización. Al final, el tiempo para renderizar la página principal disminuyó en casi 1 segundo. ¡Dos meses después del despliegue, el cliente mostró un aumento del 30% en las ventas! Ok, era una aplicación con características simples y no tenía toda la riqueza que un SPA usualmente tiene.

De nuevo, no estoy diciendo que el problema sea con SPA, pero creo que definitivamente no es la respuesta final para todas las aplicaciones móviles.

Answer 4

Mantenlo simple -

Sí, las aplicaciones de una sola página son perfectas para el desarrollo móvil. Los marcos de SPA como Durandal, Angular, Backbone, Ember, etc. solo necesitan un motor de JavaScript para ejecutarse de manera efectiva. Son compatibles entre navegadores y no requieren nada especial para operar en cada tamaño de pantalla, resolución o dispositivo, y aprovechan los poderosos motores de los dispositivos móviles.

¿Qué los hace tan adecuados?

Con una aplicación de una sola página puede colocar todos los ganchos en su lugar para el enlace de datos declarativo bidireccional con bibliotecas como Knockout, Handlebars o Angular que reemplazará toda la manipulación DOM jQuery que usaría en el sitio web tradicional. Esto promoverá componentes reutilizables, como directivas y manipuladores de encuadernación personalizados, que reducen la cantidad de código necesario y permiten una prueba más sencilla, ya que los enlaces serán reutilizados en toda su aplicación.

¿Qué los hace no tan buenos para el móvil?

Las aplicaciones de una sola página a menudo pueden comenzar un camino de diseño deficiente del que será difícil recuperarse (como cualquier otro desarrollo). La diferencia es que es difícil encontrar un buen camino para crear una aplicación escalable y, a menudo, desarrolladores SPA por primera vez. hacer suposiciones. Esto se puede aliviar al aprovechar los recursos (como el soporte pago, , etc.) o al realizar una pesada revisión del código desde la base de su SPA

¿Qué hay del rendimiento?

Las aplicaciones de una sola página son muy rápidas en la mayoría de los casos. La idea básica es usar la inyección de dependencias y las bibliotecas como Require.js para cargar módulos AMD le permiten al desarrollador solo requerir que los clientes descarguen los archivos HTML y JavaScript raramente cuando ocurren cambios. Al cargar desde el caché, básicamente reduce sus visitas al servidor a llamadas de datos. Esto sigue técnicas de desarrollo web RESTful.

Answer 5

SPA es una buena opción para sitios móviles. La siguiente plantilla parece tener un buen rendimiento en los sitios móviles de SPA

Hottowel
(Overview)

Con el menor tiempo de respuesta, puede lograr un gran rendimiento. He intentado con la plantilla anterior para crear un sitio web que también sea compatible con los navegadores móviles y los navegadores web.

1. Usa el jquery para hacer el proceso dinámico
2. Use la llamada ajax para hacer las llamadas rápidas a los datos según sea necesario
3. La arquitectura MV le dará una idea clara para implementar sus conceptos
4. HTML5 será la mejor opción para el front-end
5. Use API por separado para manejar el proceso de datos que aumentará su rendimiento

Answer 6

TL; DR: Sí, es factible, pero debe ser disciplinado y el beneficio es la percepción del rendimiento

He estado trabajando en la transición de una aplicación web tradicional de "escritorio" centrada en servidor a un SPA receptivo en los últimos meses. Específicamente, hemos elegido un diseño MV * respaldado por un enrutador mediador y una recuperación desacoplada con AMD. Estamos explorando cambiando esto a RVP .

He incluido algunos de nuestros principios de diseño a continuación:

• Decida pronto hasta qué punto su plataforma admitirá la mejora progresiva. Menos scripts que se necesiten, mejor. Confiamos en nuestro proceso de compilación para garantizar que podemos admitir HTML y otros contenidos generados dinámicamente pero servidos de forma estática.
• Construya su cadena de herramientas temprano (minificación, trituración de imágenes o spriting, etc.)
• Desactive la recuperación de las acciones de los usuarios tanto como sea posible, con el uso de almacenamiento local y técnicas como la búsqueda previa o la búsqueda predictiva.
• Asegúrese de medir lo que están haciendo sus usuarios para que pueda (si tiene sentido), obtener progresivamente la lógica o el contenido de la aplicación
• Sea realmente exigente con los marcos que soportan el resto de su arquitectura (en lugar de dictarlo).
• Sea realmente quisquilloso con los componentes y utilidades de terceros que usa. Evite marcos en los que no esté utilizando una proporción significativa del conjunto de características (todo lo que no esté usando tiene un costo adicional en peso, latencia, procesamiento en el dispositivo, etc.)

Puede encontrar útil esta comparación de marcos

Answer 7

TL; DR: las aplicaciones de una sola página requieren más atención a su arquitectura, especialmente si está migrando la funcionalidad de un sitio web existente (por ejemplo, los proyectos brownfield son difíciles).

Un argumento común para SPA se centra en contenido menos descargado . Si bien es técnicamente correcto, tiene menos relevancia en una conexión celular con alta latencia. Alerta de spoiler: todas las conexiones celulares tienen una alta latencia .

• La diferencia entre descargar 10KB y 15KB es insignificante, es la sobrecarga del establecimiento de la conexión lo que agota todo el placer de una experiencia móvil.

• Raramente puede influir en la latency (aunque puede usar CDN y alojamiento en la nube), pero puede compensar su impacto. La agrupación de recursos y la minificación es efectiva, y los conceptos subyacentes son aplicables independientemente del entorno utilizado.

• Deberías estar comprimiendo tu contenido de todos modos, y la forma en que funciona desinfla (jaja) el argumento del tamaño. Básicamente se centra en la repetición de secuencias de caracteres y es más eficiente para cosas como el marcado de HTML inflado en lugar de Lean JSON. Esto se vuelve ridículo para javascript compilado en clojure.

• Siempre es un buen consejo, pero asegúrese de que su contenido se sirva con encabezados válidos Content-Length para permitir conexiones persistentes .

Por otro lado, un argumento común contra SPA es el siguiente: ZOMG tanto javascript . Claro, ya no puede darse el lujo de tener fugas de memoria como usted "puede" en un sitio web tradicional (la mayoría se solucionan tan pronto como se navega por una página diferente), pero escriba un buen javascript y será recompensado.

• Usar jQuery en un sitio móvil a veces es un mal necesario. Bien podría usarlo properly .

• Cuantos más javascript tenga, mayor será el incentivo relativo para que no se vuelva a ejecutar en cada "carga de página". Cualquier marco que incluya en una página debe ser inicializado antes de que pueda ser utilizado, y eso requiere analizar y ejecutar su código ... en cada página que se usa . SPA solo necesita realizar este paso una vez (aún así, esto no es una excusa para la gestión de dependencias pobre / faltante).

• Esto también se aplica a CSS. Cuando se agrega contenido nuevo a DOM luego de una interacción del usuario, habrá menos re-flujos y re-pinturas de lo que incurriría una nueva carga; tampoco es necesario que el navegador vuelva a analizar las hojas de estilo.

La verdadera fuerza de una aplicación de una sola página está en su rendimiento percibido . Usted y yo sabemos que tocar en un enlace no se resuelve instantáneamente, pero el usuario no tiene que hacerlo. Hacer que el sitio responda a las interacciones del usuario agregando estados táctiles y una pulsación oportuna mejoraría dramáticamente el UX. Por supuesto, siempre puede hacer un esfuerzo adicional y recuperar ciertos contenidos. ¿Tal vez tendría sentido cargar la siguiente página / elemento / foto en el fondo justo después de que la actual esté lista?

No descarte el hecho de que los SPA son candentes y modernos, además del factor motivacional para jugar con algunos marcos fascinantes. Por supuesto, a los usuarios finales no les importarían esas cosas, pero usted aprenderá algo nuevo y un marco maduro de MVVM podría distraerlo y hacer que este maldito ajax funcione y le permita enfocarse en otros aspectos de la aplicación.

Answer 8

La respuesta corta es sí.

Cada segundo cuenta , las personas comienzan a abandonar su servicio si tarda más de un segundo en cargar. Así que cargue solo lo que necesita.

Además, Google ha proporcionado amablemente este fantástico conjunto de guidelines para ayudarlo a optimizar su uso para dispositivos móviles.

He tenido bastante éxito utilizando herramientas como RequireJS para cargar los bits que necesito (¡y la organización!). Esto se puede emparejar con el marco de tu elección, como BackboneJS , AngularJS , EmberJS ... hay muchos más que hay por ahí.

El marco más interesante que he visto hasta ahora es Famo.us , afirman 40-60 fps en teléfonos, PC y televisores. Y sus demostraciones funcionan sin problemas en el móvil.