Transferir como PDF, PPTX
Carregado porFellyph Cintra
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
O documento fornece dicas sobre como melhorar o workflow no desenvolvimento de temas para WordPress usando JavaScript. Destaca a importância da organização de código, otimização de desempenho e utilização do RequireJS para gerenciar dependências. Além disso, menciona estratégias para minimizar requisições e melhorar a experiência do usuário e SEO.
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
- 1. DICAS PARA WORKFLOW WORDPRESS + JAVASCRIPT Fellyph Cintra Elo7
- 2. FELLYPH CINTRA Front-EndEngineer Elo7 Instrutor WordPress DRC Trabalha com WordPress since 2008 @fellyph
- 3.
- 4.
- 6.
- 7. AGENDA • Trabalhandocom WordPress • Carregando o JavaScript de maneira correta • Required JS • Otimização no JavaScript • Organização de código • Performance • Extra
- 12. APRENDA A ANDARANTES DE QUERER CORRER
- 13.
- 15. ENTENDA O CONTEÚDO • O que você precisa exibir? • Como exibir? • Converse com sua equipe/cliente
- 16. COM QUE ROUPAEU VOU Escolher o arquivo certo para cada situação agiliza o desenvolvimento e manutenção do seu tema
- 17. ESCOLHA O SEUCAMINHO is_single(40) post_class() body_class() is_category() is_home() is_page(“about”)
- 18. ESCOLHA SEU CAMINHO • CSS • Condicionais tags • Queries
- 19.
- 21. RESUMINDO 1. category-{slug}.php 2. category-{id}.php 3. category.php 4. archive.php 5. index.php
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28. • Em 2013o WordPress passou a utilizar o Require JS como gerenciador de dependências do JavaScript • Ele é baseado no padrão AMD
- 29. AMD • AsynchronousModule 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.
- 32. PERFORMANCE A eficiênciacom 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.
- 38. EDITE ANTES DE ADICIONAR O ELEMENTO
- 39. ECONOMIZE NO ACESSO AO DOM
- 40.
- 41. VS Chrome InternetExplorer
- 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.
- 45.
- 46.
- 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 INVENTEA 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.
- 55.
- 56.