jueves, 3 de septiembre de 2015

Bower

Bower es un instalador de paquetes mantenido por Twitter al estilo npm bastante similar pero que gestiona packages más amplios.


Introducción


No hay mucho que hablar sobre Bower, básicamente Bower lo que hace es en lugar de instalar dependencias agrupar paquetes, que a su vez pueden contener una serie de archivos.  Mientras que NPM está más enfocado a suministrar packages para Node, Bower también tiene package de herramientas más orientadas al Front-end u otros como puede ser Bootstrap, Angular u otros.

El poder de Bower es justamente ese, que instala de un plumazo un paquete de dependencias más complejas, de por si tiene bastante juego pero es junto a otras herramientas como Grunt/Gulp y Yeoman cuando brilla.

Comandos


La verdad es que otra de las opciones más interesantes de Bower son sus comandos.  Además de los típicos de inicializar, instalar y buscar (similares a npm) tiene una opción de listar los packages instalados, pero es que además nos mostrará la versión instalada y la versión más actual disponible.  Pero es que además podemos desinstalar packages o actualizar los existentes.

Archivos


Basicamente hay 2 archivos importantes en el caso de Bower, uno de ellos es bower.json que es muy similar a package.json y en él se especifican los packages a instalar y por otro .bowerrc que también es otro json sin embargo, su principal utilidad es especificar el directorio donde se van a instalar los packages.

Considero que no hace falta analizar más en detalle a Bower, sino ver las herramientas que lo aprobechan, más información sobre Bower en su página web oficial: http://bower.io/

lunes, 31 de agosto de 2015

Workflow, ¿Qué es y cómo mejorarlo?

Cuando estamos viendo artículos o vídeos, es normal de vez en cuando ver alguna referencia al workflow o cómo mejorarlo, pero no son pocos los que no lo llegan a comprender y muchos quien no lo mejoran considerablemente.

¿Qué es el workflow?


Como su nombre indica, workflow es el flujo de trabajo o dicho de otra forma los pasos que seguimos y herramientas que utilizamos desde que empezamos a realizar nuestro trabajo hasta que tenemos el resultado, aquí se incluyen tanto técnicas como herramientas.

En lo que se refiere a técnicas podríamos encontrar tanto enfoques de diseño como Mobile first o Progressive enhancement como de productividad como la técnica del pomodoro o kanban.

En herramientas, podemos encontrar programas que o bien nos permiten generar un plus de calidad, ahorrarnos tiempo o darnos algunos extras a la hora de compartir información.

¿Por qué no se suele mejorar?


Sobre el papel es muy bonito, en el mismo tiempo cambiando algunas cosas podemos hacer un trabajo de mejor calidad en menos tiempo, pero... ¿Por qué es tan común ver a personas con un workflow tan poco eficiente?  Esto no es tan solo algo temporal, sino que también se da en el caso de las empresas.  Los motivos pueden ser varios:

- Resistencia al cambio:  Una vez nos sentimos cómodos con una herramienta, una forma de trabajar, o incluso en la vida cotidiana; hay una cierta tendencia a que haya una resistencia al cambio.  La expresión más habitual puede ser "Para qué voy a aprender a algo nuevo si como lo hago ahora me va bien", pero por lo general el tiempo invertido en esos cambios puede llegar a ser ridículo en comparación a los beneficios.

En el caso de las empresas, tiene un poco más de sentido según la embergadura de los cambios, pero hay pequeños cambios en el workflow que no afectan a otros y sin embargo dan lugar a mejores resultados.

- Coste de la investigación/aprendizaje: Para utilizar algo primero hace falta conocerlo, si no conocemos la existencia de los preprocesadores CSS y de lo fácil que es implementar y potentes que son no vamos a usarlos.  Y claro, estar al tanto de estas herramientas, ver si funcionan y aprender a usarlo.

