Chrome Dev Summit 2017 San Francisco

O Chrome Developers Summit (#chromeDevSummit ou só CDS mesmo) é um evento focado em tecnologias web que acaba atraindo os olhares de desenvolvedores de todas as áreas, incluindo de empresas de Navegadores e engines "concorrentes".

Esse ano, mais uma vez, tive a oportunidade de participar do evento, que está ótimo! Em termos de conteúdo, achei o evento ainda mais rico que o do ano passado, e o networking foi fora de série!

Queria fazer um resumão aqui. Sei que tu deves estar querendo ir assistir Stranger Things, mas isso só vai te tomar alguns minutos. :)

Apresentação

Ano passado, ficou por conta do Jake Archibald (que, para quem não lembra, palestrou na BrazilJS) e do Paul Lewis, e eles foram muito criativos. Este ano, a missão ficou com a Mariko Kosaka e com a Monica Dinculescu, e elas não deixaram por menos! Elas tiveram a ideia de, durante os intervalos, apresentar curiosidades tecnológicas, como antiguidades do HTML, emojis, demos, etc. Mandaram muito bem!

Aprendi coisas muito legais com elas como, por exemplo, que emojis podem ser feitos de mais de um caracter, permitindo que usemos replacements! Experimente executar isso aqui no console:

"👩‍👩‍👧‍👧".replace(/👧/g, "👦");

E o resultado será "👩‍👩‍👦‍👦"!! Sim, nós substituímos as duas meninas por dois meninos no emoji! Muito louco isso, não?!

Conteúdos

Confere no site do Chrome Dev Summit a grade completa dos palestrantes e suas palestras. Eu vou fazer um apanhado geral.

Durante o evento inteiro, a palavra da vez foi, sem dúvida, PWA! Sim, Progressive Web Apps são o foco absoluto do Google quando o assunto é Web. Inclusive durante uma rodada de perguntas, uma pessoa (anônima) perguntou justamente sobre a "crise de identidade" que o Google vem sofrendo hoje, com apps nativas e a Web. Sim, o Google tem investido bastante em Apps nativas também, com suporte a novidades como instant apps e melhor suporte a viewports. Sempre que perguntei isso para alguém, eles timidamente respondiam que "o Google é uma empresa muito grande, com muitos times dedicados em melhorar suas tecnologias". Mas durante o evento, foi anunciado suporte às Custom Tabs no Android. Em resumo, Custom Tabs são basicamente uma forma melhor de fazer uma Web View para que a tua PWA rode no Android e possa até mesmo ser submetida à Play Store (acho que acabei de responder a tua próxima pergunta, não?).

Na minha opinião, este seria um passo sério, na direção de migrar desenvolvedores e empresas para a Web. Depois do Kotlin, seria este o prego derradeiro no caixão do Java?

Também rolou uma mesa redonda com desenvolvedores dos principais frameworks, como Angular, React, Vue, Preact, entre outros. Foi muito legal ver o pessoal respondendo às perguntas do público (previamente selecionadas) e dando "alfinetadas discretas" uns nos outros.

Falou-se muito sobre segurança também, sobre como é importante a adoção do HTTPS e questões de solicitações de permissões aos usuários. O que nos leva a outro ponto, a usabilidade. Sei, não era um evento de UX, mas sim de WEB. Uma dica legal envolvendo estes dois itens é exibir para o usuário uma "modal" perguntando se ele teria interesse em notificações, por exemplo, e quando o usuário clicar dizendo que sim, aí então, o JavaScript solicitaria a permissão. "Por quê?" Você se pergunta. Porque se o usuário clicar "x" ou "não", meu/minha amigo(a)... danou-se! Assim, se o usuário clicar "não", ferrou de vez, o navegador NUNCA MAIS mostrará a pergunta pedindo por solicitação (a menos que o usuário siga aqueles 317 passos para liberar o teu domínio no navegador dele #sarcasmo). Agora, se ele simplesmente clicar o "x", deixando para responder depois, tu cai na heurística do browser. Ou seja, o navegador que vai decidir quando ele poderá exibir a solicitação novamente (mesmo que teu js tente solicitar), e isso pode levar (pasmem) MESES. Em outras palavras, somente solicite a permissão quando tu tiver certeza de que o usuário está inclinado a aceitá-la!

Ainda sobre PWAs, os times do Google apostam fortemente que o futuro do desenvolvimento JavaScript será baseado em módulos (sim, módulos do ECMAScript) e Web Components. O Youtube, sozinho, conta com mais de mil componentes (usando Polymer)

As integrações que fazemos com arquivos de mídia também está evoluindo, com uma nova Media Session API que permite uma melhor sincronização entre dispositivos e players. A API da câmera também evoluiu neste embalo, permitindo agora aplicar melhores filtros e manipular efeitos, e melhora no hardware da câmera.

CSS também entrou na roda e foi bem interessante ver como a adoção do flex-box e do grid-layout tem crescido.

Como todo evento do Google, claro que performance era um tema que não poderia faltar. A onda do momento é PWAs + AMPs. Interessante é que, segundo eles, 53% das pessoas abandonam sites que levam mais de três segundos para carregar. Até aí tudo bem, mas a média de carregamento dos sites em todo o planeta é de até 19 segundos! Quem anda acessando a internet então?!

A Payment API também foi melhorada e foram citados alguns cases de sucesso mostrando evoluções em performance e UX, resultando em conversões. Passos necessários para efetuar um pagamento. Após adotarem a Payments API, a compra ficou muito mais simples.

A API para notificações também evoluiu e agora conta oficialmente com botões e imagens.

Interessante também é que já se explora a possibilidade de começarmos a não transpilar mais código! Isso mesmo, códigos não transpilados (quando suportados pelo navegador) terão uma performance muito superior e legibilidade melhor, claro, além de não precisarem das mesmas malditas configurações, dependências e instalações. A ideia é começarmos a nos acostumar com "transpilação seletiva", transpilando versões para navegadores inferiores e mantendo o source original para aqueles que assim suportarem. Acho f*da isso, mal posso esperar para quando chegar o momento de não precisarmos mais transpilar nosso JS! Mas ainda assim, acho que esta fase nos ensinou que não nos livraremos de ferramentas de otimização e geração de versões para produção e desenvolvimento, por exemplo.

Anúncios

Ocorreram diversos anúncios no evento.

Além do Custom Tabs também foram feitos outros anúncios, como o Identity. Uma forma de adicionar sign in (e sign up) às suas PWAs de maneira MUITO mais fácil e que ainda é MUITO mais prática e familiar para nossos usuários.

Os Web Components agora são suportados no Safari. E uma surpresa muito legal que tive durante o evento é que o time do Webkit está trabalhando no suporte ao manifest.json! Mais um passo da Apple na direção do suporte às PWAs no Safari.

PAUSE. Para um pouco agora e pensa, apps são um dos carros-chefes da Apple para ganhar dinheiro! Eles são os últimos a topar entrar na corrida das PWAs porque "enquanto aquele limão estivesse dando suco, eles continuariam espremendo". E agora estão entrando na mesma vibe. Vocês conseguem entender o quão grande isso é? A força que as PWAs estão tomando? PLAY.

Foi anunciado também o Custom Elements Everywhere, projeto muito legal que visa a garantir que todos os frameworks adotem uma mesma e concisa API apoiada em Web Components. Isso significa melhores integrações, migrações menos dolorosas e interoperabilidade entre frameworks. #frameworksBFF

O V8 também conta com uma nova atualização que o deixará até 22% mais rápido (segundo testes no speedometer). Lembrando que node usa V8 ;)

