Javascript, como quizá ya he dicho alguna vez, es el lenguaje con mayor relación de uso y desconocimiento del mismo, y cuando falla, la gente se sorprende, a pesar de que hayan empezado a programar en JavaScript sin tener ni idea del asunto.

Aquí vemos una serie de buenas prácticas traidas de Google, en su mayoría, que nos aclararán muchas ideas y nos ayudarán a mejorar nuestro código.

Buenas prácticas

Uso de la palabra var

A pesar de que se puede declarar una variable dentro de una función sin var, no es recomendable, porque no está claro en que contexto podemos acceder a ella. De tal forma, que no hay colisiones de nombres entre diferentes variables.

Uso de punto y coma

Quizá no sepas que JavaScript tiene por defecto lo que se llama implicit insertion, esto significa que por defecto inserta punto y coma el solito antes de cada salto de línea. Esto, que en principio podría parecer bueno y cómodo se convierte en un auténtico dolor de cabeza en ciertos casos, como este:

1
2
3
4
5
6
7

MyClass.prototype.myMethod = function() {
  return 42;
} // Sin punto y coma
 
(function() {
  // Inicialización de variables aquí
})();

Declaramos un método (no nos paremos a lo de prototype, ya lo explicaré en otro post) y después usamos una función anónima, pues bien, a la función primera se le pasa la segunda como parámetro, ¿intuitivo al máximo verdad? Pues para evitarlo sólo tenemos que tener en mente que siempre tenemos que usar los puntos y comas cuando acabemos una línea.

Usar objetos para tipos primitivos

Si queremos tener una variable de tipo booleana, o de un tipo primitivo hacer esto puede liar bastante las cosas:

1
2
3
4

var x = new Boolean(false);
if (x) {
  alert('hi');
}

Intuitivamente pensaríamos que no se va a imprimir nada, pero lo cierto es que si ejecutas el código, verás el alert con el texto ‘hi’.

Por tanto cuando queramos iniciar una variable de tipo primitivo, como “Boolean”, debemos usar la siguiente sintaxis:

1
2
3
4

var x = Boolean(0);
if (x) {
  alert('hi');  
}

Y ahora no veremos el ‘hi’. De hecho si usamos el typeof para ver el tipo de datos que tenemos podemos comprobar que lo que estábamos creando antes no era un booleano, sino un objeto.

1
2

typeof Boolean(0) == 'boolean';
typeof new Boolean(0) == 'object';

Ambas son true, así que tienes que tener claro cuando estás haciendo una variable de tipo objeto y cuando del tipo primitivo boolean.

Los estándares se deben imponer

Usa funciones o métodos estándar antes que otros que no lo son, porque favoreceran la compatibilidad entre navegadores y tu código se podrá integrar en otros más fácilmente, por ejemplo es preferible usar string.charAt(3) que string[3].

Reglas de Estilo

En todo lenguaje hay una serie de buenas prácticas, pero también un cierto estilo que nos ayuda a poder entender mejor el código y a adquirir una serie de reglas que hacen que el código sea igual en estilos en cualquier lugar.

Nombres

Siempre todo junto y cuando son varias palabras pues con mayúsculas a partir de la segunda.

• Funciones: estoEsUnaFuncion
• Variables: estoEsUnaVariable
• Clases: estoEsUnaClase
• Enumerados: enumeradoTres
• Métodos: estoEsUnMetodo
• Constantes: ESTO_ES_UNA_CONSTANTE

Strings

Preferiblemente con ” (comillas simples) en vez con “” (comillas dobles), sobre todo de cara a que cuando escribimos HTML en un string, no tenemos que “escapar” las comillas.

Paréntesis

Solo cuando hagan falta, por ejemplo, no uses paréntesis en operadores como delete, typeof o void, o después de palabras reservadas como return, throw, case o new.

Se consciente de lo que es true o false

Uno de tantos problemas tontos con los que te encuentras cuando programas en JavaScript es asumir que ciertas cosas son verdaderas o falsas. Aquí tienes una lista:

1
2
3
4
5
6
7
8

null //false
undefined  //false
'' string vacío //false
0 como número //false
 
'0' cero como string  //true
[] array vacío  //true
{} objeto vacío  //true

Comenta con estilo

Cuando se comenta el código además de hacer la razón por la que hacemos algo tenemos la posibilidad de generar documentación a la vez de manera sencilla, siguiendo una serie de reglas. Google lo hace así, y muchos desarrolladores lo recomiendan, en concreto podemos usar JSDoc, y si todos lo hiciéramos sería más sencillo leer el código de otros y entenderlo, así que adelante con ello.

