Análisis de factores críticos de desempeño en aplicaciones Web móviles basadas en frameworks MV*
1. Análisis
de
factores
crí1cos
de
desempeño
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
SEBASTIÁN
VICENCIO
sivicenc@uc.cl
Profesor
supervisor:
Jaime
Navón
Viernes
31
de
mayo
de
2013
2. Aplicaciones
Web
móviles
• Mobile
Web
en
aumento.
• Los
usuarios
exigen
que
aplicaciones
Web
sean
igual
o
más
rápidas
en
disposi1vos
móviles.
• Informe
2013
de
tendencias
en
Internet
(KPCB).
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
2
3. Surpassed Desktop PCs & Notebooks in Q4:12, < 3 Years from Intro
Global PC (Desktop / Notebook) and Tablet Shipments by Quarter
Q1:95 – Q1:13
Note: Notebook PCs include Netbooks.
Source: Katy Huberty, Ehud Gelblum, Morgan Stanley Research. Gartner. Data as of 4/13.
0
10
20
30
40
50
60
Q1:95 Q1:97 Q1:99 Q1:01 Q1:03 Q1:05 Q1:07 Q1:09 Q1:11 Q1:13
GlobalUnitsShipped(MMs)
Desktop PCs Notebook PCs Tablets
45
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
3
Fuente:
KPCB
Mary
Meeker’s
2013
annual
Internet
Trends
4. 0%
5%
10%
15%
20%
25%
30%
12/08 12/09 12/10 12/11 12/12 12/13 12/14
%ofInternetTraffic Global Mobile Traffic as % of Total Internet Traffic, 12/08 – 5/13
(with Trendline Projection to 5/15E)
0.9%
in 5/09
2.4%
in 5/10
15%
in 5/13
Source: StatCounter Global Stats, 5/13. Note that PC-based Internet data bolstered by streaming. 32
6%
in 5/11
10%
in 5/12
Trendline
E E
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
4
Fuente:
KPCB
Mary
Meeker’s
2013
annual
Internet
Trends
6. Lógica
hacia
el
cliente
• Aplicación
Web
tradicional:
procesamiento
en
backend.
– Request
–
wait
–
response
(síncrono).
• Aparición
de
AJAX:
requests
en
background
– Un
flujo
con1nuo
de
la
aplicación
(asíncrono).
– Single-‐page
applica1on.
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
6
7.
8. Lógica
hacia
el
cliente
• Problemas:
– Librerías
JavaScript
para
manejar
interacción.
– jQuery.
– “Spaghe5
code”
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
8
9. Lógica
hacia
el
cliente
• Paradigma
MVC
predominante
• Por
muchos
años
sólo
en
servidor.
• ¿Y
si
se
usa
en
cliente?
Paradigma
es
el
mismo.
– Lenguaje
JavaScript
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
9
10. 31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
10
CLIENT
SERVER
HTTP
Request
HTTP
Response
Controller
Model
View
Fuente:
Elaboración
propia
11.
API
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
11
CLIENT
SERVER
HTTP
Request
HTTP
Response
Controller
Model
View
JavaScript
Fuente:
Elaboración
propia
12. Frameworks
MV*
• MV*:
Model
-‐
View
-‐
*
• Agrupación
de
frameworks
JavaScript
que
u1lizan
dis1ntos
paradigmas.
– MVC,
MVVM,
MVP,
entre
otros.
•
Solución
al
problema
de
“spaghe5
code”.
• Organización
y
estructura.
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
12
13. Frameworks
MV*
Backbone.js
Ember.js
AngularJS
Y
muchos
más…
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
13
14. Frameworks
MV*
Arquitectura
Backbone.js
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
14
Fuente:
Developing
Backbone.js
Applica1ons
Book
by
Addy
Osmani
15. YAFM
• Yet
Another
Framework
Syndrome
•
Confusión
con
la
gran
can1dad
de
opciones
de
frameworks
MV*.
• ¿Cuál
es
el
mejor?
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
15
16. • Proyecto
que
ayuda
a
desarrolladores
a
elegir
algún
framework
MV*.
• Aplicación
implementa
un
To-‐do
list.
– Tareas
pendientes
y
completadas.
• Es
la
misma
aplicación
escrita
con
una
gran
variedad
de
frameworks
MV*.
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
16
18. • Problemas
– No
compara
frameworks
más
que
desde
una
perspec1va
de
facilidad
para
escribir
código.
– Decisión
del
desarrollador
termina
siendo
simplemente
por
gusto
personal.
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
18
19. Frameworks
MV*
+
Mobile
• Móviles
1enen
limitaciones
de
recursos
que
deben
ser
tomadas
en
consideración.
• Frameworks
MV*
realizan
gran
carga
de
JavaScript
al
iniciar
la
aplicación.
• ¿Afectará
el
performance?
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
19
20. Pregunta
de
Inves1gación
¿Cuáles
son
los
factores
crí1cos
que
afectan
el
performance
de
una
aplicación
Web
móvil
construida
con
alguno
de
los
frameworks
MV*?
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
20
21. Solución
propuesta
Más
bien
obje1vos
propuestos.
1.
Medir
el
performance
de
un
subconjunto
de
frameworks
MV*.
2.
Modelo
que
permita
predecir
el
performance
de
una
aplicación
hecha
con
algún
framework
MV*.
3. Generar
recomendaciones
para
el
desarrollo
de
aplicaciones
web
móviles
con
frameworks
MV*.
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
21
22. Solución
propuesta
• Comparación
del
performance
en
subconjunto
frameworks
MV*
(5),
bajo
el
escenario
móvil.
• No
reinventar
la
rueda:
uso
de
TodoMVC
para
realizar
una
primera
comparación.
• Otro
subconjunto
de
frameworks
MV*
para
validación
del
modelo.
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
22
23. Consideraciones
• Modelo
cualita1vo.
• Plan1lla
que
permita
razonar
o
entender
el
performance
de
algún
framework
MV*.
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
23
24. ¿Cómo
medir?
• Herramienta
Webpagetest.
• Obtener
desglose
de
los
dis1ntos
requests
asociados
a
una
URL,
con
sus
respec1vos
1empos
de
carga
y
de
render.
• Permite
seleccionar
browser
y
ubicación
del
test.
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
24
26. ¿Cómo
medir?
• Permite
u1lizar
scripts
para
interactuar
con
la
página.
– Hacer
click,
rellenar
formularios,
ingresar
URL,
etc.
• Provee
una
API
para
realizar
tests.
– Análisis
de
los
datos
más
flexible
y
conveniente.
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
26
27. Metodología
1. Uso
de
TodoMVC
para
comparar
dis1ntos
frameworks.
2. Extracción
y
análisis
de
datos
de
TodoMVC
(detectar
algún
patrón
o
comportamiento).
3. Modelo
preliminar
en
base
a
esto.
4. Extracción
y
análisis
de
datos
de
aplicaciones
populares
que
u1licen
estos
frameworks.
5. Refinación
del
modelo.
6. Recomendaciones
para
desarrollo
de
aplicaciones
Web
con
frameworks
MV*.
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
27
28. Limitaciones
de
la
Inves1gación
• Principal
limitación:
TodoMVC.
• Se
asume
que
código
está
bien
escrito.
•
Sesgo
hacia
un
framework
en
par1cular.
• Aplicación
ar1ficial
con
poca
funcionalidad.
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
28
29. Estado
de
la
Inves1gación
31-‐05-‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
29
1.
Uso
de
TodoMVC
para
comparar
dis1ntos
frameworks.
2.
Extracción
y
análisis
de
datos
de
TodoMVC
(detectar
algún
patrón
o
comportamiento).
3.
Modelo
preliminar
en
base
a
esto.
4.
Extracción
y
análisis
de
datos
de
aplicaciones
populares
que
u1licen
estos
frameworks.
5.
Refinación
del
modelo.
6.
Recomendaciones
para
desarrollo
de
aplicaciones
Web
con
frameworks
MV*.
30. Análisis
de
factores
crí1cos
de
desempeño
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
SEBASTIÁN
VICENCIO
sivicenc@uc.cl
Profesor
supervisor:
Jaime
Navón
Viernes
31
de
mayo
de
2013