Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dicas para Workflow WordPress + JavaScript - WordCamp Salvador

1,585 views

Published on

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

Published in: Technology
  • Login to see the comments

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/

×