Reinventing the wheel

Desarrollo web frontend en Windows

Sí, has leído bien. Aunque se ha generalizado la idea que los programadores frontend utilizan Linux y los diseñadores Mac (y que todavía llevan gafas de pasta), muchas empresas están atadas a Microsoft (para bien o para mal), y la mayoría de hogares tienen un PC con Windows porque a) es mucho más barato que un MacBook Pro, y b) Windows viene normalmente de serie.

Y por supuesto, el que escribe estas líneas lo hace desde un PC con Windows 10. Y si estás leyendo todo esto, intuyo que tú también.

También asumiré que el lector tiene conocimientos sobre programación de aplicaciones web, así que vayamos directamente al grano.

Las Herramientas

Para programar hace falta un editor de texto avanzado, y aquí tenemos varias opciones:

Estadísticas de Atom, Brackets y Visual Studio Code en GitHub

Estadísticas de Atom, Brackets y Visual Studio Code en GitHub.
Fuente: stackshare.io

Si atendemos a las estadísticas, VS Code es el claro ganador, pero para gustos…

Seguimos ahora con los editores más hardcore para los programadores duros (pero no tanto como para atreverse con Vim o Emacs):

node.js y NVM

Si eres frontender, conocerás a la fuerza node.js. No creo que haya proyecto profesional cuyo código no sea analizado y transpilado con alguna herramienta (Webpack, Rollup, Parcel) que se ejecute con node.js.

El problema más común al trabajar en diferentes proyectos es que éstos suelen ejecutarse con versiones diferentes de node.js, por lo que más óptimo es tener un programa que gestione las versiones de node.js por ti.

  1. No instales node.js del ejecutable que se puede descargar de su página oficial. Y si ya lo tienes, desinstálalo.
  2. Instala nvm for windows.

Con NVM podrás instalar cualesquiera versiones de node.js, y cambiar en cualquier momento la versión activa para ejecutar tu proyecto sin problemas de compatibilidad.

nvm ejecutándose en un terminal

El Servidor de Desarrollo

Aunque esto depende más de la plataforma donde va a ejecutarse la web (PHP? Ruby? .NET?), para testear una web estática o una SPA en tu ordenador no hace falta una compleja configuración.

Si estás utilizando Webpack, entonces podrás fácilmente implementar el servidor de desarrollo cambiando la configuración (disponible sin plugins adicionales desde la versión 4). En node.js también hay varias opciones con diferente grado de dificultad para montar un servidor local, ya sea utilizando un package (Express, Server) o programándolo a pelo con el módulo HTTP.

Personalmente prefiero utilizar un breve comando en el terminal para levantar un servidor en cualquier directorio y no tener que configurar mucho (o nada si es posible). Y para lograrlo tenemos dos opciones:

  1. Si tienes instalado Python en tu ordenador, entonces ya tienes un servidor súper económico y fácil de arrancar desde el terminal:

    python -m http.server 8000

    Abre http://localhost:8000/ y podrás acceder a tu página.

  2. Hay una alternativa parecida que utiliza node.js, del que ya hemos hablado que tienes instalado con nvm (¿verdad?). Es el Live Server y lo puedes ejecutar utilizando el comando npx:

    npx live-server

    Tarda más en arrancar que el servidor de Python, pero puedes guardar la configuración en un archivo .live-server.json. Y como que mola más si está hecho en node.js, ¿no?

El Repositorio

No importa qué tipo de proyecto vayas a trabajar, ya sea profesional o personal, la gente que almacena su código en un repositorio es un 68% más feliz (dato sin confirmar).
Aquí no voy a debatir sobre cuál VCS es mejor, pero indudablemete git es el más popular ya que hay muchas plataformas gratuitas para alojar código.

git-flow

Utilizar git en Windows es bastante sencillo, sólo necesitas dos cosas:

  1. Descargarlo de https://git-scm.com/download/win e instalarlo,
  2. Instalar una interfaz gráfica como Git Extensions o Sourcetree.

En verdad el punto dos no es necesario si quieres utilizar git desde la línea de comandos, es simplemente una elección de comodidad.

Una vez instalado git, necesitarás conectarte al servidor donde subir tu código por SSH de manera segura utilizando un par de claves pública y privada. Cada vez que ejecutes git pull o git push, el servidor debe verificar que eres tú. La mejor opción es que consultes con la plataforma de alojamiento cómo conseguir estas claves, y que para esto último utilices el programa PuTTY.

Bonus: El Terminal

Durante el desarrollo nos vamos a pasar mucho tiempo tecleando en el terminal, y mejor hacerlo en uno que sea más práctico que la consola de Windows.

Cmder terminal

Para ser sinceros no hay muchas opciones, pero la que más destaca es Cmder: un reemplazo de la vetusta consola de Windows, con colores (parece una nimiedad pero ayuda mucho en la legibilidad), integración con git, aparece en el menú contextual de Windows para poder abrir un terminal en cualquier carpeta, personalizable, y tiene la opción de poder ejecutar cualquier shell en una pestaña nueva.

Sin contar con los terminales que se pueden obtener con el subsistema de Windows para Linux, es lo más cerca que se puede llegar a un terminal de MacOS o Linux.