O documento discute o desenvolvimento de aplicações PHP usando AJAX e o framework YUI. Ele explica porque usar PHP e AJAX, apresenta os principais componentes do YUI e discute como preparar uma aplicação para usar o YUI, incluindo a arquitetura em camadas e carregamento de dados.

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

2. 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)

3. Quem esta na Platéia?

4. Quem esta na Platéia?

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

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

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

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

9. 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 !

10. 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 !!

11. 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

12. 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

13. Quem esta usando PHP

14. 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. "

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

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

17. Por quê AJAX?
• O ciclo tradicional

18. Por quê AJAX?
• O ciclo AJAX

19. 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

20. Quem esta usando AJAX com YUI

21. Outros frameworks JS

22. 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

23. 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.

24. 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

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

26. 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)

27. Arquitetura Aplicação Web

28. Arquitetura Aplicação Web

29. 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

30. 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

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

32. 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

33. 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

34. YUI e carga de dados

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

36. 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 !

37. 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 !

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

39. Saída de Dados

40. Saída de Dados

41. Saída de Dados

42. Saída de Dados

43. 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

44. Caso de Uso

45. Caso de Uso

46. Caso de Uso

47. Caso de Uso

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

49. Dúvidas e perguntas

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