jQuery vs Mootools - Como escolher ?

Original de Aaron Newton of Clientcide

Tradução e Adaptação Fabio Zendhi Nagao

Correções e Readaptação Leonardo Machado

Atualmente, a maioria das pessoas começando a trabalhar com JavaScript se deparam com a difícil tarefa de escolher uma biblioteca ou pelo menos qual delas aprender primeiro. Se você estiver trabalhando para uma empresa, é bem provável que ela já tenha escolhido um framework para você, de modo que esta escolha talvez seja discutível. Neste caso, se eles escolheram o MooTools e você está acostumado com jQuery, então talvez este artigo ainda possa ser interessante para você.
Todo dia no twitter vejo várias mensagens que resumem a discussão acima para "MooTools ou jQuery?". O objetivo deste artigo é ajudá-lo a fazer esta escolha.

Sobre o autor

Eu sou um desenvolvedor do MooTools, trabalho com a MooTools framework, "blogo" sobre MooTools, escrevi o principal tutorial online e o livro sobre MooTools. Obviamente tenho a perspectiva de algum modo enviesada. Saliento também que não uso muito jQuery. Se você for um desenvolvedor jQuery e encontrar alguma má interpretação da minha parte, favor entrar em contato para me ajudar a retificar o problema. Meu objetivo aqui é ser útil e correto para as pessoas - não vender uma framework sobre outro.

 

Sobre o tradutor

Provalvemente um dos usuários mais antigos de MooTools do Brasil. Trabalhou na otimização do sistema de animação da framework, criou vários widgets (iCarousel, fValidator, iMask, iFisheye - a maioria deles já melhorada pela comunidade ou migrada para outras bibliotecas), trabalha profissionalmente com MooTools tanto em client-side como em server-side.

 

Objetivo

Ajudá-lo a fazer a escolha entre esses dois frameworks envolve explicar como eles são diferentes. Vou começar dizendo que ambos são excelentes opções. Você não irá fazer uma má escolha aqui. Ambas os frameworks possuem suas forças e fraquezas, mas, em geral, eles são ótimas escolhas. Existem também outros frameworks dignos de atenção: Dojo, Prototype, YUI, Ext e outros são todos ótimas opções. A escolha de qualquer uma delas está mais relacionada com o seu estilo do que com o que você precisa realizar. Este artigo é focado em MooTools e jQuery, pois, cada vez mais, são os dois frameworks que vejo as pessoas considerando. Finalmente, não estou tentando convencer ninguém a trocar um framework pelo outro. Existem coisas interessantes em ambas sobre as quais você pode aprender. Saiba um pouco mais da motivação que me levou a escrever este artigo no artigo do meu blog Clientcide.

 

Índice

• Os lemas dizem tudo
• A curva de aprendizado e a comunidade
• Para que JavaScript é bom
  • Mais que simplesmente o DOM
  • Herança com JavaScript
  • Auto referência
• MooTools faz o JavaScript mais divertido
• jQuery faz o DOM mais divertido
• Qualquer coisa que você fizer, posso fazer melhor
• MooTools permite que você faça da sua própria maneira
• Encadeamento como um Design pattern
• Reutilizando código com a jQuery
• Reutilizando código com a MooTools
  • MooTools e herança
  • Extendendo e implementando classes
• A hora da decisão
• Discussão

Minify - Diminuindo o carregamento de arquivos em até 70%

Minify é um aplicativo em PHP5 que ajuda você a siga várias das Yahoo!'s Rules for High Performance Web Sites.

Ele combina vários arquivos CSS e Javascript, remove os espaços em branco desnecessários e comentários, e retorna uma codificação gzip em ótimos cabeçalhos de cache client-side.

O projeto é similar ao Yahoo Combo Handler Service , exceto que Minify pode combinar qualquer JS local / arquivos CSS que você precisa para sua página.

setTimeout e setInterval

São duas funções interessantes do Javascript,
com elas podemos definir um intervalo de
tempo que um evento irá acontecer.
A sintaxe das duas funções é idêntica. O que muda é como agem.
Sintaxe:


