Dicas para Workflow WordPress + JavaScript, boas práticas e dicas de produtividade para o desenvolvimento de temas com JavaScript.

1. DICAS PARA WORKFLOW
WORDPRESS + JAVASCRIPT
Fellyph Cintra
Elo7

2. FELLYPH
CINTRA
Front-End Engineer Elo7
Instrutor WordPress DRC
Trabalha com WordPress
since 2008
@fellyph

3. ELO7

4. NOSSO TIME

6. BLOG ELO7

7. AGENDA
• Trabalhando com WordPress
• Carregando o JavaScript de maneira correta
• Required JS
• Otimização no JavaScript
• Organização de código
• Performance
• Extra

12. APRENDA A ANDAR ANTES
DE QUERER CORRER

13. APRENDA OS
FUNDAMENTOS

15. ENTENDA O CONTEÚDO
• O que você precisa exibir?
• Como exibir?
• Converse com sua equipe/cliente

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

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

18. ESCOLHA SEU CAMINHO
• CSS
• Condicionais tags
• Queries

19. HIERARQUIA DO WORDPRESS

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

22. JAVASCRIPT

23. CARREGANDO…

24. CARREGANDO…

25. MAIS OU MENOS

26. MELHORANDO

27. RESULTADO

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

29. 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.

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

31. CRIANDO MÓDULOS

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

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

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

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

37. MINIMIZANDO REFLOWS

38. EDITE ANTES DE
ADICIONAR O ELEMENTO

39. ECONOMIZE NO ACESSO
AO DOM

40. TESTANDO…
http://jsperf.com

41. VS
Chrome
Internet Explorer

42. OTIMIZAÇÃO NO FRONT
• 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.

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

44. TESTE
Chrome Developer Tools

45. SIMULE
Chrome Developer Tools

46. Ghost Labs

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

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

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

51. EXTRAS
NÃO INVENTE A RODA

52. EVITE RETRABALHO
• Grunt
• Sass
• Compass

53. 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

54. ESTAMOS CONTRATANDO

55. OBRIGADO SALVADOR !!!

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