Mobile First e Offline First
1 gostou•333 visualizações
O documento discute abordagens para design responsivo e desenvolvimento offline first, incluindo: (1) adaptar conteúdo de sites desktop para versões móveis mais estreitas; (2) armazenar dados localmente usando APIs como Web Storage; e (3) frameworks como ReactJS, AngularJS e ferramentas como Service Workers para aplicativos offline.
Mobile First e Offline First
- 1. Mobile First & Offline First Interfaces responsivas DANILO VITORIANO
- 3. Mobile First Google prioriza sites responsivos Abordagens para design responsivo
- 4. A web nasceu no computador
- 5. não importa ao usuário se é desktop ou mobile
- 7. Solução mais comum Adaptar o conteúdo do site desktop para uma versão mais “estreita” que será lida por smartphones.
- 11. /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... } CSS
- 13. Offline First!
- 15. we are disconnected we live in a battery powered world our technology are always connected & steadily powered Offline capability the key to modern Progressive Web Applications. Offline first thinking from and further Responsive and Mobile First thinking. Topics: ● UI Conventions for Offline Apps ● UX patterns ● User research ● Mental model discovery ● Tools /techniques to build offline apps ● Distributed systems research ● Tech solutions to handle offline mode ● Web and Native
- 16. Mas como resolver isso?
- 17. Armazenagem de dados em Cache client side
- 18. Web Storage API Possibilita armazenar dados da aplicação no dispositivo do usuário.
- 19. Google Chrome Offline First Apps ● Fazer download de todos JavaScript, CSS, fontes e imagens ● O aplicativo salva e sincroniza pequenas quantidades (chunks) de dados (quando tiver conexão) - por isso progressiva ● O aplicativo detecta mudanças na conectividade: como gerenciar a falta de conexão? (offline handle)
- 20. Facebook Code Developer Apps Recomendações ● Use dados locais sempre que possível ● Separe UI (User Interface, View - Ex.: React) dos dados da sua aplicação (Model, View Model - Ex.: Redux) ● Seu aplicativo pode ser fechado a qualquer momento. #comofaz? ● Testes
- 21. Mozilla Offline First ● A aplicação deve detectar o estado offline ● Armazenamento de “data and assets” offline ● Salve os status da aplicação periodicamente: indexedDB ● Sincronize com o servidor
- 22. como salvar dados no usuário?
- 23. In-browser databases Armazenar dados no front-end derby.js Lawnchair Hoodie Google Firebase remotestorage.io Sencha touch
- 25. ReactJS AngularJS Offline web applications SQL, offline cache API, localStorage API Service Workers Atividades em background, hooks para iniciar app offline, only https IndexedDB Objetos simples de pares JSON like {propriedade : valor} Web Storage Persistir data no cliente
- 26. Google Weather
- 28. Referências ● A importância de desenvolver considerando off-line first - Reinaldo Ferraz W3C, 2015 ● http://offlinefirst.org/ ● https://developer.chrome.com/apps/offline_apps ● https://www.w3.org/TR/webstorage/ ● https://developer.mozilla.org/en-US/Apps/Fundamentals/Offline ● http://alistapart.com/article/offline-first ● https://airhorner.com/ ● https://www.thoughtworks.com/radar/techniques/offline-first-web-applications ● http://getbootstrap.com/css/