Академический Документы
Профессиональный Документы
Культура Документы
1. Introduo
Os smartphones tm vivido um crescimento vertiginoso em vendas, com mais de 120%
de aumento nas unidades vendidas em 2013 comparadas ao ano anterior [Rocha 2014],
e, com isso, a utilizao de diversos SOs (sistemas operacionais), liderados pelo SO
Android, com 78,3% dos smartphones, segundo [Klenia 2014].
Seguindo este aumento no nmero de smartphones, o desenvolvimento de
aplicativos para mobile tambm tem crescido, sendo que j movimenta cerca de R$ 68
bilhes no mundo [Lazzarotto 2013].
Existem dois principais tipos de aplicativos para aparelhos mobile: o nativo e o
hbrido. Aplicativos hbridos baseiam-se no desenvolvimento utilizando linguagens
web, como HTML5, JavaScript e CSS, atrelados aos mecanismos de comunicao entre
tais linguagens web e recursos nativos dos aparelhos. J os aplicativos nativos utilizam
somente recursos das linguagens nativas de seus respectivos SOs.
Baseado na necessidade de desenvolvimento de aplicaes web mobile para
superar as dificuldades encontradas por essas aplicaes comparadas com aplicativos
nativos, e a pouca quantidade de artigos que tratam a utilizaes dos frameworks
Bootstrap e Angular JS, foi que surgiu o interesse em pesquisar mais sobre essas novas
tecnologias e sua utilidade no mundo mobile. Para isso, interessante o uso de um
framework j maturado e muito empregado no mundo para fazer um comparativo de
desempenho com as novas tecnologias disponveis atualmente.
Existem diversos componentes caractersticos de aparelhos mobile, tais como o
Switch, Listview, Sidebar, Tabs, dentre outros bastante vistos em aplicaes
web e nativas. Tais componentes so ferramentas visuais para uma boa experincia com
os recursos pertencentes s aplicaes que usam estes componentes.
Para uma boa anlise do potencial desses componentes presentes tambm nos
frameworks javascript e front-end, o SO Android, em conjunto com o navegador
Pg 2/13
2. Aplicaes Mobile
2.1. Nativas
Os aplicativos nativos so caracterizados por utilizarem a linguagem nativa do SO do
aparelho, sendo assim, so desenvolvidos especificamente para tal plataforma, e
podem aproveitar todas as funcionalidades do sistema operacional do dispositivo, como:
cmera, GPS, acelermetro, bssola, lista de contatos etc. [Ambros 2013]
Pode-se citar trs linguagens nativas dos principais SOs:
Os aparelhos Mobile Apple (IPhone, IPad, etc.) utilizam da linguagem
Objective-C, a qual uma linguagem de programao reflexiva orientada a
objecto que adiciona transmisso de mensagens no estilo Smalltalk para o C
[WIKIPDIA 2014].
A linguagem utilizada pelo SO Android o JAVA acompanhado por uma
camada em XML.
J no Windows Phone, segundo Toledo & Deus (2012), utiliza o C# como
linguagem nativa.
Pg 3/13
2.2. Hbridas
As aplicaes hbridas so aquelas que utilizam de interaes entre a camada
desenvolvida em WEB e a nativa do aparelho, podendo usar recursos como GPS,
cmera, acelermetro, etc. [Ambros, 2013]. Tais aplicaes so exibidas usando um
navegador embutido, o qual em desenvolvimento Android conhecido como
Webview.
2.2.1. HTML5
Recentemente foi lanado o HTML5, que uma nova verso padro para o html. O
HTML5 foi feito para substituir o HTML4, XHTML e o HTML DOM Level 2
[W3Schools, 2013].
Segundo Taurion (2012), a evoluo do HTML5 permitir criar pginas web
com contedos mais dinmicos, possibilitando a criao de aplicativos baseados em
navegadores to interessantes quanto os apps nativos e que sejam populares nos
smartphones e tablets.
Para os desenvolvedores, os aplicativos que utilizam esta tecnologia trazem
maior produtividade, a possibilidade de uso em diversos tipos de SOs, alm de no ficar
preso a kits de desenvolvimentos especficos para cada ambiente operacional [Taurion
2012].
2.2.2. PhoneGap
Para criao de aplicativos hbridos, utilizando o HTML5, so bastante usados
frameworks multiplataformas, que fazem a integrao entre os recursos de um
navegador e os recursos nativos do aparelho.
Um dos mais famosos frameworks multiplataformas o PhoneGap que est
crescendo cada dia mais no mercado mobile [Guinther 2011]. O PhoneGap uma
tecnologia open source, a qual tem como principal caracterstica a criao de web app
(aplicativo web). Esta tecnologia utiliza de recursos poderosos, tais como HTML5,
javascript e CSS3.
Ele uma ferramenta que faz uma ponte entre os aplicativos web e os aparelhos
mobile, disponibilizando diversos recursos para um aplicativo mais robusto e completo
[PhoneGap 2014].
Esta ferramenta j foi baixada mais de 1 milho de vezes e usada por cerca de
400 mil desenvolvedores. Como relatado no site do PhoneGap, o mesmo foi inserido no
Apache Software Foundation (ASF) sobre o nome de Apache Cordova, sendo graduado
com status de alto nvel em Outubro de 2012.
Segundo Guinther (2011), o Phonegap possui suporte a alguns recursos de
extrema utilidade como: accelerometer, camera, compass, contacts, file, geolocation,
media, network, notification (alert), notification (sound), notification (vibration) e
storage imbutidos no html.
Outro recurso do PhoneGap bastante interessante o uso de plug-ins que
possibilitam a utilizao de diversos recursos importantes do aparelho, como por
exemplo, o uso de banco de dados, mais especificamente o SQLite, o qual usado como
banco de dados padro do Android.
Pg 4/13
wp8
(Windows
Phone 8)
blackberry10
ios
android
Firefox
OS
Acelermetro
Cmera
Bssola
(3GS+)
Arquivo
Geolocalizao
Media
Splashscreen
Eventos
Captura
Contatos
localStorage
&
indexedDB
Armazenamento
Pg 5/13
3.1.2. AngularJS
De acordo com Green & Seshadri (2013), o incio do AngularJS foi em 2009, em um
projeto chamado Google Feedback. Desde ento, o AngularJS tem alcanado adeptos ao
redor do mundo, alm de novas funcionalidades.
Ele um framework open-source com uma interface mais simples, e mais
ligado ao HTML, ou seja, funcionando como uma espcie de extenso da linguagem
[Ferreira 2012]. Sendo assim, possui fcil implementao, mas tambm um framework
rpido que no exige tanto do navegador onde executado, sem perder a qualidade e
poder de aplicaes javascript.
O AngularJS se enquadra nos modelos MVC(Model-view-controller),
MVP(Model-view-presenter) e MVVM(Model View ViewModel), sendo considerado
pelos seus desenvolvedores como framework MVW (Model-View-Whatever), j que o
foco do framework no conceitos de separao [Silva & Vicente 2014].
Sendo o Angular JS to promissor, em desempenho, facilidade de
desenvolvimento e qualidade, ele se enquadra nos requisitos para o desenvolvimento de
aplicativos web para mobile.
3.1.3. Bootstrap
Com o crescimento no uso de diversos dispositivos, com tamanhos, plataformas, e
hardware diferentes, surgiu a necessidade de aplicaes web se adaptarem a tais
diferenas. O design responsivo uma abordagem de web design destinada a elaborar
sites para fornecer uma tima experincia de visualizao, fcil leitura e navegao com
um mnimo de redimensionamento e visionamento, para uma ampla gama de
dispositivos (de monitores de computador a telefones celulares) [Wikipdia 2014].
O Bootstrap rene uma coleo gratuita de ferramentas para criao de websites
e aplicativos web. Esse framework, que possui diversos templates e estilos diferentes,
intuitivo e poderoso, e foi desenvolvido pelo Twitter. [Start Bootstrap, 2014].
Segundo Cochran (2012) o Bootstrap possui uma comunidade bastante extensa e
enrgica, a qual traz um suporte muito bom e gerando mais e mais recursos.
Pg 6/13
4. Estudo de Caso
4.1. Componentes analisados
A seleo dos componentes a serem analisados foi feita, levando em considerao
vrios componentes bastante utilizados em aplicaes mobile. Baseado nisso, escolheuse os seguintes componentes:
Sidebar (Mobile Angular UI) ou Panel (jQuery Mobile): um painel lateral
que aparece quando se toca em um link no canto superior da tela, surgindo
esse painel aps o deslizamento lateral da tela.
(b)
(a)
(a)
Figura 4 - Listview. (a) jQuery Mobile \ (b) Mobile Angular UI
(b)
Pg 7/13
(a)
(b)
(b)
Pg 8/13
Para a anlise dos testes executados foi observado o tempo de execuo de quatro
grupos bsicos:
Scripting: Corresponde a chamadas de funes no javascript, chamada de
eventos, execues de garbage colector e execues de scripts em geral.
Rendering: Corresponde a execuo de layouts, reclculos em elementos de
estilos, quando h um rolamento de contedo e outros elemento de layout.
Painting: Corresponde a renderizao de camadas da imagem, quando um
recurso de imagem decodificado, ocorrncia de redimensionamento de
imagem e desenho de imagens na aplicao.
Other: Demais execues da aplicao.
Pg 9/13
600.000
500.000
400.000
300.000
200.000
100.000
0.000
Scripting
Mobile Angular UI
26.218
jQuery Mobile
76.499
Rendering
191.587
60.582
Painting
186.537
119.125
Other
118.643
80.668
Total
531.942
336.775
4.3.2. Listview
Nos testes realizados no componente listview, foi feito um rolamento em uma listagem
de 500 itens, por meio de um deslizamento do dedo na tela.
Dentre os resultados obtidos verificou-se um fator interessante, no qual o grupo
Rendering ficou com mdia zero para o jQuery Mobile, e o grupo Scripting ficou
com 0.731 ms no framework Mobile Angular UI, bem prximo a zero. Baseado nisso,
verificamos que a utilizao de componentes javascript na rolagem da lista no Mobile
Angular UI foi quase nula, mas a utilizao de recursos pertencentes ao grupo
Rendering foi relativamente alta (94,427 ms). Neste caso, o uso dos componentes do
Bootstrap foi mais dispendioso com relao ao tempo de execuo.
No jQuery Mobile houve o uso moderado de javascript. Por outro lado, o
Rendering foi zero, mostrando que a rolagem do contedo est mais associada, neste
framework, com a utilizao de javascript.
Milissegundos
Comparao - Listview
200.000
150.000
100.000
50.000
0.000
Scripting
Mobile Angular UI
0.731
jQuery Mobile
56.736
Rendering
94.427
0.000
Painting
5.852
4.759
Other
78.482
68.927
Total
184.952
127.178
Pg 10/13
4.3.3. Tabs
Executaram-se testes na Tabs, clicando em cada aba por vez, aguardando sempre ser
exibido o contedo de cada aba.
Novamente, aps os testes realizados, verificou-se uma grande diferena na
atividade do grupo Scripting do Mobile Angular UI com o mesmo grupo do
framework jQuery Mobile, sendo que esse ltimo teve uma maior utilizao dos
recursos do grupo de Scripting. A diferena neste componente, para o grupo
mencionado anteriormente, foi em mdia de 85.292 ms.
Entretanto, um ponto relevante foi o tempo de execuo total do Mobile Angular
UI ser ligeiramente menor que o do outro framework.
Comparao - Tabs
300.000
Milissegundos
250.000
200.000
150.000
100.000
50.000
0.000
Mobile Angular UI
20.584
jQuery Mobile
104.875
Rendering
83.356
64.598
Painting
47.388
39.045
Other
114.930
83.860
Total
280.295
296.595
Scripting
4.3.4. Switch
Para testar o componente Switch foi realizado um toque neste componente e
aguardado a transio da animao. Aps isso, foi realizado outro toque para que o
componente voltasse ao estado inicial.
Dentre todos os resultados, este componente apresentou um comportamento
peculiar, pois houve uma grande diferena no tempo de execuo do grupo Painting.
O Mobile Angular UI apresentou 216,592 ms no grupo Painting e o jQuery Mobile
foi 68,214 ms no mesmo grupo.
No grupo Painting se encontra fatores como transio e manipulao de
imagens ou recursos visuais, sendo visto de forma clara este recurso nestes
componentes em especifico.
Pg 11/13
Comparao - Switch
500.000
450.000
Milissegundos
400.000
350.000
300.000
250.000
200.000
150.000
100.000
50.000
0.000
Mobile Angular UI
27.060
jQuery Mobile
34.958
Rendering
73.517
49.837
Painting
216.592
68.214
Other
123.775
71.007
Total
458.723
238.331
Scripting
Pg 12/13
Comparao - Geral
300.000
Milissegundos
250.000
200.000
150.000
100.000
50.000
0.000
Mobile Angular UI
23.401
jQuery Mobile
66.617
Rendering
88.891
55.209
Painting
116.963
53.630
Other
116.787
75.838
Total
280.295
238.331
Scripting
5. Concluso
De acordo com os resultados obtidos foi constatado uma ligeira vantagem no tempo de
execuo do jQuery Mobile em quase todos os componentes analisados, sendo superado
somente no componente Tabs. Entretanto, houve uma vantagem na mdia total de
14,97% a favor do jQuery Mobile.
No podemos eximir o potencial do Bootstrap para aplicaes mobile, o qual
favorece sobremaneira recursos responsivos e um desenvolvimento mais rpido, e,
portanto, com menor custo.
Dessa forma, conclui-se que para os componentes analisados, o jQuery Mobile
possui um desempenho superior. Porm, h um grande potencial, principalmente no
Angular JS, para criao de web apps. Assim, importante ressaltar a necessidade de
novas pesquisas voltadas aos novos frameworks usados atualmente, principalmente, o
Angular JS, o qual pode ser analisado usando outro framework de front-end que possa
possivelmente gerar resultados mais favorveis performance de tais aplicaes.
6. Referncias
Altermann, Dennis. (2012) Design Responsivo: Entenda o que a tcnica e como ela
funciona.
http://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-oque-e-a-tecnica-e-como-ela-funciona, Maio.
Ambros, Belisa. (2013) Diferena entre Aplicativos Nativos, Hbridos e Mobile Web
Apps, http://luisaambros.com/blog/diferenca-entre-aplicativos-nativos-hibridos-emobile-web-apps/, Maio.
Charland, Andre; Leroux, Brian. (2011) Web apps are cheaper to develop and deploy
than native apps, but can they match the native user experience?,
http://queue.acm.org/detail.cfm?id=1968203, Maio.
Pg 13/13
Cochran, David. (2012) Twitter Bootstrap Web Development How-To. Sebastopol: Ed.
OREILLY.
Firtman, Maximiliano. (2012) jQuery Mobile: Up and Running. Sebastopol: Ed. O
REILLY.
Green, Brad; Sesbadri, Sbyam. (2013) AngularJS. Sebastopol: Ed. OREILLY.
Guinther, Marcel. (2011) Desenvolvimento Mobile Multiplataforma com Phonegap,
http://www.mobiltec.com.br/blog/index.php/desenvolvimento-mobilemultiplataforma-com-phonegap/, Maio.
jQuery
Mobile.
(2014)
A
http://jquerymobile.com/, Abril.
Touch-Optimized
Web
Framework,
Desenvolvimento
Nativo,
http://www.brunonardini.com.br/mobile/android-desenvolvimento-nativo, Maio.
PhoneGap. (2014) About the Project, http://www.phonegap.com/about, Abril.
Reid, Jon. (2011) jQuery Mobile. Sebastopol: Ed. OREILLY.
Rocha, Camilo. (2014) Vendas de smartphones crescem menos em 2014,
http://blogs.estadao.com.br/link/depois-de-explosao-em-2013-vendas-desmartphones-devem-crescer-menos/, Maio.
Shotts, Kerri. (2013) PhoneGap 2.x Mobile: Application Development. Birmingham:
Ed. Packt Publishing Ltd.
Spurlock, Jake. (2013) Bootstrap. Sebastopol: Ed. OREILLY.
Start
Bootstrap.
(2014)
Free
http://www.startbootstrap.com, Abril.
Bootstrap
Themes
and
Templates,
Taurion, Cezar. (2012) Apps nativos x apps HTML5: conhea mais sobre o processo
de appificao, http://imasters.com.br/artigo/24225/mobile/apps-nativos-x-appshtml5-conheca-mais-sobre-o-processo-de-appificacao/, Maio.
Toledo, Jan M. & Deus, Gilcimar D. de. (2012) Desenvolvimento em Smartphones Aplicativos Nativos e Web, Pontifcia Universidade Catlica de Gois - GO.
W3Schools.
(2013)
jQuery
Mobile
Data
Attributes,
http://www.w3schools.com/jquerymobile/jquerymobile_ref_data.asp, Abril.
Wikipdia.
(2014)
Bootstrap
(front-end
framework),
http://en.wikipedia.org/wiki/Bootstrap_(front-end_framework), Abril.
Wikipdia. (2014) Objective-C, http://pt.wikipedia.org/wiki/Objective-C, Maio.