Los FrontEnd Developers han pasado por un poco de un renacimiento en los últimos años. Ha habido un brote salvaje y maravilloso en innovación que ha cambiado por completo lo que significa ser un desarrollador frontEnd.

Ahora tenemos una vasta y amplia gama de herramientas disponibles para nosotros, que nos permite desarrollar más rápido y de forma más inteligente, podemos llevar a cabo cosas que hace dos años parecían imposibles, en pocas palabras, en este momento es un momento increíble para ser un FrotEnd Developer.

Inicio

Hoy en día para crear o iniciar un proyecto en la parte de FrontEnd es muy fácil, todo lo que necesitamos para empezar voy a describirlo en este post, tratando de mostrar como es mi ambiente actual de desarrollo.

  1. Node: es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la capa del servidor (pero no limitándose a ello) basado en el lenguaje de programación javascript, asíncrono, con I/O de datos en una arquitectura orientada a eventos y basado en el motor V8 de Google, es nuestra parte vital para todo nuestro ambiente de trabajo.
  2. Git es el sistema de control de versiones de elección para la mayoría de los desarrolladores hoy en día. Muchos desarrolladores usan servicios como Github o Bitbucket para almacenar su código, en mi caso me gusta mucho Github.
  3. npm es el gestor de paquetes de Node, este se instala junto a NodeJS. Permite a los desarrolladores empaquetar su código nodejs en un módulo independiente y luego compartirlo con la comunidad. Hay paquetes npm que proporcionan casi todo tipo de funcionalidad que uno pueda imaginar, lo que le permite aprovechar mucho el trabajo de la comunidad. Cada nuevo proyecto tiene su propio conjunto de dependencias que necesitan para que puedan trabajar.
  4. Bower es un gestor de paquetes para las bibliotecas web de terceros. Históricamente si nuestro proyecto requiere incluir jQuery, uno tendría que ir a la página web de jQuery, descargue el archivo, extraerlo, y moverlo a la carpeta de scripts del proyecto. Bower simplifica ese proceso.

Desarrollo

En realidad la codificación y el desarrollo de un proyecto es donde mas pasó la mayor parte del tiempo. Hoy en día esta es una de las partes más agradables debido a las muchas herramientas disponibles. Veamos un poco de estas herramientas que usamos en el día a día y están en nuestro ADN como Frontend Developer.

  1. Grunt o Gulp  son automatizadores más popular de tareas entre los desarrolladores. Ya hay una enorme comunidad desarrollando Plugins que estan listos para nuestro uso. Estas herramientas nos permiten automatizar tareas rutinarias sin tener que sudar mas de la cuenta. Por ejemplo, si necesitamos para comprimir todas los archivos jpg, gif, png  o minificar todos nuestros archivos javascript en un unico archivo.
  2. Preprocesadores CSS como LESS, Sass o Stylus han hecho que sea mas fácil de mantener, extender y modular el CSS. Entre las muchas características que los preprocesadores CSS proporcionan, podemos nombrar dos de mayor valor  que son sin duda anidado selectores y las variables. Tener la capacidad de definir una variable de color en un solo lugar y utilizarlo en todo permite una flexibilidad en CSS que antes no existía.
  3. LiveReload cambia la forma de desarrollar, ya que aporta una fluidez al desarrollo. Cada vez que cambiamos un archivo que estemos trabajando en LiveReload (HTML, CSS, JS) nos daremos cuenta de que cambio en nuestro navegador inmediatamente y sin necesidad de actualizarlo. Ya no tenemos que guardar un archivo, cambiar al navegador y luego actualizar la página. Con liveReload después de guardar un archivo el navegador se actualizará en sí, ahorrándonos tiempo y el dolores de cabeza.
  4. Frameworks MVC, Angular o Ember El objetivo principal de estas herramientas es proveer una organización de código más conveniente y mantenible. Como resultado, logrando mayor productividad a la hora de construir la interfaz de una web, por medio de la implementación del conocido patrón MVC, aunque en este caso, del lado del cliente. Asimismo, dejando que el navegador se encarge de generar y actualizar la interfaz, se le quita esta responsabilidad al servidor, convirtiéndolo en una mera API que provee los datos al browser. Un punto importante en este tipo de desarrollo es reducir la sincronización de los datos al mínimo y aprovechar al máximo la capacidad de procesamiento que el navegador ofrece, dejando al servidor aquel procesamiento esencial que no se puede hacer del lado del cliente.
  5. Pruebas Unitarias, Karma, Jasmine o Mocha Tener un conjunto de pruebas unitarias sobre el código de la aplicación que desarrollamos es importante para tener más seguridad de que lo que hacemos funciona como se espera y no introducimos errores en funcionalidades que ya existían al hacer modificaciones, además de que en el caso de que haya errores estos serán más fácilmente descubiertos y resueltos en menos tiempo lo que hará que seamos más productivos

La vida de un desarrollador frontend esta mejorando cada día y las herramientas que tenemos a nuestra disposición hoy por hoy han sido mejoradas. Ya no estamos solo detrás de la sombra del navegador sino que ahora gracias a estos procesos descritos anteriormente podemos preocuparnos mas por el desarrollo y construcción del producto.

En próximos escritos dentro de este blog, estaré mostrando como configurar muchas de estas herramientas ademas de hacer las principales funciones. Espero les guste y les sea útil este post.

Imagen tomada de toptal.com