Desenvolvendo aplicações PHP
com, AJAX e Y!UI Yahoo! User
Interface
Domingos Teruel
Analista de Software

Experiência Profissional
• Tecnólogo em Processamento de dados,
especialista em Interfaces de sistemas;
• Atua no desenvolvimento e implementação de
sistemas web com software livre;
• Desenvolvedor PHP desde 1999;
• Analista de software de ITI em Lightcomm
Tecnologia e Serviços
• Consultor em tecnologias móvel (especialista
em ambiente Blackberry)

Quem esta na Platéia?

Quem esta na Platéia?

Quem esta na Platéia?
• Fãs de Software Livre ?

Quem esta na Platéia?
• Fãs de Software Livre ?
• Estudantes ?

Quem esta na Platéia?
• Fãs de Software Livre ?
• Estudantes ?
• Desenvolvedores Avançado de PHP ?

Quem esta na Platéia?
• Fãs de Software Livre ?
• Estudantes ?
• Desenvolvedores Avançado de PHP ?
• Desenvolvedores de outras Linguagens ?

Quem esta na Platéia?
• Fãs de Software Livre ?
• Estudantes ?
• Desenvolvedores Avançado de PHP ?
• Desenvolvedores de outras Linguagens ?
• Todas as opções acima !

Quem esta na Platéia?
• Fãs de Software Livre ?
• Estudantes ?
• Desenvolvedores Avançado de PHP ?
• Desenvolvedores de outras Linguagens ?
• Todas as opções acima !
• Nenhuma das outras opções !!

Linha da apresentação
• Porque utilizar PHP no meu projeto
• Utilizando Ajax com PHP
• Porque YUI
• Desenvolvimento de um Projeto
– Camada de Apresentação com YUI
– Camada de Negócios e Modelo

Porque usar PHP se existe o
ASP, JSP, Python, .NET… ?
• Excelente Custo/Benefício
• Perfomance / Robustez / Escalabilidade
• Curva de aprendizagem curta
• Open Source / Software livre
• Multi-plataformas
• Interoperabilidade
• Grande Comunidade ativa

Quem esta usando PHP

Por que de um Framework?
Segundo a Wikipedia, um Framework é:
"uma abstração onde um conjunto comum de
código fornece funcionalidades genérica que
podem ser seletivamente sobrepostas ou
especializadas pelo utilizador do código
fornecendo uma funcionalidade específica. "

Por que de um Framework?
• Simplificação
• Agilidade / Rapidez
• Padrões de desenvolvimento / Design
Pattern
• Organização
• Menos código
• Conjunto de utilitários

Por quê AJAX?
• Ajax quer dizer: Asynchronous Javascript
and XML
• Mas também pode ser:
– Asynchronous Javascript and
+ XHTML
+ JSON
+ CSS

Por quê AJAX?
• O ciclo tradicional

Por quê AJAX?
• O ciclo AJAX

Por quê AJAX?
• O que muda para o usuário
– Uso de AJAX substitui refresh de páginas por
atualização(update) nas páginas.
– Melhora a experiência do usuário com a interface
– Possibilidade de melhorias na interação com o
usuário: melhor usabilidade, melhor interatividade
com quem usa
– Utilização de efeitos visuais (limitado, mas suficiente)
– Economia de banda (aplicação mais veloz)
– Grande quantidade de frameworks Javascripts
disponíveis no mercado

Quem esta usando AJAX com YUI

Outros frameworks JS

Por que YUI?
“A Biblioteca Yahoo User Interface (YUI) é uma coleção
coerente de recursos Javascript e CSS que facilita a
construção de aplicações web interativas em
navegadores web. Algumas partes do YUI, como o
Event Utility, opera sobre uma camada e esta lá para
facilitar a programação croos-browser. Outras, como
o Calendário, apresenta widgets que pode ser
representados em sua página com um visual(design)
padrão.”
YUI Team

