Resumo
Merry Pixmas: diversão de Natal com transformações do CSS em 3D.
Do que gostamos?
Uma boa demonstração com tema de Natal que funciona bem em computadores e dispositivos móveis. Ele também oferece suporte a novas cores de tema e um manifesto da Web para uma experiência de tela inicial que é iniciada em tela cheia.
Dica profissional: agite o smartphone para ele nevar.
Possíveis melhorias
Embora eu perceba que é uma demonstração, alguns cabeçalhos de cache especificados em recursos e JavaScript sem bloqueio de renderização podem ter melhorado bastante o tempo de carregamento percebido.
Perguntas e respostas com Jim Savage
Por que a Web?
Em Tóquio, há muito tempo defendemos a Web responsiva e para dispositivos móveis, e não nativa por causa disso. A Pixmas foi resultado da experimentação com HTML5 e CSS3 durante o tempo de inatividade entre os projetos. Estamos sempre tentando coisas novas para manter nosso conhecimento atualizado. Portanto, naturalmente, para nossa equipe de desenvolvedores front-end, qualquer pesquisa seria focada na Web, e não em uma plataforma nativa.
À medida que os navegadores continuam a evoluir, notamos que as funcionalidades ficam mais parecidas com os nativos, funções que só estavam disponíveis por desenvolvimento nativo, como geolocalização, acesso à câmera, armazenamento de banco de dados local etc., que contribuem para uma experiência geral semelhante ao nativo para o usuário, mas com os benefícios do desenvolvimento multiplataforma e rápido de iteração. É claro que o desenvolvimento nativo ainda tem vantagens e, ao lidar com um novo projeto, é necessário considerar muito as opções nativas e da Web. Isso provavelmente soa óbvio, mas, para nossos clientes, é importante recomendar a melhor plataforma para o trabalho, em vez de encaixar todos os projetos no que preferirmos codificar.
O que funcionou muito bem durante o desenvolvimento?
Acho que, com a Pixmas, o foco principal era as Transformações 3D e até onde poderíamos realmente levar o CSS. Então, o estilo ilustrativo pixelado funcionou muito bem no navegador e, como qualquer desenvolvedor front-end diz que o comportamento natural de um navegador é quadrado. Portanto, basear o estilo geral e a matemática do 3D em problemas de quadrados funcionou muito bem. Criar um cubo com transformações 3D e HTML é muito mais fácil do que qualquer outra forma primitiva. No entanto, a interação e as animações levaram um pouco de tentativa e erro para suavizar.
O que mais nos surpreendeu foi a suavidade e o desempenho do navegador do 3D em plataformas móveis, especialmente nos dispositivos Android menos conhecidos.
Se você pudesse ter uma API para melhorar seu app, o que seria?
Se fôssemos escrever Pixmas novamente, provavelmente usaríamos uma API baseada em WebGL. Embora tenha sido divertido manipular elementos HTML DOM em 3D via CSS, o verdadeiro poder do 3D baseado na Web precisa ser uma tecnologia dedicada acelerada por hardware, como o WebGL. O CSS 3D é bom para efeitos e transições básicos de páginas da Web, mas definitivamente atingimos uma limitação no desempenho do navegador ao codificar Pixmas.
O Google tem alguns ótimos projetos WebGL nos Experimentos do Chrome.