Ext JS: La herramienta que
revolucionó el front-end
                        Crysfel Villa Román
                         I...
Objetivo



     La importancia de desarrollar
     aplicaciones RIA y la solución
          propuesta por Ext JS




    ...
Agenda

Interación Hombre Máquina
Aplicaciones RIA
JavaScript en el front-end
Ext JS como herramienta RIA
Algunos Componen...
Interacción Hombre Máquina

Wilfred J. Hansen
     User Engineering Principles for
Interactive Systems 1971.




         ...
Conocer al usuario (Persona)

         Click to edit Master text styles
         Second level
          ● Third level

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

  ...
Acceso rápido a la información

         Click to edit Master text styles
         Second level
          ● Third level

 ...
Buenos mensajes

¿Que nos comunica el siguiente mensaje?
Buenos mensajes

¿Que nos comunica el siguiente mensaje?



• ¿Guardado con éxito?
Buenos mensajes

¿Que nos comunica el siguiente mensaje?



• ¿Guardado con éxito?


• ¡Mejor!
Diseños que eviten errores

         Click to edit Master text styles
         Second level
          ● Third level

     ...
Diseños que eviten errores

                    Click to edit Master text styles
                    Secondy?level
       ...
Aplicaciones RIA

Rich Internet Applications.
Término introducido por compañías como
Macromedia en el 2002.
Aplicaciones q...
Google Maps


       Click to edit Master text styles
       Second level
        ● Third level

          ● Fourth level
...
Yahoo Mail

        Click to edit Master text styles
        Second level
         ● Third level

           ● Fourth leve...
El diseño importa

La mayoría de las personas dan su
confianza a sitios con un buen diseño.
Normalmente juzgamos solo por ...
¿Comprarías en este sitio?
¿Y en este?
JavaScript

JavaScript como solución para el desarrollo
de aplicaciones RIA.
Muchos desarrolladores subestiman a
JavaScrip...
Problemas al usar JS

Incompatibilidad entre exploradores.
Mala implementación en algunos
navegadores.
Complicado para dep...
¡Librerías!

jQuery
Prototype
Mootools
Ext Core
Frameworks avanzados

jQuery UI
Yahoo UI
Ext JS
Dojo
jQuery UI

 Basada en jQuery
 Componentes básicos
 Buen uso del “namespace”
 Liviana (300.03 kb)



                 • Pob...
Yahoo UI

 Gran cantidad de componentes
 Un “namespace” muy robusto
 Mucha documentación




                • Muy pobre “...
Ext JS
 Gran cantidad de componentes
 Buen “namespace”
 Excelente documentación
 Muy buen “Look and Feel”



             ...
Dojo

 Varios componentes
 Buen uso del “namespace”
 Buena documentación



             • Muy sencillo “Look and
        ...
Ext JS como solución RIA

“Jack Slocum” comienza a desarrollar Ext
JS en el 2006 como una extensión para
YUI.
Posteriormen...
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 d...
Arquitectura de Ext JS
         Click to edit Master text styles
         Second level
          ● Third level

          ...
Arquitectura de Ext JS

Click to edit Master text styles
Second level
 ● Third level

   ● Fourth level

     ● Fifth level
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
  ...
Componentes populares

El “venerable” GridPanel
Ordenar Asc/Desc
Seleccionar filas
Redimensionar Col.
Ocultar columnas
Pag...
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
 ...
Desktop

          Click to edit Master text styles
          Second level
           ● Third level

             ● Fourth...
Ejemplos: Motors

        Click to edit Master text styles
        Second level
         ● Third level

           ● Fourt...
Ejemplos: Motors

        Click to edit Master text styles
        Second level
         ● Third level

           ● Fourt...
Ejemplos: Dream Homes Map

        Click to edit Master text styles
        Second level
         ● Third level

         ...
Ejemplos: Dream Homes Map

        Click to edit Master text styles
        Second level
         ● Third level

         ...
Ejemplos: Schema Bank

        Click to edit Master text styles
        Second level
         ● Third level

           ● ...
Ejemplos: Schema Bank

        Click to edit Master text styles
        Second level
         ● Third level

           ● ...
Ejemplos: Schema Bank

        Click to edit Master text styles
        Second level
         ● Third level

           ● ...
¿Dónde encontrar ayuda?

        Click to edit Master text styles
        Second level
         ● Third level

           ...
¿Dónde encontrar ayuda?

        Click to edit Master text styles
        Second level
         ● Third level

           ...
¿Dónde encontrar ayuda?

        Click to edit Master text styles
        Second level
         ● Third level

           ...
¿Dónde encontrar ayuda?

        Click to edit Master text styles
        Second level
         ● Third level

           ...
¿Dónde encontrar ayuda?

        Click to edit Master text styles
        Second level
         ● Third level

           ...
¿Dónde encontrar ayuda?

        Click to edit Master text styles
        Second level
         ● Third level

           ...
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)
Res...
Links de referencia
Sitio oficial
http://www.extjs.com/
Documentación
http://www.extjs.com/deploy/dev/docs/
Costos y licen...
Preguntas y Respuestas




                     Crysfel Villa Román
                      www.quizzpot.com
               ...
Upcoming SlideShare
Loading in …5
×

Ext JS: La herramienta que revolucionó el front-end

