Posts tagged Javascript

space-tweet: Buenos tweets vs. Malos tweets en Node, Socket.IO, MooTools

0

Reportado en el blog de Twitter, Jacob Thornton a creado una demostración divertida sobre el sentimiento de los tweet con el clásico Space Invaders.

Jacob buscaba aprender más sobre Node y desarrollo este proyecto utilizando Node.js, Socket.IO, MooTools, y el API de streaming de Twitter.

Node.js – NVM (Node Version Manager)

1

Después de algunos post que tenían como objetivo llamar la atención de Google, volvemos a los temas interesantes. Dando vueltas por algunos sitios sobre Node.js me encuentro con esta utilidad NVM (Node Version Manager) que me resulto muy práctica a la hora de compilar e instalar diferentes versiones de Node.js

Instalación

Para instalarlo debemos estar seguro que disponemos de un compilador de c++ en nuestro sistema. Para OSX, XCode debería funcionar, para Ubuntu, el paquete build-essential es suficiente. También necesitaremos git si vamos a realizar un seguimiento del HEAD del proyecto.

$ git clone git://github.com/creationix/nvm.git ~/.nvm

Luego agregamos las siguientes lineas en nuestro profile de bash:

$ NVM_DIR=$HOME/.nvm
$ . $NVM_DIR/nvm.sh
$ nvm use

La primera linea carga la función nvm en nuestro shell, dejandola disponible como un comando. La segunda linea configura nuestra versión por defecto de node a la última release.

Uso

Para bajar, compilar, instalar y usar la release v0.1.94 release de node, debemos hacer los siguiente:

$ nvm install v0.1.94
$ nvm use v0.1.94

Si deseamos realizar un seguimiento del HEAD, utilizamos el comando clone:

$ nvm clone
$ nvm use HEAD

Cuando deseamos realizar una actualización del código desde el repositorio de node:

$ nvm update

Para ver las diferentes versiones de node que tenemos instaladas vamos a utilizar el comando list:

$ nvm list

Con estos sencillos pasos, estaremos en unos minutos experimentando con está nueva plataforma de desarrollo.

Node.js – Express vs Sinatra Benchmarks

2

Siguiendo con una serie de post referidos a Node.js, vamos a ver a continuación una serie frameworks para Node.js y su performance respecto a sus contrapartes para Ruby.

Comenzamos realizando un benchmark para Express, con resultados realmente sorprendentes! Los números indicados deben tomarse a la ligera, sin embargo, coinciden en afirmar que Express es bastante rápido.

Si estás interesado en realizar un benchmark de tus propias aplicaciones web puedes leer el artículo ApacheBench Gnuplot Graphing Benchmarks.

Todos los benchmark que verás a continuación fueron realizado con ApacheBench, una concurrencia de 50 y realizando 2000 requests. Tené en cuenta que se utilizó Thin para servir Sinatra requests.

Express vs Sinatra

Para los que no conocen Express, es un NodeJS framework inspirado en Sinatra para Ruby. Debajo pueden encontrar los resultados de un benchmark para un típico “Hello World” response, que incluye NodeJS benchmarks sin el overhead de las características provistas por Express:

Express vs Sinatra Benchmark

Express vs Sinatra
(más…)

Node.js – Server-Side JavaScript

5

Si, ya no solamente para los navegadores web. Aunque existan varias implementaciones de javascript, entre ellas Rhino, Flusspferd, Narwhal (el equivalente de JRuby, IronRuby, MRI, etc) la que está tomando mayor tracción es Node.js.

Node.js es un framework en javascript para el desarrollo de aplicaciones web en el lado del servidor. A partir de todas las implementaciones mencionadas, en enero del 2009 Kevin Dangoor se creo el proyecto de CommonJS, con el fin de crear una especificación que cada implementación pueda cumplir y así tener un API I/O en común.

Node.js es un tanto diferente de otras soluciones, porque está orientado al evento en lugar de ser basado en threads. Web servers como Apache están diseñados en base al modelos de thread, porque utilizan un thread/process para cada request entrante. Mientras esto funciona correctamente para muchas aplicaciones, el módelo de threads no escala muy bien con demasiadas conexiones, como las que se necesitan para servir aplicaciones de tiempo real como Friendfeed o Google Wave.

