Javascript

Hacer una consulta MongoDB comprobando que un atributo array no esté vacío

En el ejemplo de obtener resultados aleatorios en una consulta de MongoDB y mongoose utilizaba un where un tanto especial. Este where es para comprobar que un atributo de tipo array que está contenido en el modelo tiene datos.

Primero definamos un ejemplo de modelo simple con el que vamos a trabajar. Lo detallo en formato JSON para no anclarnos a un entorno:

{
  name: "Nombre",
  code: "Código",
  screenshots: [],
  description: "Descripción"
}

Ahora con el modelo definido veamos como utilizarlo. Para ello debemos fijarnos en la sentencia where que vamos a utilizar.

[code lang=»json»]{ screenshots: {$exists: true, $not: {$size: 0}} }[/code]

En este where, sobre screenshots realizamos 2 comprobaciones. La primera comprobación es utilizar «$exists: true» donde indicamos que la propiedad necesariamente debe existir. Recordemos en las bases de datos de documentos como MongoDB no necesariamente deben coincidir todos los modelos en una colección (tabla) de la base de datos.

Lo segundo que comprobamos es «$not» negamos que el tamaño del array sea 0 o lo que es lo mismo «$size: 0», de esta forma, le pedimos a MongoDB que nos de solo modelos que tengan la propiedad screenshots y que el tamaño de screenshots sea mayor de 0.

Ahora volvamos a ver el ejemplo que usamos con mongoose.

var where = { screenshots: {$exists: true, $not: {$size: 0}} };

mongooseGameModel.count().where(where).exec(function(err, gameCount) {
  var rand = Math.floor(Math.random() * gameCount);

  mongooseGameModel.findOne().where(where).skip(rand).populate('developer').exec(function(err, game) {
    res.locals.randomGame = game;
    next();
  });
});

En este ejemplo utilizando mongoose contra MongoDB obtenemos un juego aleatorio de un listado que cumpla la condición de que screenshots no esté vacío.

Obtener registros aleatorios con MongoDB

En una base de datos NoSQL como es MongoDB nos asaltan dudas constantemente. En este caso, ¿Cómo obtener un único registro aleatorio? A continuación os detallo como obtener este dato.

Para obtener un registro aleatorio debemos de realizar una consulta de un único elemento pero saltando los x primeros registros. De esta forma obtendremos el resultado. Nada mas fácil que verlo con un ejemplo. Para ello pondré 2 ejemplos uno directamente haciendo la consulta sobre MongoDB y otro utilizando ODM de Mongoose.

En MongoDB se haría de la siguiente forma.

[code lang=»javascript»]db.games.find().limit(-1).skip( _rand() * db.games.count() )[/code]

Si tenemos una tabla games con un listado de juegos y queremos seleccionar un juego aleatorio, lo podríamos hacer así. Seleccionamos todos los juegos, establecemos el limit a -1 y saltamos un aleatorio.

Otro método sería utilizando mongoose, este ya solo como programación.

mongooseModel.count().exec(function(err, resultCount) {
  var rand = Math.floor(Math.random() *resultCount);
  mongooseModel.findOne().skip(rand).exec(function(err, result) {
    console.log(result);
  });
});

Como podemos ver, es un lo mismo que hacerlo directamente sobre MongoDB pero añadiendo algo de complejidad en el proceso por las llamadas asíncronas. En primer lugar deberemos obtener el número de resultados, una vez los tengamos, podemos calcular el aleatorio y obtener con findOne el resultado que queremos.

Ya para terminar un buen ejemplo de como utilizar este código, es utilizando where para filtrar los resultados, que deberemos aplicar tanto a la hora de obtener el contador como cuando buscamos el resultado, ya que si no lo aplicamos en conjunto, puede fallarnos todo el código.

var where = { screenshots: {$exists: true, $not: {$size: 0}} };

mongooseGameModel.count().where(where).exec(function(err, gameCount) {
  var rand = Math.floor(Math.random() * gameCount);

  mongooseGameModel.findOne().where(where).skip(rand).populate('developer').exec(function(err, game) {
    res.locals.randomGame = game;
    next();
  });
});
nodeserver logo

Montar un servidor para node.js usando nodeserver

Llevo tiempo trabajando con node.js y la verdad es que es el entorno donde mas cómodo me siento. El problema que tiene node.js es que cuando buscas como montar un servidor, no tienes ejemplos reales, solo como escuchar el puerto 80.

Para mis webs uso un servidor de desarrollo propio llamado nodeserver que podemos encontrar tanto en github como en npm. Este servidor tiene varias ventajas fundamentales:

  • Al ser un desarrollo propio, me permite fácilmente ir añadiendo nuevas funcionalidades según las necesito.
  • Tiene soporte para proxy reverso, por ejemplo tener las webs en un servidor interno sin acceso público y traer las conexiones.
  • Soporte de gestión de procesos para node.js, por lo que los .js de node.js que vamos a arrancar como servidores, podemos arrancarlos automáticamente desde el servidor, así como pararlos o reiniciarlos.
  • Tiene soporte para páginas estáticas en html, con un listado de mime types en desarrollo. Esto nos permite por ejemplo, crear un sistema cookieless para un CDN sin un backend, solo configurando el servidor.
  • Soporte para páginas en PHP. Aunque aún no soporta elementos como mod_rewrite, en un futuro lo tendrá, por lo que en el típico VPS para gestionar pequeños proyectos, podemos prescindir de un NGINX o Apache y utilizar nodeserver para gestionar nuestras webs.

Vamos a ver como se instala y configura este servidor. Para esto, primero debemos tener instalado en nuestro sistema node.js, cualquier versión o io.js. Este servidor funciona desde la versión 0.10 de node.js, aunque lo mas recomendable es utilizar las últimas versiones, 4.0 o superiores.

Con nodejs ya instaldo, debemos instalar por npm nodeserver

[code lang=»bash»]$ sudo npm install nodeserver -g[/code]

De momento nodeserver solo cuenta con script de instalación para centos pero se irá ampliando a otros sistemas, esto no quiere decir que no se pueda utilizar, no se instalará como demonio del sistema.

[code lang=»bash»]$ sudo nodeserver install centos[/code]

Una vez instalado el script, que no es obligatorio, deberemos configurar el servidor. Para ello crearemos un json de configuración en /etc/nodeserver/nodeserver.config.

{
 "nodeserver": {
  "admin": {
   "active": [true|false],
   "port": admin-port-number,
   "user": "user-for-admin",
   "password": "hash-password"
  }
 },
 "sites": [{
  "name": "website name",
  "type": "node|cgi",
  "bindings": [
   "example.com:80",
   "www.example.com:80",
   "otherbindings:8080",
  ],
  "port": "internal port number for the project, do not repeat it. Only for node"
  "script": "absolute script for server.js for node or doc_root for php (cgi)",
  "security": {
   "certs": {
    "key": "/absolutepath/keycert.key",
    "cert": "/absolutepath/cert.cert",
    "ca": ["/absolutepath/ca.cert"]
   },
   "bindings": [
    "securehostforhttps.com:443",
    "www.securehostforhttps.com:443"
   ]
  },
 }, {
  "name": "php website",
  "type": "cgi",
  "bindings": [
   "myphpsite.com:80"
  ],
  "script": "/var/www/phpsite"
 }, {
  "name": "standar nodejs site",
  "type": "node",
  "bindings": [
   "standarnodejs.com:80"
  ],
  "port": "10001",
  "script": "/var/www/nodejs1/server.js"
 }, {
  "name": "secure nodejs site",
  "type": "node",
  "bindings": [
   "securenodejs.com:80"
  ],
  "port": "10002",
  "security": {
   "certs": {
    "key": "/absolutepath/keycert.key",
    "cert": "/absolutepath/cert.cert",
    "ca": ["/absolutepath/ca.cert"]
   },
   "bindings": [
    "securenodejs.com:443"
   ]
  },
  "script": "/var/www/nodejs2/server.js"
 }]
}

El json de configuración se divide en 2 keys: una de administración y otra de sitios web. La parte de administración indicamos si queremos activarlo o no, el puerto de escucha via web, usuario y contraseña. La contraseña viene en formato hash y podemos generar una utilizando el comando:

[code lang=»bash»]$ nodeserver password micontraseña[/code]

El resultado deberemos utilizarlo en la configuración de password.

Por otro lado tenemos los sites. Los sites tienen como configuración un nombre, un tipo cgi para estáticosphp o node para webs en node.js. Un array de bindings indicará dominio y puerto que vamos a utilizar de escucha. En los bindings podemos incluir patrones regulares, por ejemplo, para cuando tenemos subdominios que queremos gestionar desde un mismo backend. Un ejemplo sería «.+\.midominio.com:80» para capturar todos los subdominios de midominio.com en el puerto 80. El atributo port solo se utilizar en node.js y es un puerto interno de escucha para servidores node.js. El atributo script utiliza para node.js la ruta del script de arranque del proyecto o el document_root para webs en php o estáticas.

Una vez todo configurado, ya podemos arrancar y probar nuestro servidor.

[code lang=»bash»]$ sudo nodeserver start[/code]

Os animo a probarlo y a comentar vuestras experiencias, mejoras, etc. Esto es un ejemplo, de como prepararlo en un entorno real, pero se puede configurar nodeserver como servidor de desarrollo, tener una escucha con el parametro start-loop en lugar de start.

Tabla de codificaciones de caracteres entre ANSI, UTF-8, Javascript, HTML

ene-virguilillaCuando hacemos una página web en utf8, al escribir una cadena de texto en javascript que contenga acentos, tildes, eñes, signos de interrogación y demás caracteres considerados especiales, se pintara de una forma extraña en el html. Esto es porque javascript tiene su propio sistema de codificación, al igual que el html. A continuación os dejo una tabla con los principales caracteres que se utilizan, ya que es útil tenerlos a mano para poder escribirlos:

ANSI UTF-8 JAVASCRIPT HTML
Á Á u00c1 Á
á á u00e1 á
É Ã‰ u00c9 É
é é u00e9 é
Í Ã u00cd Í
í í u00ed í
Ó Ã“ u00d3 Ó
ó ó u00f3 ó
Ú Ãš u00da Ú
ú ú u00fa ú
Ñ Ã‘ u00d1 Ñ
ñ ñ u00f1 ñ
¿ ¿ u00bf ¿

Y después de esta tabla a modo de apunte, os dejo la tabla completa de codificación de caracteres como eñes, acentos, tildes y demás caracteres entre ANSI, UTF8, Javascript y HTML:

ANSI UTF-8 JAVASCRIPT HTML
 u00a0  
¡ ¡ u00a1 ¡
¢ ¢ u00a2 ¢
£ £ u00a3 £
¤ ¤ u00a4 ¤
¥ Â¥ u00a5 ¥
¦ ¦ u00a6 ¦
§ § u00a7 §
¨ ¨ u00a8 ¨
© © u00a9 ©
ª ª u00aa ª
« « u00ab «
¬ ¬ u00ac ¬
­ ­ u00ad ­
® ® u00ae ®
¯ ¯ u00af ¯
° ° u00b0 °
± ± u00b1 ±
² ² u00b2 ²
³ ³ u00b3 ³
´ ´ u00b4 ´
µ µ u00b5 µ
¶ u00b6 ¶
· · u00b7 ·
¸ ¸ u00b8 ¸
¹ ¹ u00b9 ¹
º º u00ba º
» » u00bb »
¼ ¼ u00bc ¼
½ ½ u00bd ½
¾ ¾ u00be ¾
¿ ¿ u00bf ¿
À À u00c0 À
Á Á u00c1 Á
 Â u00c2 Â
à Ã u00c3 Ã
Ä Ã„ u00c4 Ä
Å Ã… u00c5 Å
Æ Ã† u00c6 Æ
Ç Ã‡ u00c7 Ç
È Ãˆ u00c8 È
É Ã‰ u00c9 É
Ê ÃŠ u00ca Ê
Ë Ã‹ u00cb Ë
Ì ÃŒ u00cc Ì
Í Ã u00cd Í
Î ÃŽ u00ce Î
Ï Ã u00cf Ï
РÐ u00d0 Ð
Ñ Ã‘ u00d1 Ñ
Ò Ã’ u00d2 Ò
Ó Ã“ u00d3 Ó
Ô Ã” u00d4 Ô
Õ Ã• u00d5 Õ
Ö Ã– u00d6 Ö
× Ã— u00d7 ×
Ø Ã˜ u00d8 Ø
٠Ù u00d9 Ù
Ú Ãš u00da Ú
Û Ã› u00db Û
Ü Ãœ u00dc Ü
Ý Ã u00dd Ý
Þ Ãž u00de Þ
ß ÃŸ u00df ß
à Ã u00e0 à
á á u00e1 á
â â u00e2 â
ã ã u00e3 ã
ä ä u00e4 ä
å Ã¥ u00e5 å
æ æ u00e6 æ
ç ç u00e7 ç
è è u00e8 è
é é u00e9 é
ê ê u00ea ê
ë ë u00eb ë
ì ì u00ec ì
í í u00ed í
î î u00ee î
ï ï u00ef ï
ð ð u00f0 ð
ñ ñ u00f1 ñ
ò ò u00f2 ò
ó ó u00f3 ó
ô ô u00f4 ô
õ õ u00f5 õ
ö ö u00f6 ö
÷ ÷ u00f7 ÷
ø ø u00f8 ø
ù ù u00f9 ù
ú ú u00fa ú
û û u00fb û
ü ü u00fc ü
ý ý u00fd ý
þ þ u00fe þ
ÿ ÿ u00ff ÿ

Espero que os sirva de ayuda tanto como a mi.

W2S web ide

w2sLlevo una temporada sin escribir en el blog. El motivo es porque he estado trabajando en un proyecto, que aún no está terminado. El proyecto en concreto se llama w2s y se trata de un ide de desarrollo web que esta ahora mismo en una fase alfa pero completamente funcional. w2s es un entorno de trabajo, con el que poder desarrollar en multitud de lenguajes de programación. Actualmente aunque falta mucho por desarrollar, ya permite programar en c#, php, html, javascript y css.

¿Por qué crear un ide completo de desarrollo? Muy sencillo, porque no hay nada similar. En mi caso, programo en C#, pero utilizo OSX, a veces programo en PHP y otras veces en HTML y Javascript con Phonegap. El problema está en que para programar en C# para OSX solo se puede con Mono, que está muy retrasado con las nuevas versiones de .Net. En Windows ocurre lo mismo, para C# tienes el Visual Studio, que es muy bueno para C# pero no soporta PHP ni webs unicamente en HTML y Javascript. Luego existe el problema de trabajar en distintos sitios, el trabajo, en casa, el ordenador de mi mujer, incluso en el ipad. Es por estas cosas por las que un día decidí crear w2s, para tener un repositorio centralizado donde poder trabajar, con un ide de desarrollo online que me permitiese en una misma aplicación desarrollar en C#, PHP, Javascript, HTML5, CSS y poco a poco mas y mas lenguajes.

Cada día uso w2s en mas y mas desarrollos, entre los cuales cabe destacar el propio w2s. Entre las funcionalidades mas destacadas se encuentran:

  • Editor de código en C#, PHP, Javascript, HTML5, CSS3.
  • Intellisense o autocompletado de código para HTML5, Javascript y estoy trabajando en CSS3 y C#.
  • Avisador de errores en el código de Javascript.
  • Compilador de C#.
  • Poder subir archivos arrastrandolos desde el escritorio
  • Poder descargar el proyecto completo en un zip.
  • Cuenta de ftp
  • Un giga de espacio ampliable para almacenar proyectos
  • Tester web para probar la web como un pc, ipad, iphone4, iphone5

Ire publicando nuevas actualizaciones con cambios que vaya realizando. Y como siempre, quien quiera participar en la fase alfa o en posteriores versiones beta privada y beta publica, solo tiene que dejar un mensaje.

Ordenar los bundles de ASP.Net MVC

Si alguna vez habeis intentado hacer un gran proyecto con ASP.Net MVC, vereis que utilizar los bundles para incluir el código tanto javascript (ScriptBundle) como css (StyleBundle) en nuestra página es muy útil ya que nos ofrece diferentes formas de tratar los archivos a incluir, uno de mis favoritos es unificar todo el bundle compilado y minimizado. Todo parece un camino de rosas, poder agrupar todos nuestros css y javascript en una sola linea incluyendo archivos o directorios.

No todo es maravilloso y aunque Microsoft suele hacer las cosas bastante bien, siempre se deja algún extraño por el camino. En este caso el extraño es el orden en que se cargan los archivos en la página usando Bundles. Cuando tenemos multitud de archivos javascript o css por ejemplo, se da el caso en que no todos los archivos se cargan en el orden en que lo incluimos. No se si tiene algo que ver mezclar inclusiones por archivos y directorios a la vez, pero no mantiene el orden igual. Es una locura, puesto que aparentemente todo sigue un orden, pero cuando tenemos una docena de archivos javascript o css, a veces hay alguno que se descoloca. A mi me pasó con backbone y underscore, que como sabreis quien haya trabajado con estas librerias, backbone requiere de underscore y si no esta incluido previamente provoca un error.

Lo primero que tenemos que hacer es crear una nueva clase para hacer el IBundleOrderer.OrderFiles que ordene los bundles, en nuestro caso, realmente no queremos que ordene sino que los muestre en el orden en que los escribimos. La clase en cuestión sería:

public class UserDefinedBundleOrderer : IBundleOrderer {
    public virtual IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files) {
        return files;
    }
}

Una vez tengamos nuestra clase IBundleOrderer, solo deberemos indicar a nuestro bundle, bien sea un ScriptBundle, un StyleBundle o un Bundle genérico, que utilice como Orderer nuestra clase que se encarga de la «ordenación» o en este caso, dejar las cosas como están. Lo haremos con el Bundle.Orderer como se muestra en el ejemplo:

myBundle.Orderer = new UserDefinedBundleOrderer();

Y ahora os dejo un ejemplo real sacado directamente de un proyecto propio. Así quedaría todo el archivo completo. Podemos ver como el BundleConfig donde definimos la carga de Bundles, tenemos un StyleBundle que cargará nuestros css, mientras que el ScriptBundle cargará nuestras librerías javascript y es a esta clase donde aplicamos nuestra clase para la ordenación de Bundles.

using System.Collections.Generic;
using System.IO;
using System.Web;
using System.Web.Optimization;

namespace MyWeb {
  public class BundleConfig {
    public static void RegisterBundles(BundleCollection bundles) {
      BundleTable.EnableOptimizations = true;

      bundles.Add(new StyleBundle("~/assets/css").Include(
        "~/Content/css/dark-hive/jquery-ui.css",
        "~/Content/css/bootstrap.css",
        "~/Content/css/site.css"
      ));

      ScriptBundle libs = new ScriptBundle("~/assets/libs");
      libs.Orderer = new UserDefinedBundleOrderer();
      libs.Include(
        "~/Scripts/libs/jquery-1.8.2.js",
        "~/Scripts/libs/jquery-ui-1.8.24.js",
        "~/Scripts/libs/jquery-ui.datepicker.es.js", 
        "~/Scripts/libs/underscore-1.4.1.js",
        "~/Scripts/libs/backbone-0.9.2.js",

      bundles.Add(libs);
    }
  }

  public class UserDefinedBundleOrderer : IBundleOrderer {
    public virtual IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files) {
      return files;
    }
  }
}

Espero que os sirva de ayuda.

Video sobre el jQueryIO acerca de buenas practicas con jQuery

El otro día tuve la suerte de estar en el jQueryIO junto a Miguel Angel Alvarez de desarrolloweb.com y Quique Fernández. Hicimos una pequeña charla hablando un poco sobre buenas practicas a la hora de trabajar con jQuery y como mejorar el rendimiento de nuestras aplicaciones web.

Una parte de lo que se habló, esta publicada en la web en algunos artículos como: Guía de buenas prácticas para aumentar el rendimiento de jQuery o Selectores dobles con JQuery, aumentando el rendimiento de JQuery

Os dejo el video de la charla para quien quiera echarle un vistazo y deje sus opiniones:

Introducción a RaphaelJS

RaphaelJS es una librería de javascript para desarrollar gráficos y animaciones vectoriales en SVG y VML. ¿Qué es SVG? ¿Por qué vamos a utilizar gráficos vectoriales? ¿Para qué utilizar una librería para trabajar con SVG? Todas estas preguntas son las que debemos comprender antes de empezar a trabajar.

Gráficos Vectoriales Escalables o abreviado del ingles SVG (Scalable Vector Graphics) es un estandar propuesto en el año 2001 por el W3C para estandarizar los gráficos vectoriales. Allá por el año 1998, se presentaron 2 propuestas de gráficos vectoriales, por un lado se presento PGML por parte de Adobe, IBM, Netscape (Mozilla y Firefox) y Sun (Java, ahora parte de Oracle). Por otra parte se presento VML que tuvo más éxito por parte de Autodesk (creadores de Autocad), Macromedia (creadores de flash y posteriormente comprado por Adobe) y Microsoft. Normalmente cuando se hacen varias propuestas de este estilo al W3C, se acaba decantando por una en particular, pero en este caso, se optó por el camino del medio y el W3C propuso SVG que no es mas que la mezcla de VML + PGML.

Con SVG se crea un documento XML que puede ser utilizado tanto en un archivo independiente con extension *.SVG como embebido dentro de una página web al ser un XML y puede ser manipulado con javascriptSVG tiene su propio árbol DOM similar al HTML por lo que fácilmente desde javascript podremos capturar eventos, cambiar sus caracteristicas, así como dar estilos desde CSS.

Una vez tenemos la base, podemos entender mejor el papel de RaphaelJS en todo esto. RaphaelJS es una librería que nos promueve de una gran cantidad de objetos y métodos para encapsular los documentos SVG. Esta necesidad vino dada en su dia por los navegadores antiguos que interpretaban VML y los mas modernos que fueron interpretando SVGRaphaelJS genera los documentos dinámicamente en uno u otro lenguaje, dependiendo de lo que soporte el navegador, siempre dando prioridad al estandar SVG.

Si todos los navegadores actuales soportan SVG ¿Por qué utilizar una librería como RaphaelJS y no SVG nativo? Muy sencillo y es que cuando queremos generar unos gráficos en SVG dinámicamente, con animaciones y demás, necesitamos de un respaldo de utilidades que nos faciliten en todo lo posible el trabajo, ya que el objetivo es ser productivos. Por ejemplo, para quienes conozcan jQuery, todo el mundo sabe hacer un document.getElementById, pero siempre acabamos haciendo $(«#id») porque es más cómodo, ademas de ofrecernos herramientas muy útiles. Con RaphaelJS pasa lo mismo, si queremos generar una animación en SVG, nos ofrece funciones con calbacks para generar animaciones dinámicamente con varias funciones easing o podemos guardar los objetos de SVG según los vayamos creando para reutilizarlos mas adelante, ademas de ser un poco mas sencillo de utilizar que SVG a pelo.

Este contenido y mas ira apareciendo en el curso de Raphael JS – Gráficos vectoriales con javascript y mas en concreto en el primer capítuo: Introducción a RaphaelJS.

Lenguajes de programación semánticos (python) contra matemáticos (c#)

Hace tiempo escribí un artículo en el que hablaba de frameworks web para programar y fui criticado por criticar django. Bueno como aclaratoria, escribo este artículo, en el que detallo las diferencias de los programadores, una gran batalla entre lenguajes semánticos vs matematicos; en este caso python vs c#.

Veamos primero que es cada uno, un lenguaje semántico es un lenguaje de programación que pretende ser similar a un lenguaje real, como el español, inglés, etc. mientras que un lenguaje matemático es mas parecido a ecuaciones con llaves, corchetes, paréntesis, etc. Pero veamos mas diferencias, un lenguaje semántico, sea cual sea, persigue el «de un vistazo», generalmente esta ausente de llaves y basa su estructuración en identación y estructuras muy semánticas como delimitadores de texto. Para este caso tenemos como ejemplo a VB, en el que terminamos un if con un End If, un for con un Next, etc. la identación automática que propone el propio ide de programación o como en el caso de Python, la identación es necesaria para que el interprete de Python entienda el código.

Un lenguaje matemático es en contra de un lenguaje semántico, un lenguaje de formulas y ecuaciones, que sin tener unas nociones de matemáticas y que estas nos gusten se nos pueden atragantar bastante. A diferencia de lo que ocurre en los lenguajes semánticos, este tipo de lenguajes a pesar de que la identación suele ser importante para la claridad y el entendimiento, también nos permite escribir todo nuestro código en una sola línea. Las funciones suelen estar delimitadas por llaves {} así como las clases y namespaces. Las lineas de un lenguaje matemático suelen estar delimitadas por puntos y coma «;», y como mencione antes, al tener delimitadores de linea todo el código puede estar en una única linea, como ocurre en el caso de los frameworks de javascript que comprimen su código hasta que ocupe una única linea.

¿Pero qué es mejor? Pues depende de la persona, igual que hay zapatillas para los corredores según su tipo de pisada, hay lenguajes según como programes. Hay programadores que son mas de letras, les gusta ver su código y creer que están leyendo un libro. Para ellos, un lenguaje semántico es ideal, un python o un visual basic. Para aquellos programadores que como me ocurre a mi, nos gusta ver una cierta simetría en nuestro código y que al ver el código parezca una libreta de un matemático, lleno de formulas, lenguajes como c# o java, son para mi.

¿Y cual es mejor? Pues ninguno. Lo mas importante es sentirse a gusto con el entorno con el que se trabaja. Si por ejemplo, eres un matemático puro, python es horrible, pero no quiere decir que no lo puedas utilizar. Por contra, si eres muy semántico, c# sería incomprensible. A la hora de trabajar, hay que tener en cuenta 3 factores básicos. En primer lugar en que lenguaje nos sentimos mas cómodos. Evidentemente no vamos a programar como no nos gusta (salvo que nuestro jefe nos lo diga). En segundo lugar hay que saber elegir bien el lenguaje con sus herramientas. En Lenguajes como PHP tenemos multitud de librerías y aplicaciones ya desarrolladas, en python django tenemos muchos módulos, etc. en c# el deploy es muy sencillo, pero no se nos ocurriría hacer una web en shell script por ejemplo, ya que no tenemos el mismo potencial de librerías. Por último hay que elegir sabiamente según lo que vayamos a hacer. Si por ejemplo vamos a desarrollar una pequeña aplicación, con un PHP vamos sobrados, si queremos generar una página sencilla, podemos utilizar django, pero si queremos hacer una aplicación grande y escalable, quizás c# nos convenga mas. Hay que saber equilibrar todo estos puntos para elegir siempre la mejor opción según lo que vayamos a desarrollar.

Yo programo las aplicaciones prefabricadas (wordpress, prestashop, etc) o páginas muy muy sencillas en PHP, otros proyectos a medida de mayor envergadura pero pequeños en python con django o pylons y los grandes proyectos en c# con mono aspnet mvc y AltairStudios.Core. Y tu, ¿En qué programas?

Buscar por tag, clase e id en jquery

Hace tiempo escribí un artículo hablando de rendimiento de jQuery y el uso de selectores dobles con jQuery, pero lo que no he hecho es explicar como funciona un selector de jQuery. La idea es que esto no sea «la guía definitiva de jQuery», ni nada por el estilo, sino un breve apunte para los lectores, la visión mas básica del uso de jQuery.

En este artículo voy a exponer como seleccionar de forma mas que simple utilizando un tag (etiqueta de html), una clase de css y un id. jQuery es un ente muy inteligente y por tanto, sabrá si lo que le estamos pidiendo es que convierta una etiqueta a jQuery o que la busque.

  • Buscar por tag con jQuery: este junto con el de clase, son métodos de búsqueda de poco rendimiento y que pueden dar como resultado varios objetos (ya que un tag se puede repetir), se indicaría a jQuery el nombre del tag.
  • Buscar por clase con jQuery: al igual que el anterior, es de bajo rendimiento y dará como resultado un array de objetos, ya que una clase se puede repetir.
  • Buscar por id con jQuery: es el mas optimo y el que se ha de usar siempre que sea posible. Devolverá un único objeto ya que los id’s en teoría no se repiten.

Ahora vista un poco la teoría viene la practica. Lo primero es entender como se hace la llamada a jQuery, que tiene 2 formas, la original que es usando la función jQuery o la corta que es usando su alias a la función $. Veamos un ejemplo genérico de esto y luego uno por cada selector.

var selectorjQuery = jQuery("#mi_id_a_seleccionar");
var selectorAlias = $("#mi_id_a_seleccionar");

En el ejemplo anterior, el resultado sería el mismo, ya que es similar utilizar la función jQuery que la función $. Ahora veamos un ejemplo con los selectores, con un código en html y otro de código javascript.

<p>
   <a href="#">Mi link 1</a>
   <a href="#" class="enlace">Mi link 2</a>
   <a href="#" class="enlace" id="myLink">Mi link 3</a>
</p>

Ahora vamos a hacer lo siguiente, con estos enlaces, vamos a poner el color del enlace en negro para todos los enlaces, rojo para los enlaces que tienen una clase enlace y azul para el id myLink

//ponemos todos los enlaces a negro
$("a").css("color", "#000");
//los enlaces con la clase .enlace los dejamos en rojo
$(".enlace").css("color", "#ff0000");
//el enlace con el id myLink lo ponemos azulado
$("#myLink").css("color", "#336699");

Como podemos observar, las etiquetas se indican con su nombre, las clases como si de css se tratase, con un punto delante, al igual que los ids, que al igual que css utilizan una almohadilla.

Guía de buenas prácticas para aumentar el rendimiento de jQuery

JQueryLlevo tiempo con ganas de escribir esta guía de buenas prácticas para aumentar el rendimiento de jQuery y de javascript en general. Uno de los principales problemas que nos encontramos por internet son que hasta hace un tiempo, cada javascript era de su padre y de su madre, por lo que perdía importancia dentro del desarrollo web y no optimizando esta parte del código. Con la inclusión de nuevas ideas a la hora de desarrollar webs y la aparición de multitud de frameworks como jQuery, mootoolssproutcore, hacen que el código javascript que escriben los desarrolladores, funcione en todos o casi todos los navegadores, pero aún así, algo falla.

Aunque ya no es como pasaba antiguamente que al entrar en una web o tenías Internet Explorer o podías olvidarte del javascript y por tanto de una gran parte de funcionalidad en la web, hoy en día esto no pasa gracias a los frameworks de javascript, es cierto que hay un problema y es el rendimiento. En este artículo me quiero centrar en el framework mas extendido, que es jQuery y una breve guía de como aumentar el rendimiento de jQuery y por tanto aumentar el rendimiento de javascript.

A continuación, detallo un listado de buenas practicas para aumentar el rendimiento de jQuery.

 

1. Acceder a id’s y no a clases

Cuando vemos algun ejemplo de jQuery, siempre se nos muestra con $(«.clase»).html(«prueba»), esto es un ejemplo que nos lleva a cometer grandes faltas de rendimiento cuando trabajamos con un proyecto muy grande. Aunque a veces no nos queda mas remedio que acceder a clases, su uso dentro de los selectores de jQuery, debemos de evitarlo siempre que podamos, ya que al acceder por clase, jQuery buscará en todo el código esa clase, todas las veces pueda, sin embargo, si utilizamos un id, al encontrar la primera coincidencia, la búsqueda parará y por tanto la ejecución será mas rápida.

$(".clase").html("prueba"); //es mas lento
$("#id").html("prueba"); //es mas rápido

 

2. Utilizar selectores dobles en jQuery

Hace poco tiempo escribí un artículo sobre el uso de selectores dobles para aumentar el rendimiento en jQuery. Básicamente y sin entrar mucho en detalle, ya que para ello hay ya un articulo dedicado, un selector doble lo que hace es crear un contexto donde buscar el selector. Imaginemos que queremos cambiar el html  de un menú (si es un absurdo) para ello, en lugar de ejecutar:

$(".menu").html("jodimos el menú");

Lo ideal es usar un contexto con base a un id, donde jquery tenga que buscar menos cantidad de datos

var header = $("#header");
$(".menu", header).html("jodimos el menú");

De esta forma, capturamos un contexto y le decimos a jQuery que busque solo en ese contexto en lugar de en toda la web, por lo que la ejecución de un selector de clase, será mas rápida.

 

3. Cachear variables que mas utilicemos y de contexto

Cuando escribimos código de jQuery, es normal que recurrentemente accedamos a ciertas partes de la página, que como hemos visto en el ejemplo anterior, utilizaríamos variables de contexto. Para agilizar la carga, es recomendable cachear estas variables, para que no tengamos que buscarlas cada vez que vayamos a utilizarlas:

var header = $("#header");
var footer = $("#footer");

.....

function bordemenu() {
    $(".menu", header).css("border", "solid 1px #000000");
}

De esta forma, no buscamos header, sino que accedemos a la misma variable que cargamos al cargar la página. Incluso, si ya sabemos de antemano que vamos a acceder muchas veces al menú, podríamos cachearlo también.

 

4. Evitar el uso de each

En jQuery, la función each no es más que un foreach que nos devuelve los nodos que hemos seleccionado. Es por esto que debemos de intentar, en la medida de lo posible, no utilizar este método para no ejecutar un foreach e intentar recorrer los nodos con un for, que aunque un poco mas complejo, su ejecución será mas rápida.

 

5. Centralizar la carga de eventos

Cuando hacemos una aplicación web muy muy grande y con mucho uso de ajax, nos damos cuenta de que cada vez tenemos mas y mas eventos y que como nos descuidemos, acabamos escribiendo casi los mismos eventos en multitud de sitios. Es por ello, que es recomendable tener una o varias funciones donde incialicemos los eventos para su carga y ejecución. Parece una tontería, pero a la larga, mas que en rendimiento, nos favorecerá en rendimiento a la hora de escalar nuestra aplicación, aunque también evitará la duplicidad de eventos sobre un mismo objeto y por tanto la ejecución será mas rápida.

 

Estos son 5 sencillos casos en los que podemos aumentar considerablemente la velocidad de ejecución de una web utilizando jQuery. Quizás, haciendo sencillos ejemplos, no seamos coscientes de esa diferencia de velocidad, pero en una macroaplicación que mueve multitud de datos asíncronamente, nos daremos cuenta que estas practicas agilizarán la página en general y agilizarán jQuery.

Selectores dobles con JQuery, aumentando el rendimiento de JQuery

JQueryA menudo suele pasar que al comparar diferentes librerías de Javascript, se habla de JQuery como una librería de muy fácil manejo por utilizar selectores DOM y de CSS pero a la vez se dice que por esto es mas lenta que el resto. Mi objetivo con este artículo no es explicar los diferentes tipos de selectores de JQuery sino como aumentar el rendimiento de JQuery utilizando selectores dobles de contexto.

En JQuery aparte de otras formas como objetos DOM y similares, lo normal es realizar un selector apuntando a una clase de CSS o un id. Antes de nada, comentar que el uso de clases en los selectores de JQuery, es recomendable omitirlo siempre que sea posible (no siempre se puede), ya que JQuery espera encontrar varios nodos y por tanto evaluará todo el código, por lo que es mas lento que utilizar ids, que una vez lo encuentre, dejará de buscar. Tras este miniconsejo de rendimiento de JQuery, me gustaría comentar como funcionan los selectores dobles de contexto de JQuery.

Normalmente  para hacer una selección en JQuery, hacemos algo tal que $(«selector») y seleccionamos el objeto de JQuery. Un selector doble o selector de contexto es básicamente una especie de cache, un contexto donde buscar ese selector pero no en toda la página, sino en una parte de esta. Para utilizar un selector doble o selector de contexto, lo que hacemos es enviarle un parámetro extra a la consulta de selección. En mi caso me gusta enviar un objeto de JQuery que intento cargar en memoria al cargar la página, sacrificando tiempo de carga por velocidad a la hora de interactuar con la propia página. Para utilizar un selector doble o selector de conexto lo que hacemos es por ejemplo hacer $(«selector», objetopreseleccionado), de esta forma, JQuery no buscará el selector en toda la página, sino que se centrará en el contexto donde se encuentra lo preseleccionado.

Para que todo quede un poco mas claro, voy a poner un ejemplo, partamos de la idea que tenemos la página partida en 4 sectores, una cabecera, un contenido dividido en menú lateral y contenido en si, y un pie. Todas estas partes cambiarán dinámicamente, así que al realizar el document ready cargaremos en variables las diferentes secciones de la web con la idea de realizar operaciones de una forma mas rápida y consumiendo menos recursos de procesador al cliente, que ya sabemos que el javascript puede ralentizar mucho una página si no se hace con cuidado.

var header, footer, menu, content;

$(document).ready(function($) {
  header = $("#header");
  footer = $("#footer");
  menu = $("#menu");
  content = $("#content");
}

Una vez que hemos cargado en memoria las diferentes secciones de la web, podremos trabajar con eventos, modificaciones y efectos de una manera mucho mas eficiente, realizando las llamadas utilizando en los selectores esas variables como contexto de JQuery.

$("#logo", header).html("mi html");
$(".article a", content).click(function() { .... });

Si utilizamos los selectores de JQuery como en el ejemplo anterior, usando un contexto para la búsqueda, ahorraremos muchísimo tiempo de proceso porque JQuery no tendrá que buscar en todo el documento, sino que lo realizará en base al contexto que le indiquemos. Quiero aclarar que como todo, hay que estudiar cuando usar o no usar contextos, ya que si la página es muy pequeña no merece la pena cargar en memoria las diferentes secciones, pero si la página es bastante grande y con muchos datos, podemos acelerar el uso de JQuery y aumentar el rendimiento de JQuery en un 250%.

Scroll al inicio