15 JavaScript Do's & Don'ts

Lightning Talk apresentada no JSDay Recife, em 14 de Dezembro de 2019.

Transcript

1. 15 JavaScript Dos & Don'ts Felipe Bernardes JSDay Recife '19
2. 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
3. 15 Dicas em 15 Minutos para… • entender o que evitar (Don'ts) • aprender o que fazer (Dos) • codar JS melhor ! • ganhar mais $ @felip_bernardes
4. 1. Debugando
5. DON'T use console.log feito doido … pois com ele, só se enxerga o valor final após todo processamento @felip_bernardes
6. DO comece usar debugger com ele, você consegue acompanhar passo a passo o valor de suas variáveis @felip_bernardes
7. 2. Frameworks
8. DON'T tenha um framework de estimação e defenda-o como se fosse seu time de futebol @felip_bernardes
9. DO use frameworks diferentes, entenda suas particularidades, pontos fracos e fortes @felip_bernardes
10. 3. Legibilidade
11. DON'T não seja contra comentários de código, nem trate-os como oposto a escrever código legível @felip_bernardes
12. DO além de escrever códigos legíveis, considere adicionar breves comentários que possam ajudar a contextualizar @felip_bernardes
13. 4. Performance
14. DON'T não deixe performance de lado @felip_bernardes
15. 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
16. 5. Valor
17. DON'T não pense que a finalidade do seu trabalho é produzir código javascript @felip_bernardes
18. DO entenda que a finalidade é agregar valor ao negócio, produto, empresa e usuário final @felip_bernardes
19. 6. Evolução
20. DON'T responsabilize sua empresa pelo sua evolução técnica @felip_bernardes
21. 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
22. 7. Iterações
23. DON'T não crie variáveis dentro de iterações, pois isso impacta a performance @felip_bernardes
24. DO Crie a variável apenas uma vez, fora do bloco de iteração @felip_bernardes
25. 8. setTimeout
26. 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
27. DO use setInterval e verifique a condição, é muito mais confiável @felip_bernardes
28. 9. setInterval
29. DON'T não deixe de remover seus setIntervals @felip_bernardes
30. DO ao criar o setInterval, salve seu ID Sempre tenha uma condição dentro do intervalo pra interromper o setInterval @felip_bernardes
31. 10. Booleans
32. DON'T declare variáveis booleanas que não sejam imediatamente legíveis fruit isNotFruit @felip_bernardes
33. DO use o prefixo “is” use apenas termos afirmativos (isFruit). Para testes negativos, utilize ! para melhor legibilidade (!isFruit) @felip_bernardes
34. 11. Undefined
35. 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
36. DO utilize optional chaining. Mais legível, melhor pra manter, menos código. pessoa.hobbies?.futebol?.modalidade === ‘salao’ @felip_bernardes
37. 12. IDs HTML
38. 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
39. DO selecione elementos por classes ou data-attr @felip_bernardes
40. 13. DOM && loop
41. 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
42. DO acumule as alterações necessárias e altere o DOM uma única vez após o loop @felip_bernardes
43. 14. Escrita
44. DON'T não tente escrever o código perfeito de cara (na carreira, no projeto ou na tarefa) @felip_bernardes
45. 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
46. 15. Dólares
47. DON'T se limite aos salários locais. toda empresa, bairro, cidade, estado e país possuem seu “teto salarial” @felip_bernardes
48. DO exercite sua independencia técnica, aplique-se pra vagas remotas , … nacionais e internacionais! @felip_bernardes
49. @felip_bernardes
50. Front End, Back End & Full Stack QA analyst DevOps AR/VR Sales Force Blockchain & outras
51. javascript react react native nodejs ruby on rails, django, wordpress
52. registre-se em bit.ly/bonus-toptal
53. felipebernardes.github.io felipe.bernardes@toptal.com Felipe Bernardes Front End Developer @felip_bernardes slides @ bit.ly/felipe-slides Obrigado! Venha bater papo no stand da Toptal!