Em seu primeiro ano, os consultores da Js-Republic se ofereceram para uma breve visita ao Melhor da Webconferência. Esta conferência dedicada às tecnologias web e JavaScript decorreu esta quinta-feira 9 e sexta-feira 10 de Junho na Grande Crypte em Paris.
Aqui estão algumas palestras que nos marcaram particularmente.
CSS, Companheirismo e Vexilologia
Tim Carry vê as demonstrações do know-how dos companheiros, isso o inspira e o lembra da corrente Craftsman, tão cara ao nosso coração no desenvolvimento de software.
Como Sheldon Cooper (cf. Personagem de The Big Bang Theory acima), Tim então embarcou em um projeto um tanto louco em torno da vexilologia:
Reproduza todas as bandeiras do mundo em CSS (e com apenas uma div por favor!).
Ele explica como teve que competir com inventividade e truques para usar mecanismos CSS pouco conhecidos para reproduzir faixas, estrelas, diagonais e outros triângulos.
Mas o que deve ser lembrado desta apresentação não é tanto o resultado. Porque apesar de deslumbrante, não é nada adequado para produção.
Não, o verdadeiro valor desta história está em todo o conhecimento que Tim adquiriu e conseguiu nos destilar sobre os países, as bandeiras e suas histórias, além de um profundo conhecimento de CSS.
Como ele mesmo diz “a viagem importa mais do que o destino”:
https://github.com/pixelastic/talk-css-flags
Mathieu BRETON, CEO @JSRepublic
Aplicativos da web progressivos
Um dos grandes temas deste ano de 2016 foram sem dúvida os Progressive Web Apps que prometem revolucionar o uso e consumo de aplicações móveis.
De fato, com a taxa de conversão e retenção sendo extremamente baixa para aplicativos nativos, os Progressive Web Apps oferecem uma alternativa interessante.
Estima-se que 80% dos usuários excluam um aplicativo durante os três primeiros dias de uso.
Da mesma forma, a jornada do usuário para instalar um aplicativo é longa e apenas 20% dos usuários acabarão usando seu aplicativo, enquanto isso é muito mais curto para um aplicativo da web progressivo, que dobra o número de usuários, ou 40%.
Assim, empresas como Flipkart ou Aliexpress revelaram recentemente seus primeiros estudos de caso acompanhados de números que são no mínimo encorajadores.
Flipkart :
- visitantes passaram 3 vezes mais tempo no local
- a taxa de reengajamento aumentou Um CAC
- a taxa de conversão aumentou em Um CAC
- uso de dados diminuiu em 3 vezes
- o número de novos usuários aumentou em Um CAC
- o número de visualizações de página foi Eu dobro
- o tempo gasto no local aumentou em Um CAC
- uso de dados diminuiu em 3 vezes
Para atingir esses números, seu Progressive Web App deve ser responsivo, seguro e poderoso para competir com um aplicativo nativo.
Segurança
O uso de um trabalhador de serviço permitirá que você intercepte ou modifique solicitações de navegação e recursos de forma assíncrona e por HTTPS.
Infelizmente, esta API é atualmente pouco suportada pelos navegadores.
Esconderijo
Seu aplicativo deve estar offline primeiro e fazer uso do cache para evitar a síndrome de mentira que corre o risco de causar o abandono de muitos de seus usuários.
Desempenho
O carregamento da sua aplicação deve ser instantâneo ou quase através do uso do async defer, do cache, do protocolo HTTP2 e otimizando ao máximo seu CSS.
Instalação
O Manifesto é um arquivo JSON que permitirá que você descreva seu aplicativo para que os usuários possam adicioná-lo à tela inicial de seu smartphone.
Reengajamento
Assim como os aplicativos nativos, você pode usar notificações push para informar seus usuários sobre as últimas notícias da sua plataforma.
Conclusão
Em conclusão, os Progressive Web Apps permitem evitar o longo túnel de instalação das várias lojas de aplicativos e obter um aplicativo que funciona em modo offline sendo tão eficiente quanto um aplicativo nativo para reengajar seus usuários e aumentar o uso do seu serviço .
Apêndices
Para aprofundar o assunto, você pode consultar os slides da apresentação da equipe Sfeir na Devoxx:
http://fr.slideshare.net/SfeirGroup/devoxx-fr-2016-progressive-web-apps-par-florian-orpelire-cyril-balit
Assim como sua oficina:
https://github.com/Sfeir/pwa-200
E teste o Pokédex, que acaba sendo o Progressive Web App mais poderoso do momento:
https://www.pokedex.org
O criador também compartilhou sua abordagem no seguinte artigo:
http://www.pocketjavascript.com/blog/2015/11/23/introducing-pokedex-org
Pierrick TURELIER, JS-Republicano @JSRepublic
Emular um Gameboy em Javascript
Enquanto alguns só têm olhos para o PS4 ou Xbox ONE, outros mal podem esperar pelo próximo Zelda no Nintendo NX, outros nostálgicos ou simplesmente loucos estão se desafiando a ultrapassar os limites de uma plataforma cujo crescimento parece infinito...
Claro que existem os limites do JavaScript e mais genericamente da web de que estamos falando… e mais particularmente da emulação de um Gameboy!
Então eu vejo você chegando, você vai me perguntar o que é um emulador. Segundo a Wikipédia:
"En informática, a emulação consiste em substituir um elemento de hardware - tal terminal de computador, tem computador ou Console de jogos - por um software. "
Em resumo, analisamos como funciona o hardware que estamos tentando imitar e reproduzimos o comportamento por meio de um script para obter um resultado equivalente.
Você vai me dizer “Mas qual é o hardware?”…
O hardware refere-se ao equipamento informático, no caso que nos interessa, nomeadamente o Gameboy.
Existem 4 elementos:
- o processador da CPU
- Memória MMU
- Processador gráfico GPU
- e finalmente Temporizador, Entradas e Sons
Em princípio, cada um cumpre uma ou mais tarefas mais ou menos complexas, que devem ser compreendidas e não é necessariamente óbvio, é um trabalho de longo prazo, mas aqui estamos nos perdendo.
A CPU, sua principal função é converter inteiros (ex: 0x80) em uma ação (ex: A = A + B), você vai entender, a implementação pode ser feita de diversas formas, seja com um bom switch de famílias ou uma função array, mesmo funções autogeradas, realidade ou ficção, a ideia é que seja como uma máquina de estado que é facilmente testável.
A função da MMU é rotear acessos de memória para o hardware, ela age como o getter/setter do JavaScript, permitindo que o hardware leia ou escreva nela.
Sua implementação é relativamente simples porque o desempenho deve ser levado em consideração e nem todas as soluções são iguais, portanto, saia da tabela de funções, em vez disso, preferiremos se gerenciar o “range” e um switch para gerenciar o resto , deve-se notar que o MMU é facilmente testável.
A GPU, me disseram no fone de ouvido, é mais algodão…
Sua missão porque aceita é transformar a VideoRAM em uma matriz de pixels, mesmo que seja um processador como a CPU, a GPU é uma máquina com 4 estados diferentes, sujeita a muitas regras que são obrigatórias e para as quais você costuma tem que lidar com exceções.
Acontece que a implementação é relativamente difícil de testar ou depurar.
Aqui fica o esboço do que consegui reter desta apresentação, que dá uma boa ideia do que é um emulador e como funciona no caso de um Gameboy.
Emular outras plataformas pode ser complicado, felizmente para nós existem curiosos que gostam de compartilhar como fez Mael Nison no Best of Web 2016 durante sua apresentação que mostra a diversidade de aplicativos que podem ser criados usando JavaScript, e é simplesmente incrível.
Se você gostou deste aperitivo, convido você a se interessar pelos diferentes projetos aos quais Maël se referiu.
- Virtjs : uma coleção gratuita de dispositivo de entrada padrão que permite impulsionar determinado mecanismo que usará esse tipo de interface se estiver disponível.
- audiojs : implementa dispositivos de entrada adicionais para Virtjs.
- Processar : facilita a aplicação do pós-processamento.
- archjs : une Libretro cujo único propósito é ser facilmente compilado via Emscripten, o motor Virtjs pode, portanto, ser instanciado em tempo real em qualquer lugar como a maioria dos motores.
- E por fim, a cereja do bolo, Start9.io uma plataforma construída em cima do Archjs, que permite arquivar seus jogos, jogá-los e salvar seu progresso.
Se você quiser ver um emulador de JavaScript em ação, é aqui que está!
Pierre-Arnaud LUMALE, JS-Republicano @JSRepublic
