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.

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.

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…)

JavascriptMVC 2.0 ha visto la luz

0

Uno de los patrones de desarrollo más extendidos en los diferentes lenguajes de programación es el conocido como MVC (Modelo Vista Controlador). Este modelo nos permite separar fácilmente la lógica de negocio de la capa cliente o página web.

MVCMVC
(Ver Imagen)

En Javascript tambien podemos hacer uso de este patrón con JavascriptMVC, un framework desarollado por Justin B. Meyer y Brian Moschel y que pretende ofrecer las ventajas que este patrón nos puede llegar a aportar.

//Instead of:
$(function(){
 $('#tasks').click(someCallbackFunction1)
 $('#tasks .task').click(someCallbackFunction2)
 $('#tasks .task .delete').click(someCallbackFunction3)
});

//do this
$.Controller.extend('TasksController',{
 'click': function(){...},
 '.task click' : function(){...},
 '.task .delete' : function(){...}
})
$().tasks_controller();

Entre las mejoras que nos encontramos en esta última versió, nos encontramos con que jQuery pasa a formar parte del core del proyecto y se ha implementado una muy interesante integración con Selenium para las pruebas unitarias y algunas cosas más.

Go to Top