Ext JS 4 disponible!

Finalmente, luego una larga espera (y un atraso de un par de meses) en el dia de la fecha, Ed Spencer (lead developer en Sencha) anunció en el blog oficial el lanzamiento oficial de la librería en cuestión.

Para los desconocidos, ExtJS es un framework de desarrollo JavaScript basado en componentes (widgets), pero mucho (MUCHO) más potente que el popular jQuery UI. Además contempla aspectos más complejos como ser el manejo de datos y lógica de handlers.
Podríamos considerar como parecido (salvando las distancias) a SproutCore.

Ext JS 4

Documentacion

Junto a esta nueva versión, Sencha se encargó de darle una gran lavada de rostro a la documentación existente, migrando del sistema super dinámico a uno ligeramente más estático pero que aprovecha el indexado de google. Además, hay 40 nuevos ejemplos de distintos tipos listos para ser víctimas del copy-paste.

Arquitectura, clases y mixins

Clases y Mixins

Clases y Mixins

En esta nueva versión, Sencha agregó la posibilidad de trabajar con los componentes de manera modular y asincronica de manera similar a la que utiliza YUI.

// Solicitamos los modulos que vamos a utilizar
Ext.Loader.setPath('Ext.ux', '../ux/');
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*'
]);

Cabe destacar que aún se puede (y es recomendable) usar el archivo ext-all.js que incluye todos los componentes (a excepción de los plugins).

Además, el nuevo sistema de clases incorpora mixins (implementaciones parciales por así decirlo) permitiendo lograr objetos flexibles con múltiples comportamientos posibles (draggable, resizable, etc).

Estilos

Al generar una capa de desarrollo propia, ExtJS4 permite trabajar los estilos de manera mucho mas desacoplada, permitiendo lograr grandes resultados de manera más intuitiva. Para lograr esta flexibilidad, hace uso de SASS (Syntactically Awesome Stylesheets) y del framework de desarrollo visual Compass.

Para mayor información, está disponible el video “SenchaCon 2010: Theming Ext JS 4” .

Sandbox

Con todo el refactor que recibió, era de esperar que corrigieran ciertos tópicos importantes, como ser la encapsulación y la contaminación de los objetos globales. Dentro de los ejemplos disponibles, tenemos una implementación de ExtJS4 y ExtJS3 en simultaneo, corriendo sin ningun tipo de problemas.
Por otra parte, se removieron todas las extensiones realizadas sobre los objetos nativos, a fines de evitar colisiones con librerías externas (como sucedía con ExtJS3 y Prototype).

Datos

Como se mencionó en una entrada anterior, Sencha movió bastante el piso en este aspecto, llevando el desarrollo a un paradigma más claro que el anterior (data stores diseminados por la aplicación). ExtJS4 soporta definición de entidades, con sus atributos, métodos e inclusive proxies para integrarlos de manera ágil con tecnologías server side.

Grid

Siendo el widget más usado y modificado, era de esperar que modifiquen muchas cosas del mismo. En principio hay que hablar del beneficio que recibe de la optimización de render general, lo cual sumado a un markup más liviano permite generar grids sin la sensación de “pesadez” que se nota con la versión 3 del framework. El render inteligente permite mantener el markup más básico para la configuración recibida, de manera que si no se va a usar una característica x, su markup no va a estar presente.
Con todos estos cambios, seguramente veamos muchas variantes y plugins en un futuro cercano.

Charts

Dentro de este rubro, Sencha se encargó de conseguir gente especializada como Nicolas Garcia Belmonte (autor del JavaScript InfoVis Toolkit)  y Dmitry Baranovskiy (autor de Raphael JS). El resultado es impresionante, logrando competir con gráficos generados con plugins (Flash, Java, Silverlight) de manera nativa y con amplio soporte (desde IE6 a iOS).


Descargar ExtJS4


Leer más:



Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comment

You may use these tags : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>