Binary Coffee

La guía definitiva para ser desarrollador ninja

javascript
Esta es la traducci√≥n de un art√≠culo del sitio [javascript.info](https://javascript.info/), y pueden visitar el [art√≠culo original](https://javascript.info/ninja-code) si quieren leerlo en ingl√©s. # C√≥digo ninja > Aprender sin pensar es trabajo perdido: pensar sin aprender es peligroso. **Confucious** Los programadores ninjas del pasado usaban estos trucos para cambiar la mente de los dem√°s desarrolladores. Los revisadores de c√≥digo los buscan. Los desarrolladores novatos algunas veces los usan incluso mejor que los programadores ninjas. Lee cuidadosamente y descubre qui√©n eres: un ninja, un novato o tal vez un revisador de c√≥digo. ## La Abreviatura es el alma del ingenio Has el c√≥digo tan corto como puedas. Muestra cu√°n inteligente eres. Deja que las sutilezas de las funcionalidades del lenguaje te gu√≠en. Por ejemplo, mira el operador ternario `'?'`: ``` // taken from a well-known javascript library i = i ? i < 0 ? Math.max(0, len + i) : i : 0; ``` Increible, no? Si tu codificas de esa manera, cualquiera que se encuentre con esa l√≠nea y trate de entender cual es el valor de `i`, va a tener un buen momento. Al final terminar√° viniendo a ti, buscando por una respuesta. Diles que corto siempre es mejor. Iniciarlos en el camino del ninja. ## Variables de una sola letra > El Dao se esconde en el sin palabras. Solo el Dao es bien comenzado y bien terminado. **Laozi (Tao Te Ching)** Otra manera de codificar poco, es usar variables con una sola letra de nombre en todos lados. Ejemplo `a`, `b` y `c`. Una variable de nombre corto, desaparece en el c√≥digo como un ninja real en el bosque. Nadie ser√° capaz de encontrarlas incluso usando el "buscar" del editor. Incluso si alguien la encuentra, no ser√° capaz de "descifrar" que significa el nombre `a` o `b`. ...Pero hay una excepci√≥n. Un ninja real nunca usar√° `i` como contador en un ciclo `for`. En cualquier lado, pero no ah√≠. Busca por ah√≠, hay muchas m√°s letras ex√≥ticas. Ejemplo `x` o `y`. Una variable ex√≥tica como un contador en un ciclo es especialmente genial si el cuerpo del ciclo es de 1-2 p√°ginas (has el ciclo tan grande como puedas). Entonces si alguien mira con detenimiento el ciclo, no ser√° capaz de f√°cilmente entender que la variable `x` es el contador del ciclo. ## Usar abreviaturas Si las reglas del equipo prohiben el uso de variables de una sola letra y nombres cortos - ac√≥rtalos, has abreviaciones. Ejemplo: - `list` -> `lst`. - `userAgent` -> `ua`. - `browser` -> `brsr`. - ...etc Solo aquellos con buena intuici√≥n ser√°n capaces de entender semejantes nombres. Intenta acortar todo. Solo una persona digna ser√° capaz de mantener el desarrollo de tu c√≥digo. ## Apuesta alto. Se abstracto. > La gran plaza no tiene esquinas. El gran barco est√° completo. La gran nota ratifica el sonido. La gran imagen no tiene forma. **Laozi (Tao Te Ching)** Mientras elijas un nombre trata de usar las palabras m√°s abstractas. C√≥mo `obj`, `data`, `value`, `item`, `elem` y muchas m√°s. - **El nombre ideal para las variables es `data`**. √ļsalo en todas las partes que puedas. En efecto, toda variable tiene datos, verdad? ...Pero qu√© hacer si `data` ya fue usado? Pues intentalo con `value`, es tambi√©n algo universal. Despu√©s de todo, una variable eventualmente tendr√° un valor. - **Nombra una variable por su tipo: `str`, `num` ...** Dales una oportunidad. Una iniciativa joven debe prevalecer - son estos nombres realmente necesarios para un ninja? en efecto, lo son! Claramente, el nombre de una variable significa algo. Esto dice que hay dentro de la variable: una cadena, un n√ļmero o algo m√°s. Pero cuando alguien externo intente entender el c√≥digo, ellos se sorprender√°n al ver que realmente no informan nada! y en √ļltima instancia fallar√°n al alterar tu buen c√≥digo. El tipo de valor es f√°cil de encontrar debugueando. Pero cu√°l es el significado de la variable? Qu√© string/number almacena? No hay manera de adivinar sin una buena meditaci√≥n! - **...Pero qu√© pasa si ya no hay m√°s de esos nombres?** pues adiciona n√ļmeros al final: `data1, item2, elem5` ... ## Prueba de atenci√≥n Solo un verdadero y atento programador ser√° capaz de entender tu c√≥digo. Pero c√≥mo estar seguro de esto? **Una de las maneras - usa nombres de variables similares, como `date` y `data`**. O m√©zclalos cuando puedas. Una r√°pida mirada a dicho c√≥digo ser√° imposible. Y cuando hay una falta de ortograf√≠a... Ummm... Estamos estancados por largo rato, tiempo para un t√©. ## Sin√≥nimos inteligentes > Lo m√°s dificil de todo, es encontrar un gato negro en una habitaci√≥n oscura, especialmente si no hay gato. **Confucius** Usar nombres similares para la misma *cosa* hace la vida m√°s interesante y muestra tu creatividad a los dem√°s. Por ejemplo, considera los prefijos de las funciones. Si una funci√≥n muestra un mensaje en la pantalla - empieza esta con `display...`, como `displayMessage`. Y si otra funci√≥n muestra otra cosa en la pantalla, como el nombre, comi√©nzala con `show...` (como `showName`). Deja en entredicho que hay una sutil diferencia entre ambas funciones, mientras no la haya. Haz un pacto con tus compa√Īeros ninjas del equipo: si John empieza las funciones de "mostrar" con `display...` en el c√≥digo, entonces Peter puede usar `render...`, y Ann - `paint...`. N√≥tese cu√°nto m√°s interesante se ha convertido el c√≥digo. ...y ahora el truco del sombrero! Para dos funciones con diferencias importantes - usa el mismo prefijo! Por ejemplo, la funci√≥n `printPage(page)` puede usar la impresora. Y la funci√≥n `printText(text)` puede poner un texto en pantalla. Deja a los desarrolladores no familiarizados con el c√≥digo pensarselo bien sobre funciones nombradas igual `printMessage`: "D√≥nde pondr√° el mensaje? A la impresora o en la pantalla?". Para hacerlo que realmente brille, `printMessage(message)` deber√≠a mostrar el mensaje en una nueva ventana! ## Reusa nombres > Una vez que todo est√° dividido, las partes necesitan nombre. Hay realmente suficientes nombres. Uno debe saber cuando detenerse. **Laozi (Tao Te Ching)** Adiciona nuevas variables solo cuando sea absolutamente necesario. En efecto, reusa nombres existentes. Solo as√≠gnales nuevos valores a estos. Si est√°s en una funci√≥n, trata de usar solo las variables pasadas como par√°metros. Esto har√° bien dif√≠cil la tarea de identificar qu√© exactamente hay en la variable. Y tambi√©n de d√≥nde viene. El prop√≥sito es desarrollar la intuici√≥n y la memoria de la persona que est√° revisando el c√≥digo. Una persona con poca intuici√≥n tendr√° que analizar el c√≥digo l√≠nea a l√≠nea y rastrear los cambios a trav√©s de cada rama del c√≥digo. **Un variante avanzada de esto, es encubiertamente(!) reemplazar el valor con algo completamente diferente en el medio de un ciclo o de una funci√≥n.** Por ejemplo: ``` function ninjaFunction(elem) { // 20 lines of code working with elem elem = clone(elem); // 20 more lines, now working with the clone of the elem! } ``` Un compa√Īero programador que quiera trabajar con `elem` en la segunda mitad de la funci√≥n, quedar√° sorprendido... Solo mientras debuguee, despu√©s de examinar el c√≥digo, podr√° encontrar que est√° trabajando con un clone! Visto en c√≥digo regularmente. Mortalmente efectivo incluso para ninjas experimentados. ## Usa Underscores en las funciones Pon underscores `_` y `__` antes de los nombres de las variables. C√≥mo `_name` o `__value`. Esto ser√° genial si solo tu sabes el significado. O, incluso mejor, adiciona esto solo por gracia, sin ning√ļn significado en particular. O por diferentes significados en diferentes lugares. Matar√°s dos p√°jaros de un tiro. Primero, el c√≥digo se convertir√° en m√°s largo y en menos entendible, y la segunda, un compa√Īero puede gastar un buen tiempo tratando de entender qu√© significan los underscores. Un ninja inteligente pone underscores en una parte del c√≥digo y evade estos en los dem√°s lugares. Esto hace el c√≥digo incluso m√°s fr√°gil y aumenta la probabilidad de futuros errores. ## Muestra tu amor Deja que todos vean cu√°n magn√≠fica es tu entidad! Nombres c√≥mo `superElement`, `megaFrame` y `niceItem` har√°n definitivamente asombrarse al lector. En efecto, por una parte, algo escrito c√≥mo: `super...`, `mega...`, `nice...` Pero por otra parte - que no brinde ning√ļn detalle. El lector probablemente decidir√° buscar por alg√ļn significado oculto y meditar√° por una hora o dos de su tiempo (pagado) de trabajo. ## Superposici√≥n de variables externas > Cuando en la luz, no puedes ver nada en la oscuridad. Cuando en la oscuridad, puedes ver todo en la claridad. **Guan Yin Zi** Usa los mismo nombres de variables dentro y fuera de una funci√≥n. As√≠ de simple. Sin esfuerzo en inventar nuevos nombres. ``` let user = authenticateUser(); function render() { let user = anotherValue(); ... ...many lines... ... ... // <-- a programmer wants to work with user here and... ... } ``` Un programador que est√© dentro de la funci√≥n `render`, probablemente no notar√° que hay una variable local `user` suplantando la variable externa. Entonces ellos intentar√°n trabajar con `user` asumiendo que es la variable externa, el resultado de `authenticateUser()` ...Ha ca√≠do en la trampa! Hola, debuguer... ## Efecto colateral en todos lados Hay funciones que parecen que no cambian nada. C√≥mo `isReady()`, `checkPermission()`, `findTags()`... Se asume que solo tienen c√°lculos, buscan y retornan datos, sin cambiar nada fuera de ellos. En otras palabras, sin "efectos colaterales". **Un hermoso truco es adicionar una "√ļtil" acci√≥n a estos, adem√°s de su tarea principal** La expresi√≥n de aturdimiento y sorpresa en la cara de tus colegas cuando vean una funci√≥n nombrada `is...`, `check...` o `find...` que cambie algo - definitivamente ampliar√° tus fronteras de la raz√≥n. **Otra manera de sorprender, es retornando un resultado no estandar** Muestra tu pensamiento original! Deja que la llamada a la funci√≥n `checkPermission` retorne no un `true/false`, sino un objeto complejo con el resultado de la comprobaci√≥n. Estos desarrolladores que traten de escribir `if (checkPermission(...))`, se preguntar√°n por qu√© no funciona. Diles: "Leanse la documentaci√≥n". Y denle este art√≠culo. ## Funciones poderosas! > El gran flujo Tao en todos lados, tanto a la izquierda como a la derecha. **Laozi (Tao Te Ching)** No limites la funci√≥n a lo que est√° escrito en su nombre. Se m√°s amplio. Por ejemplo, la funci√≥n `validateEmail(email)` puede (adem√°s de validar el correo) mostrar un mensaje de error y preguntar por la re-escritura del correo. Acciones adicionales no deben ser obvias a partir del nombre de la funci√≥n. En el c√≥digo de un verdadero ninja esto no es obvio tampoco. **Unir varias acciones dentro de una, proteger√°n tu c√≥digo de ser reusable** Imag√≠nense, otro desarrollador que quiera solo comprobar el correo y no mostrar ning√ļn mensaje. Tu funci√≥n `validateEmail(email)` que hace ambas cosas, no servir√° para ninguna. Entonces ellos no romper√°n tu meditaci√≥n para preguntar nada acerca de esto. ## Resumen Todos "los consejos" de arriba vienen de c√≥digos reales... Algunas veces escritos por desarrolladores experimentados. Algunas veces m√°s experimentados que tu ;) - Sigue algunos de los consejos, y tu c√≥digo estar√° lleno de sorpresas. - Sigue muchos de estos consejos, y tu c√≥digo ser√° verdaderamente tuyo, nadie querr√° cambiarlo. - Sigue todos los consejos, y tu c√≥digo se convertir√° en una lecci√≥n invaluable para los j√≥venes desarrolladores buscando por iluminaci√≥n. > Happy coding!
Opiniones
noavatar
Est√° genial el art√≠culo jajaja, me he re√≠do cantidad, simplemente apliquen un .reverse y tendr√°n muy buenas pr√°cticas. ūüĎŹūüĎŹūüĎŹūüĎŹ
noavatar
Hay q trabajar un poco más en la detección de ironías
noavatar
esto es una broma ? va en contra de todas las buenas practicas posibles...