O documento aborda a linguagem JavaScript, destacando suas particularidades, como o comportamento inesperado de comparações numéricas. Apresenta diversas APIs úteis para melhorar aplicações web, incluindo WebSockets, LocalStorage, e Web Audio API, que permitem a troca de informações em tempo real e manipulação de áudio. O autor também menciona projetos práticos que utilizam essas tecnologias, como um jogo interativo e um pedal de guitarra.

1. Javascript
ao infinito e além
Rafael Specht da Silva
@rafael_sps

2. Quem?
- Formado em Telecomunicações no IFSul
- “Contribuidor” na Hack Thursday
- Ex Eckert-Caine
- Ex / Atual RBS

4. Javascript é uma linguagem bem legal, mas...
0.3 === 0.1 + 0.2 // false
// porque...
0.2 + 0.1 === 0.30000000000000004 // true
// exemplo by Douglas Crockford

5. Isso é quase engraçado...

6. Javascript é útil para …

7. … fazer relógios

8. … validar formulários

9. … AWESOMENESS

10. “Existem mais APIs entre o
céu e a terra do que sonha
vossa vã filosofia”
(talvez pra fazer o que já se fazia no desktop e/ou devices...)

13. WebSockets
Uma maneira de trocar informação em “tempo
real”
SSE resolve(rá) o problema de “só receber”

14. LocalStorage
Armazena strings localmente sem incluí-las no
cabeçalho HTTP como o Cookie

15. WebSockets + LocalStorage
- LocalStorage é comum para um domínio
- Então, permite trocar informações entre janelas/abas
- Logo, LocalStorage permite compartilhar informações
recebidas pelo Socket entre janelas/abas

16. Talk is cheap…
(exemplo)

17. Network Information API
Porque nem sempre sabemos a situação da
conexão do usuário…

19. Network Information API
var connection = navigator.connection || navigator.
mozConnection ||
navigator.webkitConnection;
bandwidth - estimativa da banda atual
metered - a banda do usuário pode sofrer limitações

20. Page Visibility API
Permite obter o status de visibilidade de um
documento
(talk is cheap…)

21. Battery API

22. Battery API
Provê informações sobre a bateria do
dispositivo do usuário
window.navigator.battery

23. Push State

24. Push State
Acesso ao histórico do browser
window.history
(talk is cheap...)

25. Web Audio API

26. Web Audio API
Acesso e manipulação de um contexto de
áudio

27. Qual a diferença para a tag <audio>?
- Manipular propriedades do sinal de áudio
- Possibilidade de adicionar ganho, filtros, etc
- Manipular espacialização
- etc

28. Oscillators
Podemos criar ondas:
- sinusoidais
- dentes-de-serra
- triangulares
- quadradas
(demo)

29. Exemplos em produção
Muito útil para jogos e apps onde podemos
melhorar a experiência e imersão
- Jogo “mano-a-mano” (link, github)
- Guitarra HTML5 (link, github)

30. Release the Unicorns

31. Processamento de Áudio
Métodos como ‘createMediaStreamSource’ e
‘createScriptProcessor’ permitem manipular o
áudio em tempo real.
Por que não fazer um pedal de guitarra?
(altamente inspirado pelas palestras do @almirfilho (link) e do @eshiota (link)

32. Obrigado!!
@rafael_sps
github.com/rssilva
rafaelspdasilva@gmail.com
fb.com/rafaelspdasilva