Kit para crear un sitio web móvil asombroso!

WIT Meetup Noviembre

Transcript

1. Kit para crear un sitio web móvil asombroso! Victoria Ubaldo G. Software Engineer @VikyAle
2. Agenda • Introducción • PWA ,estado actual • Objetivos del Kit • Contenido del Kit • Chrome Dev Summit 2017 • Resumen • Recomendaciones
3. ¿Es posible tener la misma experiencia de una aplicación móvil a un sitio web?
4. Crearlo es una gran aventura!
5. Web Moderna, siguiente generación
7. PWA , estado actual
9. 2B dispositivos
10. 5B dispositivos conectados a la web
11. ` Visibilidad Formato ligero Presentación intuitiva
13. Tres enfoques para PWA desde el principio una sola característica una versión simple
14. Objetivos del Kit
19. Confiable Rápida Engaging (Involucrar al usuario) The perfect PWA
20. Herramientas (tools) que tienen el poder de mejorar nuestros días como developers
21. Te servirá para: • Mejorar la performance de tu sitio web. • Mejorar la experiencia del usuario en tu sitio web. • Ayudar a otros developers en adoptar estas modernas herramientas.
22. Contenido del Kit
23. ` • AMP • Angular • Service Worker • Push Notifications • Payment Request API
24. ` Rapidez
25. 19 seg. Tiempo de carga promedio de sitio web móvil con conexión 3G
26. 60% de la conexión móvil mundial es 2G
27. de usuarios abandonan un sitio que toma más de 3 segundos en cargar. 53%
28. AMP Accelerated Mobile Pages ampproject.org/es/
29. AMP HTML = Normal HTML
32. `
33. https://cli.angular.io/
35. ` El manifiesto de las apps web
36. ` • archivo JSON simple • Poder controlar cómo se muestra tu app(la pantalla de inicio de un dispositivo móvil). • Indicar lo que el usuario puede iniciar y definir su apariencia al iniciarse.
40. Añade tu app web en la HomeScreen https://goo.gl/r2hjZR
41. ` Skeleton Screen
42. ` Ayuda a reducir la percepción de espera, simulando la carga de la estructura básica del contenido que veremos en la interfaz. Es más efectivo que los loaders que tratan de representar cantidades de tiempo.
43. ` • Fast food online de China • >260 millones de usuarios • Enfocados en rapidez y escalabilidad. https://h5.ele.me
44. ` • Fast food online de China • >260 millones de usuarios • Enfocados en rapidez y escalabilidad.
45. ` Service Worker
46. `
47. ` • Capacidad de interceptar y manejar solicitudes de red, incluida la administración programática de un caché de respuestas. • Te permite soportar experiencias sin conexión, brindándoles a los programadores control total sobre la experiencia. • Los service workers hacen gran uso de las promesas. https://goo.gl/7DZuLi
48. `
49. Web server
50. Service worker Client side proxy (written in JavaScript) Cache Web server
52. ` Push Notifications
53. `
54. `
55. `
56. Añade Push Notifications a tu sitio web https://goo.gl/8rRnwk
57. ` Payment Request Api
58. ` app/scripts/modules/payment-api.js payment-api.js
59. ` supportedInstruments: conjunto obligatorio de datos sobre los métodos de pago admitidos (Tarjetas de crédito básicas y procesadores de pago como Android Pay) details: información requerida sobre la transacción(una etiqueta, moneda y cantidad de valor). paymentOptions: parámetro opcional para cosas como el envío (nombre del pagador, el teléfono, el correo electrónico y la información de envío)
60. `
61. `
62. Añade Payment Request Api https://goo.gl/8vxKK8
63. ` Lighthouse
64. `
65. `
66. `
67. `
68. Chrome Dev Summit 2017
69. ` • Chrome User Experience Report • “One-tap Sign Up.” • Using Trusted Web Activity (no mostrar url). • Uso de Web Components
70. Resumen
71. ` • AMP • Angular • Service Worker • Push Notifications • Payment Request API
72. Recomendaciones
73. Certificado Sitios Web para Móviles
75. Mobile Web Specialist
77. Jake Archibald @jaffathec ake Monica Dinculescu @notwaldorf Addy Osmani @addyosmani Paul Kinlan @Paul_Kinlan Googlers que trabajan a diario en herramientas y mejoras para PWA
81. Gracias! Twitter : @vikyale