Arquivos da Tag: Javascript

Testando Javascript

Publicado em por
6

javascript-testing-570x190

Outro dia, um grande amigo me perguntou como fazia para automatizar o teste do Javascript desenvolvido em vários browsers. Para ser bem sincero, eu não utilizo nada além de vários browsers diferentes instalados em cada uma das minhas máquinas (virtuais ou não), cada uma com um sistema operacional diferente  (Ubuntu 10.10 e 11.04 , Windows XP, Vista e 7 e carente de um Mac por enquanto…).

Realmente, mesmo usando o Synergy e uma boa configuração de rede local, ainda fica um pouco trabalhoso… Então resolvi pesquisar algumas ferramentas que poderiam ajudar nessa árdua tarefa, e creio que muitos vão agradecer pelas dicas e até colaborar com dezenas de outras nos comentários. Nem todas visam automatizar o teste em escala, mas todas vão facilitar alguma fase dos testes para que seus projetos tenham um excelente resultado

BrowserShots

Essa ferramenta vai mostrar pra você como seu site irá “renderizar” em diversos browsers diferentes, sem que você os tenha instalado, permitindo que você identifique problemas de compatibilidade mais rapidamente (principalmente se você se valeu de javascript para trabalhar estilos/css)

ScriptCover

Recém-lançado pelo Google, essa ferramenta fornece estatísticas de cobertura de código linha-a-linha, permitindo que você analise (em tempo real até) quantas vezes uma determinada instrução foi executada durante o uso da página. Essa extensão do Chrome funciona desde o instante inicial de carregamento da página e continua enquanto o site vai sendo utilizado, sem atrapalhar o usuário. Excelente  também para debugar códigos complexos, que porventura venham a falhar misteriosamente em algum browser específico (para não dizer logo I.E.).

js-test-driver

Esse framework permitirá que você trabalhe na filosofia TDD (Test Driven Development), integrando-o a sua IDE (Eclipse, por exemplo) para automatizar a execução dos testes tão logo você modifique os arquivos do projeto. Exige uma preparação dos cases de teste, mas já que estamos falando de TDD, isso não será o problema. Confira nesse post a apresentação na época de lançamento onde é demonstrada a praticidade do mesmo.

QUnit, a filosofia jQuery também nos testes

QUnit é um poderoso framework de Unit Test que o ajuda a depurar o código. É escrito por membros da equipe de jQuery, e é o conjunto de testes oficial para este famoso framework. Ele é também o suficiente para testar qualquer código JavaScript regular, e é ainda capaz de testar Javascript server-side, através de algum mecanismo de JavaScript como Rhino ou V8.

Jasmine

Não, você não vai contratar uma estagiária chamada Jasmine para fazer o le-rê-le-rê de abrir páginas e págians em todas as máquinas do seu escritório. É um framework BDD, Behaviour Driven Development, ou seja, desenvolvimento orientado a comportamento. Para quem acha o TDD coisa do passado.

W3C Validator

Não menospreze-o. Alguns acham cafona, outros, nem sequer ouviram falar. Mas pense: se o código está de acordo com Standards, a chance de renderizar igual na maior parte dos browsers também é maior! E também, pode ser um excelente atalho para encontrar algum problema misterioso que não consta nos consoles.

Firebug

Apesar de usar o Chrome a maior parte do tempo, ainda acho a versão Firefox da extensão de desenvolvimento web mais prática e rápida para ajudar no debug, teste e inclusive no desenvolvimento (quem nunca desenvolveu uma linha de código javascript direto no console pra depois copiar e colar no código-fonte que atire o primeiro mouse!)

E você, usa alguma outar ferramenta para facilitar o testes Javascript? Por favor, ajude-nos!

Meu Ambiente de trabalho em 7 itens

Publicado em por
1

