Análise comparativa entre Frameworks

Prévia do material em texto

13/02/2021 UNIMESTRE - Sistema de Administração de Aprendizagem
https://lms.unimestre.com/lms/sala/1546081/WNqfy2yV4JNJJjwF 1/20
Thumbnails Document Outline Attachments
Find: 
Previous
Next
 Highlight all Match case
Presentation Mode Open Print Download Current View
Go to First Page Go to Last Page
Rotate Clockwise Rotate Counterclockwise
Enable hand tool
Document Properties…
Toggle Sidebar
Find
Previous
13/02/2021 UNIMESTRE - Sistema de Administração de Aprendizagem
https://lms.unimestre.com/lms/sala/1546081/WNqfy2yV4JNJJjwF 2/20
Next
1 of 9
Presentation Mode Open Print Download Current View
Tools
Zoom Out
Zoom In
Automatic Zoom
13/02/2021 UNIMESTRE - Sistema de Administração de Aprendizagem
https://lms.unimestre.com/lms/sala/1546081/WNqfy2yV4JNJJjwF 3/20
Departamento de Computação - Universidade Federal de São Carlos (UFSCar)
Caixa Postal 676 – 13.565-905 – São Carlos – SP – Brasil
Autor para correspondência:
rodrigo.amaral@hp.com, vania.neris@gmail.com
ISSN 2316-2872
T.I.S. São Carlos, v. 4, n. 1, p. 88-96, jan-abr 2015
©Tecnologias, Infraestrutura e Software
13/02/2021 UNIMESTRE - Sistema de Administração de Aprendizagem
https://lms.unimestre.com/lms/sala/1546081/WNqfy2yV4JNJJjwF 4/20
Análise comparativa entre frameworks de front-
end para aplicações web ricas visando
reaproveitamento do back-end
Rodrigo Augusto do Amaral, Vânia Paula de Almeida Neris
Resumo:
Este artigo apresenta uma análise comparativa entre bibliotecas Javascript para o desenvolvimento do front-end de interfaces web
ricas e responsivas com o objetivo de avaliar o comportamento delas no apoio ao reaproveitamento do back-end (camada de negócio). As
bibliotecas jQuery Mobile e Bootstrap foram estudadas e analisadas considerando-se os seguintes critérios de avaliação: responsividade,
compatibilidade entre navegadores, esforço de implementação e documentação. Para a análise, foi desenvolvida uma arquitetura que serve de
apoio para que o desenvolvedor possa reaproveitar o back-end da aplicação a ser desenvolvida. Os resultados sugerem que ambas as
bibliotecas apoiam o reaproveitamento, mas focando em características diferentes.
Palavras-Chave:
bibliotecas javascript, interfaces web ricas, reaproveitamento back-end
Comparative analysis among front-end frameworks for rich web applications aiming at reusing the back-end
Abstract:
This paper presents a comparative analysis ofJavaScript libraries for the development ofthe front-end ofrich and responsive web
interfaces in order to evaluate their behavior in supporting the reuse ofthe back-end (business layer). The Bootstrap and jQuery Mobile
libraries were studied and analyzed considering the following evaluation criteria: responsiveness, browser compatibility, documentation and
implementation effort. Aiming to support the work, an architecture that serves to guide the developer on how to reuse the application back-end
was developed. The results suggest that both libraries support the reuse, but focusing on different characteristics.
Keywords:
javascript libraries, rich web interface, back-endreuse
I. I
NTRODUÇÃO
Atualmente para os usuários de sistemas de infornação, o
conhecimento para se acessar, utilizar e compartilhar dados
on-line vem aumentando e essas ações estão se tornando cada
vez mais comuns e naturais em seus cotidianos. Além disso,
essas ações estão sendo realizadas cada vez mais a partir de
dispositivos móveis, e não só por desktops como eram feitas à
alguns anos atrás (CAMDEN; MATTHEWS, 2013).
dos os meses vários smartphones são lançados e
acompanham seus donos em todos os lugares, que vão desde
uma simples ida ao supermercado como em trilhas por uma
montanha. Este fato deixa claro que os usuários necessitam de
aplicativos e sites que forneçam informações de forma rápida
 fácil, não apenas em desktops, mas também em seus