Node.js, usa un modelo de event loop en lugar de threads, de esta forma puede escalar para manejar ciento de miles de conexiones concurrentes. Node.js toma ventaja del hecho de que los servidores pasan la mayoría del tiempo esperando por operaciones de I/O, como leer un file desde el disco, acceder a servicios web externos o esperar para que el upload de un file termine, porque estas operaciones son mucho más lentas que las realizadas en memoria. Todas las operaciones de I/O en Node.js son asincrónicas, de esta forma el server puede continuar procesando request entrantes mientras espera que las operaciones de I/O finalicen. JavaScript esta muy bien preparado para la programación orientada a eventos, porque tiene funciones anónimas y closures que permiten definir callbacks inline, además que los desarrolladores en JavaScript ya conocen como programar de esta forma. Este modelo event-based hace de Node.js muy rápido, y hace que escalar aplicaciones de tiempo real sea muy sencillo.

Paso 1. Instalación
Node.js corre en sistemas tipo Unix, como Mac OS X, Linux, y FreeBSD. Desafortunadamente o no ;) , Windows no está soportado. Vas a necesitar utilizar la terminal para instalar y correr Node.js.

Abre una terminal y corre los siguientes comandos.

$ wget http://github.com/ry/node/tarball/v0.1.99
$ tar -zxvf ry-node-v0.1.99-0-ga620b72.tar.gzls
$ cd ry-node-87230e6
$ ./configure
$ make

(más…)

Ejecutando procesos en paralelo con Javascript

0

El sistema usado en el ejemplo que croczilla.com publica, está desarrollado usando Stratified Javascript (SJS), una implemenetación de Javascript con Javascript O.o. Se trata de una librería multinavegador que nos permite añadir concurrencia a Javascript fácilmente.
La clave está en el uso de tags <script/> de un tipo diferente al que conocemos como text/javascript, usando uno propio se encarga de evaluar el código contenido en él añadiendo una serie de funcionalidades como hold(),resume(), suspend() y la posibilidad de usar concurrencia en Javascript.

Ejemplo

<script type="text/javascript" src="sjs-loader.js"></script>
<script type="text/sjs">
….
function animate(elemname, duration_ms, step_ms) {
 var elem = document.getElementById(elemname);
 var start_time = new Date();
 var x = 0;
 do {
 elem.style.left = x;
 x = (x + 10) % 200;
 hold(step_ms); // Parando la ejecución
 } while (duration_ms > new Date() - start_time);
 }

 function par(a, b) {
 alert("all done");
 }
 // Procesos paralelos
 par(animate("animated_element_1", 10000, 100),
 animate("animated_element_2", 7000, 80));
…
</script>

Como podemos ver, en esta porción de código sacada de una demo de crockzilla.com, usamos hold() para detender la ejecución y usamos el paso de parámetros para comenzar la concurrencia de procesos.
Con los Web Workers a la vuelta de la esquina, estas técnicas nos puedes empezar a mostrar el camino a seguir en unos meses (años). Por el momento, recomendaría usarla con precaución ya que no debemos olvidar que la librería basa su funcionamiento en la evaluación del código, con el coste que esta operación conlleva.

Apache CouchDB: una base de datos NoSQL (Relax)

1

Apache CouchDB

CouchDB, oficalmente Apache CouchDB, es una base de datos orientada a documentos (document-oriented database), también conocido como ‘NoSQL’, que puede ser consultada e indexada usando JavaScript como función MapReduce.

CouchDB ofrece una API (Application Programming Interface) RESTful (Representational State Transfer) en JSON que puede ser accedida vía peticiones HTTP. Hay muchas librerías para casi cualquier lenguaje de programación que facilitan el acceso.

CouchDB está escrito en Erlang, un lenguaje de programación funcional robusto ideal para construir sistemas distribuidos simultáneos, lo que permite un diseño flexible y fácilmente escalable y extensible.

Base de datos documental sin schema

Estamos acostumbrados a que cuando hablamos de base de datos pensemos en el modelo relacional (columna, filas, tablas, relaciones…)  En cambio CouchDB nos ofrece guardar nuestros datos de otra forma. En pocas palabras, para CouchDB solo hay documentos. Todo lo que almacenamos es un documento sin schema, lo cual nos permite guardar juntos documentos con distintos campos dentro de la misma BD.

Estos documentos se almacenan en JSON, un formato ligero, sencillo y cómodo de usar desde cualquier lenguaje. Vamos a ver un típico documento de CouchDB:

