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