smartphones (DUTSON, 2013).
As aplicações móveis são de dois tipos básicos: aplicações
ativas, que são programas que rodam nativamente no
dispositivo e os aplicativos web, que são executados dentro
de um navegador no dispositivo (REID, 2011).
Aplicações nativas têm muitas vantagens. Elas são rápidas
e têm amplo acesso aos recursos da plataforma na qual são
construídas. No entanto, os aplicativos nativos sofrem de uma
tação importante, eles não são multiplataforma,
dificultando sua portabilidade (DUTSON, 2013).
Caso um desenvolvedor deseje implementar a sua aplicação
e torna-lá disponível em múltiplas plataformas, ele terá que
a-lá em várias linguagens diferentes (resultando em
múltiplas bases de código para se manter) ou usar uma
mada de abstração de plataforma como Titanium ou
PhoneGap (REID, 2011).
icações web móveis, por outro lado, são criadas
principalmente em HTML (Hyper Text Markup Language),
CSS (Cascade Style Sheet) e JavaScript, e executadas no
vegador do dispositivo móvel. Os aplicativos da web
possuem um obstáculo a ser superado: as variações de
dores em várias plataformas (CAMDEN;
MATTHEWS, 2013).
O objetivo desse artigo é fornecer uma análise comporativa
dois frameworks JavaScript – jQuery Mobile e
Bootstrap – selecionados por serem os que apresentam uma
maior gama de componentes entre frameworks open sources
disponíveis no mercado para a construção de interfaces web
ricas. E possui o intuito de fornecer um material de apoio, que
auxilie o desenvolvedor na escolha de qual biblioteca utilizar
ua aplicação. Os frameworks foram analisados
nsiderando-se quatro critérios: responsividade,
89
T.I.S. 2015; 4 (1): 88-96
Rodrigo Augusto do Amaral, Vânia Paula de Almeida Neris
patibilidade entre navegadores, esforço de
implementação e documentação. Além das comparações
ealizadas, foi desenvolvida uma arquitetura para que o
desenvolvedor possa reaproveitar o uso do back-end da
13/02/2021 UNIMESTRE - Sistema de Administração de Aprendizagem
https://lms.unimestre.com/lms/sala/1546081/WNqfy2yV4JNJJjwF 5/20
R
T
aplicação.
se artigo contém sete seções. Na seção dois são
apresentados outros trabalhos que possuem como tema
principal a comparação entre bibliotecas javascript. Na seção
três é apresentada uma fundamentação teórica sobre os
assuntos relacionados ao tema proposto. Na seção quatro é
apresentado o método de avaliação adotado para analisar as
bibliotecas selecionadas e ilustrar o reaproveitamento do
back-end da aplicação. A seção cinco apresenta os resultados
obtidos na análise comparativa. Na seção seis encontram-se
as análises criticas e as limitações da solução proposta e, por
fim, na última seção, é realizada a conclusão deste trabalho.
II. T
RABALHOS
ELACIONADOS
As análises comparativas entre as bibliotecas javascript
encontradas na literatura dão ênfase a quais componentes
disponíveis nessas bibliotecas seriam mais indicados para
uma funcionalidade específica.
Cogo et al. (2009) analisaram várias bibliotecas com o
objetivo de discutir as vantagens e desvantagens da utilização
de alguns componentes presente nessas bibliotecas e mostrar
qual é a mais indicada para cada componente selecionado.
Através de análises, esses autores concluíram, por exemplo,
que o componente de calendário disponível na biblioteca YUI
(Yahoo! User Interface) é o mais indicado entre as bibliotecas
selecionadas – jQuery UI (jQuery User Interface), YUI e
QooXDoo – por sua facilidade de utilização e configuração.
omo outro trabalho relacionado, pode-se citar o de
non (2010) no qual foram realizadas análises
comparativas baseadas em algumas características que são
comumente encontradas nessas bibliotecas, como o uso de
X (Asynchronous Javascript and XML) e de
componentes que melhoram a experiência do usuário. Em sua
análise, o autor verificou que, por exemplo, dentre as cinco
bliotecas analisadas – jQuery, Prototype, YUI, ExtJS
Extension Java Script) e MooTools – a biblioteca ExtJS
possui a maior quantidade de componente e recursos que
facilitam o uso de uma aplicação web.
Já na abordagem de Berniche (2013), a autora fez um
comparativo entre cinco bibliotecas javascript – jQuery UI,
MooTools,Prototype, script.aculo.us e YUI – que fornecem
varios componentes visuais. Após a analise das bibliotecas, a
autora concluíu que, a existência de diversas bibliotecas para
o desenvolvimento de aplicações web ricas torna difícil a
escolha do desenvolvedor sobre qual biblioteca utilizar, e
sendo assim, a autora criou uma árvore de decisão, para
auxiliar o desenvolvedor na escolha da biblioteca que mais irá
se enquadrar no desenvolvimento de seu sistema.
O presente trabalho se difere dos trabalhos encontrados,
pois realiza a comparação entre as bibliotecas open sources,
jQuery Mobile e Bootstrap, que focam em componentes para
aplicações móveis e de comportamento responsivos, que
podem ser renderizados tanto em dispositivos móveis como
desktops sem a necessidade de uma adaptação mais específica
e complexa. Também, este artigo fornece ao desenvolvedor
uma solução de arquitetura com a qual se pode realizar o
aproveitamento da camada de negócio de sua aplicação web
(back-end).
III. F
UNDAMENTAÇÃO
EÓRICA
O termo RIA (Rich Internet Application) foi criado para
denominar um novo tipo de aplicação web, que fornecem uma
maior interatividade para seus usuários, uma aplicação RIA
acteriza-se pelo fato de possuir comportamentos e
alidades de uma aplicação desktop, além de possuir
animações, conteúdo multimídia e processamento do lado
cliente, permitindo assim que os usuários utilizem a aplicação
com uma interface mais agradável (MORALES et al., 2011).
Algumas vantagens oferecidas pelas RIAs são a arquitetura
13/02/2021 UNIMESTRE - Sistema de Administração de Aprendizagem
https://lms.unimestre.com/lms/sala/1546081/WNqfy2yV4JNJJjwF 6/20
cliente-servidor, a variedade de componentes que podem ser
utilizados para a construção de intefaces e a comunicação
assíncrona entre cliente e servidor (BUSH; KOCH 2009).
As RIA podem ser construídas utilizando-se de bibliotecas
avascript para simplificar seu desenvolvimento. Para tal,
podem fazer uso da tecnologia AJAX, permitindo que as
aplicações não sejam recarregadas a cada requisição ao
servidor. Com isso, diminui-se o tempo de processamento de
uma página e a sobrecarga de processamento do servidor, já
que apenas uma parte da página é atualizada (RIORDAN,
2008).
Em ciência da computação, front-end e back-end são
termos generalizados que referem-se às etapas inicial e final
de um processo. O front-end é responsável por coletar a
entrada em várias formas do usuário e processá-la para
adequá-la a uma especificação em que o back-end possa
utilizar. O back-end executa as regras de negócio da aplicação,
ele é responsavel por validar e consistir os dados vindos do
front-end. O front-end é uma espécie de interface entre o
usuário e o back-end. Ambos podem estar distribuídos entre
um ou mais sistemas (MORRISON, 2008).
Site ou layout responsivo, ou também conhecido como site
xível é quando o site automaticamente se encaixa no
dispositivo do usuário (desktop, smartphone, tablet, etc). Um
site responsivo muda a sua aparência e disposição com base
o tamanho da tela em que o site é exibido. Então, se o
uário possui uma pequena tela de 3,5 polegadas, os
elementos se reorganizam de tal forma que sejam exibidos os
principais em primeiro lugar (NISKA, 2014).
xistem diversas bibliotecas javascript disponíveis no
mercado que disponibilizam os recursos abordados até o
momento, e é necessario que o desenvolvedor faça uma
analise entre elas para selecionar aquela que atenda aos
requisitos da aplicação a ser desenvolvida.
Para a análise comparativa proposta por esse artigo, com o
intuito de demonstrar ao desenvolvedor como implementar
uma RIA responsiva com o reaproveitamento de seu back-end,
foram selecionadas as seguintes bibliotecas: jQuery Mobile e
oostrap. Essas bibliotecas foram selecionadas por
presentarem uma quantidade maior de componentes
responsivos do que as demais disponiveis atualmente no
13/02/2021 UNIMESTRE - Sistema de Administração de Aprendizagem
https://lms.unimestre.com/lms/sala/1546081/WNqfy2yV4JNJJjwF 7/20
13/02/2021 UNIMESTRE - Sistema de Administração de Aprendizagem
https://lms.unimestre.com/lms/sala/1546081/WNqfy2yV4JNJJjwF 8/20
13/02/2021 UNIMESTRE - Sistema de Administração de Aprendizagem
https://lms.unimestre.com/lms/sala/1546081/WNqfy2yV4JNJJjwF 9/20
13/02/2021 UNIMESTRE - Sistema de Administração de Aprendizagem
https://lms.unimestre.com/lms/sala/1546081/WNqfy2yV4JNJJjwF 10/20
13/02/2021 UNIMESTRE - Sistema de Administração de Aprendizagem
https://lms.unimestre.com/lms/sala/1546081/WNqfy2yV4JNJJjwF 11/20
Enter the password to open this PDF file:
Cancel OK
File name:
-
File size:
-
Title:
-
Author:
-
Subject:
-
Keywords:
-
Creation Date:
-
Modification Date:
-
Creator:
-
PDF Producer:
-
PDF Version:
-
Page Count:
-
Close
Preparing document for printing…
 100%
