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

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

20. Componentes (2)
Framework Pontuação
PrimeFaces
RichFaces
ICEfaces
20

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

25. Popularidade
25
PrimeFaces
Fonte: Google Trends

26. Popularidade (2)
26
RichFaces
Fonte: Google Trends

27. Popularidade (3)
27
ICEfaces
Fonte: Google Trends

28. Popularidade (4)
28
Fonte: Google Trends

29. Popularidade (5)
Framework Pontuação
PrimeFaces
RichFaces
ICEfaces
29

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

32. Teste de Datatable
RichFaces
32

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.

36. Teste de Menu
RichFaces
36

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
• pablonobrega2004@gmail.com
– Skype
• pablodeletado@hotmail.com
52