Client Side Storage | Aula 1 – Introdução| 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.

A partir de hoje começou um novo conjunto de Aulas, agora para falar e mostrar na prática as opções disponíveis para armazenamento de dados do lado cliente (Client Side Storage), APIs que existem graças a chegada do HTML 5.

O que veremos nesta aula?

Nesta primeira AULA eu farei uma Introdução sobre o tema [Client Side Storage], apresentando a motivação, opções, vantagens, segurança e comparação entre o modo de armazenamento BackEnd e FrontEnd.

Armazenamento Server Side e Client Side

Quando se pensa em armazenar dados do usuário durante o ciclo de navegação dentro do site ou aplicação web, logo se pensa em enviar e manter estes dados do lado do servidor, usando para isso sessões ou cookies.

Manter os dados do lado do servidor, traz menos performance para seu website, pois os dados são transferidos entre o servidor e o cliente dentro de cabeçalhos HTTP, onerando o tráfego de rede.  Além disso existe limitação na quantidade de dados que podem ser armazenados e o controle e implementação por traz é de certa forma coplexo, ainda mais pensando no quesito de segurança.

No entanto, com a chegada do HTML5 surgiram algumas tecnologias (na forma de API) que possibilitam armazenar os dados do lado do cliente (no dispositivo do cliente).

Optando por armazenar os dados do lado do cliente, como você vai ver no próximo tópico (motivação) traz alguns benefícios. Traz um pouco mais de segurança, permite armazenar mais dados e dependendo do volume de dados e da API que utilizar traz o benefício da performance.

Motivação

São vários os motivos que nos fazem pensar em aderir, e usar cada vez os recursos de armazenamento de dados do lado cliente. Os principais motivos são:

1- O usuário pode continuar trabalhando, mesmo que esteja offline. Existindo ainda a possibilidade de sincronizar os dados com o Backend, quando o usuário se conectar novamente;

2- Este processo por si só é bastante performático, trazendo como benefício uma melhor performance de su aplicação ou website;

3- O modo de implantação desta tecnologias é relativamente fácil;

4- É possível armazenar do lado cliente uma quantidade razoável de dados, sem comprometer a performance da aplicação ou website.

Segurança

As APIs para armazenamento de dados do lado cliente, são mais seguras se comparmos com o modelo de armazenamento usando sessões ou cookies.

Estas APIs trazem um isolamento de dados por domínio, protocolo e porta. Exemplificando:

Se teste.exemplo.com salvar dados, então o navegador só vai permitir que a mesma origem, no caso teste.exemplo.com leia estes dados no futuro.

Por outro lado, se exemplo.com salvar dados, teste.exemplo.com está desqualificado para ler estes dados.

A mesma regra vale para as portas: uma url do tipo teste.exemplo.com:8080 não pode ver os dados de teste.exemplo.com:80.

E por último, temos o protocolo, que também segue a mesma regra (http, https, etc).

Opções

Vou compartilhar com vocês 3 APIs para armazenamento de dados e uma API para sistema de arquivos.

Além da possibilidade de salvar e recuperar dados, em alguns casos é possível realizar pesquisas e manipular dados em batch.

Quotas – Limites de armazenamento

Quanto ao limite de armazenamento de dados do lado cliente, por padrão os navegadores restringem (fixam limites) com relação a capacidade de armazenamento.

Ainda bem que este tipo de limite existe, porque imagina um website ter armazenar grandes volumes de dados sem restrição alguma? Seria o caos.

Outro ponto que vale destacar aqui, é que os navegadores tipicamente notificam o usuário quando uma aplicação tenta exceder o limit de armazenamento. Com base na notificação, o usuário pode decidir se permite ou não o incremento de capacidade de armazenamento.

Aqui vai uma sugestão: caso queria gerenciar melhor as quotas, você pode usar a API a seguir: http://www.w3.org/TR/quota-api/

Transações

Considerando as opções que temos para armazenamento de dados do lado cliente, temos aquelas que suportam transações e outras não. A grande importância do uso de transações é garantir a integridade dos dados. O uso de transações previne um fenômeno chamado “race conditions”, situação onde duas sequencias de operações são aplicadas no banco de dados ao mesmo tempo e podem trazer resultados imprevisíveis.

Modo Assincrono Vs Sincrono

Da mesma forma que ocorre com as transações, algumas opções trabablham com os dois modos e outras apenas operam no modo síncrono.

Apesar se sempre tendermos a buscar uma alternativa assíncrona, a decisão de qual modo usar vai depender da arquitetura do seu website ou aplicação web.

Lembrando que ao executar uma operação de armazenamento no modo assíncrono, a tarefa será executada em background o usuário final não será penalizado por bloqueiso ou travamento durante a navegação.

Não Percam

Eu estou preparando uma tabela comparativa listando os pontos fortes e fracos de cada opção.  Em breve irei disponibilizá-la na minha área de downloads.  Caso queira receber uma notificação no momento da liberação, por favor se inscreva na minha área de downloads.  Obrigado.

[Conclusão]

Na aula de hoje [Client Side Storage | Aula 1 – Introdução | Série HTML5 | SW9], demos sequência na Mega série sobre HTML 5.

Começamos uma nova sequencia de Aulas, agora para falar sobre os tipos de armazenamento de dados do lado do cliente (client Side Storage) que surgiram com o advento do HTML5.  Nesta primeira Aula falei sobre a motivação, opções, comparação entre o modo de armazenamento BackEnd Vs FrontEnd, vantagens e segurança.

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

Cloud 9: https://c9.io/login

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/PYilQkDtSrY

Parceria: https://www.tubebuddy.com/pricing?a=sw9brl

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se