Introducción a Ext JS - SG09

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

2
Objetivo
La importancia de desarrollaraplicaciones RIA y la soluciónpropuestapor Ext JS

3
Agenda
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

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, Flex, JavaFX, JavaScript, Silverlight.

Ejemplos

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!

¿En donde comprarías?

JavaScript
JavaScript como solución para el desarrollo de aplicaciones RIA.
Soporte Ajax
Modificación del DOM
Aporta dinamismo a un sitio

Problemas al usar JS
Incompatibilidad entre exploradores.
Mala implementación en algunos navegadores.
Complicado para depurar (debug).
Malas prácticas en el desarrollo.
Muchos desarrolladores subestiman a JavaScript por su mala fama en los 90’s.
Es un lenguaje complejo y “misterioso” para muchos

¡Librerías!
jQuery
Prototype
Mootools
ExtCore
Yahoo UI

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).

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.

Arquitectura de Ext JS

Dividido en seis áreas

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

Grid editable
Editar celdas al vuelo
Utilizar diferentes controles.
Validaciones

Mensajes y alertas
Alertas con un buen “look and field”
Personalizables
Intuitivas

Formularios
Validaciones
Máscaras
Envío por Ajax
Combos con “autocomplete”

TreePanel
Estructura de árbol
Drag and Drop
Colapsables con animación

Charts
Linear
Columnas
De pastel
Barras
Series

Tabs
Con “scroll” automático
Creados desde el DOM
Creados con JS
Contenedor

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

Desktop

Ejemplos: Motors

Ejemplos: DreamHomesMap

Ejemplos: Schema Bank

¿Dónde encontrar ayuda?
http://www.extjs.com/deploy/dev/docs/

http://www.extjs.com/forum/

http://foro.quizzpot.com/

http://extjses.com

http://www.extjs.com/learn

http://www.quizzpot.com/

Libros: LearningExt JS
Shea Frederick
ColinRamsay
Steve 'Cutter' Blades
En Amazon $35.99
Basado en Ext JS v2

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

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

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

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/

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