Conocimientos de un desarrollador Front-End


El desarrollo Front End ha cambiado bastante en los últimos años. En el pasado había una separación muy clara entre la parte de Front-End y el desarrollo Back-End. Actualmente, existen perfiles mixtos, y un abanico de tecnologías que, muchas veces, haga hacerte pensar en qué lado te encuentras.

Fuente: https://medium.com/@withinsight1

No obstante, si tuviéramos que hacer un listado del núcleo que forma a un desarrollador Front-End podría ser este:

  • HTML
  • CSS
  • JavaScript
  • Accesibilidad
  • Responsive Web Design
  • CSS frameworks
  • JavaScript frameworks
  • Sistemas de control de versiones
  • Web Performance
  • Browser Development tools
  • Building and automation tools
  • Testing
  • Web Components
  • Tú mismo

HTML

Denostado por muchos, es uno de los pilares (junto con CSS y JavaScript) del desarrollo Front-End. En los últimos años se han perdido buenas prácticas y metodologías a la hora de utilizarlo. Estos problemas han sido ocasionados por un desconocimiento de las cuestiones más básicas que lo conforman.

En constante (y lenta) evolución nos encontramos ya con la versión 5.1.

CSS

En ocasiones mágico, nos permite dotar a nuestras páginas y aplicaciones de un aspecto visual adecuado. No obstante, la lenta evolución de la especificación y, más aún, la lenta implantación en su momento de los navegadores consiguió que mucha gente no pudiera llegar a entenderlo.

Hoy en día, tras una nueva organización de la especificación y gracias a grandes divulgadores como Lea Verou se pueden realizar cosas fantásticas.

JavaScript

Utilizado en su momento para hacer interacciones básicas en el navegador, el auge de Node.js y diversos frameworks han hecho que sea un lenguaje prácticamente todo terreno.

Accesibilidad

Este punto da para una serie de artículos. Por desgracia, no se tiene en cuenta y, en los últimos años, casi se ha olvidado. Es difícil realizar entrevistas de trabajo a perfiles de Front-End en las que sepan responder bien sobre si conocen o han implementado soluciones de accesibilidad web.

No obstante, conviene recordar que hay legislación al respecto y, en el caso de España, existe desde hace unos cuantos años.

Si queréis obtener más información:

Responsive Web Design

Pero, para aquellos que piensen que es algo de ahora, no es un concepto nuevo.

Fuente: Oficina Española de W3C

La irrupción primero de los iPhone, con su defensa de la web en el móvil, y más tarde de los Android propició un auge de algo que ya se intentaba hacer desde hacía tiempo pero no terminaba de cuajar.

Incluso ahora vemos aplicaciones ejecutadas en dispositivos tan pequeños (llamados ahora wearables) como un reloj, o tan “grandes” como la televisión de nuestro salón.

Puntos de corte, resoluciones mínimas, resoluciones máximas… Se ha tratado de estandarizar a partir de qué punto tu desarrollo se está visualizando en una “tablet” o en un móvil. No obstante, la variedad de estos dispositivos es tan amplio que es difícil establecer un estándar. Lo mejor siempre será probar, probar y probar en el mayor número de dispositivos que puedas.

Steve Jobs introducing the first iPhone (MacWorld 2007)
Please allow cookies to watch this video.
Watch on YouTube

CSS frameworks

Tal vez la dificultad por comprender ciertos aspectos de CSS hicieron que el surgimiento de numerosos frameworks de CSS se propagasen rápidamente. Los desarrolladores tenían ahora Bootstrap, Foundation, etc y podían crear aplicaciones y sitios web dotándolos de un aspecto visual que antes no hubieran podido haber hecho con tanta rapidez.

De todas maneras, como toda herramienta, en buenas manos puede ser muy útil. En malas manos puede resultar perjudicial al no conocer ciertas bases que lo sustentan.

JavaScript frameworks

Al igual que con los frameworks de CSS, empezaron a surgir igualmente para JavaScript. En su momento, la aparición de jQuery consiguió que los desarrolladores con poca base de JavaScript pudiera realizar ciertas funcionalidades imposibles para ellos en su momento.

Más tarde, la aparición de las páginas de tipo SPI (Single Page Interface) dieron lugar a frameworks como AngularJs (después Angular), Ember, Backbone, etc, etc.. y también propició el que se conociera como la fatiga de JavaScript.

Sistemas de control de versiones

Hoy en día es difícil acostumbrarse a no utilizar un sistema de control de versiones para nuestros proyectos. Utilizados desde años pero no extendidos su uso, no fue hasta la aparición de GitHub cuando su uso se hizo más intensivo.

Por desgracia, muchos empezamos a utilizarlos cuando habíamos perdido parte de nuestro trabajo. Git, SVN… el que sea, pero deberías usar, al menos, alguno.

Web performance

Por desgracia, se pasa mucho por alto en este apartado pero es muy importante. Por mucho que hayamos hecho un desarrollo increíble, si los tiempos de respuesta son excesivos para el usuario no conseguiremos una experiencia satisfactoria por su parte.

Si no los has visto aún, echa un vistazo a alguno de los videos de Paul Irish y descubre por qué tu sitio va (o puede ir lento).

Adapting to the Mobile Web F̶u̶t̶u̶r̶e̶ Present (Polymer Summit 2016)
Please allow cookies to watch this video.
Watch on YouTube

Sizzle Reel (Progressive Web App Summit 2016)
Please allow cookies to watch this video.
Watch on YouTube

Browser Development Tools

Qué difícil era hace unos años depurar en nuestras páginas algo y encontrar un fallo. El desarrollo continuo de los navegadores nos ha traído unas herramientas increíbles que nos permiten analizar nuestra aplicación de una manera soñada antes.

Debugging The Web (Chrome Dev Summit 2016)
Please allow cookies to watch this video.
Watch on YouTube

Building and automation tools

Que levante la mano quien quiere hacer tareas repetitivas. Sobre todo, cuando descubres que puedes automatizarlas y que lo hagan por ti. Grunt abrió la veda de una manera masiva y Gulp le dio otro enfoque. Tal vez no sean necesarios ahora pero el caso es que no podemos obviar que existen los modos para automatizar nuestro trabajo.

Testing

¿Os imagináis un coche que sale de la cadena de producción sin pasar por una batería de tests?

Realizar tests en nuestro desarrollo (usando por ejemplo Jasmine o Mocha) nos ayudan a estar más seguro de lo que hacemos y, muy importante, a estar seguros de que seguirá funcionando si introducimos cambios.

Y ya cuando vemos con nuestros ojos un test de integración donde la aplicación se levanta sola y ejecuta funcionalidades, nos hace desear el tenerlo para nosotros.

Web Components

Quien haya trabajado en desarrollo Front End en los últimos diez o quince años es algo que siempre ha tenido en mente como concepto. La posibilidad de utilizar piezas sin el temor que se vean afectadas por otras.

Bien, aquel concepto es firme (no su implantación entera) ya como especificación, y no podemos obviar que está para quedarse.

Tú mismo

Al final el núcleo lo formas tú mismo. Ya sea con estos puntos que hemos expuesto pero también cómo te comuniques, cómo evoluciones, cómo te formes.

Recuerda: Stay Hungry. Stay Foolish

Steve Jobs' 2005 Stanford Commencement Address
Please allow cookies to watch this video.
Watch on YouTube

Fuentes