Dicas para Workflow WordPress + JavaScript - WordCamp Salvador

990 visualizações

Publicada em

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

Publicada em: Tecnologia
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
990
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
9
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Dicas para Workflow WordPress + JavaScript - WordCamp Salvador

  1. 1. DICAS PARA WORKFLOW WORDPRESS + JAVASCRIPT Fellyph Cintra Elo7
  2. 2. FELLYPH CINTRA Front-End Engineer Elo7 Instrutor WordPress DRC Trabalha com WordPress since 2008 @fellyph
  3. 3. ELO7
  4. 4. NOSSO TIME
  5. 5. BLOG ELO7
  6. 6. AGENDA • Trabalhando com WordPress • Carregando o JavaScript de maneira correta • Required JS • Otimização no JavaScript • Organização de código • Performance • Extra
  7. 7. APRENDA A ANDAR ANTES DE QUERER CORRER
  8. 8. APRENDA OS FUNDAMENTOS
  9. 9. ENTENDA O CONTEÚDO • O que você precisa exibir? • Como exibir? • Converse com sua equipe/cliente
  10. 10. COM QUE ROUPA EU VOU Escolher o arquivo certo para cada situação agiliza o desenvolvimento e manutenção do seu tema
  11. 11. ESCOLHA O SEU CAMINHO is_single(40) post_class() body_class() is_category() is_home() is_page(“about”)
  12. 12. ESCOLHA SEU CAMINHO • CSS • Condicionais tags • Queries
  13. 13. HIERARQUIA DO WORDPRESS
  14. 14. RESUMINDO 1. category-{slug}.php 2. category-{id}.php 3. category.php 4. archive.php 5. index.php
  15. 15. JAVASCRIPT
  16. 16. CARREGANDO…
  17. 17. CARREGANDO…
  18. 18. MAIS OU MENOS
  19. 19. MELHORANDO
  20. 20. RESULTADO
  21. 21. • Em 2013 o WordPress passou a utilizar o Require JS como gerenciador de dependências do JavaScript • Ele é baseado no padrão AMD
  22. 22. 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.
  23. 23. ESPECIFICAÇÕES DO AMD • Iniciar o método define com os seguintes parâmetros : • identificador • dependências • factory
  24. 24. CRIANDO MÓDULOS
  25. 25. PERFORMANCE A eficiência com que algo reage ou cumpre a sua finalidade.
  26. 26. POR QUE ? • Melhor experiência do usuário* • Melhorias no SEO
  27. 27. OTIMIZAÇÃO NO JS • Minimize os reflows do conteúdo • Melhore o acesso ao DOM • Evitar memory leaks
  28. 28. REFLOW Reflow é o processo pelo qual a engine responsável por exibir o layout calcula os pontos de todos os elementos na DOM.
  29. 29. MINIMIZANDO REFLOWS
  30. 30. EDITE ANTES DE ADICIONAR O ELEMENTO
  31. 31. ECONOMIZE NO ACESSO AO DOM
  32. 32. TESTANDO… http://jsperf.com
  33. 33. VS Chrome Internet Explorer
  34. 34. 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.
  35. 35. OTIMIZAÇÃO NO FRONT • Minimizar o total de requests • Paralelizar requests • Compactação e otimização de conteúdo(JS, CSS e imagens)
  36. 36. TESTE Chrome Developer Tools
  37. 37. SIMULE Chrome Developer Tools
  38. 38. Ghost Labs
  39. 39. TESTE… TESTE… TESTE… PageSpeed GTmetrix http://bit.ly/18oQqhi http://bit.ly/1coabV3
  40. 40. ORGANIZAÇÃO TAMBÉM AJUDA http://bit.ly/1r8oTXr
  41. 41. QUER SABER MAIS http://developers.google.com/speed/ browserdiet.com/pt/
  42. 42. EXTRAS NÃO INVENTE A RODA
  43. 43. EVITE RETRABALHO • Grunt • Sass • Compass
  44. 44. 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
  45. 45. ESTAMOS CONTRATANDO
  46. 46. OBRIGADO SALVADOR !!!
  47. 47. REFERÊNCIAS http://developers.google.com/speed/ http://www.slideshare.net/erikatakahara7/otimizao-front-end-38703726 http://browserdiet.com/pt/

×