April 7, 2016

Anotações - Palestra do Jean Carlo Emer - Aplicações Web com React

O que consegui anotar da palestra do Jean Carlo Emer sobre Aplicações React no 18 Encontro Locaweb em Belo Horizonte o dia 07/04/2016.

  • Aplicações possuem diferentes estados em uma única página.
  • O Gmail é a aplicação web mais notável, porque ele lançou esse tipo de aplicação, dando o ponta pé com o Ajax
  • O Facebook também, onde você tem uma timeline, que carrega conforme a atualização
  • A navegação pelo conteúdo torna-se mais fluída em uma aplicação
  • Uma aplicação web tem uma camada entre navegador e servidor reduz a carga de dados
  • Uma aplicação web tenta criar experiência compatíveis as das ferramentas nativas, por menos custo e melhor suporte
  • Tres aspectos importantes:
    1. Priorizar o conteúdo. O mais importante da web é o conteúdo. Todo conteúdo deve ser acessível
    2. Primar por uma boa experiência de navegação
    3. Atentar para a performance percebida. Performance percebida é aquela performance que o usuário sente. O usuário é o parâmetro.
  • 0.1 segundos é imperceptible para o usuário. 1 segundo é aceitável. 10 segundos é mais que suficiente par perder o usuário.
  • http://blog.teamtreehouse.com/perceived-performance
  • Quando o usuário entra num site e ele é lento, há grandes chance do usuário achar que o site é lento e nunca haverá mudanças
  • Fugir da chuva de reflows não é a tarefa fácil. Alterar os elementos do documento sem critérios não é performático.
  • O botão voltar do navegador precisa ter sentido. Os estados da app e a barra de endereço devem ter sincronia.
  • JavaScript e css viram caos fácil fácil. a organização do código precisa ser planejada e praticada
  • Internet caiu e voltou, e agora? Instabilidades na conexão de rede precisam ser endereçadas.
  • Os motores de busca devem reconhecer o conteúdo do seu site. Mesmo que a aplicação seja um SPA com JS.
  • Já existem diversas tecnologias para auxiliar nessas situações. Você precisa procura uma que atenda a equipe, que faça o time se sentir confortável.
  • O React não é um framework, ele é uma biblioteca. Ele não te diz como você integra seu código. Ele serve para você escrever seus componentes.
  • Componentes são usados para formar um sistema mais complexo.
  • Existem dois tipos de conteúdos: os do servidor e os do usuário.
  • Componentes guardam estado e recebem dados dos seus ancestrais.
  • O que é estado em um componente? É tudo aquilo que pode sofrer alteração durante o ciclo de vida da aplicação
  • Componentes que recebe dados do servidor, formulário de dados, ações do usuários.
  • O ciclo de vida é o mais recurso mais poderoso dos componentes.
  • código pode ser executado antes e depois da interface ser montada e quando a interface precisar de ajustes
  • também é possível decidir o que fazer com dados recebidos
  • React já lida muito tem com CSS transitions. Permite apoiar transições de estados com CSS de forma simples.
  • o dom virtual aplica apenas as mudanças realmente necessárias no documento e em lotes.
  • Quando o componente vai ser representado na tela, o react cria uma representação virtual, faz uma diferença entre os elementos diferentes e só aplica aquilo que ele encontrou diferença.
  • Assim o react não remonta a página inteira se houve uma mudança simples, como mudanças de texto.
  • O React não define como você gerencia as rotas da aplicação
  • O React Router permite como você integra a barra de endereço com a aplicação. Ele integra a sua aplicação com o navegador.
  • As rotas são componentes também.
  • Diferentes rodas podem apontar para os mesmos componentes.
  • React e Router são desenhadas para executarem com facilidade na plataforma node.js em servidores.
  • Entregar HTML é garantia de performance e boa indexação em buscadores.
  • Webpack: permite transformar, juntar e compactar o código de todos os componentes.
  • verificar, transformar e empacotar são palavras chaves em código front-end
  • jest e enzyme apoiam a escrita de testes isolados para cada componente
  • Como desenvolvedor você foca em conteúdo e navegação. O React foca na performance dos componentes.