Client Side Storage | Aula 10 – IndexedDB Com Async-Await? | Série HTML5 | SW9
Olá a todos. Sejam bem-vindos ao Canal e Blog SW9 (http://blog.sw9.com.br)
Dando continuidade a MEGA Série sobre HTML5. O Objetivo é apresentar os recursos e as possibilidades que surgiram com o advento do HTML5.
Neste novo conjunto de Aulas venho abordando tudo o que você precisa saber sobre armazenamento de dados do lado cliente (Client Side Storage). E o melhor: veremos tudo isso na prática.
O que vimos na aula passada?
Na aula passada, combinamos o uso da API IndexedDB e Promises. Esta combinação foi possível graças a uma pequena biblioteca chamada idb que espelha a API Indexed DB trocando o objeto IDBRequest (objeto nativo usado para controle assíncrono) por Promises.
Você perdeu esta AULA? Não se preocupe, segue então o link para acessá-la [http://blog.sw9.com.br/2018/11/06/client-side-storage-aula-9-utilizando-indexeddb-com-promise-html5-sw9].
O que veremos nesta aula?
Você sabia que com base no que implementamos na AULA passada (IndexedDB Com Promises), é possível evoluir e tornar a nossa vida mais fácil? Sim, é possível. A AULA de hoje será reservada para implementarmos as mesmas operações relacionadas a nossa página de contatos, só que agora usando Async/Await.
O que vamos precisar?
Para que seja possível utilizarmos Async/Await em nossa implementação, será necessário:
1- Usar a API IndexedDB;
2- Usar a biblioteca chamada idb. Com vimos na AULA passada, esta biblioteca nos permite combinar IndexedDB com promises.
A Biblioteca IDB
A biblioteca idb foi criada por jakearchibald como uma forma de viabilizar a implementação da API IndexedDB com promises.
Ela é uma biblioteca que espelha a API IndexedDB, substituindo o uso do objeto IDBRequest pelo uso de promises. Além disso, a biblioteca idb acrescenta pequenas melhorias que vocês vão ver durante o vídeo de hoje.
Apresentados os pré-requisitos, chegou o momento de falar um pouco sobre Async/Await.
Se você está gostando da AULA de hoje, não deixe de compartilhar com seus amigos usando as redes sociais de sua preferência.
Tornando nossa vida mais fácil com Async-Await
Async/Await é um recurso Javascript lançado recentemente e que nos permite trabalhar com requisições assíncronas de forma síncrona (trabalhar de modo assincronamente síncrono rsrs).
Adotando o uso de Async/Await em nosso projeto de contatos, você vai perceber como o código fica mais limpo, se comparado a implementação com promises. Com Async/Await, as operações serão executadas em sincronia.
O que mais você deve saber?
Para que seja possível utilizar o recurso Async/Await, é necessário que a implementação utilize promises. No nosso caso esta condição é satisfeita com o uso da biblioteca idb. No vídeo de hoje, você vai implementar junto comigo, as operações da página de contatos combinando as tecnologias IndexedDb, biblioteca idb e Async/Await.
Outra informação importante: assim como ocorre com promises, Async/Await também apresenta problemas de compatibilidade com alguns navegadores (O IE é um deles rsrs). Logo abaixo segue a tabela de compatibilidade extraída do site Can I Use:
Se preferir, você pode acessar o link https://caniuse.com/#search=async
Agora vem a boa notícia: para contornar este problema de compatibilidade, nós podemos desenvolver usando async/await e depois usar um transpilador, como por exemplo o Babel, que vai se encarregar de gerar um código javascript compatível.
Agora chegou o momento de assistirmos a AULA em vídeo, onde vamos implementar todas as operações relacionadas a nossa página de contatos usando Async/Await. Se eu fosse você não perderia a parte prática por nada
Mas antes dêem uma olhada em [Conclusão] e [Links].
[Conclusão]
Na aula de hoje [Client Side Storage | Aula 10 – IndexedDB Com Async-Await? | Série HTML5 | SW9], demos sequência na Mega série sobre HTML 5.
Implementamos as operações relacionadas a nossa página de contatos, combinando a API Indexed DB, biblioteca idb e o uso de javascript async/await.
Com o uso de async/await tornamos a nossa vida mais fácil, trazendo como benefícios a redução de código e simplicidade na implementação.
Está disponível na minha área de downloads o projeto parcial. Para acessá-lo basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar um e-mail válido e automaticamente receberá as instruções para acesso.
Dentro da minha área de Downloads, procure pela pasta HTML5/STORAGE. O resto é com vocês
Bom, por hoje é só. Aproveitem o vídeo e bons estudos. Fiquem antenados, que em breve teremos mais novidades.
Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.
Fiquem com Deus e até o próximo vídeo.
[Links úteis]
Curso Relacionado: [Aprenda HTML 5 e CSS 3 e Comece a Criar Seus Próprios Sites] – https://goo.gl/QsLPph
PlayList Cloud 9: https://goo.gl/7aQbD6
PlayList Mega Série HTML5: https://www.youtube.com/watch?v=D-XN-miEwP0&list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8
Área de Downloads: http://blog.sw9.com.br/acesso-area-de-downloads/
Meu Blog: http://blog.sw9.com.br
Meu GitHub: https://sw9brl.github.io/MyGitHubPage
Canal youtube: https://youtube.com/+sw9brl
Link do vídeo: https://youtu.be/okUYJE03hqY
Parceria: https://www.tubebuddy.com/pricing?a=sw9brl
✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se
Que tal me pagar um café :-)
Uma pequena quantidade de café foi consumida durante a produção de um post + vídeo. Se puder, contribua adicionando mais combustível para que eu tenha condições de seguir em frente.
Brincadeiras à parte, o valor selecionado é multiplicado por 2 (x2) que representa a multiplicação de minha dedicação a cada contribuição que recebo.
Deixe um comentário