El desarrollo Web abarca múltiples disciplinas, pero la principal distinción que podemos hacer es la que lo divide entre Front-End y Back-End.
De manera rápida podemos definir el "front" como todo aquello que se ejecuta en el navegador, mientras que el "back" es lo que trabaja en el servidor.
El front a su vez se podría dividir entre los diseñadores Web/UI/UX, que se encargan fundamentalmente del diseño y comportamiento de las interfaces de usuario, y los desarrolladores Web cuyo trabajo consiste básicamente en dotar de interactividad a la interfaz y hacer comunicaciones con los servidores.
Esto último, que parece muy simple, en realidad es cada vez más complicado porque las aplicaciones Web actuales ya hace mucho que deben comportarse como cualquier otra aplicación tradicional de escritorio o móvil: con la inmediatez y las capacidades de éstas. Por ello, en la actualidad ser desarrollador Web Front-End implica dominar un montón de conceptos, APIs, bibliotecas y herramientas.
A continuación voy a comentar cuáles creo que son las tecnologías, lenguajes y herramientas que debes dominar si quieres ser un buen desarrollador Web Front-End profesional. En los tiempos que corren, ya hace muchos años que no es suficiente con saber HTML y CSS.
Materias fundamentales e indispensables
Como es obvio, lo primero que debes aprender es HTML y CSS.
HTML es un lenguaje de marcas (o sea, ninguna programación "de verdad" de momento) que se encarga en exclusiva de los contenidos de las páginas y aplicaciones Web, así como de su distribución. Aunque muchas personas creen lo contrario, HTML no determina en absoluto el aspecto que va a tener la interfaz de usuario (o la página web) que desarrollamos. De eso se encarga CSS a través de sus selectores y propiedades. Esta separación clara entre contenido/distribución y aspecto es un equipo ganador ya que nos permite manejarlos por separado y que, hasta cierto punto, sean independientes.
El problema de HTML y CSS es que, aunque lo básico es muy sencillo de aprender, tienen algunos conceptos complejos (y sobre todo muchos detalles) que muchos desarrolladores pasan por alto. Y es cuando vienen los problemas y las interfaces que no eres capaz de dominar. Además, hay técnicas que pueden llegar a ser complejas como Responsive Web Design o la maquetación con Flexbox y Grid, las tecnologías más recientes incorporadas a los navegadores con este propósito.
Por supuesto, conocer algún framework CSS como (y sobre todo) Bootstrap es casi ineludible, porque los vas a acabar usando seguro.
Aunque no vayas a ser diseñador Web (y casi ningún programador Web lo es: se nos da fatal la parte estética) es indispensable dominar HTML y CSS. Sin excusas. Incluso aunque seas desarrollador back-end: al fin y al cabo tendrás que lidiar con ellos en muchos casos igualmente.
El otro indispensable entre las materias fundamentales es, por supuesto, el lenguaje de programación JavaScript (¡no confundir con Java!). Ya he contado los 5 principales motivos por los que todo programador debería aprender JavaScript, pero si eres programador Web entonces es absolutamente indispensable. JavaScript es lo que te permitirá dotar de "inteligencia" a las aplicaciones y crear desde la simple validación de un formulario a un sistema de comunicaciones en tiempo real a través de Internet. Es así de potente. Hoy en día hasta va compilado por lo que no tiene nada que envidiar en rapidez a la mayor parte de los lenguajes, y lo puedes utilizar en todas partes (sí, también en el servidor).
De nuevo, JavaScript es una herramienta de engañosa simplicidad: lo básico se aprende enseguida, pero tiene multitud de detalles y conceptos importantes que, si no estudias de manera clara, serán piedras con las que vas a tropezar por el camino siempre. Así que, aprenderlo de oído es una mala idea.
Por fin, la cuarta pata de esta silla sobre la que nos apoyaremos, es la famosa biblioteca jQuery, utilizada por más del 70% de los sitios web del mundo. En realidad, esto por debajo no es más JavaScript, pero esta "librería" nos aísla de muchas de las dificultades de usar el lenguaje "a pelo" para hacer ciertas cosas en la interfaz de usuario. En lugar de reinventar la rueda constantemente y pegarnos con las pequeñas diferencias entre navegadores, usamos jQuery y somos más felices y productivos 😊
Un quinto tema fundamental es que deberemos dominar a fondo las herramientas para el desarrollador de los principales navegadores, fundamentalmente las de Google Chrome y las de Mozilla Firefox. Son indispensables para poder depurar nuestro código, optimizar la interfaz, medir rendimiento... Son herramientas complejas si se quiere profundizar en ellas, y dominarlas es algo muy importante.
Resumen de "indispensables"
- HTML
- CSS, RWD, Flexbox, Grid
- JavaScript
- jQuery
- Herramientas del desarrollador de navegadores
Materias más que recomendables
Vale, con lo anterior tenemos cubierto lo mínimo. Con esto era casi suficiente hasta no hace muchos años y en realidad podremos abordar el trabajo en proyectos pequeños y para muchas PYMEs. Pero si queremos ser unos buenos profesionales del sector no podemos quedarnos ahí. Hoy en día no llega.
JavaScript tiene a su "hermano mayor" en ECMAScript, que es como se llama el estándar que regula sus capacidades. En realidad lo que la mayor parte de la gente llama "JavaScript" es lo que se denomina formalmente ECMAScript 5. Pero se lanza una nueva versión de este lenguaje cada año desde 2015, por lo que en realidad, en el momento de escribir esto, vamos por la versión 10 de ECMAScript. Los navegadores lo implementan todo muy rápido por lo que hoy en día es necesario estar a la última también.
Junto con HTML5 se lanzaron muchas APIs muy potentes en los navegadores, que estrechaban cada vez más el hueco que existía entre las aplicaciones nativas y las aplicaciones Web. Gracias a las APIs de HTML5 puedes hacer casi de todo: manejar archivos, trabajar sin conexión, enviar notificaciones, realizar comunicaciones en tiempo real, hacer tratamiento gráfico a bajo nivel para manipular imágenes y vídeo, geoposicionar a los usuarios, crear animaciones y transiciones de estados, crear tareas costosas en segundo plano... Las posibilidades son enormes y conviene conocerlas y dominar muchas de ellas.
Otra cuestión importante hoy en día es conocer bien alguno de los frameworks JavaScript más relevantes, a saber: Angular, Vue.js o React. El último, mantenido por Facebook, es el más limitado porque se encarga solamente de la interfaz de usuario, pero aún así es muy utilizado. Angular, de Google, es seguramente el más demandando en las empresas porque te deja pocas decisiones que tomar en cuanto a la arquitectura y permite crear aplicaciones de calidad siendo coherente en ello todo el equipo de programadores. Vue.js está creciendo de manera imparable y los desarrolladores lo adoran. Uno de ellos al menos es recomendable aprenderlo.
Finalmente, en este apartado hay una serie de herramientas especializadas que debemos conocer también. La complejidad de los desarrollos actuales en Front-End hacen que sea necesario gestionar dependencias y automatizar tareas, para lo cual debemos usar algunas herramientas. Las indispensables son:
- Visual Studio Code: el editor que se está convirtiendo poco a poco casi en "el" editor. Lo que usa prácticamente todo el mundo para escribir código de manera rápida y eficiente.
- Git, para control de código fuente. No se concibe el desarrollo actual sin esto.
- npm / yarn: para gestión de dependencia y automatización de tareas.
- Webpack: para gestionar y utilizar dependencias (de otro modo), automatizar ciertas tareas (de otro modo también), y para poder crear aplicaciones optimizadas.
Resumen de recomendables
- ECMAScript
- APIs de HTML5
- Un framework: Angular, Vue.js y/o React
- Herramientas fundamentales: VS Code, Git, npm/yarn y Webpack
Para nota
Si además queremos sobresalir y ser un profesional de los que llaman la atención, hay muchas cosas que podemos aprender para lograrlo. A continuación enumero, sin entrar en mucho detalle, las que creo que más pueden interesar:
- TypeScript: es un lenguaje por encima de JavaScript que te permite desarrollar más rápido y con menos errores. Cada vez más popular y adoptado por las empresas. (En este curso vemos TypeScript desde cero)
- PWAs: para crear aplicaciones web para el móvil que se comportan como si fueran nativas. La tendencia de futuro en este ámbito.
- Accesibilidad: para personas con discapacidad. Es algo que debería hacerse en todos los proyectos, pero es obligatorio en todos los que tienen que ver con la administración, por ejemplo.
- GraphQL: un nuevo estándar para APIs que permite mayor flexibilidad desde el lado cliente a la hora de obtener los datos, sin tener que usar varios servicios REST para lo mismo.
- Algoritmos y estructuras de datos: para no reinventar la rueda a cada paso y entender mejor los frameworks.
- Programación funcional: JavaScript es un lenguaje que es multiparadigma. Uno de ellos es el paradigma funcional que se utiliza cada vez más. Aprenderlo con el lenguaje siempre es una ventaja.
- Jekyll y generadores estáticos de sitios: la tendencia más actual en creación de sitios web.
En resumen
En la actualidad, los conocimientos necesarios para dedicarse al desarrollo Web son más exigentes de lo que solía ser hace unos cuantos años, y no digamos hace una década. Los mínimos son más altos, las tecnologías más complicadas y hay más "partes en movimiento" a las que debes estar atento. A cambio de ello lo que tenemos son mejores profesionales, más preparados y con más calidad en el empleo. Requiere más tiempo y más estudio, pero nada que una persona con ganas y vocación no pueda aprender en unos pocos meses de estudio bien enfocado.
Las tecnologías y herramientas que menciono son las que considero que deberías conocer como mínimo, de manera muy recomendada y si quieres destacar. Como ves, más allá del framework de moda o la última "cosa brillante" tras la que va todo el mundo, lo más importante es dominar bien los fundamentos, yendo más allá de aprender "recetas". Si dominas eso, los cambios, las novedades y las modas no te afectarán, porque siempre estarás en disposición de ponerte al día en ellas cuando lo necesites.
¡Espero que te resulte útil!
Fecha de publicación: