Presentación de la investigación de Magister en Ciencias de la Ingeniería UC de Sebastián Vicencio, para el curso Seminario de Postgrado.

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

5. 31-­‐05-­‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
5

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

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

17. 31-­‐05-­‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
17

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

25. 31-­‐05-­‐13
Performance
en
aplicaciones
Web
móviles
basadas
en
frameworks
MV*
25

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