{
    "_id" : "234a41170621c326ec63382f846d5764",
    "_rev" : "1-480277b989ff06c4fa87dfd0366677b6",
    "tipo" : "articulo",
    "titulo" : "Esto es una prueba",
    "cuerpo" : "Soy el contenido de un artículo de prueba",
    "tags" : ["cine", "comedia"]
}

El _id sirve para que CouchDB lo distinga de otros documentos y a nosotros nos vale para poder recuperarlo posteriormente. Es un string que puede contener lo que queramos aunque si no ponemos nada CouchDB generará un UUID. ¿Y por que no genera los ids con un autoincremental? Bueno, el uso del UUID nos permite tener un id único UNIVERSALMENTE, lo cual nos será muy útil cuando entremos en el tema de la replicación, pero no adelantemos acontecimientos…

El campo _rev también es especial y sirve para que CouchDB controle la versión del documento. Cada vez que guardamos un cambio en el documento cambia el número de revisión (se incrementa el 1 de antes del – y el resto del número cambia). Esto es útil porque cada vez que intentamos guardar un documento pasamos el numero de la versión que vamos a modificar, de forma que si CouchDB ve que estamos guardando un cambio sobre una revisión antigua da error y no permite continuar.

Después, el resto de campos  podemos poner lo que queramos, siempre que usemos expresiones JSON válidas, como en el ejemplo donde tenemos el atributo tags que es un array de strings. Podría ser un diccionario ({“clave1″: “valor1″, “clave2″:”valor2″}),un número (2), etc…

La parte buena de estar trabajando sin schema es que este sistema se adapta a los cambios en la estructura de los documentos que es necesario almacenar. De esta forma nos podemos despreocupar de lo que vamos metiendo en la base de datos, ya nos preocuparemos cuando tengamos que recuperarlos.

Consultable al estilo MapReduce

CouchDB no nos ofrece un lenguaje tipo SQL para realizar consultas sino que nos ofrece un sistema basado en MapReduce para poder obtener los datos que queramos. ¿Y como funciona esto?  Pues es mas sencillo de lo que parece, se compone de una parte Map una parte Reduce.

Map: Es una función que se ejecuta para cada documento. Esta función recibe como parámetro el propio documento y puede devolver pares de clave-valor. Un función puede devolver 0, 1 ó varios de estos pares para un único documento de entrada. A primera vista esto puede parece muy ineficiente, pero la función sólo se ejecuta una vez para cada documento y va almacenando los resultados en un índice que relaciona claves y valores de forma que en posteriores consultas se ataque sobre este índice. Por supuesto, si alguno de los documentos de nuestra BD se modifica, se vuelve a rehacer el índice (pero sólo para los documentos modificados)

Un ejemplo rápido:

function(doc) {
  for (var i in doc.tags)
   emit(doc.tags[i], doc);
}

Como podemos ver las funciones Map (y las Reduce) se definen en Javascript. CouchDB ofrece una arquitectura pluggable mediante la cual podemos crear estas en nuestro lenguaje favorito (Python, Ruby…).

Esta función devuelve como clave cada uno de los tags y como valor el propio documento. De esta forma ejecutada sobre nuestro doc de ejemplo daría 2 filas: una para “cine”  y otra para “comedia” ambas teniendo como valor el propio documento.

Después sobre este conjunto de resultados podemos  filtrar por clave o bien por un par de claves inicio y fin. De esta forma si queremos sabe todos los artículos que son de cine filtraríamos aquellos que tienen la clave “cine”. Es fácil, ¿no?

Lo bueno es que las claves pueden ser cualquier tipo de datos soportado por JSON como arrays, números, diccionarios… lo cual puede ser útil para realizar consultas más avanzadas.

Reduce: A grandes rasgos esta agrupa los resultados del Map para obtener un número. De esta forma si la parte Map anterior fuera asi:

function(doc) {
  for (var i in doc.tags)
    emit(doc.tags[i], 1);
}

Podemos definir una funcion reduce tal que asi:

function(keys, values)
{
  return sum(values);
}

La función Reduce recibe como entrada todas las claves y todos los valores. Con la funcion sum, proporcionada por CouchDB, vamos acumulando los 1 que devuelve la función map de forma que como resultado de esta obtenemos varias filas con cada uno de los tags como clave y el número de documentos que tienen este tag como valor.