Porque YUI
• Excelente documentação
• Grande número de desenvolvedores,
ótimos Use cases
• Desenvolvimento continuo da aplicação
pelo Yahoo e comunidade
• A Biblioteca YUI é livre, está sob a licença
BSD que permite seu uso comercial e não
comercial.

O que é preciso saber para
desenvolver?
• Para desenvolver uma aplicação que utilize YUI
é recomendado bom conhecimento de XHTML e
CSS, noções de DOM e JAVASCRIPT
– Quais ferramentas utilizar?
• Navegador: Firefox
• Add-ons:
– Firebug
– Html Validator
– Tamper data
– Web Developer
– YSlow

O que é preciso saber para
desenvolver?
• Utilizar uma ferramenta de Controle de
Versão

O que é preciso saber para
desenvolver?
• Definição das pastas do projeto
• Baixar a última versão do YUI e das
outras ferramentas que utilizará no projeto
(smarty, nusoap e etc)

Arquitetura Aplicação Web

Arquitetura Aplicação Web

Camada de Apresentação
• Definição do Mockup
– Uso de templates engine (SMARTY) para
gerenciar a saída XHTML
– Definição do container de navegação
– Web Standards

Como preparar sua aplicação para
o YUI
• Definir o escopo do recurso a ser utilizado
na interface
• Loader
• Dificuldade em trabalhar com aplicações
complexas que utilizam componente DataTable
• Event
• Fácil implementar com componente DataTable

Camada de Negócios
• Programação Orientada a Objeto
• Utilizar conceito Container
• Devo utilizar um framework como Zend
Framework, CakePHP, etc?

Desenvolvimento da aplicação
• Bootstrap
– Disponibiliza os recursos do sistema
– Carrega as definições iniciais da aplicação
• Container
– Faz check de segurança
– Checa Identificação do Usuário
– Gerencia requisições e permissões de usuário

Internacionalização com YUI
• YUI não contempla de um componente
para internacionalização
• Como fazer?
– Utilize seu componente PHP de i18n
• Zend_translate
• Smarty Translate
• Solução caseira
– Navegador defini idioma padrão, arquivo de idioma
– Componente que traduz para JavaScript

YUI e carga de dados

YUI e carga de dados
• Componente DataSource
– Tipo de dados
• HTML TABLE
• TEXT
• JSON
• JSARRAY
• XML

YUI e carga de dados
• Componente DataSource
– Tipo de dados
• HTML TABLE
• TEXT
• JSON
• JSARRAY
• XML
Siga o padrão de cada tipo de dado !

YUI e carga de dados
• Componente DataSource
– Tipo de dados
• HTML TABLE
• TEXT
• JSON
• JSARRAY
• XML
Siga o padrão de cada tipo de dado !

YUI e carga de dados
• Definição de campos
– Tipo de Campos
• Meta Campos
• Lista de Resultados

Saída de Dados

Saída de Dados

Saída de Dados

Saída de Dados

Para aonde caminha YUI
• YUI 3.X
– Mais Leves (menos K-weight sobre o core da página para a
maioria dos usos)
– Mais rápido (com menos requisições http, menos escrita de
código e compilação, um código mais eficiente)
– Mais consistente (nomenclatura comum, assinaturas de
eventos, widget e toda a APIs da biblioteca)
– mais potentes (fazer mais com menos implementação código)
– mais segurança (mais seguro e fácil de expor a vários
desenvolvedores trabalhando no mesmo ambiente, maior
facilidade de correr em sistemas como Caja ou ADsafe)
• Não Compativel com YUI 2.X
– Migração Paralela

Caso de Uso

Caso de Uso

Caso de Uso

Caso de Uso

Agradecimentos
• LigthComm Tecnologia
• PHP-MG
• Yahoo – YUI Team

Dúvidas e perguntas

Obrigado!!!
• http://twitter.com/mingomax
• http://blog.dteruel.com.br
• http://meadiciona.com/mingomax
37