Prototype.js - Tutorial em 5minutos (ou mais =D)

  • publicado 14/11/2012 22:51

O Prototype.js é um daqueles frameworks de hipster que já fez muito, MUITO sucesso no passado, mas que hoje está meio abandonado, seja por devs interessados em continuar no seu desenvolvimento, seja pelos meros mortais que precisam de um framework javascript dia-a-dia. Eu sou um pouco dos dois. Para cliente avulso, não tem para onde fugir. Você precisa usar o Jquery. Precisa? Sim, precisa. Em trabalhos avulsos, presupõe-se que outras pessoas vão ter que trabalhar em cima do que você deixou, no futuro. Isso quer dizer que quanto mais mainstream são as ferramentas que você está utilizando, mais provável é de que o próximo dev já conheça a tecnologia e possa continuar o seu trabalho sem problemas. No máximo, dá para esticar um pouco e utilizar o Mootools ou o gorducho do YUI, que também são ótimos frameworks. Mas... mas... quando você está desenvolvendo um projeto pessoal, ou está exercendo seu poder de escolha (sempre com consciência), dá para inovar um pouco e colocar na mesa (aka SCV) algo diferente, tipo o prototype (para os íntimos).

E o que tem de bom?

Ok, estou considerando utilizar o prototype.js, mas, o que ele tem de bom? Ora, várias coisas.

Primeiramente: o prototype.js é dev friendly. Estruturas básicas como classes e bibliotecas de manipulação de strings estão lá, disponíveis, sem a necessidade de qualquer "magia negra" para integrar tudo. Para quem escreve scripts javascript "server-side" isso já é uma evolução, pois o programador não necessita sair de sua zona de conforto.

Por conseguinte: o prototype.js é rápido, MUITO rápido. Em testes com o slickspeed (versão feita com PythonFlask), é possível vê-lo sempre entre as duas bibliotecas mais rápidas, usualmente em primeiro lugar.

E tem mais: a biblioteca é bem enxuta. A biblioteca inteira, via gzip, tem aproximadamente 28k. Nada mal hã?

Está bom demais para ser verdade...

Pois é, a biblioteca também apresenta alguns pontos baixos. Há poucos desenvolvedores comprometidos com o projeto (parece que só 1 cara); a comunidade é pequena e pouco disponível; há poucas bibliotecas disponíveis, se comparadas a outras bibliotecas (aka: jquery); pouca gente sabe usar o Prototype.js; quem trabalha com JQuery não é um povo lá muito disposto a aprender uma nova biblioteca. Problemas pesados, que implicam na fria avaliação, ao começar-se um novo projeto com essa biblioteca. Em todo caso, esta postagem (que já está bem longa) é um tutorial. Ditas as apresentações, vamos ao B A BÁ.

Tutorial

Ter o Prototype.js disponível na sua página web é muito fácil utilizando o CDN do google. Colocando a seguinte tag no [HTML_REMOVED] da sua página html já resolve. Vejamos um exemplo:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Eu sou um exemplo</title>
 <script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
 <script type="text/javascript">
  document.observe("dom:loaded", function() {
    // espera o documento carregar para executar a função.
  });
 </script>
</head>
<body>
 <h1>Olá mundo</h1>
 <p>Oi pessoal. Eu sou o texto exemplo do nosso tutorial. <strong>Amem-me!</strong></p>
 <span>Eu sei o que você fez no verão passado!</span>
 <br />
 <form>
 <label for="input_nome">Qual o seu nome?</label> <input id="input_nome" />
 <p><b>Quais são seus gostos?</b></p>
 <input class="gosto" name="field_gosto" />
 <input class="gosto" name="field_gosto" />
 <input class="gosto" name="field_gosto" />
 <input type="submit" value="Enviar" />
 </form>
</body>
</html>

Facinho, não? Agora, por onde começar... comecemos mostrando como fazer buscas na página utilizando o prototype.

Buscando conteúdo

Buscar conteúdo com prototype lembra muito o Mootools, pois existem as funções $ e $$, onde $ serve para buscas via id e $$ serve para buscas utilizando seletores css. No nosso exemplo acima, as seguintes buscas seriam possíveis:

$('input_name');  // me traga o elemento cujo id é 'input_name'
$$('input');  // me traga todos os elementos input do documento

// me traga todos os elementos input onde o atributo "name" é valorado como "field_gosto"
$$('input[name=field_gosto]');

// me traga todos os elementos com a classe gosto
$$('input.gosto');  // ou $$('.gosto'), que, no caso, são equivalentes

Manipulando elementos

Manipular elementos é a atividade principal de alguém que trabalha com javascript para web, client-side. Esta atividade também é bem tranquila com o prototype, que segue a design pattern de encapsulamento do java, com gets e sets. Vejamos:

$('id_do_elemento').setStyle({'opacity': 1.0});
$('id_do_elemento').getStyle('opacity'); // 1.0
$('id_do_elemento').addClassname('batata');
$('id_do_elemento').hassClassname('batata'); // true
$('id_do_elemento').writeAttribute('name', 'legal'); 
// ou $('id_do_elemento').writeAttribute({name: 'legal'})
$('id_do_elemento').hasAttribute('name'); // true

Referência da api de manipulação de elementos disponível neste link.

Classes

As classes do prototype são um dos recursos mais legais da biblioteca, com direito a herança e tudo! Vejamos alguns exemplos adaptados da página oficial do prototype.js.

// propriedades são passadas diretamente para o método `create`
var Pessoa = Class.create({
  initialize: function(nome) {
    this.nome = nome;
  },
  fala: function(msg) {
    return this.nome + ': ' + msg;
  }
});

// quando criando uma subclasse, lembre de passar a classe pai como argumento
var Pirata = Class.create(Pessoa, {
  // redefine o método fala
  fala: function($super, msg) {
    return $super(msg) + ', yarr!';
  }
});

var john = new Pirata('Johnny Depp');
john.fala('falem, marujos');

Referência da api de manipulação de classes disponível neste link.

Strings

Não é sempre que se precisa trabalhar com strings em javascript, mas sempre que se precisa, espere uma dor de cabeça de leve. O tipo padrão de strings do javascript é bastante pobre no quesito api, havendo apenas alguns poucos métodos bem básicos à disposição do dev aventureiro. O prototype tenta contornar esta situação através de extensões do tipo String, onde todas aquelas funções charmosas das quais você precisa realmente estão lá. Vejamos alguns exemplos:

'Oi pessoal'.capitalize(); // OI PESSOAL
'   '.blank(); // true
'a'.blank(); // false
''.empty(); // true
'   '.empty(); // false
'facebook'.endsWith('book'); // true

Referência da api de manipulação de strings disponível neste link.

Number

O prototype também estende os tipos numéricos com algumas funções úteis e alguns wrappers em cima do objeto Math. Vejamos alguns exemplos:

(-10).abs(); // 10
(5.5).ceil(); // 6
(5.5).floor(); // 5
(5.4).round(); // 5
(5.5).round(); // 6
(5.6).round(); // 6
1.succ(); // 2
(10).toColorPart() + (50).toColorPart() + (12).toColorPart(); // "0a320c"

A referência para as extensões de números do prototype estão disponíveis neste link.

Ufa!

Bem, é isso. Foi abordado aqui apenas uma pequena parte do que o prototype.js tem a oferecer. Em caso de dúvidas, só escrever algo nos comentários. ; )