Una introducción a Ext JS como solución para el desarrollo de aplicaciones RIA

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

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

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

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

5. Ejemplos

6. 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!

7. ¿En donde comprarías?

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

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

10. ¡Librerías! jQuery Prototype Mootools ExtCore Yahoo UI

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

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

13. Arquitectura de Ext JS

14. Arquitectura de Ext JS

15. Dividido en seis áreas

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

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

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

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

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

21. Componentes populares Charts Linear Columnas De pastel Barras Series

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

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

24. Desktop

25. Ejemplos: Motors

26. Ejemplos: DreamHomesMap

27. Ejemplos: Schema Bank

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

29. ¿Dónde encontrar ayuda? http://www.extjs.com/forum/

30. ¿Dónde encontrar ayuda? http://foro.quizzpot.com/

31. ¿Dónde encontrar ayuda? http://extjses.com

32. ¿Dónde encontrar ayuda? http://www.extjs.com/learn

33. ¿Dónde encontrar ayuda? http://www.quizzpot.com/

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

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

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

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

38. 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/

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