Sorry, this entry is only available in Português.

O tão aguardado Ext 4.0 está aí, e são muitas as novidades: gráficos, padrão MVC, novo pacote de Ext.data, nova estrutura de classes, etc etc etc… Dentre este oceano de alterações confesso que estou tão perdido quanto qualquer outro programador. Não vou ficar aqui ressaltando o que mudou, a equipe Ext fez um ótimo trabalho de publicação através dos vídeos da Sencha Conf, os posts do blog, e também os artigos que são distribuídos com a documentação oficial. Vou aqui somente publicar minhas considerações.

Reaprendendo o Ext

Quem programava Ext 1.0 sofreu com a nova versão 2.0. Era uma versão muito melhor, muito mais rápida, porém extremamente diferente. Traçar o mesmo paralelo entre a versão Ext 3.0 para a 4.0 pode ser um pouco exagerado, mas certos pontos realmente são válidos. A impressão é que você está reaprendendo o framework, porque não foram algumas melhorias pequenas como da versão 3.0 para 3.1, foram coisas essenciais, o código foi praticamente reescrito desde seu núcleo. É preciso voltar aos estudos, assistir apresentações, ler artigos, investir tempo na nova documentação, até adaptar-se a nova versão.

Para começar o sistema de classes mudou. A forma de escrever suas classes não é mais o mesmo. Só neste ponto eu creio que terei de alterar todos os fontes JS das minhas aplicações. Não que tudo vá parar de funcionar, porque a equipe irá lançar um arquivo de migração (Compat.js). Mas para ser 100% complacente com a nova versão, as definições de classes devem mudar.

/*
 *Como eram definidas as classes
 */
Ext.namespace('App.cliente');
App.cliente.Cadastro = Ext.extend(Ext.form.FormPanel, {

	restUrl: '/clientes',
	clienteID: 0,

	initComponent: function() 
	{
		//...
		App.cliente.Cadastro.superclass.initComponent.call(this);
	}
});
Ext.reg('clientecadastro',App.cliente.Cadastro);

/*
 * A nova definição
 */
Ext.define('App.cliente.Cadastro', {

	restUrl: '/clientes',

	config: {
		clienteID: 0
	},

	initComponent: function() 
	{
		//...
		this.callParent();
	}
});

Arquitetura de Aplicação

Outra coisa, pela primeira vez na história da companhia uma arquitetura de aplicação foi publicada. Até então cada ninja Ext resolvia sua aplicação de uma forma. Algums orientados a objetos, outros nem tanto, alguns colocando todos scripts em um diretório, outros dividindo por namespace, etc…

Estrutura dos arquivos

Se adequar a nova estrutura é crucial para poder fazer uso do SDK que está sendo desenvolvido. Este SDK foi comentado na Sencha Conf, e assume que seus fontes e sua aplicação está toda organizada seguindo os padrões Sencha de desenvolvimento. Caso contrário, nada de automatização e algumas surpresinhas que eles estão reservando.

Desempenho

Toda a reescrita do código foi pensada para ter mais robusteza e desempenho. De início posso dizer que com certeza ficou mais rápido. E as explicações são bem óbvias. Primeiro porque houve uma gigante diminuição de elementos DOM para cada componente. O Grid não usa mais um monte de <div> e sim uma <table>, os botões não usam mais uma complicada estrutura porque agora é usado CSS3 para fazer os degradês e cantos arredondas. Também por conta do CSS3 muitos sprites foram eliminados.

Além disso o framework agora conta com carregamento dinâmico. Foi até uma agradável surpresa que minha função Ext.require tenha ido junto. Agora o Ext conta com essa função em seu núcleo, mas com o toque dos programadores Sencha que deram uma bela melhorada nela. O arquivo JS só é carregado quando a classe é requisitada. Mas claro, para isso sua aplicação deve seguir a arquitetura Sencha.

Fiquei com um pouco de dúvida devido ao tamanho dessa versão: 1.1mb. E não é a versão debug, porque esta tem 2.4mb. Ainda estou a procura de melhores esclarecimentos. Não sei se é possível carregar o próprio Ext sob demanda, ou incluir o arquivo de 1mb será a única abordagem.

Gráficos

Nesse ponto eu fiquei muito surpreso. O pessoal caprichou e criou uma biblioteca decente de gráficos sem usar flash, nem requerir nenhum plugin adicional. São dezenas de gráficos e opções para todos os gostos. Como tudo é Javascript, tudo pode ser alterado e personalizado sem problemas. Legendas, cores, animações, tooltips, tudo pode ser customizado, extendido ou melhorado. Os gráficos são rápidos e desempenham bem nos browsers modernos. Segundo a equipe até o IE6 suporta os gráficos…

Ext.data

Outro ponto que estou muito ansioso para explorar. O DataStore deixa de ser o chefão e passa a ser somente um complemento. Agora é possível fazer uma modelagem muito mais profissional usando a classe Ext.Model.

//definir um model
Ext.define('User', {
    extend: 'Ext.data.Model',    
    fields: ['id', 'name', 'age'],
    proxy: {
        type: 'rest',
        url : '/users',
        reader: {
            type: 'json',
            root: 'users'
        }
    }
});

//pegar referência do model
var User = Ext.getModel('User');

//criar um usuário
var ed = Ext.create('User', {
    name: 'Ed Spencer',
    age : 25
});

//salvar diretamente sem intervenção de stores
ed.save({
    success: function(ed) {
        console.log("Saved Ed! His ID is "+ ed.getId());
    }
});

//ou carregar 
User.load(123, {
    success: function(user) {
        console.log("Loaded user 123: " + user.get('name'));
    }
});

Temas

O pacote de temas foi alterado radicalmente, e posso dizer que ficou anos-luz a frente da versão anterior. Isso porque todas as imagens sprite para criar cantos arredondados e degradês foram removidas! Tudo agora é feito por CSS, e para o IE6 parece que existe uma solução que cria as imagens sprites sob demanda (confesso não me interessar muito, não dou suporte pra IE6).

Para começar, está sendo utilizado SASS e Compass. SASS é uma ferramenta para deixar o CSS mais legal, permitindo variáveis, funções, enfim, uma nova forma de escrever CSS. Compass é uma biblioteca com funções padrões SASS, para criar degradês, cantos arredondados, e demais efeitos. Essas alterações realmente me agradaram, porque criar temas no Ext era MUITO chato. Para alterar a cor de um simples botão era preciso mudar o sprite inteiro do botão, nos estados normal, pressionado, com o mouse em cima, etc etc etc… chato, chato, chato. Agora é só usar um mixin (uma função CSS) para criar botões das mais diferentes cores.

Conclusões

Como comentei, esse post foi somente para me colocar de volta à escrita e publicar minhas considerações sobre o Ext 4. Eu espero trazer em breve mais conteúdo educacional a medida que eu vou me aprofundando e descobrindo as mudanças do Ext 4.0.

Por agora vou iniciar a mudança de um sistema iniciando pelos temas. Melhor lugar para começar é com a apresentação do Sencha Conf Theming ExtJS 4.0. Vou tentar me localizar com essa nova estrutura de diretórios e publico pra vocês as novidades.

Um forte abraço!