DICAS PARA WORKFLOW WORDPRESS + JAVASCRIPT

Fellyph Cintra Elo7

FELLYPH CINTRA

Front-End Engineer Elo7

Instrutor WordPress DRC

Trabalha com WordPress

since 2008

@fellyph

ELO7

NOSSO TIME

BLOG ELO7

AGENDA

• Trabalhando com WordPress

• Carregando o JavaScript de maneira correta

• Required JS

• Otimização no JavaScript

• Organização de código

• Performance

• Extra

APRENDA A ANDAR ANTES DE QUERER CORRER

APRENDA OS FUNDAMENTOS

ENTENDA O CONTEÚDO

• O que você precisa exibir?

• Como exibir?

• Converse com sua equipe/cliente

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”)

ESCOLHA SEU CAMINHO

• CSS

• Condicionais tags

• Queries

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

TESTANDO…

http://jsperf.com

VSChrome

Internet Explorer

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.

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

Ghost Labs

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

ESTAMOS CONTRATANDO

OBRIGADO SALVADOR !!!

REFERÊNCIAS

http://www.slideshare.net/erikatakahara7/otimizao-front-end-38703726

http://developers.google.com/speed/

http://browserdiet.com/pt/