Eso conlleva tiempo y el tiempo es valioso, con lo que la primera opción de no pocos es dejarlo de lado.  Pero es justamente porque el tiempo es valioso, que hay que invertirlo en eso, si estar al tanto nos cuesta 2 horas semanales y sólo por el hecho de implementar algo como Gulp nos podemos ahorrar 3, ya estamos sacando 1 hora semanal de beneficio.

A mi modo de verlo, no cuesta tanto mejorar el workflow, porque ya hay artículos o tutoriales que explican varias herramientas y el ahorro de tiempo puede ser muy grande.

¿Y entonces?

Hay varias formas de mejorar el workflow dependiendo del entorno en el que estemos.  Hay herramientas como Bower o Yeoman que nos permiten comenzar un proyecto con una base, preprocesadores CSS que nos dan mucha potencia en nuestro código y estructurarlo, herramientas de linteo que nos permiten ver dónde hay posibles herrores incluso antes de ejecutar nuestra aplicación, otras tantas herramientas e incluso herramientas de gestión de tareas como Gulp o Grunt que nos permiten que todas las anteriores tareas se ejecuten de forma automática tras guardar los cambios en alguno de nuestros archivos de código.

Esa es la gran ventaja de un workflow eficiente, invertir un tiempo previo nos permite instar un esqueleto base de nuestra app ahorrándonos instalar una serie de herramientas o módulos y luego configurar las tareas necesarias en Grunt o Gulp nos permite que con la misma acción de guardar el archivo pasar por una serie de validadores o test unitaros y generar el resultado final. Considero que es estúpido e improductivo el no dedicar un cierto tiempo a mejorar nuestra forma de trabajar, siempre y lo que queremos es conseguir un resultado mejor con menos tiempo.

viernes, 14 de agosto de 2015

Dedicando mis esfuerzos a Node y Express

He decidido realizar una serie de artículos sobre conceptos de Node.js enfocados a Express y sobre Express en si; eso sí, intentando entrar un poco más en detalle en algunos aspectos o intentar dar una versión más clara.

PHP vs Node


Originalmente, mi idea era tener unos conocimientos aceptables de Express para poder usarlo como back de cara a otros proyectos, a la vez que repasaba y ampliaba mis conocimientos de JavaScript para posteriormente pasarme a PHP con Laravel 5.

En España en general y en Málaga en particular, PHP está mucho más difundido que Node con lo cual, de cara a ofertas de trabajo la apuesta era clara por PHP.  Sin embargo, al estar trabajando con Express me apetece más profundizar en ese tema a la vez que voy tocando otros aspectos cercanos.

La experiencia me ha enseñado que la mejor forma de aprender, es estudiar algo que nos apetece y en ese sentido, por ahora voy a seguir por la parte JavaScript.

La importancia creciente de JavaScript


Igualmente, no es una mala opción.  JavaScript cada vez es más importante, y si bien voy a dedicar tiempo a mis aptitudes como back-end, mi objetivo sigue siendo el front-end; pero gracias a JavaScript y a frameworks como Angular, Backbone o Ember la diferencia entre front y back no es tan distante y si se usa el mismo lenguaje, menos aún.

Es ese uno de los motivos por el que ha surgido el stack MEAN (MongoDB, Express, Angular y Node). Node se está haciendo hueco en el mercado y es en si y sus herramientas una tecnología de futuro y de presente.  Así que invertir tiempo en ella es una buena inversión, se mire por donde se mire, tener soltura en JavaScript lo veo como algo obligatorio si queremos estar al día en nuevas tecnologías del desarrollo web.

Reflexionando un poco, que algunas compañías sigan ancladas en hacer páginas web con plantillas de Wordpress (o con peores métodos) a fin de potenciar la cantidad a bajo coste, a costa de la calidad, no quiere decir que tengamos que aprender formas de hacer páginas web de hace unos años, sino que tenemos que seguir buscando por compañías que buscan estar al día en las últimas tecnologías para poder ofrecer productos de calidad.

domingo, 9 de agosto de 2015

La importancia del código limpio y estructurado

Es posible que en otra ocasión ya haya hablado un poco por encima, pero me parece algo tan importante como para dedicar una entrada exclusiva a soltarlo y quedarme agusto.

