El desarrollo web abarca múltiples disciplinas, pero la principal distinción que podemos hacer es entre front-end y back-end.
Podemos definir rápidamente el “frente” como lo que se ejecuta en el navegador, mientras que el “reverso” es lo que se ejecuta en el servidor.
El frente, a su vez, podría dividirse entre diseñadores web/UI/UX, que son los principales responsables del diseño y el comportamiento de la interfaz de usuario, y desarrolladores web, cuyo trabajo es básicamente hacer que la interfaz sea interactiva y se comunique con los servidores.
Esto último, que parece muy sencillo, se complica cada vez más porque las aplicaciones web actuales se comportan desde hace mucho tiempo como cualquier otra aplicación tradicional de escritorio o móvil: con su inmediatez y capacidades. Por lo tanto, ser un desarrollador web front-end significa dominar muchos conceptos, API, bibliotecas y herramientas.
A continuación, comentaré cuáles creo que son las tecnologías, los lenguajes y las herramientas que debes dominar si quieres ser un buen desarrollador web front-end profesional. En estos tiempos no ha sido suficiente dominar HTML y CSS durante años.
Temas básicos e indispensables
Lo primero que debes aprender es HTML y CSS.
HTML es un lenguaje de marcado (es decir, sin programación “real” en este momento) que trata exclusivamente con el contenido de sitios web y aplicaciones y su distribución. Aunque muchas personas creen lo contrario, HTML no dicta cómo se verá la interfaz de usuario (o la página web). eso es lo que CSS manejado por sus selectores y propiedades. Esta clara separación entre contenido/distribución y apariencia es un equipo convincente, ya que nos permite administrarlos por separado y, hasta cierto punto, ser independientes.
El problema con HTML y CSS es que, si bien los conceptos básicos son muy fáciles de aprender, contienen algunos conceptos complejos (y particularmente muchos detalles) que muchos desarrolladores pasan por alto. Y luego hay problemas e interfaces que no puedes dominar. Además, algunas técnicas pueden ser complejas. Diseño web adaptable o la maquetación con Flexbox y Grid, las últimas tecnologías integradas en los navegadores para tal fin.
Por supuesto, si conoce algunos marcos CSS como (y lo más importante) Oreja es casi inevitable porque seguramente terminarás usándolo.
Aunque no serás diseñador web (y casi ningún programador web lo es: nosotros somos la parte estética, es imprescindible). dominar HTML y CSS. Sin excusas. Incluso si es un desarrollador de back-end: en muchos casos, tendrá que tratar con ellos de todos modos.
Las otras materias básicas esenciales son naturales. el lenguaje de programación JavaScript (¡No debe confundirse con Java!). Ya he enumerado las 5 razones principales por las que todo programador debería aprender JavaScript, pero si eres programador web entonces es indispensable. JavaScript le permite agregar “inteligencia” a las aplicaciones y crear cualquier cosa, desde la simple validación de un formulario hasta un sistema de comunicación en tiempo real a través de Internet. Es tan poderoso. Hoy incluso está compilado de tal manera que la mayoría de los idiomas no lo envidian rápidamente, y puede usarlo en cualquier lugar (sí, incluso en el servidor).
Una vez más, JavaScript es una herramienta de engañosa simplicidad: Los conceptos básicos se aprenden enseguida, pero tiene multitud de detalles y conceptos importantes que, si no aprendes con claridad, te apedrearán, con los que siempre tropezarás por el camino. Así que aprenderlo de oído es una mala idea.
Finalmente, la cuarta pata de esta silla en la que nos apoyaremos es la famosa jQuery Biblioteca utilizada por más del 70% de los sitios web en todo el mundo. Esto a continuación ya no es JavaScript, pero esta “biblioteca” 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 constantemente la rueda y ceñirnos a las pequeñas diferencias entre los navegadores, usamos jQuery y somos más felices y productivos.
Un quinto problema fundamental es que debemos dominar a fondo las herramientas a disposición de los desarrolladores de los principales navegadores, fundamentalmente los de Google Chrome y Mozilla Firefox. Son fundamentales para depurar nuestro código, optimizar la interfaz, medir el rendimiento… Son herramientas complejas si quieres profundizar en ellas y dominarlas es muy importante.
Resumen de “esencial”
- HTML
- CSS, RWD, Flexbox, Cuadrícula
- JavaScript
- jQuery
- Herramientas para desarrolladores de navegadores
Importa más que recomendable
Ok, con lo anterior hemos cubierto lo mínimo. Eso era casi suficiente hasta hace unos años y en realidad vamos a poder trabajar en proyectos pequeños y para muchas pymes. Pero si queremos ser buenos profesionales en la industria, no podemos quedarnos con eso. Hoy no llega.
JavaScript tiene su “hermano mayor” en ECMAScript, así se llama la norma que regula sus habilidades. De hecho, lo que la mayoría de la gente llama “JavaScript” se llama formalmente así ECMAScript 5. Pero desde 2015, se lanza una nueva versión de este lenguaje cada año. ECMAScript. Los navegadores implementan todo muy rápido, por lo que hoy en día también es necesario estar actualizado.
Junto con HTML5, se introdujeron muchas API muy potentes en los navegadores, reduciendo progresivamente la brecha entre las aplicaciones nativas y las aplicaciones web. Gracias a API de HTML5 Puede hacer casi cualquier cosa: administrar archivos, trabajar sin conexión, enviar notificaciones, realizar comunicaciones en tiempo real, realizar procesamiento de gráficos de bajo nivel para manipular imágenes y videos, posicionar usuarios, crear animaciones y transiciones de estado, crear tareas costosas en segundo plano. Las posibilidades son enormes y conviene conocerlas y dominar muchas de ellas.
Otro tema importante hoy es conocer bien algunos de los más relevantes Marcos de JavaScripta saber: Cuadrado, Vue.js o reaccionar. El último, mantenido por Facebook, es el más limitado, ya que solo se ocupa de la interfaz de usuario, pero aún se usa ampliamente. Angular de Google es sin duda el más exigente en los negocios, ya que te deja con pocas opciones de arquitectura y te permite crear aplicaciones de alta calidad que son consistentes en todo el equipo de programadores. Vue.js está creciendo inexorablemente y a los desarrolladores les encanta. Se recomienda al menos uno de ellos para aprenderlo.
Finalmente, en esta sección hay muchas herramientas especializadas que también debemos conocer. La complejidad de los desarrollos actuales en el front-end hace necesario administrar dependencias y automatizar tareas, para lo cual necesitamos utilizar algunas herramientas. Esenciales son:
- Código de estudio visual: el editor que poco a poco se va convirtiendo en casi “el” editor. Lo que prácticamente todos usan para escribir código de manera rápida y eficiente.
- Git: para el control de la fuente. El desarrollo actual es impensable sin esto.
- npm / hilo: para la gestión de dependencias y la automatización de tareas.
- Paquete web: Administre y use dependencias (de lo contrario), automatice ciertas tareas (de lo contrario también) y sea capaz de construir aplicaciones optimizadas.
Resumen recomendado
- ECMAScript
- API de HTML5
- Un framework: Angular, Vue.js y/o React
- Herramientas básicas: VS Code, Git, npm/yarn y webpack
para la nota
Si nosotros también queremos sobresalir y ser un profesional que llame la atención, hay muchas cosas que podemos aprender a hacer para lograrlo. A continuación, sin entrar en detalles, enumero las que me parecen más interesantes:
- Mecanografiado: es un lenguaje sobre JavaScript que te permite desarrollar más rápido y con menos errores. Cada vez más popular y adoptado por las empresas.
- PWA: para crear aplicaciones web móviles que se comporten como si fueran nativas. La tendencia futura en esta área.
- Accesibilidad: para personas con discapacidad. Esto debe hacerse en todos los proyectos, pero es obligatorio en todos los proyectos relacionados con la administración, por ejemplo.
- GráficoQL: un nuevo estándar para las API que permite una mayor flexibilidad del lado del cliente para recuperar datos sin tener que usar múltiples servicios REST.
- Algoritmos y estructuras de datos: no reinventar la rueda a cada paso y comprender mejor las condiciones del marco.
- Programación funcional: JavaScript es un lenguaje multiparadigma. Uno de ellos es el paradigma funcional cada vez más utilizado. Aprenderlo con el lenguaje siempre es una ventaja.
- Jekyll y generadores de sitios estáticos: la última tendencia en la construcción de sitios web.
En resumen
Hoy en día, el conocimiento necesario para dedicarse al desarrollo web es más sofisticado que hace unos años, digamos una década. Los requisitos mínimos son más altos, las tecnologías más complicadas y hay más “partes móviles” a tener en cuenta. A cambio, tenemos mejores profesionales, mejor preparados y con mayor 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 meses de concentrado estudio.
Las tecnologías y herramientas que menciono son las que creo que al menos deberías conocer, que son un camino muy recomendable y si quieres destacar. Como puedes ver, más allá del marco de moda o la última “cosa brillante” a la que todos aspiran, lo más importante es dominar bien los conceptos básicos e ir más allá de aprender “recetas”. Si dominas esto, no te afectarán los cambios, las novedades y las modas porque siempre puedes ponerte al día cuando las necesites.