Compress Action Filter

January 19th, 2011

As vezes nos deparamos com situações onde o html gerado é muito grande, deixando uma sensação de lentidão extrema no sistema. No entanto, algumas vezes o sistema não é lento no processamento, a lentidão está no download e renderização dos dados no browser.

Uma página que gera 3MB de Html pode demorar até 2 segundos para renderizar no browser, isso é bem aceitável, mas juntem estes 2 segundos ao tempo de processamento da página no servidor e a downloads adicionais de imagens e vídeos: este tempo pode começar a ficar inaceitável. Como o HTML é um arquivo texto, é possível comprimi-lo de forma a reduzir muitas vezes mais de 50% do seu tamanho original utilizando programas como ZIP e RAR. Isso é possível alterando alguns parâmetros no header das responses também!

Com asp.net MVC podemos utilizar um Action Filter que altera o header da response fazendo com que a mesma seja comprimida antes de ser enviada para o browser:

using System.Web;
using System.Web.Mvc;
using System.IO.Compression;

public class CompressFilter : ActionFilterAttribute
{

public override void OnActionExecuting(ActionExecutingContext filterContext)
{
HttpRequestBase request = filterContext.HttpContext.Request;

string acceptEncoding = request.Headers["Accept-Encoding"];

if (string.IsNullOrEmpty(acceptEncoding)) return;

acceptEncoding = acceptEncoding.ToUpperInvariant();

HttpResponseBase response = filterContext.HttpContext.Response;

if (acceptEncoding.Contains(”GZIP”))
{
response.AppendHeader(”Content-encoding”, “gzip”);
response.Filter = new GZipStream(response.Filter, CompressionMode.Compress);
}
else if (acceptEncoding.Contains(”DEFLATE”))
{
response.AppendHeader(”Content-encoding”, “deflate”);
response.Filter = new DeflateStream(response.Filter, CompressionMode.Compress);
}
}

}

Este é o código da classe CompressFilter que herda de ActionFilterAttribute . Aproveitamos o evento OnActionExecutting para comprimir o resultado de qualquer Action que esteja decorada com este ActionFilter.

Na Action :

[CompressFilter]
public ActionResult Relatorio()
{
//logic
return View();
}

Um exemplo de página sem compressão:

uncompressed

Agora a mesma página com compressão:

compressed

Nokia Ovi Expedition II

October 7th, 2010

Ontem foi o Nokia Ovi Expedition. Só temos uma palavra para descrever o evento: Fantástico! A Nokia mostrou porque esta preparada para vencer no novo cenário do mercado mobile oferecendo ferramentas, facilidades, foco na comunidade de desenvolvimento aliada ao hardware de qualidade de sempre e a base gigantesca de usuários!

Quem ainda tinha dúvidas sobre investir em desenvolvimento para mobile em WRT, QT e Java deve ter saído com as mãos coçando para desenvolver e publicar na ovi store!

O evento foi bem diversificado e foi fundo, mostrando detalhes de implementação e exemplos para cada uma das três ofertas de desenvolvimento.

Falando de design, valorizando as empresas que já possuem seus aplicativos no mercado e incentivando quem esta começando com um concurso de idéias a Nokia cobriu praticamente todo o ecossistema gerador de valor que foi criado em torno da marca!

Nós da Donuts participamos do concurso de idéias. enviando 2 idéias: 1 específica para o mercado local e outra com foco global que foi uma das vencedoras: Jokenpo Multiplayer!

Ganhamos um N8 que vai turbinar ainda mais nossas possibilidades para este e muitos outros aplicativos que ainda virão. Com o N8 pretendemos criar aplicações que exploram as novidades do dispositivo com o QT, entrando fundo nesta poderosa plataforma. Esperamos desta forma trazer valor e diversão de forma fluída e simples com uma interface integrada ao look’n feel dos dispositivos.

n8

Desenvolvendo Aplicativos para Celulares Nokia

September 24th, 2010

Ola Pessoal,

