1. Ext JS: La herramienta que
revolucionó el front-end
Crysfel Villa Román
Ingeniero de Software
Quizzpot

2. Objetivo
La importancia de desarrollar
aplicaciones RIA y la solución
propuesta por Ext JS
22

3. Agenda
Interación Hombre Máquina
Aplicaciones RIA
JavaScript en el front-end
Ext JS como herramienta RIA
Algunos Componentes del Framework
Ejemplos de aplicaciones con Ext JS
Donde encontrar Ayuda
Licencias y costos
33

4. Interacción Hombre Máquina
Wilfred J. Hansen
User Engineering Principles for
Interactive Systems 1971.
44

5. Conocer al usuario (Persona)
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level

6. Consistencia de la interfaz
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level

7. Acceso rápido a la información
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level

8. Buenos mensajes
¿Que nos comunica el siguiente mensaje?

9. Buenos mensajes
¿Que nos comunica el siguiente mensaje?
• ¿Guardado con éxito?

10. Buenos mensajes
¿Que nos comunica el siguiente mensaje?
• ¿Guardado con éxito?
• ¡Mejor!

11. Diseños que eviten errores
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level

12. Diseños que eviten errores
Click to edit Master text styles
Secondy?level
vo
● Third level
de● Fourth level
level
d on ● Fifth
a ra
¿P

13. Aplicaciones RIA
Rich Internet Applications.
Término introducido por compañías como
Macromedia en el 2002.
Aplicaciones que tienen el objetivo de
mejorar la experiencia del usuario.
Flash, JavaFX, JavaScript.

14. Google Maps
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level

15. Yahoo Mail
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level

16. El diseño importa
La mayoría de las personas dan su
confianza a sitios con un buen diseño.
Normalmente juzgamos solo por las
apariencias.
¡El diseño/apariencia importa!

17. ¿Comprarías en este sitio?

18. ¿Y en este?

19. JavaScript
JavaScript como solución para el desarrollo
de aplicaciones RIA.
Muchos desarrolladores subestiman a
JavaScript por su mala fama en los 90’s.
Es un lenguaje complejo y “misterioso” para
muchos.

20. Problemas al usar JS
Incompatibilidad entre exploradores.
Mala implementación en algunos
navegadores.
Complicado para depurar (debug).
Malas prácticas en el desarrollo.

21. ¡Librerías!
jQuery
Prototype
Mootools
Ext Core

22. Frameworks avanzados
jQuery UI
Yahoo UI
Ext JS
Dojo

23. jQuery UI
Basada en jQuery
Componentes básicos
Buen uso del “namespace”
Liviana (300.03 kb)
• Pobre “Look and Feel”
• Componentes limitados
• Poca documentación

24. Yahoo UI
Gran cantidad de componentes
Un “namespace” muy robusto
Mucha documentación
• Muy pobre “Look and Feel”
• Documentación nada
amigable

25. Ext JS
Gran cantidad de componentes
Buen “namespace”
Excelente documentación
Muy buen “Look and Feel”
• Librería pesada
• Gran curva de aprendizaje
• Es fácil hacer cosas
complejas, es difícil hacer
cosas sencillas

26. Dojo
Varios componentes
Buen uso del “namespace”
Buena documentación
• Muy sencillo “Look and
Feel”
• Te obliga a insertar
propiedades extras al
HTML

27. Ext JS como solución RIA
“Jack Slocum” comienza a desarrollar Ext
JS en el 2006 como una extensión para
YUI.
Posteriormente se agrega soporte para
librerías como jQuery, Prototype +
Scriptaculous.
En el 2007 la librería funciona en modo
“Stand alone” (versión 1.1).

28. Ext JS como solución RIA
En diciembre del 2007 aparece la versión 2.0
del Framework, una re-ingeniería total.
En agosto de 2008 aparece la versión 2.2 del
Framework, se agregan nuevos componentes.
En febrero del 2009 se realiza la primera
conferencia y se presenta Ext Core.
En junio del 2009 se libera Ext 3.0 con soporte
REST, Remoting y varios componentes más.

29. Arquitectura de Ext JS
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level

30. Arquitectura de Ext JS
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level

31. E● C
U
D
R
x o
Dividido en seis áreas
t
r
a
e
i
a
t
m
l
g
a
o
p
e
t
o
r
i
n
í
n
e
a
g
n
s
t
e
s
U
I

32. Componentes populares
El “venerable” GridPanel
Ordenar Asc/Desc
Seleccionar filas
Redimensionar Col.
Ocultar columnas
Paginar datos

33. Componentes populares
Grid editable
Editar celdas al vuelo
Utilizar diferentes controles.
Validaciones

34. Componentes populares
Mensajes y alertas
Alertas con un buen “look
and field”
Personalizables
Intuitivas

35. Componentes populares
Formularios
Validaciones
Máscaras
Envío por Ajax
Combos con “autocomplete”

36. Componentes populares
TreePanel
Estructura de árbol
Drag and Drop
Colapsables con animación

37. Componentes populares
Charts
Linear
Columnas
De pastel
Barras
Series

38. Componentes populares
Tabs
Con “scroll” automático
Creados desde el DOM
Creados con JS
Contenedor

39. Componentes populares
Toolbar
Botones en diferentes tamaños
Desplegar columnas
Agrupación
Submenús
Iconos en diferentes
posiciones y tamaños

40. Desktop
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level

41. Ejemplos: Motors
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level

42. Ejemplos: Motors
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level

43. Ejemplos: Dream Homes Map
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level

44. Ejemplos: Dream Homes Map
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level

45. Ejemplos: Schema Bank
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level

46. Ejemplos: Schema Bank
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level

47. Ejemplos: Schema Bank
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level

48. ¿Dónde encontrar ayuda?
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level
http://www.extjs.com/deploy/dev/docs/

49. ¿Dónde encontrar ayuda?
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level
http://www.extjs.com/forum/

50. ¿Dónde encontrar ayuda?
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level
http://foro.quizzpot.com/

51. ¿Dónde encontrar ayuda?
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level
http://extjses.com

52. ¿Dónde encontrar ayuda?
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level
http://www.extjs.com/learn

53. ¿Dónde encontrar ayuda?
Click to edit Master text styles
Second level
● Third level
● Fourth level
● Fifth level
http://www.quizzpot.com/

54. Libros: Learning Ext JS
Shea Frederick
Colin Ramsay
Steve 'Cutter' Blades
En Amazon $35.99
Basado en Ext JS v2

55. Libros: Ext JS in Action
Jesus "Jay" Garcia
En Manning $27.50 y $44.99
Basado en Ext JS v3

56. Licencias y Costos
OpenSource (GPL v3)
Commercial license
Reseller license

57. Licencias y Costos
OpenSource (GPL v3)
Sin costo
Commercial license
$329 (1); $1,299 (5); $5,749 (25); $16,449 (+100)
Reseller license
Depende del proyecto

58. Links de referencia
Sitio oficial
http://www.extjs.com/
Documentación
http://www.extjs.com/deploy/dev/docs/
Costos y licencias
http://www.extjs.com/products/license.php
Ejemplos
http://www.extjs.com/deploy/dev/examples/samples.html
Tutoriales en español
http://www.quizzpot.com/

59. Preguntas y Respuestas
Crysfel Villa Román
www.quizzpot.com
crysfel@gmail.com