Ah! e agora o Edge suporta Web Assembly (WASM) também, sabia? Quer mais? A Unity e a Unreal já anunciaram estar trabalhando em oferecer suporte WASM. #excitingTimes

E como anunciamos na BrazilJS Weekly anteriormente, foi oficializado. MDN é a fonte de documentação para desenvolvedores e ponto final. Agora as outras empresas se uniram e vão escrever materiais para manter a MDN sempre atualizada e condizente com todos os navegadores.

Na última vez que estive lá, lembro de discutir com o pessoal sobre a importância de uma versão headless do Chrome, e que eles estavam pensando no assunto. Dessa vez, eles anunciaram.

Habemus Puppeteer!

Uma versão headless do Chrome. Mas tenho que dizer, os demos deles ficaram muito legais e a API (diferentemente da maioria das APIs do Google) parece ser bem simples!

Outras empresas aproveitaram a ocasião para fazer outros anúncios também. Foi o caso do Uber, com as novidades em m.uber.com, que consegue carregar em até 3 segundos em conexão 2G. O Instagram também aproveitou a onda e anunciou sua versão em PWA. O Majento, também, afirmou que em breve integrarão suporte a PWAs. E o próprio EBay também está fazendo testes com páginas offline usando Service Workers.

A nova ImageCapture API também tem muitas coisas legais, como suporte para manipular o ISO da foto, zoom, flash, etc. Além disso, basta usar input[type="file"][accept="image/*"] para que o sistema operacional se encarregue de oferecer ao usuário as opções (com uma tela renovada no Android/Chrome). Na mesma linha, a Web Share API também passou a ser suportada em outros navegadores.

Oferecendo ainda MAIS poder às PWAs, entram em cena também as Trusted Web Activities, que são uma nova forma de "embedar" as PWAs em sua App nativa, mas não sendo apenas uma Web View, as Trusted Web Activities tem acessos privilegiados e uma API para que suas outras activities possam se comunicar com a PWA.

O Lighthouse também está com uma atualização muito legal contando com a auditoria de mais de 100 itens (há um ano, eram apenas 50). Agora, por exemplo, é possível exportar relatórios e fazer download do resultado final. Mas vale lembrar que atingir 100% no Lighthouse:

• Não quer dizer que sua Web App é perfeita;

• Não é pré-requisito para que sua Web App seja boa.

Na verdade, foi bem enfatizado que eles manterão o lighthouse atualizado, então permaneça de olho nas pontuações ao longo do tempo. É muito difícil atingir a nota máxima no lighthouse; eu mesmo, em meu site (felipenmoura.com), ainda não consegui atingir a excelência hehe.

Resultado do Lighthouse ao analisar o site felipenmoura.com

Bem, para programadores mais especificamente, temos algumas novidades no DevTools, o console do Chrome. Agora é possível, por exemplo, filtrar e agrupar as mensagens de log (pessoalmente, não sei como não tínhamos isso até agora). Também conseguimos visualizar o conteúdo (preview) do que está armazenado em cache. Além disso, também corrigiram alguns bugs do devtools, e as medições de performance estão muito mais precisas. Algo que não posso me esquecer de dizer aqui é que agora poderemos usar async e await no console! Só é preciso executá-los entre parênteses.

Uma curiosidade foi que Paul Irish corrigiu (marcou como DONE) um bug antigo (de anos), que estava assigned a ele, que impedia que o lighthouse (ou ferramentas similares) usassem o Chrome ao mesmo tempo. Até então, por exemplo, era preciso fechar o console para executar o lighthouse.

Finalizando

Eu finalizei o evento participando de uma festa com fliperamas muito legal :) Fora isso, o que achou das novidades? Deixa nos comentários aí tua opinião, um "eu já sabia" ou quem sabe, um "OMG", afinal, tem coisa legal mesmo!