¿Tan difícil es hacer un código limpio y estructurado?


¿A qué viene todo esto?  Recientemente siguiendo un curso de CodigoFacilito de desarrollo de una aplicación web la gran mayoría del código está en app.js.  Salvo cosas que realmente no pueden estar como las vistas y poco más.

Cierto es, que la aplicación no es nada del otro mundo y no llega a 200 líneas de código, sin embargo, para ser un tutorial, creo que con más motivo se debería estructurar y comentar inline, por no mencionar que la mejor forma de empezar es con buenas prácticas.

Todo esto vino en su día, a que hubo problemas con el módulo de cloudinary y al empezar a depurar donde estaba (lo que sirve en un vídeo puede no servir varias semanas después siendo el mismo código) me desanimé mucho al no saber bien por donde meterle mano y teniendo otras cosas que hacer pues... lo dejé de lado.

¿Por qué es tan difícil hacerlo?  Mi opinión, es que los seres humanos somos por naturaleza vagos, perezosos y excesivamente optimistas.

Cuando nos topamos con un proyecto, especialmente si no es muy grande, en el momento en que estamos trabajando en él sabemos el motivo del código y creemos que añadir comentarios o crear una estructura más legible es innecesario, a eso se le une esa cierta pereza, una mala creencia de que podemos pensar que escribir comentarios es perder el tiempo, un tiempo que podríamos estar utilizando en que la aplicación progrese y como no, tendemos a pensar que todo va a ir bien, que la aplicación va a funcionar de primeras y no vamos a tener que depurarla.  Realmente no es que creamos que va a funcionar de primeras, sino que esperamos a que así sea para no afrontar la realidad, o que no falle y luego el proyecto pase a otras manos y sea otra persona la que se coma el marrón.  Tristemente es así, hay personas que esperan que funcione y luego el que venga detrás se come el marrón, eso sí, una gran cantidad de ocasiones el que viene detrás es nuestro yo del futuro y nos va a odiar por ello.

Estructurar código


Os voy a poner un ejemplo, tenemos por un lado el código original de CodigoFacilito en su GitHub https://github.com/codigofacilito/primera_pagina_node y luego mi versión https://github.com/ShinFDuran/codigofacilito-Node.  Realmente, salvo algunos retoques la funcionalidad es la misma.

Sin embargo además de los archivos normales de la versión del tutorial, en mi versión hay otras carpetas:
- controllers: Contienen la gestión de las vistas
- docs: Documentos de los diferentes commits realizados
- models: Modelos de la base de datos
- routes: Gestión de las rutas de la aplicación

En lugar de tenerlo todo en un archivo, hemos separado las capas de vistas, enrutamiento, control y modelamiento de la base de datos.  Es decir, en lugar de tener un archivo con 200 líneas de código, tenemos una serie de archivos con una función muy específica y delimitada.  A partir de ahí podemos ir testeando y probar los diferentes módulos, lo que inicialmente nos permite una mayor facilidad para localizar el error, pero en el futuro nos permitirá que si queremos cambiar un desterminado aspecto, cambiar únicamente esos archivos, dejando intactos el resto.

Estructurar el código, nos permite además de tener un código más legible una modularidad y poder reutilizar bloques mucho más fácilmente.

Comentarios


Quizás algo que sí es criticable en los proyectos que estoy realizando es la excesiva cantidad de comentarios.  Muchos comentarios inline y muchos archivos con información de los commits.  ¿Es necesario tanto comentario?  Pues la verdad es que no.

A mi modo de verlo, esta gran cantidad de comentarios tiene el fin de facilitar mi autoaprendizaje, el colocar esos comentarios como notas o recordatorios me permite que cuando estoy viendo el código refresco esos conocimientos, que a veces con echar un vistazo a los documentos de los commits entre en contexto y recuerde lo que hice y por qué.

