Tag: jQuery

jsFiddle: testando e compartilhando scripts com facilidade

Testar ou debugar um pequeno script pode ser uma tarefa desnecessariamente trabalhosa. Afinal de contas, é necessário criar uma nova página html, escrever sua marcação, inserir scripts, adicionar bibliotecas, salvar e, então, testá-la em algum browser para acompanhar o resultado. Tudo para, muitas vezes, chegar à conclusão de que o grande problema do código era um ponto-e-vírgula ausente ou um seletor mal identificado.

A jsFiddle surgiu dessa necessidade de testar scripts rapidamente. Desenvolvida originalmente para MooTools, a ferramenta foi se expandindo aos poucos, e hoje oferece suporte às principais bibliotecas Javascript do mercado, como MooTools, jQuery, YUI, Prototype, Dojo, Glow, Processing, ExtJS, Raphael e Right JS. Sua interface é simples e intuitiva, bastando selecionar a biblioteca desejada e preencher os campos de XHTML, CSS e Javascript com os dados desejados para testar um script. Clicando no botão “Run”, é possível ver o script em ação, sem a necessidade de criar novos arquivos ou de utilizar vários programas para visualizá-lo.

Exemplo: Olá Mundo: http://jsfiddle.net/mbrasil/2kPZy/

Além da agilidade no desenvolvimento, outro ponto forte da jsFiddle, que tem alavancado o sucesso da ferramenta entre os desenvolvedores front-end, é a facilidade de compartilhar códigos com a comunidade. Um fiddle (código) criado por um desenvolvedor pode ser inserido em uma página via iframe ou compartilhado via Facebook e Twitter. Ao acessar a página do Fiddle, outros desenvolvedores podem editar o código e atualizá-lo, gerando uma nova revisão que pode ser acessada a partir do número correspondente, que é adicionado ao final da URL do código. O fiddle passa a ficar sob controle de versão, e outros desenvolvedores podem até gerar novos fiddles a partir do código original caso julguem necessário.

Apesar da interface minimalista e da facilidade de uso, engana-se quem pensa que a jsFiddle é uma ferramenta simplória. Ela aceita arquivos externos, consegue testar chamadas Ajax e possui integração com o Github, podendo ser manipulada diretamente através de um repositório.

Criando e compartilhando fiddles

• Meus fiddles: http://jsfiddle.net/user/mbrasil/fiddles/

Ao acessar o site do jsFiddle, o desenvolvedor irá se deparar com uma interface simples, constituída por um menu superior com opções relacionadas ao fiddle, um menu lateral com opções de desenvolvimento e quatro grandes blocos redimensionáveis para a inserção de conteúdo. Começar a “brincar” com o jsFiddle é fácil: basta escolher um framework no menu lateral, digitar códigos nos blocos correspondentes e clicar em “Run” no menu superior. O resultado será gerado no bloco inferior direito do fiddle.

No menu lateral, é possível definir configurações para o desenvolvimento do fiddle. O primeiro item permite que o desenvolvedor escolha a biblioteca a ser utilizada e o momento de execução do código (se ele estará no header, no body, ou se será executado em outro lugar do código, depende das opções do framework). Já o segundo item permite que o desenvolvedor insira a URL de arquivos externos que ele deseja testar em seu fiddle. Caso queira adicionar uma folha de estilos especial ou um plugin, este é o local indicado. Mas é sempre bom lembrar que o jsFiddle não faz transferência de arquivos. Na seção Info, é possível modificar as informações do documento, tais como doctype, título e descrição. O menu lateral ainda oferece testes de chamadas Ajax e exemplos de como o fiddle pode ser utilizado.

O menu superior apresenta as opções relacionadas ao fiddle. Como já citado, o botão “Run” executa o código digitado, e o botão “Save” armazena o fiddle. Uma vez armazenado, o fiddle ganha uma URL própria, pela qual ele pode ser acessado, atualizado, inserido em uma página como iframe, ou compartilhado com a comunidade.

O botão “Update” cria uma nova revisão do mesmo fiddle com as últimas modificações feitas no código. Ao atualizar o código, o número da nova revisão é adicionado à URL e as várias revisões ficam à disposição do desenvolvedor para que ele possa acompanhar a evolução do código em seus vários estágios.

A jsFiddle ainda oferece outras características interessantes para facilitar o desenvolvimento. O botão “Fork”, por exemplo, cria um novo fiddle do zero a partir da revisão do fiddle que está sendo editado. A opção “Tiddy Up” alinha os códigos de forma apropriada e o JSLint valida o código, acusando erros de Javascript. Como se ainda não fosse o suficiente, ainda há as opções de discussão e compartilhamento já citadas anteriormente, permitindo ao desenvolvedor compartilhar suas dúvidas e sugestões com a comunidade.

Simples, leve e intuitiva, mas ao mesmo tempo versátil e com muitos recursos à disposição, a jsFiddle é uma verdadeira mão na roda para os desenvolvedores front-end. A despeito do modo como ela agiliza testes cotidianos, sua alta integração com as mídias sociais e facilidade de compartilhamento dos códigos tende a beneficiar a forma como os desenvolvedores se comunicam e expressam suas ideias.