Bibliotecas de interface rica no jsf 2
4 gostaram9,602 visualizações
O documento analisa e compara três bibliotecas para rich internet applications (RIA) no JSF2: RichFaces, PrimeFaces e IceFaces, abordando suas características, vantagens e desvantagens. A comparação inclui aspectos como componentes, documentação, comunidade e desempenho, destacando que o RichFaces apresenta melhor desempenho em testes específicos, enquanto o PrimeFaces se destaca pela validação client-side. O IceFaces, apesar de ter recursos diferenciados, demonstrou desempenho inferior em todos os testes de performance realizados.
Bibliotecas de interface rica no jsf 2
- 1. Bibliotecas de Interface Rica no JSF2 Um Comparativo Entre RichFaces, PrimeFaces e ICEfaces Pablo Nóbrega http://pablonobrega.wordpress.com Mai/2013
- 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 e SCWCD; – Publicador eventual na Java Magazine. 2
- 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. Visão Geral de RIA • RIA (Rich Internet Application) surgiu em 2002 através da Macromedia; • Objetivo – Trazer para o ambiente web, características e funcionalidades do desktop, proporcionando uma experiência mais agradável para o usuário. • Características Principais – Normalmente roda em um navegador; – Usa client-engine. 4
- 5. Visão Geral de RIA (2) • Principais soluções: – Flash; – Silverlight; – JavaFX. 5 Fonte: StatOwl (http://www.statowl.com)
- 6. Visão Geral de RIA (3) • Outras soluções: 6
- 7. Vantagens e Desvantagens de RIA • 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. RIA no JSF2 • JSR-127 do JSF 1.0 – Especificação baseada em arquitetura extensível • Facilitou a criação de bibliotecas RIA com recursos adicionais para o desenvolvedor. • Soluções RIA no mercado surgiram rapidamente 8
- 9. RIA no JSF2 (2) • A utilização de RIA no JSF se difundiu – Componentes visuais nativos do JSF são poucos e muito 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. RichFaces • Surgiu pela americana Exadel em 2006; • Em 2007, a JBoss fez um acordo com a Exadel, adicionou o Ajax4jsf e assumiu o controle da biblioteca; • Usa o jQuery internamente; • Suporte à validação de campos client-side, seguindo a JSR-303 Bean Validation; 10
- 11. RichFaces (2) • Três bibliotecas como dependência – Número de jar’s pode aumentar de acordo com os recursos 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 baseados nos templates fornecidos pela biblioteca. 11
- 12. PrimeFaces • Lançado em 2008 através da empresa turca Prime Technology; • Possui versão para dispositivos móveis chamada PrimeFaces Mobile; • Usa o jQuery internamente; • Um único namespace na página para componentes comuns e AJAX; • Skins baseados no ThemeRoller (http://jqueryui.com/themeroller); 12
- 13. PrimeFaces (2) • Nenhuma dependência – Apenas um JAR na aplicação. • PrimeFaces PRO – Plano pago para suporte diferenciado. 13
- 14. ICEfaces • Surgiu em 2004 pela canadense ICEsoft Technologies; • 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 categoria EE Components; – Recursos e funcionalidades extras; – Componentes e classes aprimoradas. 14
- 15. ICEfaces (2) • Versão para dispositivos móveis chamada IceMobile; • Baseado no jQuery e Yahoo UI; • Adiciona três anotações ao JSF – @AllWindowsClosed chama o método com a anotação após todas as janelas do navegador associadas a uma sessão serem fechadas. 15
- 16. ICEfaces (3) • Adiciona escopo Window Scope entre o View Scope e o Session Scope – Gerencia o ciclo de vida do navegador ou de uma aba. • Plugins para Eclipse e Netbeans com recursos de arrastar e soltar; • Suporte a skins baseado no ThemeRoller (http://jqueryui.com/themeroller); • Embate ético com o PrimeFaces. 16
- 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. 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. Componentes PrimeFaces RichFaces ICEfaces • +150 componentes; • Versões melhoradas dos componentes de input e botões do JSF (inputText, commandButton, selectOneRadio, etc); • Recursos diferenciados: captcha, mindmap, wizard, tagCloud, imageCropper, etc; • Componentes para geração de gráficos estatísticos. • +80 componentes; • Validação client-side seguindo a JSR-303 (rich:validator); • Recursos diferenciados: componentes drag and drop e inputNumberSlider. • + 100 componentes nas categorias ACE e ICE Alguns duplicados. • Destaque para o dataTable Recursos avançados. • Recursos diferenciados: componente drag and drop e sliderEntry; • Componente para geração de gráficos estatísticos. 19
- 21. Documentação/Material de Consulta PrimeFaces RichFaces ICEfaces • Documentação em PDF; • FAQ no formato Wiki; • Documentação da API e dos componentes on- line (VDL). • Documentação em HTML e PDF; • FAQ no formato Wiki; • Tutoriais; • Screencasts; • Documentação da API e dos componentes on- line (VDL). • Documentação no formato wiki; • Treinamento contendo vídeos, slides e exercícios; • Tutoriais; • Webinars gravados. 21
- 22. Documentação/Material de Consulta (2) Framework Pontuação ICEfaces RichFaces PrimeFaces 22
- 23. Comunidade/Ocorrências em Aberto PrimeFaces RichFaces ICEfaces • 18.400 discussões no fórum; • 15.700 membros; • Utilização do Google Code para gerenciar os erros e tarefas; • 533 chamados em aberto, de um total de 5.017 11% do total o 99% com prioridade média. • 20.000 tópicos no fórum; • 7.300 membros; • Utilização do Jira para gerenciar os erros e tarefas; • Cerca de 2.150 ocorrências em aberto de um total de 12.400 17,3% do total o 68% com prioridade alta ou crítica. • 18.000 tópicos cadastrados; • ? membros cadastrados • Fórum único para todos os produtos da ICEsoft • Utilização do Jira; • 1.700 chamados em aberto, de um total de 6.500 26,1% do total o 93% de prioridade alta ou crítica. 23
- 24. Comunidade/Ocorrências em Aberto (2) Framework Pontuação PrimeFaces RichFaces ICEfaces 24
- 26. Popularidade (2) 26 RichFaces Fonte: Google Trends
- 27. Popularidade (3) 27 ICEfaces Fonte: Google Trends
- 28. Popularidade (4) 28 Fonte: Google Trends
- 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. Testes de Desempenho (2) • Códigos baseados na documentação e/ou na 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 de ferramentas do desenvolvedor; – Internet Explorer 9.0 32 bits e pacote nativo de ferramentas do desenvolvedor; – Mozilla Firefox 17.0 32 bits e extensão Firebug 1.11.1. 31
- 33. Teste de Datatable (2) PrimeFaces 33
- 34. Teste de Datatable (3) ICEfaces 34
- 35. Teste de Datatable (4) Resultados 35 Framework Tamanho da Resposta Pontuação Chrome Firefox IE RichFaces 365,06Kb 360,8Kb 364,66Kb PrimeFaces 606,49Kb 604,3Kb 614,92Kb ICEfaces 1,01Mb 1Mb 1,01Mb • O resultado do RichFaces foi quase três vezes melhor que o do ICEfaces e cerca de 70% melhor que o do PrimeFaces.
- 37. Teste de Menu (2) PrimeFaces 37
- 38. Teste de Menu (3) ICEfaces 38
- 39. Teste de Menu (4) Resultados 39 Framework Tamanho da Resposta Pontuação Chrome Firefox IE RichFaces 392,74Kb 387,3Kb 392,98Kb PrimeFaces 601,65Kb 599,5Kb 604,05Kb ICEfaces 901,45Kb 897,6Kb 900,48Kb • O resultado do RichFaces foi mais de duas vezes melhor que o do ICEfaces e cerca de 50% melhor que o do PrimeFaces.
- 40. Teste de Painel e Componente de Edição HTML WYSIWYG PrimeFaces 40
- 41. Teste de Painel e Componente de Edição HTML WYSIWYG (2) RichFaces 41
- 42. Teste de Painel e Componente de Edição HTML WYSIWYG (3) ICEfaces 42
- 43. Teste de Painel e Componente de Edição HTML WYSIWYG (4) Resultados 43 Framework Tamanho da Resposta Pontuação Chrome Firefox IE PrimeFaces 618,30Kb 615,3Kb 620,68Kb RichFaces 788,36Kb 780,7Kb 775,38Kb ICEfaces 1,37Mb 1,4Mb 1,38Mb • O resultado do PrimeFaces foi mais de duas vezes melhor que o do ICEfaces e cerca de 30% melhor que o do RichFaces; O PrimeFaces é o único que usa o TinyMCE, enquanto os concorrentes usam o CKEditor.
- 44. Teste de Painel e Requisição AJAX PrimeFaces 44
- 45. Teste de Painel e Requisição AJAX (2) RichFaces 45
- 46. Teste de Painel e Requisição AJAX (3) ICEfaces 46
- 47. Teste de Painel e Requisição AJAX (4) Resultados 47 Framework Tamanho da Requisição Tamanho da Resposta Pontuação Chrome* Firefox IE* Chrome Firefox IE PrimeFaces 0,45Kb 1,05Kb 0,45Kb 1,42Kb 1,42Kb 1,42Kb RichFaces 0,59Kb 1,19Kb 0,59Kb 1,42Kb 1,42Kb 1,42Kb ICEfaces 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 e cerca de 30% melhor que o RichFaces no request ; • O response do ICEfaces foi em média cerca de 10% pior que o apresentado pelos dois concorrentes.
- 48. Conclusão • Pontos Fortes – Componentes; – Melhor performance em dois dos quatro testes de desempenho; – Popularidade em alta no Brasil e no Mundo. • Pontos Fracos – Documentação; – Fórum pode ser melhorado. 48 PrimeFaces
- 49. Conclusão (2) • Pontos Fortes – Melhor performance em dois dos quatro testes de desempenho • Tamanho de resposta HTML bastante inferior aos concorrentes nos dois 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. 49 RichFaces
- 50. Conclusão (3) • Pontos Fortes – Documentação de excelente qualidade; – Fórum bastante organizado. • Pontos Fracos – Depempenho crítico nos quatro testes de desempenho; – Popularidade em baixa; – Diversificação dos componentes pode ser melhorada. 50 ICEfaces
- 51. Conclusão (4) 51 Framework Pontuação Final PrimeFaces RichFaces ICEfaces Resultado Final
- 52. Fim • Contatos – Blog • http://pablonobrega.wordpress.com – E-mail • [email protected] – Skype • [email protected] 52