noBackend e Offline First: foque em criar experiências
•
8 gostaram•726 visualizações
O documento apresenta Joselito Júnior, um instrutor e palestrante sobre desenvolvimento offline e sem servidor ("no backend"). Ele discute conceitos como Offline First, armazenamento local e sincronização de dados, Service Workers e AppCache para criar aplicações que funcionam online e offline. O documento também fornece exemplos de código para acessar APIs sem servidor como Hoodie, Parse e Firebase.
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Semelhante a noBackend e Offline First: foque em criar experiências
Semelhante a noBackend e Offline First: foque em criar experiências (20)
noBackend e Offline First: foque em criar experiências
- 1. nobackend e offlinefirstjoselito.ninja // @joselitojunior1 // alagoasdevday.com.br
- 2. Olá, meu nome é Joselito Júnior » Modelo e atriz » Instrutor, palestrante » Vencedor de hackathon profissional » Fundador do GDG Recife » Fã de Fórmula 1 » Apaixonado por entender e resolver
- 6. 4G? Alagoas: - Maceió Pernambuco: - Recife - Jaboatão
- 7. 4G? Minas Gerais: 4 Cidades Rio de Janeiro: 4 Cidades São Paulo: 8 Cidades Demais estados: capitais
- 15. Estar Offline é comumbem mais comum do que parece
- 16. Estar Offline Nãoé um problema
- 19. Mobile First
- 20. Offline First
- 21. Offline First é sobre UX
- 22. Offline First é sobre PESSOAS
- 23. + Pessoas + Usuários + $
- 24. Mudanças
- 25. Offline tem que ser mais do quetratar erros
- 26. Trate arede de dados como uma funcionalidade
- 28. Não perderás informaçãoPrimeiro mandamento do Offline First
- 29. Armazenamento » localStorage » sessionStorage » WebSQL » IndexedDB
- 30. Armazenamento Sincronize ao invés de salvar!
- 31. Armazenamento Sincronize ao invés de salvar! » Se o usuário está online, envie e sincronize com servidor » Se não, salve localmente e sincronize depois!
- 32. Armazenamento Sincronize ao invés de salvar!
- 33. Armazenamento Sincronize ao invés de salvar! Use o StorageEvent! - key - oldValue - newValue - url
- 34. Armazenamento Sincronize ao invés de salvar! Tem jeito mais fácil? Tem. Falaremos em breve.
- 35. ServiceWorkers É um Web Worker que tomou muito Whey. Roda no background do navegador e não tem acesso ao DOM.
- 36. ServiceWorkers É um Web Worker que tomou muito Whey. Roda no background do navegador e não tem acesso ao DOM. Rende outra talk inteira.
- 37. ServiceWorkers É um Web Worker que tomou muito Whey. Roda no background do navegador e não tem acesso ao DOM. Rende outra talk inteira. Por exemplo, essa: Offline Web do jeito certo com ServiceWorkers, Sérgio Lopes.
- 38. AppCache Poderosissímo e um grande filho da p*ta. <html manifest="offline.appcache"> O manifesto deve estar em todas as páginas que você desejam que devem se cacheadas.
- 40. AppCache Podemos dividir em 3 seções principais: » CACHE » NETOWRK » FALLBACK
- 41. AppCache CACHE Aquivos abaixo do cabeçalho CACHE (ou sem cabeçalho, é a seção default) serão armazenados na primeira vez que forem acessados.
- 42. AppCache NETWORK Aqui que começa a confusão. Arquivos listados aqui podem vir do servidor se eles não estão no cache. Na maioria dos casos, usa-se *, para todas as páginas. NETWORK: *
- 43. AppCache FALLBACK Os arquivos na seção de fallback tem dois "parâmetros". O primeiro, o arquivo original (ou pasta), do servidor. O segundo, o arquivo que vai substituir os arquivos. FALLBACK: / fallback.html cardapio/pizzas/calabresa.jpg cardapio/pizza.jpg cardapio/pizzas/ cardapio/pizza.jpg
- 45. AppCache Cuidados » O cache tem prioridade ao que está no servidor. » O manifesto só será atualizado se o conteúdo dele for alterado. » Arquivos não cacheados nao vão carregar em páginas cacheadas » E mais: Application Cache is a Douchebag, Jake Archibald.
- 47. Eaparte fácil?
- 48. noBackend
- 49. "noBackend"
- 50. Não é não de "não existe" É não de "não se preocupe"
- 54. Email sendEmail({ to: "marilene@alagoasdevday.com.br", subject: "Hoje à noitenn…", content: "<h1>Olá Marilene</h1><p>…</ p>", attachments: [ 'vinhos.pdf' ] });
- 55. {o/}Dreamcode
- 65. APIs do Hoodie var hoodie = new Hoodie(url); » hoodie.store » hoodie.account » hoodie.id() » on() » online ou offline » change, update
- 66. Plugins do Hoodie AppCache Nanny Automatização completa do manifesto! » hoodie install appcache » npm install -S appcache-nanny » hoodie.appCache.start();
- 67. Parse e Firebase » Comerciais e mais robustos (BaaS) » Armazenamento sob demanda » Plugins » Push (local) e outros serviços
- 68. API Parse var user = new Parse.User(); user.set("username", "my name"); user.set("password", "my pass"); user.set("email", "email@example.com"); user.set("phone", "415-392-0202"); user.signUp(null, { success: function(user) { ... }, error: function(user, error) { ... } });
- 69. API Parse var base64 = "V29ya2luZyBhdCBQYXJzZSBpcyBncmVhdCE="; var file = new Parse.File("myfile.txt", { base64: base64 });
- 70. API Parse var parseFile = new Parse.File("myfile.zzz", fileData, "image/png"); parseFile.save().then(function() { // Imagem salva }, function(error) { // Ou ocorreu um erro ou a imagem não foi enviada ao Parse });
- 72. atwood's law “Any application that can be written in JavaScript, will eventually be written in JavaScript.” Jeff Atwood
- 73. E isso é só o começo
- 74. offlinefirst.org
- 75. nobackend.org