1. O documento fornece dicas para melhorar o workflow do WordPress e carregamento de JavaScript de forma correta e otimizada. 2. Inclui explicações sobre como carregar módulos JavaScript usando RequireJS e padrão AMD de forma assíncrona. 3. Apresenta dicas para melhorar o desempenho front-end como minimizar reflows, melhorar acesso ao DOM e compactar arquivos.

1. DICAS PARA WORKFLOW
WORDPRESS + JAVASCRIPT
Fellyph Cintra
Elo7

2. FELLYPH
CINTRA
Software Engineer Elo7
Instrutor WordPress DRC
Trabalha com WordPress
since 2008
!
@fellyph

3. AGENDA
• Workflow WordPress
• Carregando o JavaScript de maneira correta
• Required JS
• Otimização no JavaScript
• Dicas
• Extra

4. APRENDA A ANDAR ANTES
DE QUERER CORRER

8. APRENDA OS
FUNDAMENTOS

10. ENTENDA O CONTEÚDO
• Saiba qual conteúdo você precisa exibir
• Como você precisa exibir.
• Converse com sua equipe, crie wireframes e
protótipos do seu projeto

11. COM QUE ROUPA EU VOU
Escolher o arquivo certo para cada situação agiliza o
desenvolvimento e manutenção do seu tema

12. ESCOLHA O SEU CAMINHO
is_single(40)
post_class()
body_class()
is_category()
is_home()
is_page(“about”)

13. HIERARQUIA DO WORDPRESS

15. RESUMINDO
1. category-{slug}.php
2. category-{id}.php
3. category.php
4. archive.php
5. index.php

16. JAVASCRIPT

17. CARREGANDO…

18. CARREGANDO…

19. MAIS OU MENOS

20. MELHORANDO

21. RESULTADO

22. • Em 2013 o WordPress passou a utilizar o
Require JS como gerenciador de
dependências do JavaScript
• Ele é baseado no padrão AMD

23. AMD
• Asynchronous Module Definition (AMD) é
uma especificação para carregamento de
Scripts em módulos.
• Em uma estrutura que suas dependências
possam ser carregadas de forma assíncrona.

24. ESPECIFICAÇÕES DO AMD
• Iniciar o método define com os seguintes
parâmetros :
• identificador
• dependências
• factory

25. CRIANDO MÓDULOS

26. PERFORMANCE
A eficiência com que algo
reage ou cumpre a sua
finalidade.

27. POR QUE ?
• Melhor experiência do usuário
• Melhorias no SEO

28. OTIMIZAÇÃO NO JS
• Minimize os reflows do conteúdo
• Melhore o acesso ao DOM
• Evitar memory leaks

29. REFLOW
Reflow é o processo pelo qual a engine
responsável por exibir o layout calcula os
pontos de todos os elementos na DOM.

30. MINIMIZANDO REFLOWS

31. EDITE ANTES DE
ADICIONAR O ELEMENTO

32. ECONOMIZE NO ACESSO
AO DOM

33. TESTANDO…
http://jsperf.com

34. IE…

35. VS
Chrome
Internet Explorer

36. MAIS DICAS
• Evite níveis desnecessário em seu
DOM(HTML)
• Minimize as regras do seu CSS, remova regras
não utilizadas
• Caso necessite de animações complexas utilize,
position: absolute ou fixed para seus elementos.

37. OTIMIZAÇÃO NO FRONT
• Minimizar o total de requests
• Paralelizar requests
• Compactação e otimização de
conteúdo(JS, CSS e imagens)

38. TESTE
Chrome Developer Tools

39. SIMULE
Chrome Developer Tools

40. TESTE… TESTE… TESTE…
PageSpeed GTmetrix
http://bit.ly/18oQqhi http://bit.ly/1coabV3

42. ORGANIZAÇÃO TAMBÉM
AJUDA
http://bit.ly/1r8oTXr

43. QUER SABER MAIS
http://developers.google.com/speed/ browserdiet.com/pt/

44. EXTRAS
NÃO INVENTE A RODA

45. EVITE RETRABALHO
• Grunt
• Sass
• Compass

46. ODIN + GRUNT + SASS
Utilizando Odin + Grunt :
https://github.com/wpbrasil/odin/wiki/Usando-o-
GruntJS
Utilizando Odin + SASS/Compass
https://github.com/wpbrasil/odin/wiki/Usando-SASS-e-
Compass

47. PHANTOMAS
https://github.com/macbre/phantomas

48. OBRIGADO RIO !

49. ESTAMOS CONTRATANDO
<3 Martell !!

50. REFERÊNCIAS
http://developers.google.com/speed/
http://www.slideshare.net/erikatakahara7/otimizao-front-end-38703726
http://browserdiet.com/pt/