El otro motivo, es facilitar a quienes vean mi código lo que es cada cosa, aun cuando su nivel de conocimiento no sea muy amplio.  Una vez tenga soltura y a fin de reducir tiempos o excesivos comentarios, veo importante establecer algunos delimitadores entre secciones, pero la idea es comentar lo que necesite ser comentado.

Por ejemplo, una función que se use a modo de helper, indicar cuál es su objetivo, parámetros o que devuelve, siempre y cuando no sea algo muy evidente.   En su momento leí/vi, que un buen código es aquel que no necesita ser comentado, con esto se refería, a que es importante que sea un código claro en cuanto a que las variables deben expresar lo que contienen y las funciones la acción que realizan, una buena elección de nombres puede reducir enormemente la necesidad de comentarios.

Código limpio


Una de las cosas que más me mosquean de JavaScript es que es un código terriblemente feo, en tanto que es muy fácil liarlo de una forma que no se entienda nada, entre parámetros, funciones, callback y otras cosas, se crea un infierno de callbacks y anidamientos que es horrible.

En el futuro, uno de los puntos que tendré que profundizar es en el concepto de las promises para mitigar el "Callback Hell" y preprocesadores como TypeScript o CoffeeScript para mitigar un poco la falta de visibilidad del código.

La clave, es que hay que intentar crear un código limpio, que sea fácil de leer y se vea claramente los ámbitos a fin de disminuir la posibilidad de errores.
Coste/beneficio
Esta es una parte muy importante, porque se entiende a malinterpretar.  Seamos realistas, el crear un código estructurado, limpio y comentado requiere más tiempo, pero no es ya tanto el tiempo físico en si, sino el tiempo necesario para tomarlo como un hábito.

La inversión inicial de tiempo en algunos casos puede ser considerable y a eso hay que sumarle el tiempo dedicado a escribir los comentarios.  Pero a mi modo de ver, ese tiempo es ridículo en comparación al tiempo que nos podemos ahorrar en el futuro ya sea más o menos inmediato.

El tener un código modular, reutilizable, claro y fácil de testear supone un enorme ahorro de tiempo (y por lo tanto dinero) no ya sólo a medio o largo plazo, sino también a corto plazo.   Especialmente en el caso de las empresas, toda empresa que tenga un proyecto a medio-largo plazo debería fomentar esto, porque ayuda a reducir costes posteriores a la vez que lo hace menos dependiente de los trabajadores.  Los programadores van y vienen, pero los programas de la empresa siguen ahí y tendrán que irse adaptando según las necesidades y por diferentes formas.

La inversión inicial de tiempo quedará rentabilizada con creces en la mayoría de las ocasiones; el mayor problema a mi modo de verlo es concienciar a los programadores que debemos tener una visión más a medio-largo plazo y unos hábitos más productivos.  No solo para nuestro yo futuro, sino para otros trabajadores de la empresa.

Conclusión final


Más allá de todo lo dicho, de los beneficios y ahorros que conlleva adoptar unos hábitos y técnicas, hay algo un poco más rebuscado.

Digamos que es el factor psicológico o anímico, cuando hay un problema que tenemos que solucionar, ya sea un fallo o algunos cambios si vemos un código largo, confuso o mal estructurado, podemos perfectamente entrar en un estado en el que nos desanimemos ante la mala perspectiva que tenemos.

Horas perdidas sólo en ver qué se supone que hacen determinadas funciones o módulos, el intentar descifrar lo que contienen unas variables y estar continuamente usando la opción de buscar para localizar las líneas de código donde están las funciones que hay que modificar.  Todo eso produce desánimo y junto a la pérdida de tiempo una bajada en la productividad enorme y una sensación de que avanza poco.

Por contra, un código limpio, en el que de un vistazo podamos saber lo que hace cada cosa, además del ahorro de tiempo en si nos pone en una situación opuesta, en la que nos apetece tocar el código, que hay una sensación positiva de que trabajo va a ser productivo y que va a avanzar rápido.

