Desarrollador Web Frontend.

Este es el primero de 2 artículos que publicaremos, el primero (este) habla sobre herramientas y tecnologías que son trend y que te permitirán convertirte en Desarrollador Web Frontend, el siguiente será para hablar de la parte del Backend.

Un Desarrollador Web Frontend, es el que se encarga de la parte que el navegador despliega, esto implica en términos generales utilizar HTML, CSS y javaScript. Y aunque parte de sus responsabilidades es que la página se vea de cierta manera, su trabajo no es de diseñador, si no de traductor del diseño a las tecnologías antes mencionadas, y del consumo de datos (o despliegue) que vienen de la parte del servidor.

Antes de iniciar con las tecnologías, quiero recalcar que este también es el trabajo de un desarrollador, y aunque vas a toparte con tecnologías que no son precisamente lenguajes de programación como CSS y HTML, tendrás que trabajar mucho con javaScript, probablemente el lenguaje más utilizado del mundo, y a partir de dicho lenguaje usar frameworks, librerías y patrones de diseño; además de que para desarrollar instrucciones de CSS y HTML que sean fáciles de mantener deberás utilizar mucho del pensamiento lógico que acompaña ser desarrollador. Así que, de nuevo, no es un trabajo de diseño, si no de desarrollo visual.

Desafíos

¿A qué desafíos se enfrenta un desarrollador Frontend? Aquí algunos:

Tiempo de Carga

El tiempo que tu página web tarda en cargar afecta importantemente el nivel de conversión de tu producto. Pruebas en Google han demostrado que hasta medio segundo de carga puede afectar la conversión de usuarios, y no es muy difícil imaginar por qué, a nadie le gusta esperar.

Muchas de las variables involucradas en qué tan rápida (o lenta) es tu página web, dependen del equipo en el frontend, y otras del equipo en el Backend. Aquí algunos puntos involucrados en qué tan rápido carga tu página

• Los assets están compresos
• Los assets está en gzip
• El tamaño de las imágenes está adaptado, es decir, si tu imagen ocupa 10px (porque la redimensionaste con CSS) no es eficiente que la imagen original sea de 1000px.
• Tus scripts están uglificados, las variables con nombres descriptivos como monto_total_compra_usuario, se cambian por cosas como m, para reducir el tamaño del archivo

Escribir código mantenible

Este punto es particularmente importante y difícil con tecnologías como HTML y CSS que no son dinámicas, no hay ciclos, ni condiciones, tampoco hay funciones, mucho menos objetos... es decir, todas esas herramientas que tenemos en lenguajes de programación para escribir código mantenible no están disponibles en estas tecnologías.

Aún así es posible escribir código mantenible, para CSS te recomiendo el libro de CSS Secrets de Lea Verou que explica cómo enfrentar distintos problemas de diseño en CSS con código eficiente y mantenible. También para CSS existen preprocesadores como SASS, LESS, Stylus y otros; mismos que extienden las capacidades de CSS añadiendo variables, ciclos, funciones, mixins y otras cosas interesantes, que claro, te permiten escribir mejor código. Estos preprocesadores traducen el código que escribes a CSS que entiendan los navegadores pero lo hacen automáticamente.

En la parte de HTML existen engines para cada lenguaje de backend, generalmente cuando trabajas con un framework, estos vienen con motores de render ya predefinidos, por ejemplo, en Rails tenemos ERB y otro muy cool es HAML; en NodeJS existen JADE, ectjs y muchos otros; en Laravel (de PHP), tenemos Blade.

Básicamente estos motores de render funcionan añadiendo código del lenguaje con el que estás trabajando en el template (en el archivo que originalmente era puro HTML), cuando una petición llega al servidor, éste procesa el template, transforma el código incrustado en HTML puro y se lo manda al navegador, de modo que el navegador sólo ve HTML.

Soportar múltiples navegadores

