50
DICAS PARA WORKFLOW WORDPRESS + JAVASCRIPT Fellyph Cintra Elo7

Workflow WordPress + JavaScript - WordCamp Rio

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Workflow WordPress + JavaScript  - WordCamp Rio

DICAS PARA WORKFLOW WORDPRESS + JAVASCRIPT

Fellyph Cintra Elo7

Page 2: Workflow WordPress + JavaScript  - WordCamp Rio

FELLYPH CINTRA

Software Engineer Elo7

Instrutor WordPress DRC

Trabalha com WordPress

since 2008

!

@fellyph

Page 3: Workflow WordPress + JavaScript  - WordCamp Rio

AGENDA

• Workflow WordPress

• Carregando o JavaScript de maneira correta

• Required JS

• Otimização no JavaScript

• Dicas

• Extra

Page 4: Workflow WordPress + JavaScript  - WordCamp Rio

APRENDA A ANDAR ANTES DE QUERER CORRER

Page 5: Workflow WordPress + JavaScript  - WordCamp Rio
Page 6: Workflow WordPress + JavaScript  - WordCamp Rio
Page 7: Workflow WordPress + JavaScript  - WordCamp Rio
Page 8: Workflow WordPress + JavaScript  - WordCamp Rio

APRENDA OS FUNDAMENTOS

Page 9: Workflow WordPress + JavaScript  - WordCamp Rio
Page 10: Workflow WordPress + JavaScript  - WordCamp Rio

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

Page 11: Workflow WordPress + JavaScript  - WordCamp Rio

COM QUE ROUPA EU VOU

Escolher o arquivo certo para cada situação agiliza o desenvolvimento e manutenção do seu tema

Page 12: Workflow WordPress + JavaScript  - WordCamp Rio

ESCOLHA O SEU CAMINHO

post_class()

body_class()

is_category()

is_single(40)

is_home()

is_page(“about”)

Page 13: Workflow WordPress + JavaScript  - WordCamp Rio

HIERARQUIA DO WORDPRESS

Page 14: Workflow WordPress + JavaScript  - WordCamp Rio
Page 15: Workflow WordPress + JavaScript  - WordCamp Rio

RESUMINDO

1. category-{slug}.php

2. category-{id}.php

3. category.php

4. archive.php

5. index.php

Page 16: Workflow WordPress + JavaScript  - WordCamp Rio

JAVASCRIPT

Page 17: Workflow WordPress + JavaScript  - WordCamp Rio

CARREGANDO…

Page 18: Workflow WordPress + JavaScript  - WordCamp Rio

CARREGANDO…

Page 19: Workflow WordPress + JavaScript  - WordCamp Rio

MAIS OU MENOS

Page 20: Workflow WordPress + JavaScript  - WordCamp Rio

MELHORANDO

Page 21: Workflow WordPress + JavaScript  - WordCamp Rio

RESULTADO

Page 22: Workflow WordPress + JavaScript  - WordCamp Rio

• Em 2013 o WordPress passou a utilizar o Require JS como gerenciador de dependências do JavaScript

• Ele é baseado no padrão AMD

Page 23: Workflow WordPress + JavaScript  - WordCamp Rio

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.

Page 24: Workflow WordPress + JavaScript  - WordCamp Rio

ESPECIFICAÇÕES DO AMD

• Iniciar o método define com os seguintes parâmetros :

• identificador

• dependências

• factory

Page 25: Workflow WordPress + JavaScript  - WordCamp Rio

CRIANDO MÓDULOS

Page 26: Workflow WordPress + JavaScript  - WordCamp Rio

PERFORMANCE

A eficiência com que algo reage ou cumpre a sua

finalidade.

Page 27: Workflow WordPress + JavaScript  - WordCamp Rio

POR QUE ?

• Melhor experiência do usuário

• Melhorias no SEO

Page 28: Workflow WordPress + JavaScript  - WordCamp Rio

OTIMIZAÇÃO NO JS

• Minimize os reflows do conteúdo

• Melhore o acesso ao DOM

• Evitar memory leaks

Page 29: Workflow WordPress + JavaScript  - WordCamp Rio

REFLOW

Reflow é o processo pelo qual a engine responsável por exibir o layout calcula os pontos de todos os elementos na DOM.

Page 30: Workflow WordPress + JavaScript  - WordCamp Rio

MINIMIZANDO REFLOWS

Page 31: Workflow WordPress + JavaScript  - WordCamp Rio

EDITE ANTES DE ADICIONAR O ELEMENTO

Page 32: Workflow WordPress + JavaScript  - WordCamp Rio

ECONOMIZE NO ACESSO AO DOM

Page 33: Workflow WordPress + JavaScript  - WordCamp Rio

TESTANDO…

http://jsperf.com

Page 34: Workflow WordPress + JavaScript  - WordCamp Rio

IE…

Page 35: Workflow WordPress + JavaScript  - WordCamp Rio

VSChrome

Internet Explorer

Page 36: Workflow WordPress + JavaScript  - WordCamp Rio

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.

Page 37: Workflow WordPress + JavaScript  - WordCamp Rio

OTIMIZAÇÃO NO FRONT

• Minimizar o total de requests

• Paralelizar requests

• Compactação e otimização de conteúdo(JS, CSS e imagens)

Page 38: Workflow WordPress + JavaScript  - WordCamp Rio

TESTE

Chrome Developer Tools

Page 39: Workflow WordPress + JavaScript  - WordCamp Rio

SIMULE

Chrome Developer Tools

Page 40: Workflow WordPress + JavaScript  - WordCamp Rio

TESTE… TESTE… TESTE…

http://bit.ly/18oQqhi http://bit.ly/1coabV3

PageSpeed GTmetrix

Page 41: Workflow WordPress + JavaScript  - WordCamp Rio
Page 42: Workflow WordPress + JavaScript  - WordCamp Rio

ORGANIZAÇÃO TAMBÉM AJUDA

http://bit.ly/1r8oTXr

Page 43: Workflow WordPress + JavaScript  - WordCamp Rio

QUER SABER MAIS

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

Page 44: Workflow WordPress + JavaScript  - WordCamp Rio

EXTRASNÃO INVENTE A RODA

Page 45: Workflow WordPress + JavaScript  - WordCamp Rio

EVITE RETRABALHO

• Grunt

• Sass

• Compass

Page 46: Workflow WordPress + JavaScript  - WordCamp Rio

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

Page 47: Workflow WordPress + JavaScript  - WordCamp Rio

PHANTOMAS

https://github.com/macbre/phantomas

Page 48: Workflow WordPress + JavaScript  - WordCamp Rio

OBRIGADO RIO !

Page 49: Workflow WordPress + JavaScript  - WordCamp Rio

ESTAMOS CONTRATANDO

<3 Martell !!

Page 50: Workflow WordPress + JavaScript  - WordCamp Rio

REFERÊNCIAS

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

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

http://browserdiet.com/pt/