Ese punto psicológico lo considero muy importante y por eso creo que es necesario crear un código con el que nos guste trabajar, con el que nos sintamos código y que en lugar de maldecir a quien lo creó nos impulse a mejorarlo o aportar nuestro granito de arena.  En definitiva, estar en una situación en la que nos apetezca trabajar porque nos gusta lo que estamos haciendo.

martes, 4 de agosto de 2015

Técnica de estudio: Repetición espaciada

En la informática en general y en el desarrollo web en particular, no basta con saber algo e irlo aplicando hasta conseguir una cierta maestría, es necesario estar continuamente aprendiendo a utilizar nuevos programas, metodologías, workflows,...

Sin embargo, tan importante es el proponernos y dedicar tiempo a aprender, como la forma en la que aprender.

La repetición contínua

 

Digamos que es la repetición más habitual o que más hemos utilizado en nuestra época de estudiante, se trata de coger un concepto y machacarlo una y otra vez hasta que lo sepamos, o creamos saberlo, ya que al cabo de un tiempo nos damos cuenta que no lo sabíamos tanto.

Este es uno de los errores típicos del falso aprendizaje ya que tendremos a creer que cuando en una sesión comprendemos una idea, ya la entendemos y la "sabemos".  El machacar una idea o concepto  hasta que nos sentimos cómos y creemos que lo sabemos es denominado como "overlearning" es una de las llamadas "Ilusiones de la competencia" en la que creemos que aprendemos cuando no es así.

El proceso del cerebro


Para entender mejor las bases de esta técnica voy a explicar un poco el proceso del cerebro.  Para afianzar y mantener una idea, concepto o dato en la memoria a largo plazo necesitamos crear una estructura o camino físico entre las dendritas de las neuronas.  Sí, nuestras ideas, recuerdos y demás no son algo abstracto, sino algo físico basado en la interconexión de neuronas.

Ahora bien, en nuestro caso para que realmente se produzca esa interconexión es necesario por un lado comprender bien la idea o concepto que queremos aprender, esto ayuda y mucho, pero... es que también es necesario dejar a nuestro cerebro que cree esas interconexiones, pero el momento en que estas se crean es cuando dormimos.

El sueño es muy imporante en el aprendizaje, porque es cuando el cerebro empieza a coger todos los sucesos del día, los pone en orden y los almacena generando esas interconexiones; si dedicamos una sesión muy larga de estudio sólo lo "escribe" una vez en el cerebro.

De hecho, en su día una de mis formas de aprender era la siguiente:  Supongamos que quiero aprender a usar Bootstrap, recurro a libros o tutoriales, pero en lugar de hacerlo uno tras otro me miro la estructura del tutorial y la misma sección (layout por ejemplo) y me estudio el de todos antes de pasar al siguiente punto.  Si bien tiene la ventaja de que al ver la misma idea en diferentes fuentes pueden complementarse, al veerlos muy seguidos aunque en ese momento me da la impresión de dominar ese aspecto, al cabo de un tiempo veo que he ido olvidando partes.

La repetición espaciada

 

En el caso anterior, ahora como lo hago, si tengo 3 tutoriales me leo la sección que quiero aprender un día, esa misma sección de otro tutorial no la veo hasta el día seguiente, y la misma sección del tercer tutorial no la veo hasta pasado un día más.  De esta forma, se deja asentar los conocimientos un día y reforzarlos o ampliarlos en los sucesivos días.

En ese concepto se basa la repetición espaciada.  En lugar de muchas sesiones de estudio un mismo día, irlas separando, cada vez más a lo largo del tiempo.  Por ejemplo, insistir en un concepto 3 días seguidos, luego día sí, día no, luego cada 3 días, una vez por semana... Al cabo de un tiempo, esa idea, concepto o dato estará firmemente arraigada a nuestro cerebro.

De hecho, tengo pendiente aprender a usar una aplicación llamada Anki para este propósito tal y como se explica en este artículo:  Tips For Mastering A Programming Language Using Spaced Repetition

Por lo demás, os animo a mejorar vuestro sistema de aprendizaje con esta y otras técnicas de estudio