15 JavaScript
Dos & Don'ts
Felipe Bernardes
JSDay Recife '19
Slide 2
Slide 2 text
img
img
img
Confidential | 2
$ whoami
Felipe Bernardes
●
Moro em Sorocaba - SP
●
Local conf/meetup co-organizer
●
Remote Freelancer @ Toptal
●
Front End Dev @ BabyCenter
●
Toco bateria (muito mal)
●
felipebernardes.github.io
Hire the top 3% of freelance talent
Hire the top 3% of freelance talent
@felip_bernardes
Slide 3
Slide 3 text
15 Dicas em 15 Minutos para…
● entender o que evitar (Don'ts)
● aprender o que fazer (Dos)
● codar JS melhor !
● ganhar mais $
@felip_bernardes
Slide 4
Slide 4 text
1. Debugando
Slide 5
Slide 5 text
DON'T
use console.log feito doido
… pois com ele, só se enxerga o valor final após todo processamento
@felip_bernardes
Slide 6
Slide 6 text
DO
comece usar debugger
com ele, você consegue acompanhar passo a passo o valor de suas variáveis
@felip_bernardes
Slide 7
Slide 7 text
2. Frameworks
Slide 8
Slide 8 text
DON'T
tenha um framework de estimação e
defenda-o como se fosse seu time de futebol
@felip_bernardes
Slide 9
Slide 9 text
DO
use frameworks diferentes,
entenda suas particularidades,
pontos fracos e fortes
@felip_bernardes
Slide 10
Slide 10 text
3. Legibilidade
Slide 11
Slide 11 text
DON'T
não seja contra comentários de código,
nem trate-os como oposto
a escrever código legível
@felip_bernardes
Slide 12
Slide 12 text
DO
além de escrever códigos legíveis, considere
adicionar breves comentários que possam
ajudar a contextualizar
@felip_bernardes
Slide 13
Slide 13 text
4. Performance
Slide 14
Slide 14 text
DON'T
não deixe performance de lado
@felip_bernardes
Slide 15
Slide 15 text
DO
vá a talk da Amanda Vilela, freelancer da
Toptal, hoje às 11h15 no auditório.
Aprenda muito sobre performance, com um
case real de otimização.
@felip_bernardes
Slide 16
Slide 16 text
5. Valor
Slide 17
Slide 17 text
DON'T
não pense que a finalidade do seu trabalho é
produzir código javascript
@felip_bernardes
Slide 18
Slide 18 text
DO
entenda que a finalidade é agregar valor ao
negócio, produto, empresa e usuário final
@felip_bernardes
Slide 19
Slide 19 text
6. Evolução
Slide 20
Slide 20 text
DON'T
responsabilize sua empresa pelo sua
evolução técnica
@felip_bernardes
Slide 21
Slide 21 text
DO
estude por conta, faça projetos paralelos,
faça POCs de temas importantes JS:
PWA, Web Assembly, Svelt, frameworkless,
service workers, etc.
@felip_bernardes
Slide 22
Slide 22 text
7. Iterações
Slide 23
Slide 23 text
DON'T
não crie variáveis dentro de iterações,
pois isso impacta a performance
@felip_bernardes
Slide 24
Slide 24 text
DO
Crie a variável apenas uma vez,
fora do bloco de iteração
@felip_bernardes
Slide 25
Slide 25 text
8. setTimeout
Slide 26
Slide 26 text
DON'T
não use setTimeout
1) é imprevisível
2) 1000ms nem sempre é 1 segundo real
3) só acontece uma vez
4) assume algo
5) tudo isso ao mesmo tempo
@felip_bernardes
Slide 27
Slide 27 text
DO
use setInterval e verifique a condição, é
muito mais confiável
@felip_bernardes
Slide 28
Slide 28 text
9. setInterval
Slide 29
Slide 29 text
DON'T
não deixe de remover seus setIntervals
@felip_bernardes
Slide 30
Slide 30 text
DO
ao criar o setInterval, salve seu ID
Sempre tenha uma condição dentro do
intervalo pra interromper o setInterval
@felip_bernardes
Slide 31
Slide 31 text
10. Booleans
Slide 32
Slide 32 text
DON'T
declare variáveis booleanas que não sejam
imediatamente legíveis
fruit isNotFruit
@felip_bernardes
Slide 33
Slide 33 text
DO
use o prefixo “is”
use apenas termos afirmativos (isFruit).
Para testes negativos, utilize !
para melhor legibilidade (!isFruit)
@felip_bernardes
Slide 34
Slide 34 text
11. Undefined
Slide 35
Slide 35 text
DON'T
não teste por acesso aninhado a null e
undefined à moda antiga
pessoa && hobbies && hobbies.futebol &&
hobbies.futebol.modalidade &&
hobbies.futebol.modalidade === ‘salao’
@felip_bernardes
Slide 36
Slide 36 text
DO
utilize optional chaining. Mais legível,
melhor pra manter, menos código.
pessoa.hobbies?.futebol?.modalidade === ‘salao’
@felip_bernardes
Slide 37
Slide 37 text
12. IDs HTML
Slide 38
Slide 38 text
DON'T
não use ids html, pois cada vez que você faz
isso, uma tartaruga morre variavel global de
referencia ao elemento DOM é criada.
@felip_bernardes
Slide 39
Slide 39 text
DO
selecione elementos por classes ou data-attr
@felip_bernardes
Slide 40
Slide 40 text
13. DOM && loop
Slide 41
Slide 41 text
DON'T
não manipule o DOM dentro de loops, pois
cada vez que você o faz, força o reflow da
tela.
@felip_bernardes
Slide 42
Slide 42 text
DO
acumule as alterações necessárias e
altere o DOM uma única vez após o loop
@felip_bernardes
Slide 43
Slide 43 text
14. Escrita
Slide 44
Slide 44 text
DON'T
não tente escrever o código perfeito de cara
(na carreira, no projeto ou na tarefa)
@felip_bernardes
Slide 45
Slide 45 text
DO
escreva código “ruim” quando você estiver
começando (na carreira, no projeto ou na
tarefa)
faça funcionar -> cubra corner cases e
corrija bugs -> otimize o código
@felip_bernardes
Slide 46
Slide 46 text
15. Dólares
Slide 47
Slide 47 text
DON'T
se limite aos salários locais.
toda empresa, bairro, cidade, estado e país
possuem seu “teto salarial”
@felip_bernardes
Slide 48
Slide 48 text
DO
exercite sua independencia técnica,
aplique-se pra vagas remotas ,
… nacionais e internacionais!
@felip_bernardes
Slide 49
Slide 49 text
@felip_bernardes
Slide 50
Slide 50 text
Front End, Back End & Full Stack
QA analyst DevOps
AR/VR Sales Force
Blockchain
& outras
Slide 51
Slide 51 text
javascript
react
react native
nodejs
ruby on rails, django, wordpress
Slide 52
Slide 52 text
registre-se em
bit.ly/bonus-toptal
Slide 53
Slide 53 text
felipebernardes.github.io
[email protected]
Felipe Bernardes
Front End Developer
@felip_bernardes
slides @ bit.ly/felipe-slides
Obrigado!
Venha bater papo no stand da Toptal!