Há poucas semanas atrás, após participarmos do TDC da GlobalCode (http://thedevelopersconference.com.br/) iniciamos o desenvolvimento de alguns aplicativos mobile para celulares Nokia. Estamos gostando muitíssimo da experiência porque o mercado mobile parece estar evoluindo a largos passos. O Forum Nokia (http://www.forum.nokia.com/) é um grande exemplo disso com mais de 190.000 usuários registrados e um conteúdo bem organizado e completo.

Como somos uma equipe primordialmente web começamos com desenvolvimento em WRT (web runtime). O wrt é uma forma de você desenvolver aplicativos em html com javascript e transformá-los em aplicativos para celular. É incrível! O mais interessante do WRT é que você monta um HTML mas roda ele como se fosse uma aplicação desktop no celular. Com íconezinho e tudo mais, sem nenhuma visão de browser.

É só desenvolver, empacotar o projeto num arquivo .wgz (o fórum Nokia disponibiliza plugins para aptana e visual studio 2008 - sim, visual studio 2008, que geram este pacote) e instalar no seu Smartphone.

Quando eu digo smartphone eu digo todos os telefones desta lista aqui: http://www.forum.nokia.com/Devices/Device_specifications/matrix_webruntime_1.html . 60 modelos de celular! É muito celular!

Agora estamos trabalhando mais e mais com os webdesigners para criarmos layouts efetivos para celular. São alguns paradigmas que precisamos quebrar. A Nokia também dá um empurrão neste sentido com uma sessão completíssima de design no fórum da Nokia. Vale a pena ler, pelo menos para mim que me interesso por design também :), senão, passa para o seu designer ler que ele vai curtir!

Bom, por hora é isso, mas ainda vai vir muita coisa por aí: mais resultados e experiências. OVI, QT e QML estão no nosso radar… aguardem!!!

Regular Expressions - Já não são um mistério!

August 26th, 2010

Ola Pessoal,

Encontrei um site muito bom onde vocês podem criar regular expressions online. O nome do site é : http://gskinner.com/RegExr/ e mesmo para quem não sabe utilizar regular expressions a ferramenta facilita o aprendizado. Regular Expressions estão sendo muito importantes para um novo produto que estamos desenvolvendo. Vou deixar o suspense!

Receitas da Construção - Ajudando você a cuidar da sua casa!

August 26th, 2010

Ola Pessoal,

Não sei se todos já sabem mas somos a equipe que criou junto com um grupo de pessoas nas mais diversas áreas de atuação o “Receitas da Construção” http://www.receitasdaconstrucao.com.br . O blog tem um objetivo simples: ajudar as pessoas a cuidarem de suas próprias casas. Esperamos desta forma ajudar as pessoas a cuidarem e a usarem o seu tempo para tarefas fora da rotina, que podem ter um efeito muito positivo na vida profissional/pessoal.

Participem! Dêem um pouquinho mais de espaço este quase hobbie que hoje em dia é cuidar do próprio lar.  Estamos aceitando sugestões de temas, ou seja, se você esta com aquele probleminha como uma torneira vazando, um cano quebrado, um telhado com problemas, conte para nós a sua história e nós podemos publicar um artigo sobre o tema com alternativas de solução no Blog !

Novo Site da Donuts4U

July 20th, 2010

Pois é, estamos crescendo! Já não somos mais somente um grupo de geeks iniciando seu próprio negócio. 

Temos sites publicados, cases de sucesso, uma missão, visão e valores lapidados e construídos ao longo destes 2 anos de suor e entregas. Somos uma equipe que tomou a consciência de seus próprios valores e que decidiu partir para uma divulgação mais clara do que somos,  como fazemos, e o que já temos feito.

Este nosso novo site simboliza este momento, mais maduro e consistente. Um Blog já não era suficiente, era um complemento. Reconhecemos, refatoramos!

Muito prazer, somos a Donuts4U!

Não faça Pós, faça Dojo! Primeiro Coding Dojo Donuts4U

June 26th, 2010

Autor: Daniel Makiyama

Ola Pessoal,

Começamos a fazer Coding Dojo aqui na Donuts4U, ontem, sexta-feira, após o jogo do Brasil! Nada melhor do que todo mundo reunido para começarmos com esta prática que pretendemos perpetrar aqui na nossa empresa! 

Vocês sabem o que é Coding Dojo? Então, eu também não sabia há algum tempo. Ouvi pela primeira vez o termo no evento Falando em Agile e nas reuniões do .NetArchitects e comecei a me interessar lendo alguns posts como:  O que é Dojo? e  http://codingdojo.org/  .

Há algum tempo também, comecei a identificar na nossa equipe o interesse de todos em fazerem cursos de extensão, pós-graduação e/ou mestrado e também a insatisfação de todos com as instituições e cursos disponíveis hoje para a nossa área. 

Foi aí que, sugeri que montássemos uma turma de Coding Dojo na empresa, com sessões quinzenais das 17:00 às 19:00. Comuniquei ao pessoal e foi aceitação total! Alguns da equipe já conheciam o Dojo, o que facilitou bastante este nosso primeiro evento.   

