Variables globales
Evita las variables globales, son una fuente de problemas y pueden entrar en conflicto con librerías de terceros que puedas añadir.
Lo mejor es crear un único objeto global con un nombre que contenga las iniciales del nombre del proyecto o la empresa y meter dentro todas las variables globales que puedas necesitar.
var globalPM = {
dato1: "hola",
dato2: "adios"
}
Utilizar variables temporales en los bucles para evitar recálculos
Una secuencia típica en los bucles es recorrer un array y hacer algo.
var nombres = ["Juan", "Pedro", "Alex"];
for (var i = 0; i < nombres.length; i++){
console.log(nombres[i]);
}
A parte de que sería mejor utilizar una sentencia forEach o un for ( .. in .. ), por cada iteración el procesador tiene que volver a consultar la longitud del array y dado que dentro del bucle no hay nada que haga cambiar su longitud, es muchisimo mas eficiente guardar su tamaño en una variable y utilizarla para el bucle. En un caso normal no vas a notar nada, pero en un proceso un poco grande, puede haber una diferencia de segundos en el tiempo de ejecución.
// Versión más eficiente!!!
var nombres = ["Juan", "Pedro", "Alex"];
var numNombres = nombres.length
for (var i = 0; i < numNombres; i++){
console.log(nombres[i]);
}
Uso del operador ternario
El operador ternario nos permite meter un if sencillo en una solo línea de código.
var estado = true; var accion = estado ? 'continua' : 'para';
Eso está muy bien y es muy aconsejable para operaciones sencillas, el problema es que algunos programadores se emocionan y los utilizan como si fuera un if y esto genera un código críptico que es muy dificil de mantener.
// Uso enfarragoso de los operadores ternarios.
var estado = this.state.rulesConf.findIndex(
rule => rule.target === element._id
)
>= 0
?
this.state.ruleName + ' Primero'
:
this.state.ruleName + ' Segundo'
Operadores de igualdad
Tener en cuenta el utilizar el operador «===» para asegurar que no tenemos falsos positivos por conversiones automáticas de javascript. Este operador da falso si el tipo de datos no coincide.
console.log(1 === '1') // Devuelve falso console.log(1 == '1') // Devuelve true
Utilizar try catch
En los casos críticos que puedas surgir errores inesperados debemos utilizar el try catch.
Utilizar estilo camelCase
En el estilo Camel Case, se unen la palabras sin «-» ni «_»,y se pone en mayúscula la primera letra de cada palabra.
Al crea la definición de clases, el nombre debe empezar en mayúscula, pero la instancia de un objeto o la creación de cualquier variable debe empezar en minúsculas.
Definición de constantes
El estándar es que las constantes se escriben en Snake Case, todo en mayusculas y separados por «_».
Indentación del código
La correcta indentación del código es una muy buena práctica, que facilita muchísimo el mantenimiento del código y facilidad de lectura del mismo.
También es muy interesante en indentar lineas muy largas en partes que sean más legibles en menos de 80 caracteres de ancho.
Hacer código homogéneo y no reinventar la rueda para ahorrar unos caracteres
Esto se refiere a los programadores que consiguen meter en una línea de código un montón de funcionalidad y se creen que han hecho una obra de arte y algo muy «potente». Para mi lo que han hecho es una buena mierda difícil de mantener que cuando la vuelvan a ver dentro de unos días no saben ni lo que hace.
Un ejemplo sencillo para entender a que me refiero es el no utilizar {} par aun if sencillo
// Este código es correcto, pero no aconsejado
if (estado)
console.log("Esta ok");
Este código hace que se le pide, pero ya a primeras, cuando lees mucho código de forma rápida, ya me chirría y lo primero que pienso es, «Ostras, faltan las llaves, debió olvidárselas». Me hace perder unos segundo pensando esta tontería, pero eso no es lo peor, es que puedo venir y despistarme y querer añadir más cosas al if y despistarme y añadir una línea a continuación.
// Este código correcto no hace lo que yo quería
if (estado)
console.log("Esta ok");
llamarATodoOk(); // Esto lo ejecuta siempre
llamarAEncualquierCaso(); // Esto tambien
y pensar que llamarATodoOk(), se ejecutara cuando estado == true. Pero esta claro que no va a funcionar.
La forma más clara desde el principio sería poner la llaves. Y aunque el ejemplo puede parecer muy chorrar, he visto código mucho mas retorcido evitando {} que tienes que estar unos minutos pensando «What the f*#ck» hace aquí.
// Esto es lo que debería ser desde el principio
if (estado) {
console.log("Esta ok");
llamarATodoOk();
}
llamarAEncualquierCaso();
Use strict
Es muy aconsejable comenzar los ficheros con esta directiva que obliga a que se creen correctamente las variables, etc:
- Elimina algunos errores silenciosos de JavaScript cambiándolos a que lancen errores.
- Corrige errores que hacen difícil para los motores de JavaScript realizar optimizaciones: a veces, el código en modo estricto puede correr más rápido que un código idéntico pero no estricto.
- Prohíbe cierta sintaxis que probablemente sean definidas en futuras versiones de ECMAScript.
Comentar el código con /**/ y //
Sin comentarios…. (jeje)
Estructura de carpetas
Una buena practica para tener el código organizado es utilizar una buena estructura de carpetas, que sea fácil de entender y mantener. Un ejemplo podría ser así:
/css
base.css
index.html
/js
app.js
/libs
base.css
En /libs tendríamos una carpeta por cada librería que utilicemos.
En /js organizariamos en carpetas lógicas dependiendo de lo complejo de nuestra aplicación.
Refactorizar y evitar código duplicado
Vamos, como en cualquier otro lenguaje, debemos evitar tener estructura duplicadas a lo largo del programa y refactorizarlas por funciones o clases que centralicen este tipo de código.
Separar el código por responsabilidades
Para crear aplicaciones sólidas el código debe ser intuitivo y ser fácil de comprender por otras personas que no hayan estado en el desarrollo. Esto implica una limpieza y organización que al aplicara hace que todo fluya de forma natural, y sea muy fácil adaptar el código a nuevas necesidades sin dolores de cabeza.
En el caso de las aplicaciones web, una buena práctica es separar el estilo (colores, fuentes, etc) de la estructura de visualización, y la lógica de negocio, tambien a parte. Si es posible deben cada capa debe estar en ficheros distintos o por lo menos en partes fácilmente localizables y con un patron de forma que sea fácil de encontrar siempre.
Estilo
Pueden ser los archivos .css. En algunos frameworks como React los estilos podrían estar embebidos en el código, pero debemos intenar organizar el código para tener una estructura de forma que sea intuitivo localizar donde se encuentra las líneas que permiten cambiar el estilo.
Estructura
Lo que crea la estructura de la ventana que ve el usuario, normalmente son los ficheros .html pero utilizando los frameworks modernos, esta estructura se genera desde el propio código.
Lo ideal es que aunque la estrutura se cree desde js, no mezclar código que crea esta estructura con el código que contiene la lógica de negocio. Por ejemplo, en React, esto se genera con el método Render. Pues lo que tenemos que hacer es que dentro del render llamemos a funciones que controlen la lógica de negocio, pero no es bueno mezclar ambos mundo, si queremos que la aplicación pueda crecer y ser mantenida sin quebraderos de cabeza.
Lógica de negocio
Intentar crear clases reutilizables y organizar el código y los ficheros de forma que sea fácil de ver y encontrar donde se ha hace cada cosa.
Un código bien estructurado no debería necesitar demasiada documentación (yo prefiero la autodocumentación del propio código) para poder ser entendido para su mantenimiento y evolución.
Utilizar JSON
En JavaScript el JSON es la forma más fácil, eficiente y nativa de almacenar información, muchisimos mas rápido que XML y evita utilizar parseadores.
Todas la APIs de tipo REST, nos traen la información de esta manera.
Pruebas de rendimiento con console.time()
Si queremos saber el tiempo que tarda en ejecutarse algún proceso tenemos esta herramienta muy útil y sencilla.
console.time('Etiqueta de control');
for (let i = 0; i < 10000; i++){
// Proceso
}
// Esto mostrará por consola el tiempo que llevó ejecutar el código
console.timeEnd('Etiqueta de control');
Testing o TDD
Para generar código profesional y robusto, deberíamos utilizar alguna librería de testing automático. Por ejemplo MochaJs.
Minificación y Ofuscado
Cuando queremos pasar nuestro código a producción deberíamos buscar una forma de minificación de código para aumentar la velocidad de descarga en los navegadores. Lo aconsejable que buscar un mecanismo automático para esto, pero hay herramientas online.
EL minificado, elimina espacios y sustituye los nombres de variables por nombres mas corto, de forma que reduce el tamaño del fichero.
El ofuscado, sustituye el código de forma que sea ilegible, para el que quiera copiarlo o verlo, pero que para el navegador lo ejecuta con el mismo resultado que el original.
JSHint, JSLint
Son herramientas de revisión de código.
Deja una respuesta