Criando interfaces com Vue.js no bom e velho PHP

/me

William Correa

@wilcorrea

Agenda

  • Vue.js
  • PHP
  • Juntando os dois

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

  • Principal linguagem de programação para sites
  • Dinâmica e ágil
  • Suporte à patterns e diferentes paradigmas

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

Hora das palmas!

Perguntas?!

Referências

Criando interfaces com Vue.js no bom e velho PHP

By William Correa

Criando interfaces com Vue.js no bom e velho PHP

  • 840