Más información

Tienes más consejos y buenas prácticas aquí, hay muchos más, solo he destacado los más importantes y relativamente fáciles de explicar para no irme mucho del tema.

El concepto

La idea parte, de Google, más concretamente, está realizada por Ben Lisbakken.

La explicación más en profundidad de como funciona esto la puedes ver abajo, en la conferencia que da el propio Ben Lisbakken (también habla sobre otras cosas, como por ejemplo reducir el tiempo de carga de tus páginas).
Así que el concepto es el siguiente: Una aplicación web donde puedes…

• Ver ejemplos de código Javascript (principalmente utilizando las API’s AJAX de Google).
• Editar tu propio código.
• Hacer debug de éste con la ayuda de Firebug.
• Compartir el código con todo el mundo, con una url que no se borrará y que podrás pasar a quien quieras.

Utilización

La utilización es bastante sencilla, simplemente vamos a http://code.google.com/apis/ajax/playground/ y empezamos a ver los ejemplos. Cuando quieras cambiar algo, escribe en el cuadro de la derecha y haces click en “Run Code”. (Para exportarlo, botón de la flecha a la derecha).

El debug se hace con firebug, así que puedes poner breakpoints en el código y ver el contenido de las variables u objetos en cada momento.

Dejo una imagen:

Conferencia

Vídeo

Transparencias

Enlaces

• Ajax Playground

Google Sets es un servicio de Google, que permite obtener palabras del mismo conjunto que las que introducimos. Es decir, si damos ‘rojo’,'verde’, obtenemos

Su uso es muy amplio, desde simple admiración por lo que Google ha llegado a acumular en cuanto a información se refiere, hasta black SEO, utilizando como palabras relacionadas lo que nos devuelva.

El problema es que solo hay una interfaz web, no existe una API ni nada parecido, por lo que he decidido crear una clase en PHP, que permita obtener de manera medianamente sencilla, un array con todas las palabras. En un alarde de originalidad la he llamado Gooset.

Para ello he hecho uso de PHP Simple HTML DOM Parser, que es una clase para parsear html (recomendada 100%).

Después he hecho la clase y en el constructor ya obtengo todo el conjunto, de tal forma que solo hace falta llamar al método get_set para que nos lo devuelva en un array.

La clase en si es muy simple, de todas formas si tienes alguna duda no dudes en usar los comentarios

Uso

1
2
3
4
5
6

<?php
include('./gooset.php');
$obj_gooset = new gooset('bmw','ferrari');
foreach($obj_gooset->get_set() as $elemento)
	print($elemento . '</br >'); 
?>

Salida:

1
2
3
4
5
6
7
8
9
10
11
12

bmw 
ferrari 
ford
honda
audi
hyundai
jaguar
chrysler
chevrolet
jeep
kia
...

El máximo de parámetros son 5. Con un número mayor el resultado no cambia, así que en ese caso se devuelve un error a través de una expepción, lo que es un punto a favor, puesto que después de eso no tenemos que comprobar nada (en PHP el script se para cuando se eleva una excepción).

1
2
3
4
5
6

<?php
include('./gooset.php');
$obj_gooset = new gooset('bmw','ferrari','mercedes','audi','hummer','jaguar');
foreach($obj_gooset->get_set() as $elemento)
	print($elemento . '</br >');
?>

Salida:

1

Error de uso: 5 elementos máximo

Descarga desde GitHub

Cuarteles generales de Google. También llamado GooglePlex (por Google y Complex). 47,038 m² de complejo adquiridos por Google. Tiene paneles solares que proporcionan casi un 30% de la energía necesaria para estas oficinas. Buscando sus coordenadas Google Maps podemos verlo mejor, además con Street View nos damos cuenta que los empleados, cuando pasó el coche por allí estaban avisados.

- Nueva York, Estados Unidos

Las actividades desarrolladas aquí están más relacionadas con el producto y el diseño gráfico. Se nota ¿no?

- Zurich, Suiza

Esta es una de las oficinas más divertidas, en el sentido de más cosas curiosas para el disfrute de los empleados. Si quieres ver más fotos pincha aquí.

- Santa Mónica Arizona, Estados Unidos

Aquí se resuelven los problemas principales en los que pensamos cuando nos imaginamos a los ingenieros de Google: Youtube, Google AdSense, calidad en las búsquedas….

¿Conoces un sitio mejor donde trabajar?

Vía | www.elmundo.es

Vía | http://www.fayerwayer.com

Vía | www.flickr.com