En la nomenclatura de CouchDB un par de funciones MapReduce se llama view (no siendo obligatorio definir la parte reduce).

Accesible por REST

REST nos permite acceder a nuestro datos de una forma muy sencilla a través de URLs. Por ejemplo para recuperar nuestro documento con id  6e1295ed6c29495e54cc05947f18c8af de nuestra BD albums accederíamos a esta URL que nos devuelve el documento JSON correspondiente:

http://localhost:5984/albums/6e1295ed6c29495e54cc05947f18c8af

De forma similar si queremos acceder a una view como la que comentábamos cuando explicábamos el Map y recuperar algún resultado iremos a la URL:

http://localhost:5984/blog/_design/doc/_view/tag?key="cine"

Esta URL quiere decir que estamos accediendo a la BD llama blog, para recuperar un design document (donde se guardan las views dentro de la BD) llamado doc y dentro de este a la view llamada tag. Después como comentábamos antes, dentro de la view queremos recuperar el resultado identificado por la clave cine (es interesante ver como hay que pasarla entre ” ” ya que la clave es un string, uno de los tipos válidos de JSON).

En esta URL obtendríamos un resultado similar a este:

{"total_rows":4,"offset":0,"rows":[
 {
   "id":"9280b03239ca11af9cfedf66b021ae88",
   "key":"cine",
   "value":{"_id":"9280b03239ca11af9cfedf66b021ae88",
                "_rev":"1-0289d70fe05850345fd4e9118934a99b",
                "tags":["cine","comedia"]}
 },
{
   "id":"a92d03ff82289c259c9012f5bfeb639c",
   "key":"cine",
   "value":{"_id":"a92d03ff82289c259c9012f5bfeb639c",
                "_rev":"2-97377eef95764a4dbf107d8142187f53",
                "tags":["cine","drama"]}}
]}

Como podemos ver en key y value tenemos los resultado esperados: el tag y el documento que lo contiene. Aparte CouchDB incluye el id del documento que ha dado lugar a ese resultado (el que entra como parámetro en la función Map). Además se devuelve el numero total de filas devueltas y el offset del resultado.

En vez del parámetro key se le puede pasar a nuestra vista un par de parámetros startkey y endkey para obtener un rango de los resultados que nos interese (p.ej. en una view que devolviera como clave un string representando una fecha).

Replicación integrada

Una funcionalidad relativamente exótica que nos permite que nuestra BD de datos sincronice sus datos de una forma muy sencilla (una simple llama REST la activa) con otra BD remota o local. De este modo podemos tener de una forma sencillísima una o mas réplicas de nuestra BD para implementar arquitecturas de alta disponibilidad o de balanceo de carga.

Si os acordáis de cuando comentábamos  que CouchDB usaba por defecto UUIDs como identificadores de los documentos veréis que al tener varias BD de datos intercambiándose filas esto es indispensable. Pensad que pasaría si tuviéramos 2 o más bases de datos cada una con su autoincremental como id y empezaran a pasarse datos entre ellas ;)

Futon Apache CouchDB

Futon Apache CouchDB

De forma similar, el atributo _rev anteriormente comentado nos permite que CouchDB detecte casos en los que un mismo documento ha sido modificado en varias bases de datos a la vez (cada documento tendria un _rev diferente) .

Si os ha parecido interesante este post podéis probar a seguir la introducción práctica ofrecida en el libro gratuito de CouchDB aquí.

Mu Connect, librería Javascript para conectar con Facebook

0

Mu Connect es una librería JS que nos facilitará la tarea de conectar con Facebook desde nuestras aplicaciones. Al tratarse de una librería en Javascript nos permite visualizar esta conexión como una capa superior a nuestra aplicación ofreciéndola como un extra más y hacer que nuestra aplicación no dependa de ella.

