Curiosidades e Dicas
Como terminamos o conteúdo....
Trackings
Refere-se à coleta de dados sobre como os usuários interagem com um site ou aplicação web.
Esses dados podem incluir várias métricas, como visualizações de página, cliques, tempo gasto em uma página e jornadas dos usuários.
Trackings
O rastreamento ajuda os proprietários de sites a entenderem o comportamento dos usuários, a otimizarem a experiência do usuário e a tomarem decisões baseadas em dados para melhorar o site.
Sabe aqueles envios estranhos que aparecem na aba network do seu browser de vez em quando? pois é...
Trackings
-
Visualizações de Página: Registro de cada vez que um usuário carrega uma página.
-
Cliques: Rastreamento de cliques em elementos específicos (botões, links, etc.).
- Sessões de Usuário: Monitoramento da jornada de um usuário pelo site durante uma única visita.
Trackings
-
Conversões: Rastreamento de ações valiosas para o negócio, como compras ou inscrições.
- Rastreamento de Eventos: Captura de interações específicas que não envolvem necessariamente o carregamento de uma nova página, como reproduções de vídeos ou envios de formulários.
Trackings
(Ferramentas)
End to End testing
Teste End-to-End (E2E) é uma metodologia de teste que verifica o fluxo completo de uma aplicação desde o início até o fim para garantir que todos os componentes do sistema funcionem como esperado.
End to End testing
No contexto de frontend, isso envolve testar a aplicação web do ponto de vista do usuário, simulando interações reais no navegador.
End to End testing
-
Garantir a integração entre as múltiplas partes da aplicação com cobertura abrangente
-
Simular Experiência Real do Usuário
- Detectar Bugs e criar confiança na aplicação
End to End testing
(ferramentas)
PWA
Muitas iniciativas web tornaram as aplicações cada vez mais próximas de aplicativos nativos e por muito tempo existiu esse anseio de trazer o comportamento de um app.
Um dos motivos é que muitos desenvolvedores trabalham com web, mas nem tantos trabalham com apps.
PWA
Umas das primeiras versões que surgiram pra tentar fazer isso foi o Apache Cordova, MAS ele era pesadíssimo, porque ele de fato era um app que subir um servidor de aplicação no celular, pra poder fazer a ponte entre recursos como câmeras e GPS
PWA
PWA permite transformar uma página em um "app", na verdade ainda é um navegador rodando, mas o comportamento para alguém que não é de tecnologia pode ser transparente.
PWA
- Ser capaz de rodar a aplicação offline
- Ser capaz de instalar algo no equipamento do usuário
- Ser capaz de acesasr recursos do aparelho como, câmera, microfone, GPS (existem APIs web pra isso)
Características
PWA
- Está sempre atualizado (é Web)
- Seguro através de HTTPS
Vantagens
PWA
Browsers podem ser velhos e não ter suporte a essas APIs comofas?
Entra um termo chamado Graceful degradation, se uma aplicação não tem acesso a alguns recursos ela deve apresentar alternativas, por exemplo tirar uma selfie, se não há suporte a isso podemos pedir um upload de imagem.
Comportamento alternativo, mas funciona
PWA
Mas ai eu fiz meu app, consigo publicar na Apple Store ou na Play Store?
Não, mas isso é uma vantagem.
Eu posso não instalar se eu não quiser, ainda é uma página web.
PWA, quem usa?
PWA, comfas?
Electron
Ferramenta que permite criação de aplicações multiplataforma usando tecnologias web familiares, como HTML, CSS e JavaScript.
Ele combina o mecanismo de renderização do Chromium (o mesmo motor por trás do Google Chrome) com o Node.js, permitindo que você desenvolva aplicativos standalone desktop usando JavaScript.
Electron
-
Desenvolvimento Familiar: Se você já está confortável com HTML, CSS e JavaScript, você estará em casa com o Electron.
-
Multiplataforma: Funciona em Windows, macOS e Linux sem ter que reescrever seu código-fonte.
Electron
-
Acesso a Recursos Nativos: Embora você esteja usando tecnologias web, ele oferece acesso a recursos do sistema operacional, como o acesso a arquivos, notificações e até mesmo APIs de sistema.
Como funciona?
Em um aplicativo Electron, o código é dividido em dois processos principais:
-
Processo Principal: Este é o processo Node.js, que é responsável por controlar a janela do aplicativo, gerenciar os ciclos de vida da aplicação e acessar os recursos do sistema operacional.
-
Renderização: Este é o processo que renderiza a interface do usuário usando HTML, CSS e JavaScript. Cada janela do aplicativo é executada em seu próprio processo de renderização, isolado do processo principal.
Electron, quem usa?
(spoiler: vocês usam apps assim e nem sabem)
Electron, comfas?
Jogos
- Quem aqui joga (jogos de qualquer tipo)?
- Quem tentou entender como jogos funcionam a fundo?
- Quem aqui quis fazer ou já fez um jogo (digital ou não) ?
Arte é o processo ou produto de utilizar elementos deliberadamente de forma que afete sentidos e emoções
Jogos são uma experiência estrutural, com regras e objetivos, que é cativante
Jogos e arte
<Canvas> e a Three.js
<Canvas> e a Three.js
Overview do meu experimento
Diagrama
(calma, ta turubem)
Diagrama React
Redux
No react é bem comum utilizar uma página JSX para consultar o Store do redux
import { connect } from 'react-redux'
function Topbar(props) {
return (
<Container>
Score: {props.score}
</Container>
)
}
const mapStateToProps = store => ({
score: store.score.value
})
export default connect(mapStateToProps, null)(Topbar)Redux
No entanto o redux merece uma menção honrosa porque embora normalmente seja utilizado para ser uma fonte de verdade de uma aplicação React, ela pode ser utilizada fora do React
import { store } from 'store'
import { keyDown, keyUp } from 'saga/input/inputAction'
// para consultar valores
store.subscribe(() => {
this.keyboard = store.getState().keyboard
this.mouse = store.getState().mouse
})
//para disparar actions
store.dispatch(keyDown(this.keyboard.pressed))
Mas como ligamos o <canvas> com a camada de UI em React? Há dois ciclos de render distintos, que precisam ser executados em velocidades igualmente distintas
60 FPS
Conforme necessidade do DOM / Virtual DOM
Redux
Mantemos os ciclos de render separados e sincronizamos, quando necessário, utilizando o Redux Saga
Redux
Diagrama Canvas
Game Loop
while(!gameOver){
update()
render()
}Fórmulas
Então para um movimento suave e consistente:
deslocamento por frame = pixels por segundo * (1 / FPS)
const DEG2RAD = Math.PI / 180
const RAD2DEG = 180 / Math.PI
export const degToRad = degrees => {
return degrees * DEG2RAD
}
export const radToDeg = radians => {
return radians * RAD2DEG
}Fórmulas
Para a distância entre objetos (2D)
Familiar? pois é, trigonometria, então a dica de ouro é aprenda a usar Vetores
const dx = objA.x - objB.x
const dy = objA.y - objB.y
Math.sqrt(dx * dx + dy * dy)Quero aprender a fazer jogos no navegador!
Dicas do CH
- Não se torne um "estudante profissional"
- Faça projetos até o final, termine ao invés de criar vários esqueletos inacabados
- Mantenha o foco, tente manter a motivação, principalmente trabalhando solo
- Se possível, encontre uma comunidade, troque ideias, protótipos, projetos
- Se desafie