No Chrome Dev Summit 2014 (link em inglês), tivemos uma série de tópicos e várias novas APIs abordadas, mas as novidades não são só as novidades.
Se você for um desenvolvedor Web novo ou mesmo um desenvolvedor experiente prestes a começar a explorar novas APIs, é provável que siga estas três etapas: aprender, criar e iterar.
Matt Gaunt (link em inglês) aborda os esforços contínuos para resolver esses problemas da equipe da Plataforma de desenvolvedores do Chrome.
Aprendizado
Os Fundamentos da Web são um conjunto de documentação orientada por casos de uso que abrange vários tópicos. O objetivo principal é levar os desenvolvedores com pouco ou nenhum conhecimento à implementação das práticas recomendadas o mais rápido possível.
Um dos principais objetivos dos Fundamentos da Web é garantir que, se você é novo em um tópico, a orientação reduz ao máximo a "paralisia de escolha". Addy Osmani faz um resumo sobre isso na página Pastry Box (link em inglês).
Se você encontrar problemas com o site ou o conteúdo, ou se quiser que o Web Fundamentals abranja um tópico específico, envie feedback no GitHub (em inglês).
Criação
Para ajudar você a iniciar um novo projeto da Web, criamos o Kit para iniciantes na Web. Ela tem tudo que você precisa:
- Um processo de build sólido
- HTML padrão
- Guia de estilo
O processo de compilação
Para quem não conhece muito bem criar processos, a maneira mais fácil de pensar em um processo de build é vê-lo como um programa que usa um conjunto de arquivos e executa determinadas tarefas neles e gera novas versões em um local diferente. As tarefas otimizam os arquivos para melhorar os tempos de carregamento, verificar possíveis erros ou processar tarefas que podem ser automatizadas.
No Web Starter Kit, temos os seguintes processos:
Reduzimos e concatenamos CSS e JavaScript para que o navegador possa buscar o arquivo rapidamente. O JavaScript também é executado pelo JSHint para verificar as práticas recomendadas do JavaScript e os erros comuns de programação. As imagens são minificadas com imagemin, e você pode conseguir reduções imensas no tamanho do arquivo usando isso. Temos também um processo para criar o CSS dos guias de estilo.
Texto padronizado para HTML multidispositivo
O primeiro conjunto de HTML que você escreve para uma nova página é bastante comum, e é provável que você tenha uma maneira de conseguir rapidamente um arquivo HTML armazenado que funcione bem em vários dispositivos e tamanhos de tela.
No Web Starter Kit, queríamos adicionar suporte a todos os recursos que tornassem a diferença entre a plataforma e seu site. Por isso, adicionamos suporte a adicionar à tela inicial e telas de apresentação para Android, Windows Phone, iOS e Opera Coast.
Guia de estilo
A parte final do Web Starter Kit é o guia de estilo.
Isso dá a qualquer novo projeto um ótimo conjunto de estilos e componentes padrão que incentiva o desenvolvimento orientado por estilo. É possível alterar estilos para elementos e adicionar seu próprio estilo.
A próxima versão do WSK, com lançamento previsto para o início do ano que vem, estamos trabalhando duro para simplificar a forma como o guia de estilo se encaixa e muda para uma aparência do Material Design. Mattmostrou umsimulado antecipado de como isso poderia ficar na Conferência de desenvolvedores do Chrome. Confira um exemplo abaixo.
Iterar
Depois de começar a colocar seu novo conhecimento em prática, você vai querer usar o DevTools para depurar, melhorar e manter seu trabalho.
Alguns recursos novos e enormes serão lançados no DevTools, e Matt analisa os novos recursos a seguir.
Modo dispositivo
O Device Mode é uma nova seção no DevTools que permite conferir rapidamente como seu site funciona em diferentes dispositivos móveis, enquanto você visualiza as consultas de mídia no CSS.
Um dos melhores recursos do Device Mode é a capacidade de limitar a velocidade da rede, permitindo simular a experiência de um usuário em uma conexão GPRS, EDGE, 3G, DSL ou Wi-Fi.
Criador de perfil de pintura
Se você já abriu a guia da linha do tempo e apertou o botão de gravação, provavelmente já viu alguns eventos de pintura acontecerem na cascata. Normalmente, isso seria uma caixa preta sem maneira de você saber por que o navegador fez ou o que estava fazendo.
O Paint Profiler não oferece mais informações sobre o que exatamente o navegador está fazendo durante a pintura.
Rastreamento de invalidação
O DevTools agora informa por que uma pintura ou um layout ocorreu sempre que possível. Isso é útil para qualquer pessoa que esteja aprendendo sobre a linha do tempo, o comportamento do navegador e permite que você otimize o código para evitar problemas de desempenho.
Visualização do Flame Chart
Essa é uma maneira muito diferente de visualizar as informações disponíveis na linha do tempo. Assim, fica muito mais fácil visualizar como as tarefas se sobrepõem e qual comportamento do navegador ocorreu como resultado de outras tarefas.
Visualizador de frames
Na visualização do Flame Chart, é possível selecionar um frame específico e, dentro disso, explorar quais elementos da página foram promovidos para uma camada composta, bem como por que eles foram promovidos.
Aprenda. pelo Cloud Build. Iterar
Esses são alguns dos esforços da equipe do Chrome para ajudar os desenvolvedores a se atualizarem com o desenvolvimento da Web, então confira os Fundamentos da Web, o Kit para iniciantes da Web e os novos recursos do Chrome DevTools.