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.

1. Mobile First
& Offline First
Interfaces responsivas
DANILO VITORIANO

2. Mobile First!
Responsive Design

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

6. ele só quer
acessar

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!

14. Progressive
Web
Apps

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

24. frameworks
OFFLINE FIRST

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/