ExtJS – Presentacion del framework

ExtJS es un framework Javascript que nace para trabajar sobre librerías como YUI (2006) y es posteriormente portado para utilizar como base las librerías jQuery, Prototype, y otras.

Hoy en dia, se ha independizado de todo desarrollo externo, pasando a trabajar con Ext,base, y desapareciendo los adapter que permitían utilizarlos sobre otros desarrollos.

Sencha Ext JS nos ayuda a mejorar la experiencia del usuario, pues nos proporciona componentes con funcionalidades avanzadas y de fácil implementación.

Sencha ExtJS es la mas poderosa plataforma de desarrollo de interfaces desktop en Web con compatibilidad sin igual para todos los navegadores mas utilizados, arquitectura MVC, capacidad de dibujo de charts y modernos componentes de UI.

El desarrollo se basa en el patrón de Modelo-Vista-Controlador, todo esto es sobre Javascript y se ejecuta en el navegador del usuario.

Si tenemos que enumerar las principales ventajas que nos aporta, podríamos hablar de:

  • Orientado a objetos
  • Controles de interfaz de usuario
  • Soporte HTML5
  • Arquitectura MVC
  • Temas y estilos prefijados
  • Completa documentación
  • Gran cantidad de Desarrolladores

Desde el punto de vista del programador vemos:

  • manipulación del DOM
  • Selector CSS
  • Generación de componentes
  • Plantillas
  • Gestor de eventos
  • personalización de eventos
  • Funciones remotas
  • Formularios
  • animación
  • Soporte teclado
  • MVC en lado cliente
  • Componentes prefabricados
  • Generador de gráficos
  • Data storage que pueden trabajar con Grids o con gráficos
  • Combos,Trees, barras de progreso, menús,..
  • Cargador de clases
  • Gestor de Temas

Estamos ante un framework pensado para realizar todo el trabajo en el lado cliente ,con Javascript. Naturalmente que podemos tomar componentes individuales y hacerlos trabajar en el HTML, pero en esa vertiente no conseguiremos nada que no pudiéramos hacer con cualquiera de las muchas librerías y plugins que hay por Internet.

Descubriremos sus posibilidades cuando lo utilicemos en intranets, o en back-office, en donde no tengamos problemas de posicionamiento con los buscadores, porque ahí es donde tiene su punto débil. Al realizar todo con javascript, no es, precisamente, muy amigo del SEO

Pero en cambio, nos facilita el trabajo, resolviendo las conexiones AJAX casi sin que nos demos cuenta, actualizando grid, formularios, árboles, o combos solo declarando los orígenes. Durante los siguientes capítulos nos dedicaremos precisamente a mostrar como funciona ExtJS,

La instalacion del framework

Este framework se ofrece en varias versiones; entre ella, una versión gratuita con licencia GPL  que, como sabéis, nos obligará a liberar todo nuestro código con  la misma licencia… pero para conocerlo, y aprender a utilizarlo, es la ideal; si mas adelante queréis realizar desarrollos para vender vuestro trabajo, deberéis plantearos comprar la licencia.

De momento, podéis ir a:

http://www.sencha.com/legal/GPL/

y leeros las condiciones de la licencia; luego introducís la información y pulsáis el botón de descarga.Descargar Sencha JS

Al cabo de unos minutos, recibiréis en el correo un enlace para que podáis descargaros un fichero comprimido con todo el framework.

El siguiente paso será descomprimirlo en una carpeta de un servidor web; para nuestras pruebas, vamos a utilizar una instalación local de Apache, que realizamos siguiendo este manual:

http://recursosformacion.com/wordpress/2014/09/tu-maquina-de-desarrollo-instalando-lamp/

y como tenemos un “Virtual host” apuntando al directorio “Proyectos – Pruebas”, con nombre “pruebas”,

 

Instalando ExtJS

descomprimimos en dicho directorio.

Ahora, si queremos probar los ejemplos que vienen con la descarga, deberemos escribir en un navegador:

http://pruebas/ext-5.1.1/

Demos de ExtJS

 

y veremos aparecer esta pantalla, detrás de la que se esconde una verdadera, y apabullante, demostración de lo que podemos hacer con Sencha ExtJS

Rutinas

Para nuestros primeros trabajos, las rutinas que debemos tener en cuenta son

Minificado Normal Contenido
ext.js ext-debug.js Base, para carga dinámica
ext-all.js ext-all-debug.js Framework entero
ext-all-rtl.js ext-all-rtl-debug.js Framework entero mas soporte de derecha a izquierda
ext-all-rtl-sandbox.js ext-all-rtl-sandbox-debug.js Framework entero mas soporte de derecha a izquierda, aislado para compatibilidad
ext-all-sandbox.js ext-all-sandbox-debug.js Framework entero aislado para compatibilidad

Por ultimo dejaros un enlace que ya podéis dejar en “Favoritos” y muy visible. Y es la documentación del API; para la versión  que vamos a utilizar es:

http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/

En el siguiente post, demostraremos nuestra originalidad, presentado un «Hola Mundo»….

 

 

Acerca de Miguel Garcia

Programador, Desarrollador web, Formador en distintas areas de informatica y director de equipos multidisciplinares.
Esta entrada fue publicada en Framework Sencha ExtJS. Guarda el enlace permanente.

Una respuesta a ExtJS – Presentacion del framework

  1. Pingback: ExtJS - Primeros pasos: Hola MundoRecursos para formacion

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.