Bibliotecas de interface rica no jsf 2

6,388
-1

Published on

Bibliotecas de interface rica no jsf 2. Um comparativo entre as três soluções mais utilizadas no mercado: RichFaces, ICEfaces e PrimeFaces.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,388
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Bibliotecas de interface rica no jsf 2

  1. 1. Bibliotecas deInterface Rica noJSF2Um Comparativo Entre RichFaces,PrimeFaces e ICEfacesPablo Nóbregahttp://pablonobrega.wordpress.comMai/2013
  2. 2. Perfil• Pablo Nóbrega– Analista de Sistemas Senior da UECE;– Graduado em Ciência da Computação (UNIFOR);– Mestrando em Computação Aplicada (UECE);– Programador Java há 8 anos e certificado SCJP eSCWCD;– Publicador eventual na Java Magazine.2
  3. 3. Agenda• Visão Geral de RIA;• Vantagens e Desvantagens de RIA;• RIA no JSF2– RichFaces;– PrimeFaces;– ICEfaces.• Análise Comparativa– Componentes;– Documentação/Material de Consulta;– Comunidade/Ocorrências em Aberto;– Popularidade;– Testes de Desempenho.• Conclusão.3
  4. 4. Visão Geral de RIA• RIA (Rich Internet Application) surgiu em2002 através da Macromedia;• Objetivo– Trazer para o ambiente web, características efuncionalidades do desktop, proporcionando umaexperiência mais agradável para o usuário.• Características Principais– Normalmente roda em um navegador;– Usa client-engine.4
  5. 5. Visão Geral de RIA (2)• Principais soluções:– Flash;– Silverlight;– JavaFX.5Fonte: StatOwl (http://www.statowl.com)
  6. 6. Visão Geral de RIA (3)• Outras soluções:6
  7. 7. Vantagens e Desvantagens deRIA• Vantagens– Uso de recursos visuais modernos;– Execução de processamento assíncrono;– Diminuição no tráfego de rede;– Redução da complexidade das aplicações.• Desvantagens– Necessidade de conexão com a internet*;– Javascript desabilitado no navegador;– Tempo de carregamento da aplicação.7
  8. 8. RIA no JSF2• JSR-127 do JSF 1.0– Especificação baseada em arquitetura extensível• Facilitou a criação de bibliotecas RIA com recursosadicionais para o desenvolvedor.• Soluções RIA no mercado surgiramrapidamente8
  9. 9. RIA no JSF2 (2)• A utilização de RIA no JSF se difundiu– Componentes visuais nativos do JSF são poucos emuito rústicos;– Inexistência de suporte nativo a temas/skins;– Modelo nativo de requisições AJAX simples• Inexistência de mecanismos como push, fila, etc.9
  10. 10. RichFaces• Surgiu pela americana Exadel em 2006;• Em 2007, a JBoss fez um acordo com a Exadel,adicionou o Ajax4jsf e assumiu o controle dabiblioteca;• Usa o jQuery internamente;• Suporte à validação de campos client-side,seguindo a JSR-303 Bean Validation;10
  11. 11. RichFaces (2)• Três bibliotecas como dependência– Número de jar’s pode aumentar de acordo com osrecursos utilizados.• Dois namespaces:– Componentes visuais autônomos;– Controles e componentes ajax.• Recursos AJAX de fila e push;• Subprojeto Component Development Kit (CDK)– Permite a criação de componentes baseadosnos templates fornecidos pela biblioteca.11
  12. 12. PrimeFaces• Lançado em 2008 através da empresaturca Prime Technology;• Possui versão para dispositivos móveis chamadaPrimeFaces Mobile;• Usa o jQuery internamente;• Um único namespace na página paracomponentes comuns e AJAX;• Skins baseados no ThemeRoller(http://jqueryui.com/themeroller);12
  13. 13. PrimeFaces (2)• Nenhuma dependência– Apenas um JAR na aplicação.• PrimeFaces PRO– Plano pago para suporte diferenciado.13
  14. 14. ICEfaces• Surgiu em 2004 pela canadense ICEsoftTechnologies;• Duas categorias de componentes na versão gratuita:– ACE Components;– ICE Components.• Dois namespaces;• Possui versão paga que inclui– Mais de 30 componentes adicionais através da categoriaEE Components;– Recursos e funcionalidades extras;– Componentes e classes aprimoradas.14
  15. 15. ICEfaces (2)• Versão para dispositivos móveis chamadaIceMobile;• Baseado no jQuery e Yahoo UI;• Adiciona três anotações ao JSF– @AllWindowsClosed chama o método com aanotação após todas as janelas do navegadorassociadas a uma sessão serem fechadas.15
  16. 16. ICEfaces (3)• Adiciona escopo Window Scope entre oView Scope e o Session Scope– Gerencia o ciclo de vida do navegador ou de umaaba.• Plugins para Eclipse e Netbeans com recursos dearrastar e soltar;• Suporte a skins baseado no ThemeRoller(http://jqueryui.com/themeroller);• Embate ético com o PrimeFaces.16
  17. 17. Análise Comparativa• Analisar:– Recursos;– Características.• Verificar Pontos Fortes e Pontos Fracos– Apenas versões gratuitas dos três frameworks• RichFaces 4.2.3;• PrimeFaces 3.4.1;• IceFaces 3.2.0.• Determinar a melhor opção.17
  18. 18. Análise Comparativa (2)• Aspectos– Componentes;– Documentação/Material de Consulta;– Comunidade/Ocorrências em Aberto;– Popularidade;– Testes de Desempenho• Datatable;• Menu;• Painel e Componente de Edição HTML WYSIWYG;• Painel e Requisição AJAX.18
  19. 19. ComponentesPrimeFaces RichFaces ICEfaces• +150 componentes;• Versões melhoradas doscomponentes de input ebotões do JSF (inputText,commandButton,selectOneRadio, etc);• Recursos diferenciados:captcha, mindmap, wizard,tagCloud, imageCropper,etc;• Componentes para geraçãode gráficos estatísticos.• +80 componentes;• Validação client-sideseguindo a JSR-303(rich:validator);• Recursosdiferenciados:componentes dragand drop einputNumberSlider.• + 100 componentes nascategorias ACE e ICE Alguns duplicados.• Destaque para odataTable Recursosavançados.• Recursos diferenciados:componente drag anddrop e sliderEntry;• Componente parageração de gráficosestatísticos.19
  20. 20. Componentes (2)Framework PontuaçãoPrimeFacesRichFacesICEfaces20
  21. 21. Documentação/Material deConsultaPrimeFaces RichFaces ICEfaces• Documentação em PDF;• FAQ no formato Wiki;• Documentação da API edos componentes on-line (VDL).• Documentação emHTML e PDF;• FAQ no formato Wiki;• Tutoriais;• Screencasts;• Documentação da API edos componentes on-line (VDL).• Documentação noformato wiki;• Treinamento contendovídeos, slides eexercícios;• Tutoriais;• Webinars gravados.21
  22. 22. Documentação/Material de Consulta(2)Framework PontuaçãoICEfacesRichFacesPrimeFaces22
  23. 23. Comunidade/Ocorrências emAbertoPrimeFaces RichFaces ICEfaces• 18.400 discussões nofórum;• 15.700 membros;• Utilização do GoogleCode para gerenciar oserros e tarefas;• 533 chamados emaberto, de um total de5.017 11% do totalo 99% comprioridademédia.• 20.000 tópicos nofórum;• 7.300 membros;• Utilização do Jira paragerenciar os erros etarefas;• Cerca de 2.150ocorrências em abertode um total de 12.400 17,3% do totalo 68% comprioridadealta oucrítica.• 18.000 tópicoscadastrados;• ? membros cadastrados• Fórum único paratodos os produtos daICEsoft• Utilização do Jira;• 1.700 chamados emaberto, de um total de6.500 26,1% do totalo 93% deprioridade altaou crítica.23
  24. 24. Comunidade/Ocorrências em Aberto(2)Framework PontuaçãoPrimeFacesRichFacesICEfaces24
  25. 25. Popularidade25PrimeFacesFonte: Google Trends
  26. 26. Popularidade (2)26RichFacesFonte: Google Trends
  27. 27. Popularidade (3)27ICEfacesFonte: Google Trends
  28. 28. Popularidade (4)28Fonte: Google Trends
  29. 29. Popularidade (5)Framework PontuaçãoPrimeFacesRichFacesICEfaces29
  30. 30. Testes de Desempenho• Realizados em ambiente local;• Tamanho do response analisado;– Request também foi verificado nos testes de AJAX;• Configuração do ambiente:– Intel Core i5 com Windows 7 Professional 64 bits;– Mojarra 2.1.7;– Apache Tomcat v7.0.27 32 bits;– JDK 1.7.0_05 64 bits.30
  31. 31. Testes de Desempenho (2)• Códigos baseados na documentação e/ouna página de demonstração dos frameworks;• Três principais navegadores utilizados– Cache desabilitado.• Softwares e Ferramentas:– Google Chrome 23.0 32 bits e pacote nativo deferramentas do desenvolvedor;– Internet Explorer 9.0 32 bits e pacote nativo deferramentas do desenvolvedor;– Mozilla Firefox 17.0 32 bits e extensão Firebug 1.11.1.31
  32. 32. Teste de DatatableRichFaces32
  33. 33. Teste de Datatable (2)PrimeFaces33
  34. 34. Teste de Datatable (3)ICEfaces34
  35. 35. Teste de Datatable (4)Resultados35FrameworkTamanho da RespostaPontuaçãoChrome Firefox IERichFaces 365,06Kb 360,8Kb 364,66KbPrimeFaces 606,49Kb 604,3Kb 614,92KbICEfaces 1,01Mb 1Mb 1,01Mb• O resultado do RichFaces foi quase três vezesmelhor que o do ICEfaces e cerca de 70%melhor que o do PrimeFaces.
  36. 36. Teste de MenuRichFaces36
  37. 37. Teste de Menu (2)PrimeFaces37
  38. 38. Teste de Menu (3)ICEfaces38
  39. 39. Teste de Menu (4)Resultados39FrameworkTamanho da RespostaPontuaçãoChrome Firefox IERichFaces 392,74Kb 387,3Kb 392,98KbPrimeFaces 601,65Kb 599,5Kb 604,05KbICEfaces 901,45Kb 897,6Kb 900,48Kb• O resultado do RichFaces foi mais de duas vezesmelhor que o do ICEfaces e cerca de 50%melhor que o do PrimeFaces.
  40. 40. Teste de Painel e Componente deEdição HTML WYSIWYGPrimeFaces40
  41. 41. Teste de Painel e Componente deEdição HTML WYSIWYG (2)RichFaces41
  42. 42. Teste de Painel e Componentede Edição HTML WYSIWYG (3)ICEfaces42
  43. 43. Teste de Painel e Componente deEdição HTML WYSIWYG (4)Resultados43FrameworkTamanho da RespostaPontuaçãoChrome Firefox IEPrimeFaces 618,30Kb 615,3Kb 620,68KbRichFaces 788,36Kb 780,7Kb 775,38KbICEfaces 1,37Mb 1,4Mb 1,38Mb• O resultado do PrimeFaces foi mais de duas vezes melhorque o do ICEfaces e cerca de 30% melhor que o do RichFaces; O PrimeFaces é o único que usa o TinyMCE, enquanto osconcorrentes usam o CKEditor.
  44. 44. Teste de Painel e RequisiçãoAJAXPrimeFaces44
  45. 45. Teste de Painel e RequisiçãoAJAX (2)RichFaces45
  46. 46. Teste de Painel e RequisiçãoAJAX (3)ICEfaces46
  47. 47. Teste de Painel e RequisiçãoAJAX (4)Resultados47FrameworkTamanho da Requisição Tamanho da RespostaPontuaçãoChrome* Firefox IE* Chrome Firefox IEPrimeFaces 0,45Kb 1,05Kb 0,45Kb 1,42Kb 1,42Kb 1,42KbRichFaces 0,59Kb 1,19Kb 0,59Kb 1,42Kb 1,42Kb 1,42KbICEfaces 1,10Kb 1,55Kb 1,12Kb 1,55Kb 1,56Kb 1,57Kb* Não inclui o cabeçalho HTTP• O PrimeFaces foi mais de duas vezes melhor que o ICEfaces ecerca de 30% melhor que o RichFaces no request ;• O response do ICEfaces foi em média cerca de 10% pior que oapresentado pelos dois concorrentes.
  48. 48. Conclusão• Pontos Fortes– Componentes;– Melhor performance em dois dos quatro testes dedesempenho;– Popularidade em alta no Brasil e no Mundo.• Pontos Fracos– Documentação;– Fórum pode ser melhorado.48PrimeFaces
  49. 49. Conclusão (2)• Pontos Fortes– Melhor performance em dois dos quatro testes dedesempenho• Tamanho de resposta HTML bastante inferior aos concorrentes nosdois casos.– Validação client-side.• Pontos Fracos– Poucos componentes• Ausência de recursos para geração de gráficos estatísticos.– Popularidade em baixa;– Wiki bastante incompleto.49RichFaces
  50. 50. Conclusão (3)• Pontos Fortes– Documentação de excelente qualidade;– Fórum bastante organizado.• Pontos Fracos– Depempenho crítico nos quatro testes dedesempenho;– Popularidade em baixa;– Diversificação dos componentes pode ser melhorada.50ICEfaces
  51. 51. Conclusão (4)51Framework Pontuação FinalPrimeFacesRichFacesICEfacesResultado Final
  52. 52. Fim• Contatos– Blog• http://pablonobrega.wordpress.com– E-mail• pablonobrega2004@gmail.com– Skype• pablodeletado@hotmail.com52

×