Development tools, THLopes.comSeguindo a “corrente do bem” que chegou até mim via Rocha C. Bruno, segue minha lista para Meu ambiente de trabalho em 7 items (Nossa, um número realmente pequeno para esse tipo de brincadeira…), vamos lá:

  1. Python: A linguagem mestre, sempre liderando qualquer projeto. Curiosamente, até em projetos onde o Python não é a linguagem principal, ele exerce sua influência: estou sempre pensando “Pythonicamente” para resolver problemas, aplicando o Zen que a comunidade e linguagem prega. Não é apenas linguagem: é Filosofia!
  2. Django: Nem todos projetos são Web, ou 100% Web. Mas os que atendem a esse requisito, sempre tem esse maravilhoso framework direcionando os trabalhos.
  3. Javascript: Para muitos, é algo bizarro. Para mim, que trabalho a maior parte com interfaces e interação do usuário com os sistemas, é a arma. E como já disse para muitos amigos de trabalho: “Para mim, Javascript é o Python rodando diretamente no Browser.
  4. jQuery: Muitas vezes esse framework chega a se sobrepôr a própria linguagem. Em muitos projetos, dá até pra dizer que temos “mais linhas jQuery do que Javascript puro”. Mas o que isso quer dizer? Que Web sem jQuery realmente é muito mais difícil e demorado! Gosto tanto do framework que criei até uns plugins
  5. Firebug: Se eu tiver de nomear um dos items como minha Shuriken, o Firebug seria sem dúvida! Muito prático, rápido e a ferramenta ideal para “prototipar” qualquer interface. Ainda mais se o cliente estiver do seu lado, esperando uma resposta sua: Você abre o console, algumas linhas e opções depois, você mostra pra ele como pode resolver  o problema… e negócio mais próximo de estar fechado!
  6. Mercurial-HG: Devo confessar, antes usava SVN, e quando a vida me exigiu mudar para Mercurial, tive um pouco de resistência. Mas hoje, alguns meses depois, só vejo vantagens, principalmente  após usar os excelentes recursos do Bitbucket e saber que várias boas ferramentas que utilizo, inclusive o próprio Python, tem seu código armazenado por lá, e também que Mercurial é uma ferramenta escrita em Python.
  7. Eclipse: Não vou morrer se o Eclipse não abrir… mas vou ganhar várias horas de lazer com algumas praticidades que ele traz: com essa IDE, eu centralizo diversas outras ferramentas, libraries, automatizo alguns procedimentos, debugs, vários ambientes de execução e depuração customizados com fácil acesso… enfim, um verdadeiro Canivete Suíço! Claro, ele tem que estar turbinado com alguns plugins, tais como: Aptana, PyDev, Mercurial, etc.

E assim como outros fizeram, vamos às menções honrosas de outras ferramentas que fazer uma pontinha no ambiente com menos frequência. Percebam que muitas ferramentas são claramente feitas para rodar em Windows, geralmente para suprir necessidades que são padrão no Linux

  1. Ubuntu: Companheiro de cada dia! Geralmente uso Windows por conveniência (sempre compro notebooks com Windows original pré-instalado, e dá uma preguiça de instalar e configurar um novo sistema… apesar de que nas últimas versões de Ubuntu esse processo estar facílimo!). Certas coisas na vida de um desenvolvedor só são possíveis num sistema Linux, e Ubuntu é o mestre nesse aspecto. Um exemplo é um projeto recente que estou trabalhando que envolve processamento de vídeo, usando FFMpeg e PyFFMpeg. Praticamente impossível de rodar em Windows… porém, no Linux, é mamão-com-açúcar…
  2. Google App Engine SDK: Ferramenta essencial para projetos dentro da plataforma do Google. Quando usando com Eclipse, basta integrar no ambiente ou no projeto e o Eclipse/Pydev faz toda a interface pra você.
  3. Putty: Quando não no Linux, uma ferramenta essencial para conectar-se a sistemas remotos.
  4. iPython: Mão na roda para agilizar alguns comandos experimentais e em testes (Experimentando o DreamPie também)
  5. XAMPP: Outra ferramenta indispensável quando desenvolvendo fora do Linux
  6. phpMyAdmin: Muita gente torce o nariz, mas essa ferramenta é muito boa e prática. Só não é melhor por não ser em Python, :D .
  7. Skype: Para conversar com a equipe, clientes, e até fazer pequenos treinamentos
  8. DropBox: Backup e compartilhamento entre máquinas remotas. Uso principalmente como backup automatizado do meu ambiente de desenvolvimento remoto e até apaga alguns
  9. VMWare Player: Para rodar mais de um sistema de uma vez, permitindo testes (compatibilidade e usabilidade) mais rápidos e práticos
  10. VNC / Win2VNC: Também para rodar mais de um sistema de uma vez, mas aqui, para controlar mais de uma máquina com um único teclado e mouse, não para visualização remota (inclusive, acho horrível…)
  11. Pencil (Firefox Add-on): Para fazer Wireframes

Para dar continuidade, convido os amigos para seguir nesse trend:

@mauriciosl
@jeanwainer
@ergalassi
@marcelohonorio
@odranoel
@Ericgoes
@marcosriso

zipando arrays javascript como no python

Publicado em por
Comentar

Essa dica rápida é para aqueles que estão procurando uma forma de mesclar (merge) arrays em Javascript como é feito em Python através da função zip():

function zip() {
    var merged=[],arrays=[],lengths=[];
    for(var i=0; i<arguments.length; i++) {
        arrays.push(arguments[i]);
        lengths.push(arguments[i].length);
    }
    for (var i=0; i < Math.min.apply(null,lengths); i++) {
        merged[i] = arrays.map(function(value) { return value[i]; });
    }
    return merged;
}