Escolhemos a linguagem Jquery/Javascript com Framework de Teste QUnit, utilizado pelo time do JQuery, e escolhemos o problema FizzBuzz que o Daniel Fonseca Castro encontrou no Coding Dojo SP: http://www.dojosp.org/?p=98 .

Participaram do Dojo:

Daniel Fonseca Castro
Daniel Makiyama
Devanir Grazino,
Fernando Camargo e
Kassiano Resende

Na primeira rodada, a plateia começou a opinar sobre o código, atrapalhando um pouco a concentração do piloto e co-piloto, fugimos um pouco do baby steps e dos testes em alguns momentos, mas no fim da rodada e no início da segunda começamos a retomar estas questões.

Os erros foram muito valiosos pois acertamos o programa rapidamente utilizando o TDD e Baby Steps da forma correta e  finalizamos tudo no meio da segunda rodada com direito a refatoração e melhorias de código!

Foi muito divertido ver todo mundo participando, ver as alterações quebrarem os testes, seguir o TDD e ver o resultado. Acredito que todo mundo voltou para a casa com a sensação de estar rodando um service pack mental! Eu quero sentir esta sensação denovo, portando na semana que vem tem mais! E quem precisa de Pós quando se tem Dojo?!

Segue o link para download do código fonte do Dojo 001 Donuts4U: http://donuts4u.servicos.ws/dojo/Dojo_001.zip

Até o próximo post!

JQuery - simples mas poderoso !

May 4th, 2010

Autor: Kassiano Resende

Hoje quando falamos de web 2.0, aplicações dinâmicas , interatividade qual a primeira coisa que vem na nossa cabeça é ? Google é claro ! Quando a gente usa o Gmail , GoogleDocs até mesmo o Orkut fica claro a interatividade da web 2.0 , mas hoje eu vou falar um pouco do que está por traz de boa parte disso tudo: o Jquery ! Jquery é uma biblioteca javascript feita para facilitar o desenvolvimento para web 2.0, e por suas inúmeras vantagens o jquery hoje é a biblioteca oficial de javascript da microsoft.

Eu uso muito o gmail e também gosto bastante do Orkut. Tenho eles como referencia de tecnologia de ponta na internet, então é natural que eu traga essas referencias para os projetos nos quais trabalho aqui na Donuts4u. Uma coisa que eu achei super legal no gmail e também no orkut são as mensagens de interação com o usuário. No gmail e orkut essas mensagens tem um padrão de aparecer como um div no topo da tela , e isso é genial, pois o usuário não precisa apertar “ok” (caso de alerts) pra continuar a navegando no site. As mensagens simplesmente aparecem, o usuário vê, e elas desaparecem sozinhas tornando a navegação muito mais agradável. Tendo isso em vista, resolvemos implementar este mesmo mecanismo de mensagem em um projeto da empresa, e os resultados foram excelentes!

Para isso eu usei o Jquery, e de forma simples e rápida (como é trabalhar com jquery) implementando o seguinte mecanismo:
Na Master Page do projeto eu coloquei um div com id=divMsg e apliquei um css para o div ficar com cores padronizadas com o projeto, neste css também apliquei um position=absolute e posicionei o div de forma que ela fique sempre no centro e no topo da tela. Pronto, agora todas as mensagens do sistema eu comecei a direcionar para este div e é ai que entra o jquery.

Exemplo básico de mensagem de “carregando…” em uma chamada Ajax, podemos implementar ele da seguinte maneira :

