I Can't believe it's not native

Com o advento dos PWA crescendo e a ideia deles substituírem as aplicações nativas em nossos celulares, fica a pergunta: Como atingir esta singularidade, a ponto de não diferenciar mais o que é uma aplicação em linguagem nativa (Swift, Kotlin, C#...) de uma aplicação web? Esta palestra visa mostrar conceitos que em aplicações web fazem elas não perderem em nada em performance, experiência e otimizações para plataformas moveis como já é feito pelo twitter, tinder, pinterest, the Guadian e flipkart.

Transcript

2. I can’t believe it’s not ‘Native’ UX with Progressive Web Apps @wmitrut Wellington Mitrut
3. Wellington Mitrut UI Engineer Co-Organizador @ GDG Cascavel Instrutor @ Blogueiro e Podcaster Figurante na série Vikings Open Culture Cerveja Gatos
4. Princípios gerais de UX Nosso foco hoje UX para web & mobile
5. +5B Dispositivos conectados The Verge - http://bit.ly/2y7zbiA
6. +2B Dispositivos conectados The Verge - http://bit.ly/2y7zbiA
7. Por que a web ainda não tem uma experiência legal no mobile?
8. 90’s and early 00’s web dev
9. 90’s and early 00’s web dev Millenials, esse é o McGyver
10. 3 Pontos críticos que causam essa sensação.
11. Sites não são reativos
12. Sites não tem comportamento previsível
13. O usuário não está no controle da situação
14. O que então pode ser feito para melhorar a experiência da web no mobile?
17. Progressive Web Apps Experiências na web de alta performance.
18. Os PWAs são um conjunto de técnicas para desenvolver aplicações web, adicionando progressivamente funcionalidades que antes só eram possíveis em apps nativos.
19. 3 Princípios críticos para uma boa UX com PWAs.
20. REATIVIDADE PREVISIBILDADE USUÁRIO NO CONTROLE
21. REATIVIDADE PREVISIBILDADE USUÁRIO NO CONTROLE
22. REATIVIDADE A percepção humana de tempo é fluida, e pode ser manipulada de maneira proposital e produtiva. Chris Harrison, Zhiquan Yeo, Scott E. Hudson
23. Transição bloqueada aguardando pela request REATIVIDADE
24. Skeleton screen / placeholder REATIVIDADE
25. REATIVIDADE
26. Sem feedback de toque REATIVIDADE
27. REATIVIDADE
28. Com feedback de toque REATIVIDADE
29. Com feedback de toque REATIVIDADE
30. REATIVIDADE
31. REATIVIDADE Scroll bugado.
32. REATIVIDADE Use listas virtualizadas para melhor performance
33. REATIVIDADE Use UIs nativas na Web
34. Polymer Ionic Material Components React Material UI REATIVIDADE
35. DEVO diferenciar a minha UI/UX de acordo com o OS? REATIVIDADE
36. DEVE REATIVIDADE
37. DEVE ...É indicado REATIVIDADE
38. CARGA COGNITIVA REATIVIDADE
39. webapp.barcelona.cat REATIVIDADE
40. IONIC 3+ muda a UI/UX de acordo com o OS sem precisar de qualquer outra implementação REATIVIDADE
41. Performance de Carregamento Antes Depois Sessões abandonadas Site da OLX REATIVIDADE PRPL pattern Service worker caching Server side rendering
42. Push critical resources. Render initial route. Pre-cache. Lazy-load. REATIVIDADE
43. USE fontes NATIVAS, o que não for nativo, usar SVG REATIVIDADE
47. REATIVIDADE PageSpeed Insights WebPagetest Lighthouse
48. REATIVIDADE PREVISIBILIDADE USUÁRIO NO CONTROLE
49. Gestures previsíveis não acontecem PREVISIBILIDADE
50. Gestures previsíveis PREVISIBILIDADE
51. Gestures confusos (não ta trocando de tab) PREVISIBILIDADE
52. Gestures claros PREVISIBILIDADE
53. Navegação simplificada PREVISIBILIDADE
54. Blue Flash PREVISIBILIDADE
55. Sem Blue Flash PREVISIBILIDADE
56. REATIVIDADE PREDITIBILIDADE USUÁRIO NO CONTROLE
57. Conteúdo ‘pulando’ na tela, carregamento instável USUÁRIO NO CONTROLE
58. Carregamento estável Tamanho de imagens e elementos pré-especificados USUÁRIO NO CONTROLE
59. USUÁRIO NO CONTROLE Permissão na hora que carrega a página
60. Permissões com contexto USUÁRIO NO CONTROLE
61. As conversões aumentaram em 76% alibaba.com As sessões tiveram um aumento de 100% forbes.com Os pageviews cresceram 170% twitter.com PWA Stats - http://bit.ly/2w3LxKM
62. Outras dicas importantes
63. Login automático com smart-lock
64. Payment request API
65. Cache offline com service-workers
66. Push Notifications
67. ~215 APIs
68. SEMPRE que possível teste em dispositivos reais.
69. INSPIRE-SE na UI/UX de aplicativos ‘nativos’.
70. Obrigado @wmitrut Wellington Mitrut