Transferir como PDF, PPTX
![Email
sendEmail({
to: "marilene@alagoasdevday.com.br",
subject: "Hoje à noitenn…",
content: "<h1>Olá Marilene</h1><p>…</
p>",
attachments: [ 'vinhos.pdf' ]
});](https://image.slidesharecdn.com/add-150421175934-conversion-gate01/85/noBackend-e-Offline-First-foque-em-criar-experiencias-54-320.jpg)
Carregado porJoselito Nascimento
noBackend e Offline First: foque em criar experiências
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.
![[React Native Tutorial] Lecture 3: More on ES6/ES2015](https://cdn.slidesharecdn.com/ss_thumbnails/l3-es6-babel-windows-160905073702-thumbnail.jpg?width=640&height=640&fit=bounds)
![[React-Native Tutorial] Lecture 8: Midterm Exam Discussion, Feedback, and Ter...](https://cdn.slidesharecdn.com/ss_thumbnails/l8-midtermexam-groupproject-161018100946-thumbnail.jpg?width=640&height=640&fit=bounds)
![[React-Native Tutorial 10] Camera Roll / Gallery / Camera / Native Modules by...](https://cdn.slidesharecdn.com/ss_thumbnails/l10-cameraroll-selfiescoreboard-161101033101-thumbnail.jpg?width=640&height=640&fit=bounds)
![[React Native Tutorial] Lecture 6: Component, Props, and Network](https://cdn.slidesharecdn.com/ss_thumbnails/l6-component-prop-network-160920050452-thumbnail.jpg?width=640&height=640&fit=bounds)
![[React Native Tutorial] Lecture 5: Input and State](https://cdn.slidesharecdn.com/ss_thumbnails/l5-react-native-input-state-160913041941-thumbnail.jpg?width=640&height=640&fit=bounds)
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
- 4.
- 5.
- 6.
- 7. 4G? Minas Gerais: 4Cidades Rio de Janeiro: 4 Cidades São Paulo: 8 Cidades Demais estados: capitais
- 11.
- 15. Estar Offline é comumbemmais comum do que parece
- 16. Estar Offline Nãoé umproblema
- 17.
- 18.
- 19.
- 20.
- 21.
- 22. Offline First é sobrePESSOAS
- 23.
- 24.
- 25. Offline tem queser mais do quetratar erros
- 26. Trate arede dedados como uma funcionalidade
- 28. Não perderás informaçãoPrimeiro mandamento doOffline First
- 29. Armazenamento » localStorage » sessionStorage »WebSQL » IndexedDB
- 30. Armazenamento Sincronize ao invésde salvar!
- 31. Armazenamento Sincronize ao invésde 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ésde salvar!
- 33. Armazenamento Sincronize ao invésde salvar! Use o StorageEvent! - key - oldValue - newValue - url
- 34. Armazenamento Sincronize ao invésde salvar! Tem jeito mais fácil? Tem. Falaremos em breve.
- 35. ServiceWorkers É um WebWorker que tomou muito Whey. Roda no background do navegador e não tem acesso ao DOM.
- 36. ServiceWorkers É um WebWorker que tomou muito Whey. Roda no background do navegador e não tem acesso ao DOM. Rende outra talk inteira.
- 37. ServiceWorkers É um WebWorker 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 umgrande filho da p*ta. <html manifest="offline.appcache"> O manifesto deve estar em todas as páginas que você desejam que devem se cacheadas.
- 39.
- 40. AppCache Podemos dividir em3 seções principais: » CACHE » NETOWRK » FALLBACK
- 41. AppCache CACHE Aquivos abaixo docabeç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çaa 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 naseçã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 cachetem 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.
- 46.
- 47.
- 48.
- 49.
- 50. Não é nãode "não existe" É não de "não se preocupe"
- 51.
- 52.
- 53.
- 54. Email sendEmail({ to: "marilene@alagoasdevday.com.br", subject: "Hojeà noitenn…", content: "<h1>Olá Marilene</h1><p>…</ p>", attachments: [ 'vinhos.pdf' ] });
- 55.
- 65. APIs do Hoodie varhoodie = new Hoodie(url); » hoodie.store » hoodie.account » hoodie.id() » on() » online ou offline » change, update
- 66. Plugins do Hoodie AppCacheNanny 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 applicationthat can be written in JavaScript, will eventually be written in JavaScript.” Jeff Atwood
- 73. E isso ésó o começo
- 74.
- 75.
- 76.
- 77.