Bibliotecas deInterface Rica noJSF2Um Comparativo Entre RichFaces,PrimeFaces e ICEfacesPablo Nóbregahttp://pablonobrega.wo...
Perfil• Pablo Nóbrega– Analista de Sistemas Senior da UECE;– Graduado em Ciência da Computação (UNIFOR);– Mestrando em Com...
Agenda• Visão Geral de RIA;• Vantagens e Desvantagens de RIA;• RIA no JSF2– RichFaces;– PrimeFaces;– ICEfaces.• Análise Co...
Visão Geral de RIA• RIA (Rich Internet Application) surgiu em2002 através da Macromedia;• Objetivo– Trazer para o ambiente...
Visão Geral de RIA (2)• Principais soluções:– Flash;– Silverlight;– JavaFX.5Fonte: StatOwl (http://www.statowl.com)
Visão Geral de RIA (3)• Outras soluções:6
Vantagens e Desvantagens deRIA• Vantagens– Uso de recursos visuais modernos;– Execução de processamento assíncrono;– Dimin...
RIA no JSF2• JSR-127 do JSF 1.0– Especificação baseada em arquitetura extensível• Facilitou a criação de bibliotecas RIA c...
RIA no JSF2 (2)• A utilização de RIA no JSF se difundiu– Componentes visuais nativos do JSF são poucos emuito rústicos;– I...
RichFaces• Surgiu pela americana Exadel em 2006;• Em 2007, a JBoss fez um acordo com a Exadel,adicionou o Ajax4jsf e assum...
RichFaces (2)• Três bibliotecas como dependência– Número de jar’s pode aumentar de acordo com osrecursos utilizados.• Dois...
PrimeFaces• Lançado em 2008 através da empresaturca Prime Technology;• Possui versão para dispositivos móveis chamadaPrime...
PrimeFaces (2)• Nenhuma dependência– Apenas um JAR na aplicação.• PrimeFaces PRO– Plano pago para suporte diferenciado.13
ICEfaces• Surgiu em 2004 pela canadense ICEsoftTechnologies;• Duas categorias de componentes na versão gratuita:– ACE Comp...
ICEfaces (2)• Versão para dispositivos móveis chamadaIceMobile;• Baseado no jQuery e Yahoo UI;• Adiciona três anotações ao...
ICEfaces (3)• Adiciona escopo Window Scope entre oView Scope e o Session Scope– Gerencia o ciclo de vida do navegador ou d...
Análise Comparativa• Analisar:– Recursos;– Características.• Verificar Pontos Fortes e Pontos Fracos– Apenas versões gratu...
Análise Comparativa (2)• Aspectos– Componentes;– Documentação/Material de Consulta;– Comunidade/Ocorrências em Aberto;– Po...
ComponentesPrimeFaces RichFaces ICEfaces• +150 componentes;• Versões melhoradas doscomponentes de input ebotões do JSF (in...
Componentes (2)Framework PontuaçãoPrimeFacesRichFacesICEfaces20
Documentação/Material deConsultaPrimeFaces RichFaces ICEfaces• Documentação em PDF;• FAQ no formato Wiki;• Documentação da...
Documentação/Material de Consulta(2)Framework PontuaçãoICEfacesRichFacesPrimeFaces22
Comunidade/Ocorrências emAbertoPrimeFaces RichFaces ICEfaces• 18.400 discussões nofórum;• 15.700 membros;• Utilização do G...
Comunidade/Ocorrências em Aberto(2)Framework PontuaçãoPrimeFacesRichFacesICEfaces24
Popularidade25PrimeFacesFonte: Google Trends
Popularidade (2)26RichFacesFonte: Google Trends
Popularidade (3)27ICEfacesFonte: Google Trends
Popularidade (4)28Fonte: Google Trends
Popularidade (5)Framework PontuaçãoPrimeFacesRichFacesICEfaces29
Testes de Desempenho• Realizados em ambiente local;• Tamanho do response analisado;– Request também foi verificado nos tes...
Testes de Desempenho (2)• Códigos baseados na documentação e/ouna página de demonstração dos frameworks;• Três principais ...
Teste de DatatableRichFaces32
Teste de Datatable (2)PrimeFaces33
Teste de Datatable (3)ICEfaces34
Teste de Datatable (4)Resultados35FrameworkTamanho da RespostaPontuaçãoChrome Firefox IERichFaces 365,06Kb 360,8Kb 364,66K...
Teste de MenuRichFaces36
Teste de Menu (2)PrimeFaces37
Teste de Menu (3)ICEfaces38
Teste de Menu (4)Resultados39FrameworkTamanho da RespostaPontuaçãoChrome Firefox IERichFaces 392,74Kb 387,3Kb 392,98KbPrim...
Teste de Painel e Componente deEdição HTML WYSIWYGPrimeFaces40
Teste de Painel e Componente deEdição HTML WYSIWYG (2)RichFaces41
Teste de Painel e Componentede Edição HTML WYSIWYG (3)ICEfaces42
Teste de Painel e Componente deEdição HTML WYSIWYG (4)Resultados43FrameworkTamanho da RespostaPontuaçãoChrome Firefox IEPr...
Teste de Painel e RequisiçãoAJAXPrimeFaces44
Teste de Painel e RequisiçãoAJAX (2)RichFaces45
Teste de Painel e RequisiçãoAJAX (3)ICEfaces46
Teste de Painel e RequisiçãoAJAX (4)Resultados47FrameworkTamanho da Requisição Tamanho da RespostaPontuaçãoChrome* Firefox...
Conclusão• Pontos Fortes– Componentes;– Melhor performance em dois dos quatro testes dedesempenho;– Popularidade em alta n...
Conclusão (2)• Pontos Fortes– Melhor performance em dois dos quatro testes dedesempenho• Tamanho de resposta HTML bastante...
Conclusão (3)• Pontos Fortes– Documentação de excelente qualidade;– Fórum bastante organizado.• Pontos Fracos– Depempenho ...
Conclusão (4)51Framework Pontuação FinalPrimeFacesRichFacesICEfacesResultado Final
Fim• Contatos– Blog• http://pablonobrega.wordpress.com– E-mail• pablonobrega2004@gmail.com– Skype• pablodeletado@hotmail.c...
Próximos SlideShares
Carregando em…5
×

Bibliotecas de interface rica no jsf 2

8.173 visualizações

Publicada em

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

Publicada em: Tecnologia
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
8.173
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6.033
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no 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

×