Categorias
HTML5 JavaScript Tutoriais

Trabalhando com XMLHttpRequest e Fetch API

Nesse post vamos trabalhar com duas opções para realizar requisições Assíncrona a dados no servidor XMLHttpRequest e Fetch API. Com a popularização do jQuery por muito tempo utilizamos a biblioteca para fazer requisições AJAX pela facilidade, melhorias com recursos extras e o suporte aos browsers antigos.

Mas temos um recurso antigo que nos permite realizar requisições ao servidor com Vanilla JavaScript, o XMLHttpRequest.

XMLHttpRequest

XMLHttpRequest é um objeto XHR para interação com servidores. Com ele podemos requisitar dados sem realizar o reload de todo conteúdo, para você que está programando agora isso pode parecer básico, mas não era possível no começo da web.

Com a popularização do AJAX o XMLHttpRequest foi utilizado como recurso base para o conceito. O nome sugere que a API é focada em XML, mas elas pode resgatar qualquer tipo de dado.

Utilizando XMLHttpRequest

Para esse exemplo iremos fazer uma requisição a um arquivo em nosso projeto:

function onLoadRequest(event) { console.log(this.responseText); } const oRequest = new XMLHttpRequest(); oRequest.addEventListener('load', onLoadRequest); oRequest.open('GET', '/dados.json'); oRequest.send();

No código acima criamos uma objeto XMLHttRequest, onde adicionamos um listener para ouvir quando a requisição for lida. Assim abrimos uma requisição do tipo GET para arquivo dados.json em nosso projeto. E por fim enviamos a requisição com o método “send”

Por padrão essa requisição será assíncrona, isso significa que a execução do código continuará sendo executada e quando os dados forem recebido a função de callback onLoadRequest será executada.

Tratando as resposta

Temos diversos tipos de atributos de respostas a requisição os principais são responseXML e responseText no exemplo anterior tratamos o responseText.

responseXML: é utilizado para tratar requisições feitas para arquivos XML, nesse tipo de requisição podemos trabalhar de quatro formas com: XPath, Parsing e serialização de XML, XMLSerializer e expressões regulares.

responseText: se você deseja ler conteúdo de texto ou de uma página web e injetar em sua página Web, esse é o caminho. Atualmente é o formato mais utilizado na web.

Monitorando o processo

No código anterior, adicionamos um listener para o evento de load mas temos a opção de trabalhar com 5 eventos:

  • progress
  • error
  • abort
  • load
  • loadend(abort, load ou error)
// evento disparado quando a requisição for completa function onLoadRequest(event) { console.log(this.responseText); } // evento disparado quando o download do arquivo tem uma progressão function onProgressRequest (oEvent) { if (oEvent.lengthComputable) { let percentComplete = oEvent.loaded / oEvent.total * 100; console.log('Percentagem:', percentComplete + '%') } else { console.log('O total do arquivo é desconhecido'); } } const oRequest = new XMLHttpRequest(); oRequest.addEventListener('load', onLoadRequest); oRequest.addEventListener('progress', onProgressRequest) oRequest.open('GET', '/dados.json'); oRequest.send();

Caso algo de errado aconteça podemos realizar uma verificação para realizar um tratamento. Assim vamos adicionar uma condicional em nosso código:

function onLoadRequest(event) { if(this.status === 200) { console.log(this.responseText) } else { console.log('Somthing wrong happen:',this.status); } }

No código acima verificamos se o status da requisição é 200(sucesso) caso contrário exibimos o status, dai temos uma várias possibilidades: 404, 401, 500…

Fetch API

Fetch API é uma melhoria sobre a XMLHttpRequest. Ela trás a possibilidade de trabalhar com interface para administrar as requisições de recursos na rede, anteriormente tínhamos XMLHttpRequest para acompanhar requisições na rede, mas era uma API bem limitada comparada com as necessidades das aplicações modernas que temos hoje em dia. Por outro lado sua desvantagem que ela está presente apenas nos browsers modernos.

Principal diferença que agora com Fetch Api podemos ter objetos específicos para requisições(Request) e repostas(Response). Isso permite que elas sejam utilizadas em diferentes situações como por exemplo, Service Workers e Cache API.

Ela também fornece uma definição para conceitos relacionados, como CORS e semântica de cabeçalhos HTTP.

Utilizando fetch API