&lt;div id="fb-root"&gt;&lt;/div&gt;
 &lt;script src="http://mu.daaku.org/m.js"&gt;&lt;/script&gt;
 &lt;script&gt;
 // Inicializamos la librería con la API de nuestra Aplicación
 FB.init({ apiKey: '48f06bc570aaf9ed454699ec4fe416df' });

 // Controlamos el login al acceder
 FB.loginStatus(handleSessionResponse);

 // Activamos login
 $('#login').bind('click', function() {
 FB.login(handleSessionResponse);
 });

 // Activamos logout
 $('#logout').bind('click', function() {
 FB.logout(handleSessionResponse);
 });

 // Activamos disconnect
 $('#disconnect').bind('click', function() {
 FB.api({ method: 'Auth.revokeAuthorization' }, function(response) {
 clearDisplay();
 });
 });

 function clearDisplay() {
 $('#user-info').hide('fast');
 }

 // Gestionamos el login
 function handleSessionResponse(response) {
 if (!response.session) {
 clearDisplay();
 return;
 }

 // Preparamos la petición FQL
 FB.api(
 {
 method: 'fql.query',
 query: 'SELECT name, pic FROM profile WHERE id=' + FB.getSession().uid
 },
 function(response) {
 var user = response[0];
 $('#user-info').html('&lt;img src="' + user.pic + '"&gt;' + user.name).show('fast');
 }
 );
 }
 &lt;/script&gt;

En la página nos encontramos con una serie de ejemplos de como usar esta librería con cualquier Framework JS, algo de agradecer y que nos permite integrarla en cualquier aplicación web. Además dispone de una API bien documentada que permite hacer una integración muy completa en unas pocas horas.

FQL

El FQL (Facebook Query Language) es la versión del SQL que Facebook permite usar para realizar consultas una serie de tablas que Facebook ofrece a los desarrolladores de sus bases de datos. Gracias a estas peticiones es posible obtener casi cualquier dato de los usuarios de Facebook con el fin de integrarlos en nuestra aplicación.

FB.api()

FB.api(
  {
    method: 'fql.query',
    query: 'SELECT name FROM profile WHERE id=' + FB.getSession().uid
  },
  function(response) {
    alert(response[0].name);
  }
);

Quizás de todas las funciones que vemos en la API de Mu Connect, esta es la más interesante ya que está pensada para atacar a Facebook mediante FQL y nos procesa la respuesta mediante un callback que nos permitirá trabajar cómodamente con ella.

Firefox 3.6 beta 1 disponible para descargar

2

Hoy Firefox 3.6 Beta 1 ha visto la luz, lo desarrolladores tenemos que frotarnos las manos ante de las novedades que esta nueva versión nos ofrece. Algunas de las que me han parecido más interesantes:

Y esto es solo para ir calentando ya que esta versión tiene alguna mejora y nueva funcionalidad realmente interesante que aunque no esté en esta beta, está previsto que esta versión estable las incorpore:

Tenemos que ser pacientes y no perdernos nada. :D

Fuente: aNieto2K

Inserta tus últimos tweets en tu WordPress

0

La gente de twitter, nos pone más fácil que nunca la integración de su servicio en nuestras páginas web. Para ello, únicamente tendremos que insertar estos dos archivos Javascript al final de nuestro HTML. En WordPress, debería ir (en casi todos los themes) en el fichero footer.php.

&lt;script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&amp;count=5"&gt;&lt;/script&gt;

Estos ficheros ya tienen toda la funcionalidad necesaria para añadir los últimos tweets, únicamente hemos de especificar el nombre del usuario que queremos mostrar y el número de actualizaciones que queremos mostrar.

Solo nos falta especificar el lugar donde estas actualizaciones se visualizarán, para ello, incluiremos en cualquier lugar de nuestro theme (donde queramos que se vean) estas líneas:

&lt;div id="twitter_div"&gt;
 &lt;ul id="twitter_update_list"&gt;
 &lt;li&gt;&amp;nbsp;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;

Sencillo, cómodo para que cualquiera pueda integrarlo en cualquier aplicación web.

Acelarándo la carga de Javascript con eval()

0

En el blog de SproutCore publican un interesante artículo sobre como mejorar el tiempo de carga de nuestras páginas al usando eval(). Es por todos conocidos las anomalías con las que nos encontramos al usar esta función del lenguaje,  pero en algunos casos, puede ayudarnos a mejorar la carga de nuestras páginas.

Okito, nos comenta que la inspiración le llegó al revisar como Gmail gestionaba el Javascript de la página en su versión móvil, usándo un sistema de carga asíncrona que posteriormete es parseada con regexp y evaluada con eval().

En la versión 1.0 de SproutCore han implementado esta técnica y presume una mejora de 8 segundos en una aplicación de prueba sobre Internet Explorer. (más…)

Go to Top