Prototype.js es una biblioteca JavaScript creada en 2005 como parte del soporte AJAX de Ruby on Rails. Proporciona funcionalidades como manipulación e inspección del DOM, gestión de eventos, extensiones a JavaScript y AJAX de alto nivel. Una de sus características diferenciadoras es que añade métodos al DOM para facilitar su manipulación. También incluye funcionalidades como iteradores funcionales, soporte para programación orientada a objetos e implementa un estilo de programación similar a Ruby.

1. Prototype.js
Breve introducción
aitor.name

2. Historia
● Creado en 2005 por Sam Stephenson como
parte del soporte AJAX de Ruby on Rails
● Proyecto externo a Rails pero muy vinculado a
él
● Muy usada por developers Rails
aitor.name

3. Uso real
aitor.name

4. Principales funcionalidades
● Manipulación e inspección del DOM
● Gestión de eventos
● Extensiones a Javascript
● AJAX de alto nivel
aitor.name

5. DOM > Extensión
● Principal característica diferenciadora con otros
frameworks
● Añade métodos (funciones) extra a los nodos
del DOM
● Es automágica en navegadores que soportan
modificar el “prototype” de objetos nativos
| var obj = document.
| getElementById( “id”);
|
| obj.addClassName( “clase”);
aitor.name

6. DOM > Acceso a los elementos
● $(id) → document.getElementById()
| $( “flash”).hide();
● También extiende elementos
| // viejos navegadores (IE6)
| var e = document.
| getElementById( “flash”);
|
| e.hide(); // FAIL
| $( e).hide(); // WIN
aitor.name

7. DOM > Acceso a los elementos
● $$(sel) → document.querySelectorAll()
| // devuelve array de elementos
| var links = $$( “a.ugly”);
|
| for( link in links) {
| link.remove();
| }
aitor.name

8. DOM > Resumen de funcionalidad
● Navegación
| // descendants, siblings, ancestors,
| // previousSiblings ...
● Modificación
| // absolutize, addClassName, remove,
| // insert, update ...
● Estilos
| // setStyle, getStyle, hide, toggle,
| // getDimensions ... aitor.name