Para realizar uma requisição com fetch API, chamamos o método fetch() presente no Window ou em um Worker global. O método tem como parâmetro obrigatório o caminho do arquivo ao qual desejamos requisitar. Agora vamos para um exemplo simples com fetch API:

fetch('/dados.json') .then((response) => console.log(response));

Primeira diferença, é a quantidade de linhas que escrevemos, também a opção de se trabalhar com Promises. No caso acima realizamos uma requisição para o mesmo endereço caso sucesso exibimos em nosso console o tipo de resposta que será seguinte, um objeto do tipo Response com as seguintes informações:

body: (...) bodyUsed: false headers: Headers __proto__: Headers ok: true redirected: false status: 200 statusText: "OK" type: "basic" url: "http://127.0.0.1:5500/dados.json"

Com podemos ver temos o corpo de nossa resposta que terá:

  • Nosso conteúdo
  • Status da requisição e do conteúdo
  • Informações sobre redirecionamento
  • Tipo da requisição
  • Cabeçalho da requisição

Se compararmos como XMLHttpRequest as informações serão as seguinte:

onabort: null onerror: null onload: null onloadend: null onloadstart: null onprogress: null onreadystatechange: null ontimeout: null readyState: 4 response: "{↵ "name":"fellyph",↵ "sobrenome": "cintra",↵ "blog": "https://blog.fellyph.com.br"↵}" responseText: "{↵ "name":"fellyph",↵ "sobrenome": "cintra",↵ "blog": "https://blog.fellyph.com.br"↵}" responseType: "" responseURL: "http://127.0.0.1:5500/dados.json" responseXML: null status: 200 statusText: "OK" timeout: 0 upload: XMLHttpRequestUpload {onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, …} withCredentials: false

Como podemos ver temos a informações de requisições, respostas e eventos tudo num lugar só, isso dificulta o tratamento da informação e realiza um consumo de dados desnecessário para o usuário.

Na requisição anterior caso queiramos tratar os dados da resposta fazemos da seguinte forma:

fetch('/dados.json') .then(response => response.json()) .then(data => console.log(data));

Para o tratamento de erros realizamos da seguinte forma, adicionamos um catch na chamada de nosso catch:

fetch('/dados.json') .then(response => response.json()) .then(data => console.log(data)); .catch(error => { console.log('Algo de errado aconteceu:', error ) });

Tipos de requisição

A fetch api pode realizar requisições para diferentes tipos de dados, como texto, images, como processar arquivos de text linha a linha. Além disso podemos enviar informações e realizar upload de arquivos.

Um exemplo de um envio de um arquivo json:

const data = { name: 'fellyph', sobrenome: 'cintra', blog: 'https://blog.fellyph.com.br' }; fetch('/usuario', { method: 'POST', // ou 'PUT' headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(data), }) .then(response => response.json()) .then(data => { console.log('Success:', data); }) .catch((error) => { console.error('Error:', error); });

Suporte

Fetch API é suportada por 95% dos browsers, os browsers que não possuem suporte:

  • Internet Explorer 11
  • Edge 13 e inferior

Podemos verificar o suporte da seguinte forma:

if (window.fetch) { // realizamos o request com fetch } else { // utilizamos um fallback }

XMLHttpRequest vs. Fetch API

Eles surgiram em tempos diferentes, por muito tempo XMLHttpRequest deu conta do recado mas com a evolução das aplicações web começamos a ter a necessidade de multiplas requisições, foi que então começamos a ter problemas com correntes de callbacks requisições a diferentes serviços.

Para solucionar esse problema tivemos a introdução de promises e junto a ela tivemos a inclusão de novas APIs que começaram a utilizar esse recurso como Fetch API, Service Worker entre outras Web APIs.

Podemos dizer que Fetch API é a evolução da XMLHttpRequest. Apesar da estrutura ter mudado drasticamente elas possuem o mesmo objetivo solucionar o problema com requisições assíncronas. Além de ser extremamente poderosa.

Para mais tutoriais sobre desenvolvimento web acesse a página da categoria tutoriais.

Categorias
JavaScript WordPress

Como JavaScript está influenciando o desenvolvimento com WordPress

Final de 2018 tivemos o lançamento do Gutenberg a nova experiência de edição do WordPress, uma das ações mais impopulares da história da plataforma dava um passo muito relevante referente ao core da plataforma. Ação invisível para a maioria dos usuário Gutenberg iria influenciar o desenvolvimento JavaScript e WordPress como conhecemos.

Desde o lançamento do WordPressa mais de 15 anos atrás muita coisa mudou na web e especialmente referente a desenvolvimento JavaScript. Gutenberg trouxe para o core do WordPress JavaScript moderno algo necessário para evolução da plataforma. Tecnologias como React, fazem parte do core do WordPress isso mesmo: React.

Esse movimento está transformando o desenvolvimento WordPress para muito mais modular, onde tivemos a introdução de blocos componentes visuais independentes que reduzem a responsabilidade dos temas referentes a funcionalidades.

Essa transição nós trouxe uma pergunta qual será a responsabilidade de um tema em uma aplicação WordPress?

Para isso precisamos entender alguns itens dentro do Gutenberg:

Blocos

Blocos trazem uma estrutura que permite nosso editor de conteúdo sair de um grande bloco de texto para items modulares que permitem sua composição de Layout, os Blocos são divididos em categorias como:

  • Layout
  • Formatação
  • Widgets
  • Códigos incorporados

Por de trás das cortinas no banco de dados os blocos continuam sendo gravados na mesma tabela wp_content com uma diferença os blocos são marcados com comentários e renderizados pela API do Gutenberg.

Componentes e estado

Com a introdução de Blocos e React conceitos como Componentes e estado foram introduzidos com React elementos visual armazenam estado que armazena informações relacionadas a um dado especifico compartilhado por diferente elementos visuais. Mas isso trouxe uma série de desafios para a plataforma como controlar esse fluxo com PHP e React. Algumas modificações foram feitas e o React foi encapsulado para se adaptar com a plataforma. Funções para fazer a ponte entre PHP e React.

Modularização

Dentro da biblioteca do Gutenberg existe um módulo com uma série de componentes base que podem ser reutilizados tanto no editor quando o front-end da aplicação se abrimos o console de nossa aplicação e digitarmos “wp.” conseguimos visualizar todos os módulos disponíveis dentro do WordPress e se digitarmos “wp.components”conseguimos ver todos os components disponíveis no WordPress.

Todos os módulos do JavaScript para WordPress estão disponíveis como pacotes do nodeJS onde podemos ver no link: https://www.npmjs.com/search?q=%40wordpress

pacotes node WordPress

Além disso o uso de pacotes permite o uso do Gutenberg fora do WordPress como foi utilizado pelo Drupal recentemente.

JavaScript moderno

Com Gutenberg temos a possibilidade de desenvolver com EcmaScript 5 ou EcmaScript 2015+ ou superior. Se ainda não domina a nova sintaxe do JavaScript você pode continuar desenvolvendo com EcmaScript 5 mas o recomendado é o uso de JavaScript moderno seu código ficará mais enxuto e você terá a possibilidade de trabalhar com JSX.

Nem todos os browsers suportam JavaScript moderno, por exemplo, Internet Explorer 11. Para isso precisamos fazer o uso de transpilers para fazer a conversão de JavaScript moderno para EcmaScript 5.

Plugins e Temas

Mas todos esses benefícios estão restritos para o Gutenberg? Não, os recursos do Gutenberg podem ser utilizados por plugins e temas. With the package @wordpress/scripts podemos incorporar scripts do core em nossos plugins e temas. Para isso importamos em nosso projeto com o seguinte código:

npm install @wordpress/scripts --save-dev

Com esse pacote nodeJS conseguimos realizar formatação, validação de código e tests:

  • wp-scripts build
  • wp-scripts format-js
  • wp-scripts lint-style
  • wp-scripts lint-js
  • wp-scripts start
  • wp-scripts test-e2e
  • wp-scripts test-unit-js

Para saber mais sobre os pacotes acesse: www.npmjs.com/package/@wordpress/scripts

Block Scaffolding

Lançado no final de fevereiro de 2020 um pacote node que cria um template básico de um bloco Gutenberg. Como o conhecido create-react-app do React.

Para instalar rode o seguinte comando:

npm install @wordpress/blocks --save

O pacote cria um template de uma bloco com elementos básicos customização de CSS, JavaScript e PHP sem se preocupar com configuração de elementos como webpack, babel e ESLint.

Por padrão ele irá utilizar EcmaScript 2015+ mas podemos através de configurações definir o uso de EcmaScript 5. Depois de instalado o pacote @wordpress/blocks para criar um bloco básico em seu terminal de linha de comando digite:

npm init @wordpress/block [nome-do-seu-bloco]

Ele irá criar um bloco com os comandos para:

  • Inicia o desenvolvimento: npm start
  • Compilar o código para produção: npm run build
  • Formatar o código JavaScript de sua aplicação: npm run format:js
  • validação de código css e js: npm run lint:css ou npm run lint:js

Os requisitos básicos para utilizar o pacote são node 10.0.0 e npm 6.9.0.

Conclusão

Ainda estamos no inicio de uma revolução os desenvolvedores que acompanham o Gutenberg desde o inicio já estão tirando proveito desses benefícios, mudando sua rotina referente ao desenvolvimento. Muitas empresas ainda estão adiando essa mudança de paradigma pode enxergar o WordPress apenas como um editor visual e outras por conta de Código legado.

Essa mudança irá mudar o jeito em que desenvolvemos nossa aplicação WordPress de forma mais modular iremos sair da estrutura padrão de templates estáticos e entraremos numa estrutura que blocos serão utilizados em qualquer parte de nossa aplicação. Assim reduzindo ainda mais a dependência de funcionalidades de uma aplicação WordPress com o tema.

Nos próximos posts estarei abordando o @wordpress/block com mais detalhes vamos ver na prática como utilizar essa poderosa ferramenta. Para acompanhar ver mais posts sobre Gutenberg e WordPress acesse a página da categoria.

Categorias
AMP Accelerated mobile pages

Criando light-box com AMP: amp-lightbox

Nesse post vamos ver como implementar um light-box em nossa aplicação AMP, light-box é um dos recursos mais usados desde a popularização do JavaScript. Na maioria das vezes usado para focar a exibição de elementos gráficos ou mensagens. A plataforma amp disponibiliza três componentes para exibição de light-box amp-lightbox, amp-image-lightbox e amp-lightbox-gallery.

Cada um desses componentes possui uma aplicação específica, Para esse tutorial iremos abordar o componente amp-lightbox.

amp-lightbox

Esse componente quando utilizado seu elemento filho será exibido em uma modal quando acionado através de um evento de clique. Com isso temos que ter um segundo elemento para ativa-lo, um botão poderá ser uma alternativa. O componente possui alguns comportamentos já pre definidos, por exemplo, quando o usuário pressionar a tecla “esc” o light-box será fechado. Um alternativa é incluir um elemento com a ação close no light-box.

O componente amp-lightbox é um componente extended assim precisamos carregar o script relacionado:

<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

Com essa introdução vamos criar o nosso primeiro exemplo, baseado no projeto the best caipirinha, vamos utilizar o light-box para trazer mais informações sobre os items da nossa receita, por exemplo, descrição sobre cana de açúcar com isso temos o seguinte código:

<button on="tap:sugarcane-wiki">sugarcane</button> <amp-lightbox id="sugarcane-wiki" layout="nodisplay"> <p> Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum... </p> </amp-lightbox>

Apenas com o botão e o componente amp-lighbox temos nosso light box somente com a funcionalidade como podemos ver na imagem abaixo:

Agora é hora de adicionar a parte visual, para isso precisamos adicionar o estilo para o nosso elementos com isso vamos criar classes para estilizar nossos elementos em nosso CSS e aciona-los em nosso elementos HTML:

CSS

.lightbox { align-items: center; background: rgba(0, 0, 0, 0.8); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; height: 100%; width: 100%; position: absolute; padding: 2em; } .lightbox_p { color: #fff; font-size: 1.5em; font-weight: 500; }

HMTL

<amp-lightbox id="sugarcane-wiki" layout="nodisplay"> <div class="lightbox"> <p class="lightbox_p"> Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum.... </p> <p class="lightbox_p">source: wikipedia</p> </div> </amp-lightbox>

Adicionando o estilo temos o seguinte resultado:

Apenas adicionando o botão para abrir o light-box, para fechar precisamos pressionar a tecla “esc” mas isso pode não ser intuitivo para os nossos usuários com isso vamos adicionar um botão fechar dentro de nosso light-box.

<amp-lightbox id="sugarcane-wiki" layout="nodisplay"> <div class="lightbox"> <p class="lightbox_p"> Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum.... </p> <p class="lightbox_p">source: wikipedia</p> <button class="lightbox_close" on="tap:sugarcane-wiki.close">close</button> </div> </amp-lightbox>

Adicionamos um botão com a ação de close sobre o light-box, falando em ações o componente amp-lightbox aceita duas ações open e close. Por padrão ele aciona a ação de open por isso que no botão para abrir o light-box não especificamos a ação. Agora para realizar a estilização do nosso botão vamos adicioar o seguinte CSS:

.lightbox_close { position: absolute; right: 32px; top: 32px; width: 32px; height: 32px; opacity: 0.7; text-indent: -999px; overflow: hidden; border: none; background: transparent; } .lightbox_close:hover { opacity: 1; } .lightbox_close::before, .lightbox_close::after { background-color: #fff; content: ''; position: absolute; left: 16px; top: 0; height: 33px; width: 3px; } .lightbox_close::before { transform: rotate(45deg); } .lightbox_close::after { transform: rotate(-45deg); }

E o resultado será o seguinte:

com CSS criamos o botão de fechar o texto é escondido para ser ligo apenas por leitores de tela

Outro opção que poderíamos incluir se o usuário fechasse o light-box clicando no background com isso adicionamos o evento de clique no elemento com o class “lighbox”:

<amp-lightbox id="sugarcane-wiki" layout="nodisplay"> <div class="lightbox" on="tap:sugarcane-wiki.close" role="button" tabindex="0"> <p class="lightbox_p"> Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum... </p> <p class="lightbox_p">source: wikipedia</p> </div> <button class="lightbox_close" on="tap:sugarcane-wiki.close">close</button> </amp-lightbox>

No código acima adicionei o evento de tap no elemento lightbox também adicionei duas propriedades por questões de acessibilidade “role” e “tabindex” para tornar a div clicável e não interferir na ordem lógica dos elementos para leitores de tela.

Atributos

Então vimos alguns exemplos práticos com light-box agora vamos ver alguns atributos:

  • animate-in (opcional): define o estilo de animação de abertura do light-box. Por default sua aparição vai ser feita por fade-in. Mas temos disponíveis: fade-in, fly-in-bottom e fly-in-top.
  • close-button (obrigatório para AMP ads): renderiza um botão no to do lightbox. Ele é somente válido e obrigatório para AMP ads.
  • id (obrigatório): valor único para identificar o lightbox.
  • layout (obrigatório): deve ser definido como nodisplay.
  • scrollable (opcional): Quando este atributo é definido o conteúdo do light-box pode ter rolagem horizontal habilitada quando necessário.

O tipos de animações com animate-in eu vou deixar para mostrar em uma vídeo aula no meu canal, mas caso queira saber mais sobre AMP confira a página com outros tutoriais na página da categoria AMP.

Em breve estarei adicionando mais posts sobre os componentes amp, qualquer dúvida deixe um comentário e até o próximo vídeo.

Categorias
AMP Accelerated mobile pages JavaScript Tutoriais

Introdução ao AMP

AMP ou Accelerated mobile pages surgiu para solucionar um problema antigo das aplicações web relacionado a performance, o fato que muitas das aplicações web são desenvolvidas nos grandes centro onde as empresas e usuários tem facilmente acesso a conexão rápida. Quando as aplicações são testadas nos grandes centros não levam em conta o tempo de carregamento da aplicação em uma conexão lenta, e um dos dos objetivos do AMP foi solucionar este problema e e entregar essa informação priorizando performance.

Sabemos conexões rápidas não se aplica ao resto do planeta muitas regiões ao redor do globo continuam tendo dificuldade de acessar conteúdo online. Como podemos promover a inclusão desses grupos preocupado com esse problema o time do Google criou o projeto open source chamado Accelerated Mobile Pages posteriormente chamado apenas de AMP.

Mas esse problema também afeta os grandes centros usuários mobile com conectividade limitada também tem sua experiência prejudicada, todos esses problemas aumentam o tempo de carregamento e na exibição de elementos na tela. Além do fato que aplicações de alta performance ajudam na taxa de conversão usuários, que tais usuários estão cada vez mais utilizando aplicações web através de dispositivos moveis.

AMP permite a criação de sua aplicação em um curto espaço de tempo, isso através de componentes criando um ambiente de fácil manutenção além promover melhores praticas como:

  • Performance
  • Acessibilidade
  • Confiabilidade
  • Design responsivo

Além disso AMP reduz a complexidade do seu código, mas sem perder o controle de sua aplicação você continua com a capacidade de adicionar código CSS para customizar sua aplicação. O set de componentes já existentes ajudam na agilidade na criação de novas aplicações presando a performance. AMP é um projeto open source a comunidade sem está criando novos componentes e novas versões da aplicação e a base do seu código sempre será atualizada

Como AMP funciona

AMP possui três pilares:

  • AMP HTML extende HTML básico criando novas tags criando novas features, por trás das cortinas ele trabalha com web components
  • AMP JS controla a execução de javascript também adicionando melhorias de performance como tree shaking.
  • AMP Cache armazena o conteúdo da aplicação.

A performance dentro de projetos AMP é possível por conta de alguns pontos chaves que iremos listar a seguir.

JavaScript assíncrono

com javascript podemos modificar todos os aspectos de uma página, mas também bloquear o seu processamento caso não especificarmos que o seu carregamento não afete a renderização da página. Nesse caso todo o carregamento de JavaScript em AMP é feito de forma assíncrona para não afetar a entrega do conteúdo.

Por isso AMP restringe o carregamento de JavaScript escrita pelo autor nesse caso temos que utilizar tags especiais para incluir interação com o usuário.

Evita que extensões de terceiros bloqueiem a renderização

AMP não permite que extensões como, lightboxes, instagram, embers, tweets bloqueiem a renderização do seu conteúdo. Muitos desses items enquanto fazem requisições para suas respectivas APIs bloqueiam a renderização da sua aplicação, mas isso não significa que que você não poderá utilizar esses recursos AMP tem uma série de componentes para interagir com outras plataformas.

Tamanho de todos os recursos estaticamente

Recursos como imagens, iframes ou anúncios, precisam informar seu tamanho no HTML, de modo que AMP possa determinar o tamanho e a posição de cada elemento antes que os recursos sejam baixados. AMP carrega o layout da página sem esperar o download de nenhum recurso.

AMP separa o layout HTML dos recursos externos, isso para priorizar a entregar com conteúdo mais rápido possível. Apenas uma solicitação HTTP é necessária para o todo o layout do documento (+ fontes). Como AMP é otimizado para evitar recálculos de estilo no seu navegador, não haverá nenhum novo layout após a ultima requisição.

Gerenciamento de Javascript de terceiros

AMP mantém todos os scripts de terceiros fora do caminho crítico da renderização das páginas. JS de terceiros gostam de usar carregamento síncrono para executar suas tarefas para garantir sua execução mas isso acaba aumentando o tempo de carregamento da aplicação.

Páginas AMP permitem o carregamento de scripts de terceiros mas apenas em iframes. Com isso o carregamento fica isolado e não afeta o processamento principal de nossas páginas. Mesmo que eles afetem o estilo da página o impacto será mínimo.

Atualizando o post enquanto estava escrevendo este post

CSS inline e com tamanho limitado

O CSS externo como sabemos bloqueia a renderização de nossa página, nas páginas AMP somente estilos inline são permitidos, com isso temos uma requisição a menos em nossa aplicação e uma renderização crítica de nossa aplicação web.

Além disso a folha de estilo in-line é limitada para um máximo de 50kb. Embora esse tamanho seja grande o suficiente para páginas muito sofisticadas, ele ainda exige que o autor mantenha o CSS limpo.

Carregamento eficiente de fontes

As fontes web são uma parte visual importante das nossas aplicações web, portanto, a otimização de fontes é um ponto crucial de nossa aplicação algumas web fonts são bem pesadas aumentando o tamanho total da nossa aplicação. AMP realiza optimização no carregamento de fontes e realiza o preload nossas fontes.

Animações somente utilizando a GPU

O único modo de ter uma aplicação de alta performance é realizado o uso eficiente dos recursos e utilização da GPU é um recurso importante para isso. Todas as animações com AMP são executadas pela GPU assim liberando a thread principal para processamento crítico de nossa aplicação.

Priorização do carregamento dos recursos

AMP controla o carregamento de todos recursos: com isso os recursos serão carregados quando realmente necessários utilizando técnicas como lazy-load e prefetch.

Além disso AMP possui uma lista de prioridade exemplo, imagens estão no topo da lista enquanto ads estão no final dessa lista. Outro fator importante para priorização é quais os recursos estão sendo exibidos para o usuário.

Utilização de novas API para reduzir o tempo de carregamento

A nova API preconnet API é usada intensamente para garantir as solicitações HTTP sejam feitas o mais rápido possível. Com isso a página pode ser pre carregada em background, por isso algumas vezes quando clicamos nos primeiros resultados de uma busca no Google temos o carregamento instantâneo.

Embora o pré-processamento possa ser aplicado a todo o conteúdo da web, ele também ajuda na largura de banda e o uso de CPU.

Web Components

Com AMP HTML temos a possibilidade de utilizar uma variedade de componentes web, utilizando somente elementos nativos da plataforma o framework disponibiliza uma série de componentes reutilizáveis para entregarmos uma aplicação interativa.

Esse são alguns dos items relevantes na plataforma a lista completa você pode encontrar na documentação em amp.dev. Em meu canal do youtube estarei rodando um curso sobre o framework onde você pode conferir a playlist do curso aqui: https://www.youtube.com/playlist?list=PLmIA3VZysEqQxsVcZ7u2ZHOnh78eIOKON

Também confira mais posts na página da categoria AMP.

Categorias
Geral

11 Mitos sobre AMP

AMP se tornou um framework bastante popular nos últimos anos por renderizar e entregar conteúdo em alta perfomance, atualmente 10 milhões de domínios na internet entregam conteúdo utilizando a tecnologia, mas também surgiu alguns mitos sobre AMP e nesse post traduzir um post do blog do AMP: “Debuking Common AMP Myths” e vamos conferir abaixo.

MITO #01: AMP é um projeto exclusivo do Google.
FATO #01: AMP é um projeto open source liderado pelo Google em conjunto de outras empresas e membros da comunidade.

Os desenvolvedores AMP, empresas e colaboradores individuais participam no desenvolvimento deste projeto: Nos últimos três anos, o AMP recebeu contribuições de 850 colaboradores, 78% desses colaboradores são funcionários de outras empresas como Twitter, Pinterest, Yahoo, Bing e eBay. O AMP mudou-se para um novo modelo de governança, uma preocupação atual de vários projetos open source.

O modelo adotado dá voz a todos os membros da comunidade decentralizando as tomadas de decisões. Também incluindo usuários finais não ficando restrito apenas nos desenvolvedores.

MITO #02: AMP somente funciona para Google.com
FATO #02: Páginas AMP são acessíveis em toda a web, incluindo qualquer plataforma de distribuição e dispositivo.

Os usuários podem acessar páginas AMP por meio de qualquer plataforma de distribuição, por exemplo, mecanismos de pesquisa ou sites, como Linkedin ou Twitter que sempre distribuem páginas AMP como modelo padrão para celulares.

Plataformas como Google e Bing dão um passo além, elas armazenam o seu conteúdo para proporcionar um carregamento instantâneo.

MITO #03: AMP é apenas para mobile
FATO #03: O AMP é projetado com “responsividade” em mente, para funcionar em todos os tamanhos de tela.

AMP agora é somente AMP, inicialmente era um padrão Accelerated Mobile Pages agora por se uma tecnologia cross device o acrônimo perdeu seu significado agora ele se chama apenas AMP. Inicialmente AMP foi projetado para ser mobile friendly, para devices com hardware lento e conexões com alta taxa de latência. O impacto da tecnologia visto em um smartphone será ainda maior em um desktop. Mas também devemos entender que alguns recursos são projetados para uma experiência mobile, por exemplo , carrossel do Google Stories.

MITO #04: Toda página AMP também precisa ter uma versão não AMP.
FATO #04: Uma página AMP pode ser associada a uma não AMP, mas isso não é um requisito obrigatório.

Em alguns casos, convém ter uma versão não AMP e uma versão AMP da mesma página, especialmente é fases de migração de sua aplicação. Mas não é um requisito mantém ambas versões do mesmo conteúdo, se você achar que AMP atende todos os requisitos de sua aplicação você pode manter apenas a versão AMP.

MITO #05: AMP landing pages usualmente são mais difíceis de construir.
FATO #05: Geralmente isso irá custar menos de uma semana para construir uma landing page na maioria dos casos.

80% dos desenvolvedores contactados em pesquisa, reportaram que precisaram menos de uma semana para construir uma Landing page utilizando AMP. Dito isso, esforço para construir uma página dependerá do tipo de página que será construída, alguns modelos custarão mais tempo que outras, confira o a lista de templates gratuitos eles podem reduzir ainda mais o tempo de desenvolvimento de sua aplicação.

MITO #06: AMP é apenas para editores ou site estáticos
FATO #06: Mais de 60% dos cliques na consultas do Google são páginas sem ser páginas de notícias.

AMP foi construído graças a intensa colaboração com milhares de desenvolvedores, editores e plataformas de distribuição de conteúdo e empresas de tecnologia. Quando AMP foi lançado a primeira vez, ele foi adotado inicialmente por editores e portais de notícias. mas agora os anunciantes e as empresas de comércio eletrônico também estão aproveitando os benefícios da plataforma AMP.

MITO #07: AMP não suporta experiências interativas.
FATO #07: Os componentes AMP agora permitem personalização de design e experiências interativas.

Quando AMP foi lançado a pela primeira vez, ele tinha limitações de design. Á medida que o projeto AMP cresceu graças à colaboração da comunidade open source, foram criados novos componentes que permitem que as empresas façam personalização do design e criem experiências interativas. Empresas como BMW, AliExpress possuem bons exemplos de como utilizar a plataforma. Hoje a maioria das experiências interativas suportam:

Rich Media: O número de componentes AMP é cada vez maior e qualquer contribuidor pode contribuir na inclusão de novos componentes caso necessite.

Integração de terceiros: Existem uma vasta quantidade de integração com outras plataformas e você pode conferir aqui.

MITO #08: AMP não suporta sites de comercio eletrônico.
FATO #08: AMP é uma opção natural de comercio eletrônico, pois AMP torna as páginas Web mais rápidas e performance é um ponto importante para conversão de compras.

Quando AMP foi lançado, inicialmente editores e portais de noticias foram a principal adoção da plataforma. A medida que o projeto AMP cresceu, novos componentes foram criados para permitir que as marcas criassem suas experiências interativas. Agora AMP pode ser utilizado para construir experiência de comércio eletrônico de alta performance e atrativa. Para mais informações veja os posts “Getting started with AMP for e-commerce” e “E-commerce At The Speed of AMP” .

MITO #09: Não é possível atualizar conteúdo de páginas AMP.
FATO #09: Existem muitas opções de manter o conteúdo das páginas AMP atualizado.

Você pode veicular conteúdo novo em AMP usando o mecanismo de cache AMP padrão(stale-while-revalidate), usando a funcionalidade de atualização de cache ou usando componentes dinâmicos (como lista de AMP). Muitas das grandes empresas de e-commerce obtém bons resultados quando a implementação é planejada adequadamente.

MITO #10: AMP não é seguro/privado o suficiente.
FATO #10: O framework AMP foi criado para preservar a privacidade e garantir a segurança dos dados.

Ás páginas AMP são geralmente veiculadas Google AMP Cache, que simplesmente armazena em cache uma versão da sua página para fins de validação de documentos AMP e fornecer a entrega confiável e rápida do conteúdo. Google AMP Cache, assim como JavaScript AMP, são veiculados em domínios sem cookies que não rastreiam os usuários de forma alguma. Além disso, AMP tem um processo de análise de segurança que é usado rotineiramente ao lançar novos componentes AMP. Para ler mais, confira o post “Privacy and user choice in AMP’s software architecture”.

MITO #11: Páginas AMP não convertem tão bem quanto páginas não-AMP.
FATO #11: As páginas AMP otimizadas com frequência costumam ter um desempenho melhor do que as páginas não-AMP.

Muitos anunciantes e editores tiveram sucesso com o AMP, muito dos depoimentos você pode encontrar no portal amp.dev. Um estudo da Forrester descobriu que um site que implementa AMP pode esperar um aumento de 20% na taxa de conversão de vendas nas páginas AMP, um aumento de 10% no tráfego anual do site AMP e um aumento de 60% páginas por visitante.

Existem alguns motivos pelos quais uma página AMP pode apresentar um desempenho inferior a uma página não AMP.

*Caso não tenha um desempenho satisfatório, estas são algumas áreas para explorar:

Problemas de medição e monitoramento: certifique que as configurações do analytics na sua página AMP está seguindo os guias de configurações.

Inconsistências na sua página: se a Página AMP esteja sendo exibida diferente de uma página não-AMP, isto pode estar influenciando suas taxas de conversão. As páginas AMP devem ser identicas a páginas não-AMP em funcionalidades e aparência.

Tem uma categoria dedicada a AMP e no meu canal estou gravando um curso sobre AMP, se quiser saber mais sobre o curso voce pode conferir aqui:

Curso online sobre aMP