Si funciona en tu navegador (que probablemente es Chrome o Firefox), no significa que va a funcionar en la computadora del trabajo godínez donde todavía tienen Windows XP e Internet Explorer 8; el desafío de crear páginas que se vean bien en todos los navegadores es real, es complicado y es para todos. Los números de Código Facilito, que es una página de tecnología enfocada a gente que muy probablemente actualiza su navegador, se ven así (último mes):

• 1 visita Internet Explorer 6
• 6 visitas de Internet Explorer 7
• 24 visitas de Internet Explorer 8
• 135 Internet Explorer 9

Para nosotros no es un big deal porque naturalmente es costoso mantener versiones viejas de un navegador, y en la parte de costo/beneficio no vale modificar el sitio o limitarnos a usar nuevas capacidades por ~170 visitas, pero... como dije antes, somos un sitio de programación... y aún así recibimos visitas de esos navegadores, ahora imagina si tu cliente vende productos para papás y mamás, o abuelos, o tuppers para la oficina... es MUY probable que recibas muchísimas más visitas de esos navegadores, y tienes que mantenerlos.

Para esta parte existen scripts a los que llamamos Polyfils, que básicamente se encargan de, usando javaScript, añadir al navegador las capacidades de un navegador moderno, aunque está claro que habrá casos en los que será imposible. También existen detectores de capacidades como Modernizr que usando una serie de pruebas te indica qué está disponible y qué no en el navegador del usuario para que tú puedas reaccionar acorde.

Un consejo extra para este apartado es tratar de siempre apegarse a los estándares del W3C, el consortium de la web, o en otras palabras, los que deciden cómo se harán las cosas, qué habrá en HTML y qué no, qué habrá en CSS y qué no.

Los mitos

Aquí quisiera resaltar algunas cosas que se piensan del trabajo de Frontend que no son verdad, y que entenderlo te ayudará a convertirte en uno de ellos o a mejorar como uno de ellos.

• Un Frontend developer es un diseñador: NO, aunque generalmente ayuda que tenga conocimientos y/o buen gusto para el diseño, no es en realidad el trabajo. Este mito nace porque generalmente agencias pequeñas que generan proyectos no tan grandes, piden frontend developers que sepan manejar Illustrator, Photoshop y herramientas similares. Es válido, y hay perfiles así, pero... todo viene con un costo, un ingeniero de desarrollo frontend se especializa en rendimiento, en performance, en frameworks frontend y así, no en herramientas de diseño.

• CSS es para diseñadores: </3. CSS es un lenguaje complejo, es una herramienta poderosa con muchas capacidades y requiere de aplicar mucha lógica para crear diseños adaptables, responsivos, soportados por múltiples navegadores y claro con diseños desafiantes. CSS incluso tiene una varibable (currentColor) y en futuras versiones te permitirá declarar tus propias variables. Mucho de cómo funcionan las propiedades de CSS está basado en matemáticas, así que no menosprecies CSS, aprende a fondo. Tenemos un curso épico que puedes tomar aquí.

• Es más difícil ser Backend que Frontend dev: ¿Quién sabe? Los desafíos son distintos y los niveles son distintos, no es lo mismo ser frontend engineer en Apple que ser backend developer en proyectos de Wordpress (sin ofender a Wordpress), las empresas grandes buscan gente especializada en frontend, ingenieros de frontend, que se enfrentan a desafíos muy difíciles e interesantes.

• Un Frontend no programa: javaScript, como decía es uno de los lenguajes más populares, y precisamente es el lenguaje de un desarrollador frontend; además del lenguaje puro, un ingeniero de frontend trabaja con frameworks como ReactJS, AngularJS, Ember, Backbone y con librerías como jQuery, Prototype, Motools y otros. También trabaja con API's de HTML como Geolocalización, LocalStorage, Canvas, y así.

Final

Hay mucho más de que hablar sobre lo que es y lo que no es un Frontend, sobre las herramientas que usan y que los hacen más productivos, continuaremos en otro artículo. Para este me gustaría que dejaras tus opiniones, tu experiencia como Frontend y correcciones a lo que aquí comento.

No olvides compartir el artículo