9. DOM > Extensiones propias
● Funciones globales (nada nuevo)
| // $$() simplificado
| function $$0( selector) {
| return ( $$( selector))[ 0];
| }
|
| $$0( “#banner img.p0rn”).show();
aitor.name

10. DOM > Extensiones propias
● Extensión del DOM
| Element.addMethods( {
| bordea: function( element, color) {
| element.setStyle( {
| border: "10px solid " + color
| });
| return element; // para encadenar
| }
| });
|
| $( “id”).bordea( “pink”).show();
aitor.name

11. Eventos
● La gestión de eventos es lo más doloroso en el
soporte de múltiples navegadores
● Resumen: todo el mundo lo hace como manda
la W3C, e IE lo hace de otra forma totalmente
diferente (+ pierde memoria en algunos casos)
● Otros pequeños detalles entre navegadores
aitor.name

12. Eventos > Registro
● Event.observe() es la base de la gestión de
eventos
| function activar( event) {
| var element = event.element();
| element.addClassName( “activa”);
| }
|
| $( “bocina”).observe( “click”,
| activar
| );
aitor.name

13. Eventos > Desregistro
● Event.stopObserving() y sus múltiples
personalidades
| // un evento/handler concreto
| $( “buy”).stopObserving( “click”,
| notifica);
|
| // todos los handlers de un evento
| $( “buy”).stopObserving( “click”);
|
| // todos los eventos/handlers
| $( “buy”).stopObserving();
aitor.name

14. Eventos > Propagación
● Event.stop(): 2x1, previene la propagación
del evento y la realización de la acción por
defecto
| $( “comprar”).observe( “click”,
| function( evt) {
| Event.stop( evt);
| }
| });
● Evitamos los poco estéticos “#” al final de las
URLs (por los <a href=”#” ...>)
aitor.name

15. Javascript > Ruby.clone()
● Prototype nació con RoR, es natural que quiera
hacer Javascript lo más similar a Ruby
● Principales características
● Estilo funcional con los iteradores
● Programación OO
● Mejoras al sistema de funciones
aitor.name

16. Javascript > Iteradores
● Característica fundamental de Prototype
● Hace el lenguaje más “funcional” (tipo Lisp o
Haskell)
● Implementado por un “mixin” llamado
Enumerable
● “mixin”: conjunto de métodos (funciones) que
no se usan solos, si no que se incorporan a
otros objetos
● Usos principales: Array, Hash
aitor.name

17. Javascript > Iteradores
● Iterando con each()
| [ “one”, “two”, “three”].each(
| function( msg) {
| alert( msg);
| }
| );
|
| [“one”, “two”, “three”].each(alert);
aitor.name

18. Javascript > Iteradores
● Búsquedas con find() y findAll()
| [ 1, 7, -2, -4, 5].find(
| function(n) { return n < 0;}
| );
| // -2
|
| [ 1, 7, -2, -4, 5].findAll(
| function(n) { return n < 0; }
| );
| // [ -2, -4]
aitor.name

19. Javascript > Iteradores
● Otras funcionalidades
| $$( “#main .warning”).invoke( hide);
|
| [“Erase”,"una",“vez”,“un”,“circo”].
| map( function(s) {
| return s.charAt( 0).toUpperCase();
| });
|
| // ['E', 'U', 'V', 'U', 'C']
aitor.name

20. Javascript > Iteradores
● Hay muchos iteradores que simplifican el
código (una vez aprendidos)
| // all, any, collect, detect, each,
| // eachSlice, entries, every,
| // filter, find, findAll, grep,
| // inGroupsOf, include, inject,
| // inspect, invoke, map, max, min,
| // parition, pluck, reject, select,
| // size, some, sortBy, zip
aitor.name

21. Javascript > OOP
● Javascript es un lenguaje OO basado en
prototipos
● Esto es muy útil, pero el resto del mundo usa
clases
● Prototype ofrece extensiones para implementar
algo que se parece a classes OOP
● Como todo en Prototype, con cierto sabor a
Ruby
aitor.name

22. Javascript > OOP > Crear clases
| var Person = Class.create( {
| initialize: function(name) {
| this.name = name;
| },
| say: function(message) {
| return this.name + ': ' +
| message;
| }
| });
|
| var paris = new Person( “Paris H”);
| paris.say( “uhhh”);
|
| // “Paris H: uhhh” aitor.name

23. Javascript > OOP > Extender clases
| var Pirate = Class.create(Person, {
| say: function( $super, message) {
| return $super( message) +
| “, yarr!”;
| }
| });
|
| var john = new Pirate(“Long John”);
| john.say( “ahoy matey”);
|
| // "Long John: ahoy matey, yarr!"
aitor.name

24. Javascript > OOP > Mixins
| // base class
| var IceCream = Class.create( {...});
|
| // mixins
| var Cookie = {...},
| Cream = {...};
|
| var häagenDaz = Class.create(
| IceCream,
| Cookie, Cream, {
| }
| );
aitor.name

25. Javascript > function
● En Javascript las funciones son “first-class”:
son objetos en sí mismas
● Como tal tienen propiedades+métodos y se
pueden manejar como otros objetos
aitor.name

26. Javascript > function > bind
● Fija la función a un contexto de forma que al
ser llamada nos aseguramos de que “this” hace
referencia a ese contexto
● Puede parecer un poco complejo al principio
pero es muy útil
aitor.name

27. Javascript > function > bind
| function message() {
| return "Head and " + this;
| }
|
| var human = message.bind( "body");
| human(); // "Head and body"
|
| var mrPotato = message.bind("legs");
| mrPotato(); // "Head and legs"
aitor.name

28. Javascript > function > bind
● Especialmente útil en gestión de eventos
| var AlertOnClick = Class.create( {
| initialize: function( msg) {
| this.msg = msg;
| },
| handleClick: function( event) {
| alert( this.msg);
| }
| });
aitor.name

29. Javascript > function > bind
| var myalert = new AlertOnClick(
| "Clicked!");
|
| $( “foo”).observe( “click”,
| myalert.handleClick
| ); // FAIL ( “this” es invalido)
|
| $( “bar”).observe( “click”,
| myalert.handleClick.
| bind( myalert)
| ); // WIN ( “this” == objeto)
aitor.name

30. AJAX
● La clase Ajax.Request permite realizar
peticiones AJAX en una forma OO
| new Ajax.Request( "/your/url", {
| onSuccess: function( response) {
| // handle the response content...
| },
| onFailure: function( response) {
| // handle error
| }
| });
aitor.name

31. AJAX
● Hay diferentes tipos de callbacks
| // onCreate, onLoading, onLoaded,
| // onException, onComplete, on{XYZ}
| // ...
● Se puede configurar la petición
| // asynchronous, contentType,
| // method, parameters, postBody,
| // requestHeaders, sanitizeJSON ...
aitor.name

32. UI + FX
● Prototype se centra en las funcionalidades
“core” y no ofrece soporte para temas de
interfaz (widgets/efectos)
● Esta parte está implementada por la librería
Script.aculo.us, la cual hace uso de Prototype
● Script.aculo.us ofrece animaciones, soporte
drag & drop y algo de widgets
● La nueva versión 2.0 se llama Scripty2
(reescrita desde cero: muchas mejoras)
aitor.name

33. Otras funcionalidades
● Utilidades para trabajar con formularios
● Muchas extensiones a los tipos de datos
nativos de Javascript (Array, Hash, Number,
Object, String, RegExp...)
● Creación de nuevos “tipos de datos” como
ObjectRange
aitor.name

34. Futuro
● Extender el DOM parecía una buena idea
● La experiencia a demostrado que fue un error
● Hay muchos problemas con la extensión del
DOM
● Bajo rendimiento en navegadores con un DOM no
fácilmente extendible (IE6)
● El DOM de IE es un desastre
● Bugs en las implementaciones del DOM
● Colisiones con los nombres de métodos/atributos
(→ getElementByClassName)
aitor.name

35. Futuro
● Prototype 2.0 usará la misma técnica que
jQuery: wrappers de objetos
| // prototype
| [ 1, 2, 3].each( function( e) {
| console.log( e);
| });
| // jquery
| $.each( [ 1, 2, 3], function(i,e) {
| console.log( e);
| });
● Incompatibilidad total con Prototype 1 aitor.name