Criando interfaces com Vue.js no bom e velho PHP

/me

William Correa

@wilcorrea

wilcorrea.dev

github.com/wilcorrea

t.me/wilcorrea

Vue.js

• Linguagem JavaScript
• Biblioteca para criação de web components
• Framework progressivo
• Ecossistema em evolução
• Foco no navegador

Vue.js

• Documentação simples e intuitiva

Vue.js

Vue.js

• Interfaces complexas com facilidade
• Mais controle sobre componentes
• Centralização de recursos

PHP

• Linguagem web madura e robusta
• Roda no servidor
• Ecossistema abrangente e completo
• Possui uma comunidade gigante
• É responsável pela grande maioria da web

PHP

• Processamento pesado
• Simples e madura para mapear regras de negócio

PHP

• Documentação abrangente

PHP

• Sintaxe extremamente simples

PHP

Juntando os dois

• Vue como CDN simples
• Usando múltiplos componentes
• SPA Vue e PHP como API

Juntando os dois

• Escrever HTML, JavaScript e CSS

Juntando os dois

• Sintaxe básica do Vue

Vue como CDN simples

• Cenários: 
  • Pequenas implementações
  • É possível usar como template a própria página

Vue como CDN simples

• Não precisa de build
• Usa o próprio template como referência

Vue como CDN simples

• Permite que o PHP hidrate os componentes
• Componentes inline

Usando múltiplos componentes

• Cenários: 
  • Telas complexas
  • Há conhecimento intermediário sobre JavaScript
  • O uso de scrips nas telas está descentralizado
  • Builds podem ser mais úteis

Usando múltiplos componentes

• Crie componentes usando JavaScript

Usando múltiplos componentes

• Utilizar componentes .vue em templates PHP

SPA Vue e PHP como API

• Cenários: 
  • Implementações avançadas
  • A API será reusada para vários cenários
  • Uso de recursos do dispositivo
  • Conhecimento avançado de JavaScript
  • Painéis de controle

SPA Vue e PHP como API

• Não precisa de SEO

SPA Vue e PHP como API

• Acesso offline

SPA Vue e PHP como API

• API stateless

SPA Vue e PHP como API

• Consumo organizado de recursos
• Permite alternar entre tecnologias no backend

SPA Vue e PHP como API

• Definição de recursos
• Controle de permissão