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.

Workflow WordPress + JavaScript - WordCamp Rio

914 views

Published on

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

Published in: Software
  • Login to see the comments

Workflow WordPress + JavaScript - WordCamp Rio

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

×