window.setTimeout(‘funcao()’, intervalo_em_milisegundos);
window.setInterval(‘funcao()’, intervalo_em_milisegundos);


As duas funções irão chamar uma segunda função passada por parâmetro no intervalo determinado também por parâmetro.

Sendo a setTimeout() chamando a função uma única vez. Enquanto a setInterval() chama a função “infinitamente” sempre no mesmo intervalo de tempo.

Instalando o MooTools no seu blog

Hoje eu estava me preparando para fazer um post aqui para falar de uma funcionalidade do mootools e percebi que tinha que instalar-lo no Golpe Mental, mas o blogger não oferece opções (pelo menos não que eu saiba xD ) para instalar bibliotecas externas assim ou enviar um arquivo .js para ser lido e interpretado pelo browser no carregaento da página.

Então fui atrás de uma forma de instalar o mootools aqui, e descobri que a Google disponibiliza uma API com várias bibliotecas Javascript pra ser usadas direto dos servidores deles! (que beleza!!!!)

Capturando erros no Bootstrap com o Zend Framework

O bootstrap é um dos arquivos mais importantes na arquitetura de um sistema, pois toda requisição (seja ela via Ajax ou não) passa por ele, ou seja toda vez que um usuário vai executar uma funcionalidade que chame algum arquivo, vai antes passar pelo bootstrap pra depois ser liberado.

Aproveitando isso podemos capturar alguns erros que acontecem nesse momento, como erros de sessão ou de algum controller ou action que não existe, e trata-los.

Como ?

Aumentando tempo de execução (max_execution_time) do PHP

Em algum momento na vida de programador você vai se deparar com o seguinte erro Maximum execution time of 30 seconds exceeded in ...


Isso acontece porque o script que você está tentando executar esta demorando demais, mais que o limite de tempo de execução configurado. Pode ser por causa de uma consulta sql muito demorada, um ação que executa variadas funções, muitos processos rodando ao mesmo tempo no servidor ou até mesmo "código mal escrito".

O limite default do php para executar um script é de 30 segundos. Mas você pode aumentar esse tempo de acordo com  a sua necessidade.

Adicionando funções em eventos de elementos via Javascript, com e sem Mootools

As vezes precisamos adicionar um evento a um elemento da página depois que ele já foi criado.

Fazer isso com o javascript é muito simples e existem muitas maneiras.

Se você deseja apenas inserir um evento em um elemento html basta fazer o seguinte código:


elemento.onclick = function(){
//aqui você coloca o que a função vai fazer
};
Mas se você deseja adicionar mais de um evento por vez pode fazer usar o addEventListener.

elemento.addEventListener(evento, função, capturar);

Otimizando as palavras-chave (keywords) do seu site com o Goggle Analytics

Umas das maiores preocupações dos proprietários de sites/blogs, é estar bem colocado nos sites de busca. Muitas técnicas de SEO podem ser utilizadas para melhorar o posicionamento do seu site/blog.

A meta-tag "keywords" serve para relacionar palavras-chave ao seu site, ajudando os buscadores á exibir o seu site de acordo com o conteúdo apresentado.

Quem já usa o Google Analytics pode acompanhar quais palavras-chaves estão gerando mais retorno ao seu site e melhorar, ou mudar as que não estão dando o retorno desejado.

Bordas arredondadas com CSS

Com a chegada do CSS3, adicionar bordas arredondadas nos elementos ficou muito simples e pode ser feito usando apenas CSS, sem a necessidade daquele monte de imagens pra gerar as bordas e todos os problemas as dores de cabeça com alinhamento que elas acabam causando.

Basicamente o atributo css que vamos usar é o "border-radius".

Compressão HTTP no servidor Apache usando Deflate

Uma das grandes preocupações na hora de colocar um site no ar é o tempo de carregamento das páginas.
Uma página que demora muito pode ser rejeitada pelos usuários e perder visitas.

Umas das maneiras de diminuir o tempo de carregamento de uma página é comprimindo ela.