Categorias
Web

Lighthouse 6.0

Lighthouse para quem não conhece ele é o sistema de auditorias de performance, accessibilidade, SEO e PWA dentro do Chrome Dev tools. Também com a possibilidade de instalação no firefox através de extensão e com NPM.

Nesse mês de maio foi anunciado a versão 6.0 do Lighthouse, que estará disponível na versão 84 do Chrome. Essa nova versão contém as seguintes melhorias:

  • Novas métricas
  • Atualização da pontuação referente a performance
  • Novas auditoria sobre JavaScript não utilizado e Acessibilidade
  • Atualização no Lighthouse CI
  • Agora a aba Audits mudou para Lighthouse
  • Mudanças na emulação mobile
  • Performance Budget

Novas métricas

Largest Contentful Paint(LCP)

Maior pintura com conteúdo é uma medida da experiência de carregamento percebida. Ele marca o ponto durante o carregamento da página quando o conteúdo principal foi carregado e é visível para o usuário. O LCP é um complemento importante para First Contentful Paint(FCP), que captura apenas o início da experiência de carregamento.

Cumulative Layout Shift (CLS)

Deslocamento cumulativo de layout é uma medida da estabilidade visual. Quantifica quanto o conteúdo de uma página muda visualmente. Uma pontuação baixa no CLS é um sinal para os desenvolvedores de que seus usuários não estão passando por mudanças indevidas de conteúdo.

Total Blocking Time(TBT)

Tempo total de bloqueio quantifica a capacidade de resposta de carga, medindo a quantidade total de tempo em que o encadeamento principal foi bloqueado por tempo suficiente para impedir a capacidade de resposta da entrada. O TBT mede a quantidade total de tempo entre a FCP e tempo de interação.

Atualização de pontuação de Performance

A pontuação de performance é baseado nas seguintes métricas:

  • First Contentful Paint – 15%
  • Speed Index – 15%
  • Lagest Contentful Paint – 25%
  • Time to Interactive – 15%
  • Total Blocking – 25%
  • Cumulative Layout Shift – 5%

Lighthouse CI

No último Chrome Dev Summit foi anunciado o Lighthouse CI, um CLI em node de código aberto que realiza auditoria trazendo os resultados do Lighthouse para terminal de linha de comando. Agora Lighthouse tem suporte nativo de vários provedores de integração continua(CI), incluindo Travis, Circle, Gitlab e Github actions.

Para instalar o lighthouse CLI em seu terminal de linha de comando execute o seguinte código:

npm install -g lighthouse

Depois de instalado você pode realizar auditorias rodando o seguinte comado:

lighthouse https://www.example.com --view

O post completo sobre o lançamento você confere aqui: https://web.dev/lighthouse-whats-new-6.0/

Categorias
Web

PWAs em 2020

Todos os anos temos uma compilação dos últimas features referentes a PWA no Google I/O o congresso anual do Google para desenvolvedores. No último ano 2019 confesso que não fiquei muito empolgado com os lançamentos relacionados a PWA no Google I/O, mas analisando por um outro lado é o resultado de uma maturidade do conceito PWA.

Progressive web apps em si, já tem sua base, com Service Workers e Web manifest não temos muito o que mudar. Saber dos valores de criar apps rápidos, seguros e que cativem o usuário, por fim, temos a evolução das Web APIs esse é um ponto que ainda terá uma evolução, as Web APIs nos permitem implementar recursos antes só possíveis com aplicações nativas esse ponto irei falar mais pra frente.

Por conta da situação que estamos passando as principais conferências no mundo foram canceladas e o Google I/O também está incluso nessa lista então não teremos um evento principal com anúncio de novas features relacionadas a PWAs, mas esse ano acredito que teremos lançamentos menores com seguindo as versões do Chrome e numa previsão otimista teremos um Chrome Summit online.

Releases do Chrome

Com toda a situação com o covid-19 o calendário de lançamentos do Chrome foi alterado, tivemos na última semana a versão 81 sendo lançada com suporte em versão de teste a NFC e suporte total a badging api, mas Google anunciou que irá pular a versão 82 atrasando o anuncio de alguns novos recursos em 6 semanas, mas o Google irá trabalhar apenas em bugs e correções de segurança durante esse período e somente lançar a versão 83. Se a situação se normalizar eles voltarão ao ciclo de 6 semanas.

Projeto Fugu

Apresentação do Projeto Fugu no I/O 2019

Projeto Fugu, é um projeto que visa habilitar na plataforma web recursos que eram somente possíveis com apps nativos uma série de empresas estão envolvidas nesse processo. Mas Claro que os releases do Chrome influenciam na implementação de recursos PWA eles são responsáveis pelos browsers Android e recentemente é o motor por trás do Microsoft Edge.

Com a adoção do Edge ao Chromium aumentou a quantidade de desenvolvedores, assim dando um fôlego maior ao Projeto Fugu na implementação de novas web APIs. Não só apenas Google e Microsoft contribuem com o Projeto Fugu, mas temos empresas como Intel e Samsung como contribuidores.