3,311 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,311
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ext JS: La herramienta que revolucionó el front-end

  1. 1. Ext JS: La herramienta que revolucionó el front-end Crysfel Villa Román Ingeniero de Software Quizzpot
  2. 2. Objetivo La importancia de desarrollar aplicaciones RIA y la solución propuesta por Ext JS 22
  3. 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. 4. Interacción Hombre Máquina Wilfred J. Hansen User Engineering Principles for Interactive Systems 1971. 44
  5. 5. Conocer al usuario (Persona) Click to edit Master text styles Second level ● Third level ● Fourth level ● Fifth level
  6. 6. Consistencia de la interfaz Click to edit Master text styles Second level ● Third level ● Fourth level ● Fifth level
  7. 7. Acceso rápido a la información Click to edit Master text styles Second level ● Third level ● Fourth level ● Fifth level
  8. 8. Buenos mensajes ¿Que nos comunica el siguiente mensaje?
  9. 9. Buenos mensajes ¿Que nos comunica el siguiente mensaje? • ¿Guardado con éxito?
  10. 10. Buenos mensajes ¿Que nos comunica el siguiente mensaje? • ¿Guardado con éxito? • ¡Mejor!
  11. 11. Diseños que eviten errores Click to edit Master text styles Second level ● Third level ● Fourth level ● Fifth level
  12. 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. 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. 14. Google Maps Click to edit Master text styles Second level ● Third level ● Fourth level ● Fifth level
  15. 15. Yahoo Mail Click to edit Master text styles Second level ● Third level ● Fourth level ● Fifth level
  16. 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. 17. ¿Comprarías en este sitio?
  18. 18. ¿Y en este?
  19. 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. 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. 21. ¡Librerías! jQuery Prototype Mootools Ext Core
  22. 22. Frameworks avanzados jQuery UI Yahoo UI Ext JS Dojo
  23. 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. 24. Yahoo UI Gran cantidad de componentes Un “namespace” muy robusto Mucha documentación • Muy pobre “Look and Feel” • Documentación nada amigable
  25. 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. 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. 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. 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. 29. Arquitectura de Ext JS Click to edit Master text styles Second level ● Third level ● Fourth level ● Fifth level
  30. 30. Arquitectura de Ext JS Click to edit Master text styles Second level ● Third level ● Fourth level ● Fifth level
  31. 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. 32. Componentes populares El “venerable” GridPanel Ordenar Asc/Desc Seleccionar filas Redimensionar Col. Ocultar columnas Paginar datos
  33. 33. Componentes populares Grid editable Editar celdas al vuelo Utilizar diferentes controles. Validaciones
  34. 34. Componentes populares Mensajes y alertas Alertas con un buen “look and field” Personalizables Intuitivas
  35. 35. Componentes populares Formularios Validaciones Máscaras Envío por Ajax Combos con “autocomplete”
  36. 36. Componentes populares TreePanel Estructura de árbol Drag and Drop Colapsables con animación
  37. 37. Componentes populares Charts Linear Columnas De pastel Barras Series
  38. 38. Componentes populares Tabs Con “scroll” automático Creados desde el DOM Creados con JS Contenedor
  39. 39. Componentes populares Toolbar Botones en diferentes tamaños Desplegar columnas Agrupación Submenús Iconos en diferentes posiciones y tamaños
  40. 40. Desktop Click to edit Master text styles Second level ● Third level ● Fourth level ● Fifth level
  41. 41. Ejemplos: Motors Click to edit Master text styles Second level ● Third level ● Fourth level ● Fifth level
  42. 42. Ejemplos: Motors Click to edit Master text styles Second level ● Third level ● Fourth level ● Fifth level
  43. 43. Ejemplos: Dream Homes Map Click to edit Master text styles Second level ● Third level ● Fourth level ● Fifth level
  44. 44. Ejemplos: Dream Homes Map Click to edit Master text styles Second level ● Third level ● Fourth level ● Fifth level
  45. 45. Ejemplos: Schema Bank Click to edit Master text styles Second level ● Third level ● Fourth level ● Fifth level
  46. 46. Ejemplos: Schema Bank Click to edit Master text styles Second level ● Third level ● Fourth level ● Fifth level
  47. 47. Ejemplos: Schema Bank Click to edit Master text styles Second level ● Third level ● Fourth level ● Fifth level
  48. 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. 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. 50. ¿Dónde encontrar ayuda? Click to edit Master text styles Second level ● Third level ● Fourth level ● Fifth level http://foro.quizzpot.com/
  51. 51. ¿Dónde encontrar ayuda? Click to edit Master text styles Second level ● Third level ● Fourth level ● Fifth level http://extjses.com
  52. 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. 53. ¿Dónde encontrar ayuda? Click to edit Master text styles Second level ● Third level ● Fourth level ● Fifth level http://www.quizzpot.com/
  54. 54. Libros: Learning Ext JS Shea Frederick Colin Ramsay Steve 'Cutter' Blades En Amazon $35.99 Basado en Ext JS v2
  55. 55. Libros: Ext JS in Action Jesus "Jay" Garcia En Manning $27.50 y $44.99 Basado en Ext JS v3
  56. 56. Licencias y Costos OpenSource (GPL v3) Commercial license Reseller license
  57. 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. 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. 59. Preguntas y Respuestas Crysfel Villa Román www.quizzpot.com crysfel@gmail.com

×