Cancel
13/02/2021 UNIMESTRE - Sistema de Administração de Aprendizagem
https://lms.unimestre.com/lms/sala/1546081/WNqfy2yV4JNJJjwF 12/20
13/02/2021 UNIMESTRE - Sistema de Administração de Aprendizagem
https://lms.unimestre.com/lms/sala/1546081/WNqfy2yV4JNJJjwF 13/20
13/02/2021 UNIMESTRE - Sistema de Administração de Aprendizagem
https://lms.unimestre.com/lms/sala/1546081/WNqfy2yV4JNJJjwF 14/20
13/02/2021 UNIMESTRE - Sistema de Administração de Aprendizagem
https://lms.unimestre.com/lms/sala/1546081/WNqfy2yV4JNJJjwF 15/20
13/02/2021 UNIMESTRE - Sistema de Administração de Aprendizagem
https://lms.unimestre.com/lms/sala/1546081/WNqfy2yV4JNJJjwF 16/20
13/02/2021 UNIMESTRE - Sistema de Administração de Aprendizagem
https://lms.unimestre.com/lms/sala/1546081/WNqfy2yV4JNJJjwF 17/20
13/02/2021 UNIMESTRE - Sistema de Administração de Aprendizagem
https://lms.unimestre.com/lms/sala/1546081/WNqfy2yV4JNJJjwF 18/20
13/02/2021 UNIMESTRE - Sistema de Administração de Aprendizagem
https://lms.unimestre.com/lms/sala/1546081/WNqfy2yV4JNJJjwF 19/20
13/02/2021 UNIMESTRE - Sistema de Administração de Aprendizagem
https://lms.unimestre.com/lms/sala/1546081/WNqfy2yV4JNJJjwF 20/20
Nenhum arquivo selecionadoEscolher arquivo