Enjoy!!!

Republicando: jQuery, de olho nos gaps

Publicado em por
3

Estou republicando esse artigo pois o mesmo recebeu um comentário, e ao mesmo tempo, é um assunto que ainda assola muitas pessoas que utilizam jQuery, principalmente quem começou com ela há pouco tempo.

Qual webdeveloper nunca usou jQuery[bb]? Muito difícil… Bom, mas vamos falar de algo que nem todos os developers[bb] que usam jQuery se atentam ao programar. Eu mesmo fui pego hoje por um gap que me tomou alguns minutos da tarde…

Algumas funções (na verdade, a maioria nesse framework) recebem outras funções como callback, aquela função que será chamada assim que a instrução/função chamada acabar seu procedimento. Um exemplo muito utilizado em aplicações reais são as

Funções Ajax

load( url, data, callback )
Returns: jQuery. Load HTML from a remote file and inject it into the DOM.

jQuery.get( url, data, callback, type )
Returns: XMLHttpRequest. Load a remote page using an HTTP GET request.

jQuery.getJSON( url, data, callback )
Returns: XMLHttpRequest. Load JSON data using an HTTP GET request.

Continuar lendo →

corMVC, framework MVC para Javascript

Publicado em por
Comentar

corMVC - um framework MVC para Javascript

corMVC é um framework MVC para Javascript, baseado em jQuery. Voltado para aplicações web de uma página só, onde você executa todas suas operações em estilo Ajax, na própria página. Segundo os criadores, é execelente como ponto de entrada para aprendizado da arquitetura de ‘single-page application’ (aplicação de página única, como mencionado anteriormente).

É simples de começar a usar, não necessita de nenhum linha de comando, basta extrair tudo numa pasta e abrir no browser. Estou testando aqui e em breve posto meus comentários a respeito.

Motion: animação web sem flash

Publicado em por
3

Motion: animação sem flash

Encontrei esse projeto através do LinkedIn. Incrível, o autor consegue gerar um ambiente animado, onde você pode interagir com outros elementos, o cenário tem profundidade, e você pode guiar seu personagem através desse ambiente, usando o teclado, para qualquer direção. Até aí normal, porém, ele fez tudo usando apenas Javascript, sem nenhum Flash sequer. Ver essa audácia me relembrou a época em que desenvolvi um game 2d em Java, na faculdade, o K-Libre99, totalmente do zero.

O mais bacana é que ele demonstra que podemos sim ter coisas complexas feitas na web, com Javascript (que é nativo de qualquer browser hoje em dia), sem depender de plugins externos, como o Flash. Realmente, um trabalho excelente, demonstrando que a web não é dependente de Flash para criar experiências de usuário dinâmicas. Confira mais em http://www.geektestbox.com/devfiles/mdunham/brookside_beta/

Otimizando desempenho

Publicado em por
Comentar

Cronômetro de Corrida

Nos últimos dias, temos brigado muito por coisas muito pequenas, as vezes passageiras. Cada migalha desperdiçada é motivo para um nova discussão que acaba mudando o rumo das coisas… Calma gente, não estou tendo problemas de relacionamento não, são apenas discussões sadias de trabalho para se melhorar os níveis de performance nos aplicativos.

Quando se atinge um certo número de usuários de uma única aplicação, devemos tomar certos cuidados. Muitas vezes, ignoramos alguns pontos que podemos melhorar, deixando 1KByte, 2KB mais leves, pois afinal, para um usuário parece tão pouco, mas quanto representa 2KB multiplicado por 100 mil usuários? 195 MB. É, assusta, e as cifras só tendem a aumentar.

Com o advento da computação em nuvem, alguns perceberam que realmente deveriam otimizar suas aplicações, pois cada KB gasto vai representar algum valor que será, com certeza, debitado num cartão de crédito futuramente. Enquanto antigamente, bastava planejar a compra de uma máquina muito além das necessidades e ter um custo fixo, agora, a briga é para sempre diminuir a conta no fim do mês, como numa economia doméstica (certa vez, ouvi que toda economia é de migalhas. Concordo).

Mas muitas vezes, desenvolvedores de aplicações esquecem de alguns detalhes como por exemplo, o peso dos arquivos da camada de apresentação de suas aplicações. Na Web, isso também deve entrar na conta: tamanho do HTML, CSS[bb], JS e imagens. E hoje em dia, são relativamente conhecidas técnicas para aprimorar esses estáticos para uma melhor experiência do usuário. Digo relativamente porque ainda me deparo com muitos websites, sistemas e gadgets por aí sem nenhuma otimização nesse sentido. No Brasil ainda temos muitos usuários que não dispõe de banda larga, e eles agradecem cada byte salvo.

Continuar lendo →