$(”#divMsg”).html(”Carregando…”);
$(”#divMsg”).show();

$.post( “xxxx/yyyy/”, {
ID: id
},
function(data) {

$(”#divMsg”).fadeOut(2000);

});

No código acima eu faço um post qualquer com jquery, mas reparem que na 1º linha eu escrevo “carregando…” no div, isso faz com que o usuário saiba que o sistema está executando alguma ação e reparem também que na função de callback eu dou um “fadeOut” no div , isso faz com que o div suma aos poucos da tela dando todo o efeito Orkut desejado. =D

Flash em Protótipos?

May 8th, 2009

Começamos a usar o Flash em protótipos, para os sistemas que desenvolvemos (Web/Mobile e Jogos) há 1 ano e percebemos na prática que quanto mais consistente e realista é a nossa interface com o cliente, melhor é o entendimento, refletindo na qualidade e aderência do que desenvolvemos, e contribuindo para um produto final bem aceito! O Flash é importante porque somente com ele nós temos conseguido representar todos os detalhes de uma aplicação, exatamente como o são, sem requerer da equipe e do cliente nenhuma “interpretação” que possa deturpar o entendimento mútuo do sistema.

Nós montamos protótipos Flash em período de proposta, o que é bem incomum para a maioria das consultorias, e mantemos este Flash atualizado e vivo ao longo de todo o projeto. Tanto para desenvolvimento ágil quanto tradicional ele tem sido fundamental, pois focando no ítem prioritário, ou planejando todos antecipadamente, a equipe toda sempre sabe exatamente o que deve ser feito antes de começar a codificar. Além disso, o processo de integração programador/design/cliente que a montagem deste protótipo gera é fantástico.

Não sabemos ainda se atualizar um Flash leva mais tempo do que atualizar um Use Case, mas sabemos que é muito mais divertido, e o cliente tem achado o mesmo.

As Ferramentas e o Trabalho Remoto: Garantindo a Qualidade da Comunicação, e do Software, é claro!

April 23rd, 2009

Uma parte da equipe Donuts4U vem há alguns meses trabalhando de forma remota. Ao longo deste período encontramos muitas ferramentas (a maioria free) na web que nos auxiliaram a definir um processo produtivo de trabalho, o que vem gerando uma percepção muito positiva quanto ao modelo.

Descobrimos inicialmente que o próprio computador e acesso à internet precisavam estar preparados para permitir o trabalho remoto. Webcam, fone de ouvido e acesso à internet mínimo de 4MB são exemplos de padrões que tivemos que definir para uma maior qualidade e estabilidade na comunicação.

Quanto a softwares, definimos o Skype 4.0 ( http://www.skype.com ) como ambiente de voz e vídeo para reuniões, pois permite até 24 pessoas em uma conferência de voz. Para vídeo, uma comunicação mais próxima, ainda não sentimos a necessidade de envolvermos mais de 2 pessoas (limitação do Skype 4.0).

Para trabalharmos de forma conjunta utilizamos o LogMeIn ( http://www.logmein.com ) que permite acesso e controle de máquinas remotamente. Inclusive já estamos há algum tempo desenvolvendo em par (pair programming) utilizando o LogMeIn e Skype 4.0, o que nos gera um ambiente quase que transparente para este tipo de trabalho.

A limitação que temos com o LogMeIn (somente 1 pessoa pode se conectar em cada máquina) resolvemos com o ConnectNow ( http://www.adobe.com/acom/connectnow/ ) da Adobe, que na versão free permite que até 3 pessoas se conectem em uma mesma máquina ao mesmo tempo. Isso nos permite compartilhar janelas ou até mesmo todo o desktop sem que os participantes possam interferir na tela. Além disso, o ConnectNow tem uma série de outras features bem legais como chat, webcam, shared notes e anotações na tela, mas até o momento só utilizarmos destas, as shared notes, como action points de uma reunião.

Para reuniões de brainstorm, definição de User Stories (estórias utilizadas para definir o escopo de um sistema em metodologias ágeis), planilhas de acompanhamento e controle, utilizamos o Google Docs ( http://docs.google.com ) que permite que um documento seja criado, compartilhado e alterado ao mesmo tempo por vários usuários. Além disso, regras básicas de permissão (read, write) podem ser estabelecidas. Isso gera uma rede única de documentos que estão sempre acessíveis à toda equipe, o que agiliza, facilita muito o processo de trabalho e evita duplicação de informações. Inclusive, o vídeo da Common Craft presente na home do Google Docs diz tudo!

Para conversas informais de texto também utilizamos o Skype, que por “default” guarda o histórico de todas as conversas e chats coletivos ou não coletivos, ítem fundamental quando se trabalha com estas ferramentas em um ambiente de trabalho.

Para compartilharmos arquivos pesados, ou guidelines e documentos formais entre a equipe, utilizamos o 4shared ( http://www.4shared.com ), mas cuidado: caso a sua conta free não seja acessada por um longo período, os arquivos podem ser apagados de lá.

Para controlar código estamos utilizando o Subversion em uma hospedagem exclusiva que não é free, mas estamos planejando migrar nosso código para Google Code ( http://code.google.com/ ), que é free, em breve (ps: o Google Code só hospeda projetos Open Source).

Em resumo, estamos descobrindo que é possível trabalhar remotamente com qualidade, sem gastar muito para isso. Caso ainda não tenham experimentado, experimentem! Esta valendo a pena no nosso caso!

Além da questão “ferramentas”, existem uma série de pequenas regras que precisamos estabelecer para construir um ambiente saudável e produtivo de trabalho remoto, e ainda há uma lista enorme do que devemos evitar para garantir este mesmo ambiente, mas este deve ser assunto para um próximo post sobre o tema.