Google compartilhar uma lista pública de quando as funcionalidades serão implementadas no Chrome, que você confere aqui: https://docs.google.com/spreadsheets/d/1de0ZYDOcafNXXwMcg4EZhT0346QM-QFvZfoD8ZffHeA/edit#gid=557099940

O legal dessa lista é atualizada a cada release do chrome, outro ponto importante você também pode contribuir com sugestões de features: https://developers.google.com/web/updates/capabilities

Recursos para PWAs já lançados em 2020(Abril)

  • Web Share API target
  • Contact Picker API
  • Periodic Background Sync
  • Web OTP API – Screen Lock
  • Clipboard para imagens
  • Launch keyboard Map API

Recursos da Web API previstas para 2020

  • Web NFC
  • Content Index API
  • Screen enumeration API
  • File Handling API
  • getInstalledRelatedApps
  • Native File system API
  • WakeLock API – Screen Lock
  • Shape detection API

iOS

Quase contra-mão o Webkit trabalha de forma isolada, tratando de recursos que a Apple acha prioridade para o safari, por exemplo, na última versão do safari 13.1 tivemos a inclusão de recursos como:

  • Async Clipboard API
  • Picture-in-Picture API
  • Remote Playback API

Muitas empresas já viram o benefício de se investir em PWAs, mas a Apple evita de mencionar o termo PWA por conta de ser um termo vindo do Google para definir o conceito. Segundo acredito no ponto de vista relacionado ao business atual da empresa que a Apple Store, como ela irá encaixar PWAs com apps nativos.

Particularmente acredito que a Apple continuará implementando novos recursos da Web API quando é de seu interesse e a tentará uma implementação da formula diferente da apresentada pelo Google. Mas 2020 ainda não será o ano que teremos full suporte pela Apple. Para saber mais sobre PWA confira a página do curso de Progressive web Apps.

Categorias
JavaScript Tutoriais Web

Introdução a Service Worker

Nesse posts vamos falar sobre service worker é um dos recursos chaves dentro das Progressive web Apps vamos entender como ele funciona e o seu ciclo de vida. Para quem ainda não viu, estou gravando uma série sobre PWA em meu canal do youtube, até o momento tenho mais de 12 aulas gravadas também estou adicionando conteúdo complementar no blog.

O que é um service worker?

Nada mais é que o coração das PWAs, não é nenhuma tecnologia especial e sim um arquivo JavaScript que roda em segundo plano em nossa aplicação o que isso significa? Ele não é executado na thread principal da aplicação junto com execução do HTML e CSS, ele não tem acesso ao DOM por exemplo. Isso abre uma porta para recursos rodarem independente do browser por exemplo push notifications e execução de código em segundo plano. Outro recurso extremamente importante é o suporte a experiência offline, dando ao usuários controle sobre a aplicação independente da conectividade.

Pontos importantes sobre Service Worker

  • Precisa estar rodando em HTTPS
  • Ele é uma JavaScript Worker, ele não tem acesso ao DOM
  • Permite controlar como serão feitos os requests a rede
  • Faz o uso intensivo de promises
  • Precisa ser instalado por outro JavaScript
  • Possui um escopo e esse escopo é baseado onde o arquivo do service worker se encontra.

Ciclo de vida

Quando registrado por outro JavaScript, o service worker passa a ter um ciclo de vida independente do conteúdo web em que foi registrado. Ele será movido para outra Thread como mencionamos anteriormente, quando registrado ele irá chamar o evento Install event, se durante o processo de instalação ocorrer um erro na transferência de algum arquivo o processo de instalação irá falhar. mas se tudo ocorrer bem ele irá disparar um segundo evento Active event.

Depois que o Active event é disparado o service worker está pronto para disparar funções em segundo plano e acompanhar os dados que estão sendo transferidos entre aplicação e a rede. Neste momento conseguimos definir estratégia de cache e suporte offline. A imagem abaixo resume os passos que acabamos de comentar.

Ciclo de vida de um service worker

Na imagem acima temos uma definição completa do ciclo de vida de um service worker, com adição a um ponto importante quando adicionamos uma nova versão ela fica em estado de espera, ela só será instalada quando todas as instâncias da nossa aplicação forem finalizadas.

Registrando um Service worker

if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js').then(function(registration) { // service worker registrado com sucesso console.log('ServiceWorker registrado no seguinte escopo: ', registration.scope); }, function(err) { // falha no registro:( console.log('Falha no registro do ServiceWorker: ', err); }); }); }

O código acima será implementado pelo o JavaScript responsável por registrar o nosso Service Worker, na primeira linha verificamos se o nosso browser possui suporte a tecnologia, caso tenha, o registramos com a função com navigator.serviceWorker.register e através de uma promise verificamos se o service worker foi instalado com sucesso. E dentro do nosso sw.js podemos adicionar listener para acompanhar o seu ciclo de vida:

self.addEventListener('install', function(event) { // acompanha a instalação do service worker }); self.addEventListener('activate', function(event) { // acompanha quando o service worker está ativo }); self.addEventListener('fetch', function(event) { // acompanha quando a aplicação faz transferência de arquivos });

Os listeners serão importante para criar um cache, acompanha mensagens e definir estratégias de cache. Para esse post, vamos fechando por aqui, se ainda não segue o meu canal no Youtube, lá estou sempre postando conteúdo sobre PWA: https://www.youtube.com/user/fdangellys

Veja os posts sobre PWA aqui

Veja também o mini curso sobre PWA

Categorias
Tutoriais Web

Ciclo de vida de um componente react

Ciclo de vida de um componente react, um recurso importante dentro do React onde temos maior controle sobre nossa aplicação. Imagine você quer criar um Timer que irá contar somente quando o componente estiver sendo exibido na tela. Qual seria o evento que poderíamos incluir caso o componente fosse removido da tela? 

React nos fornece uma série de funções dentro do nosso componente, para cada fase do seu ciclo de vida. Podemos acompanhar quando:

  • Montado – Mounting
  • Atualizado – Updating
  • Desmontado – Unmounting
  • Dispara um erro – Error Handling

Eventos de montagem

Temos o constructor e a função render executados quando nosso componente é criado mas temos uma função especifica para quando nosso componente é criado componentDidMount(), essa função será executada após o constructor and render serem executados. Elas possuem a seguinte ordem:

  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()

Eventos de atualização

Quando nosso componente é atualizando chamamos uma série de funções na seguinte ordem: 

  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

As funções marcadas como bold são as funções mais usadas, o resto são utilizadas em casos bem específicos

Eventos de desmontagem

Temos um evento específico para quando nosso componente é removido do nosso. 

  • componentWillUnmount()

Mas vocês podem se perguntar mas porque que chamar uma função pra quando o meu componente for removido da tela. Podemos ter alguns casos, temos um formulário e o usuário não enviou os dados queremos salvar essa info caso ele volte para esse componente ou simplesmente remover um listener ou um Timer, nesses casos temos o controle de executar qualquer ação antes desse componente seja removido do virtual DOM.

Eventos de erro

Se algum erro ocorrer durante a renderização, durante alguma função do ciclo de vida ou no construtor de qualquer componente. filho.

  • static getDerivedStateFromError() 
  • componentDidCatch()

Durante a evolução do React algumas funções ficaram para trás e foram descontinuadas, são elas:

  • componentWillMount()
  • componentWillUpdate()
  • componentWillReceiveProps()

Essas funções não são mais recomendadas pelo time do React, são classificadas como UNSAFE.

Exemplo 1

class CicloDeVida extends React.Component { constructor(props) { super(props); console.log('constructor'); } componentDidMount() { console.log('montou'); } render() { console.log('render'); return <h1>Ciclo de vida de um Component</h1>; } } ReactDOM.render( <CicloDeVida />, document.getElementById('root') );

No Exemplo 1, temos apenas a chamada do função componentDidMount() com o um console.log, para testarmos a ordem também adicionamos logs no construtor e no método render. E a saída será a seguinte:

Essa será a ordem de execução

Exemplo 2

class CicloDeVida extends React.Component { constructor(props) { super(props); console.log('constructor'); this.state = {timer: new Date()}; } updateTimer() { this.setState({ timer: new Date() }); } componentDidMount() { console.log('montou'); this.timerFunctionContainer = setInterval( () => this.updateTimer(), 1000 ); } componentDidUpdate() { console.log('atualizou'); } componentWillUnmount() { console.log('desmontou'); clearInterval(this.timerFunctionContainer); } render() { console.log('render'); return <React.Fragment> <h1>Ciclo de vida de um Component</h1> <p>Hora atual: {this.state.timer.toLocaleTimeString()}</p> </React.Fragment>; } } ReactDOM.render( <CicloDeVida />, document.getElementById('root') );

No exemplo 2, incluímos mais funcionalidades em nosso exemplo, agora temos um timer para exibir a hora atual. Adicionamos a propriedade timer em nosso estado. E na função componentDidmount irá incluir um setIterval para atualizar o timer a cada segundo, mas para garantir nenhum tipo de erro removemos o setInterval antes de desmontar o nosso componente. Outra observação sobre a ordem de chamada das funções:

Cada vez que o estado é atualizado chamamos, render e a função componentDidUpdate

Post anterior falei sobre eventos no react e qualquer dúvida deixe o comentário.

Categorias
Web WordPress

Wordcamp Dublin 2017

Last year I’ve moved to Dublin and had a chance to participate on three WordCamps in Europe. London, Vienna, and Belfast. The last one I did a presentation, was crazy because I replace a speaker 12 hours before the presentation. But in the end was nice the support that the community gives me, and I did my first presentation in Europe.

And this year I was selected to do a presentation on WordCamp Dublin 2017 will be my first WordCamp this year, Dublin is special because is a huge IT polo and Europe and a WordCamp here has a special meaning.  The event happens during two days  14 and 15 of October, two days talking about: Theme development, Boilerplating, Accelerated Mobile Pages, Content, SEO, Workflow, and E-commerce.

You can check the schedule here:

Schedule

Who knows the WordCamp, know the price is so low compared other events. The tickets are priced at  €35.

Tickets

So have a look and see you there!