introducción a ext js - sg09
DESCRIPTION
Una introducción a Ext JS como solución para el desarrollo de aplicaciones RIATRANSCRIPT
Crysfel Villa RománIngeniero de Software
Quizzpot
Ext JS: La herramienta que revolucionó el front-end
2
Objetivo
La importancia de desarrollar aplicaciones RIA y la solución
propuesta por 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• Ext Core• 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
Arquitectura de Ext JS
Dividido en seis áreas
Ext Core
Componentes UI
Remoting
Data services
Drag & Drop
Utilerías
Componentes populares
• El “venerable” GridPanel– Ordenar Asc/Desc– Seleccionar filas– Redimensionar Col.– Ocultar columnas– Paginar datos
Componentes populares
• Grid editable– Editar celdas al vuelo– Utilizar diferentes
controles.– Validaciones
Componentes populares
• Mensajes y alertas– Alertas con un buen
“look and field”– Personalizables– Intuitivas
Componentes populares
• Formularios– Validaciones– Máscaras– Envío por Ajax– Combos con “autocomplete”
Componentes populares
• TreePanel– Estructura de árbol– Drag and Drop– Colapsables con animación
Componentes populares
• Charts– Linear– Columnas– De pastel– Barras– Series
Componentes populares
• Tabs– Con “scroll” automático– Creados desde el DOM– Creados con JS– Contenedor
Componentes populares
• Toolbar– Botones en diferentes tamaños– Desplegar columnas– Agrupación – Submenús– Iconos en diferentes
posiciones y tamaños
Desktop
Ejemplos: Motors
Ejemplos: Dream Homes Map
Ejemplos: Schema Bank
¿Dónde encontrar ayuda?
http://www.extjs.com/deploy/dev/docs/
¿Dónde encontrar ayuda?
http://www.extjs.com/forum/
¿Dónde encontrar ayuda?
http://foro.quizzpot.com/
¿Dónde encontrar ayuda?
http://extjses.com
¿Dónde encontrar ayuda?
http://www.extjs.com/learn
¿Dónde encontrar ayuda?
http://www.quizzpot.com/
Libros: Learning Ext JS
• Shea Frederick• Colin Ramsay• 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/
