Comenzando con Front-end

Antes de comenzar a escribir líneas de código y desarrollar aplicaciones web, debemos comprender qué es front-end. Dividimos una aplicación web en dos partes, la primera es la parte que se ejecuta en un servidor, donde está toda la parte lógica de la aplicación, conocida como back-end. Vimos mucho esta diferencia en este artículo de back versus front.

La segunda es la parte que se ejecuta en el dispositivo de la persona que usa la aplicación, donde está toda la parte visual e interacción con esa persona (imágenes, videos, botones, animaciones, etc ...). Esta segunda parte se conoce como front-end. Esta arquitectura era bien conocida como cliente-servidor.

Solo debemos tener cuidado cuando usamos el término "front-end". Dije que es en front-end donde está toda la parte visual e interactiva. Pero front-end no es solo una parte visual, hoy en día también es muy lógica, mucha programación.Hay una subdivisión dentro del propio front-end: La parte visual y la parte lógica. La parte visual es exactamente lo que ve la persona al abrir la aplicación: imágenes, botones, colores, iconos, tablas, animaciones, entre otros, y la parte lógica es la parte que se encarga de la integración del back-end con el front-end: solicitudes para API, completado dinámico de informaciones, cuentas, validaciones, etc…Pero aunque existan estas partes dentro del front-end, ambas necesitan de conocimiento básico en cuatro habilidades: lógica, HTML, CSS y JavaScript. Independientemente de si desea trabajar solo en la parte lógica de front-end o solo en la parte visual, estas cuatro habilidades son extremadamente importantes para convertirse en alguien que desarrolla front-end.

No necesita dominar estas cuatro habilidades, con la excepción de la lógica. Pero debes tener al menos el conocimiento básico de ellas.

¿Qué es HTML?

HTML es el lenguaje de la web, es el esqueleto de una página, es su estructura. HTML es un lenguaje de marcado de texto diseñado para indicar al navegador qué tipo de contenido se coloca en una página. Es la base para mostrar algún contenido en la web.

Es con HTML que le decimos al navegador que la página que estamos construyendo tiene un título, un párrafo, una imagen, un enlace a otra página, una lista, etc...

¿Qué es CSS?

Si HTML es la estructura de una página web, CSS es la pintura en la pared, es el marco del cuadro colgado, es el tamaño del letrero. CSS es un lenguaje creado para diseñar cosas en una página web, ya sea tamaño de fuentes, colores de cajas, efectos visuales, etc…

¿Qué es JavaScript?

JavaScript es el lenguaje creado para brindar interacción en páginas web. ¿Quiere pulsar un botón y cambiar el color de cualquier componente? ¡JavaScript! ¿Quiere mostrar un mensaje en la pantalla del navegador de la persona que usa su aplicación? JavaScript! ¿Quieres completar una página con información dinámica de un servicio en la web? ¡JavaScript! Entonces podemos decir que JavaScript es el "cerebro" de una página web.

Entendí el concepto, pero ¿por dónde empiezo?

La base de una página web es HTML. Sin HTML, no tiene nada que diseñar con CSS o crear interacciones. Entonces, el primer paso es comprender qué es HTML y cómo se comienza una página usando HTML.No todas las páginas web necesitan interacciones más avanzadas, pero todas las páginas necesitan algún tipo de diseño. Con ese pensamiento en mente, el segundo paso es aprender a diseñar páginas CSS.El tercer paso es aprender cómo hacer que la página sea más dinámica para quien la vaya a usar. Microinteracciones, carga dinámica de información, búsquedas e incluso cambio de diseño mediante JavaScript.

Ya conozco los conceptos básicos de los tres, ¿adónde voy ahora?

Ahora todo depende de lo que más te llame la atención. Recordando que el front-end se puede dividir en dos partes: la parte visual y la parte lógica. ¿Cuál te llama más la atención?

Esta no es una decisión definitiva, puedes cambiar el camino si crees que un camino no es el ideal. ¡Otra cosa importante es que hagas lo que te da placer, ¡lo que te diviertes haciendo y eso te trae satisfacción personal! No te obligues a hacer algo que no te gustaría hacer. Es muy importante mantener la salud mental.

¡Me gusta mucho la parte visual! ¿Cuál es mi camino?

Aquí es donde la especialización es mayor en HTML y CSS. Hay varias tecnologías, técnicas y estándares que se deben aprender. Y aún aquí pueden haber otros caminos más específicos.

HTML

Lo más importante al escribir HTML es escribir un HTML semántico. Las tags existen exactamente para describir el contenido que se muestra en la página. Aprende también los atributos de accesibilidad para que la página sea más inclusiva. Recuerda que una página con HTML semántico e inclusivo ¡tiene una clasificación más alta en los motores de búsqueda! Aprende técnicas de SEO y accesibilidad.

CSS

Tecnologías / propiedades:

• Transition

• Animation

• Transform

• Perspective

• CSS Grid

• Flexbox

• Objec-fit

Estas tecnologías son muy interesantes para aquellos que quieran desarrollar páginas sin utilizar frameworks CSS.

Pre/Post-procesadores:

• SASS (preprocesador)

• PostCSS (post-procesador)

Existen procesadores pre / post para facilitar la escrita de CSS. Terminas escribiendo código CSS de una manera diferente y al subirlo a un servidor, todo se transforma en CSS común.

Frameworks:

• Bootstrap

• Materialize CSS

• Tailwind CSS

Los frameworks son interesantes para aquellos que necesitan acelerar la escrita de CSS, sin tener que preocuparse por la responsividad o los nombres de las clases.

Estándares CSS:

• BEM

• Atomic CSS

• Cube CSS

• SMACSS

Los estándares CSS son diferentes formas de escribir CSS, ya sea en nombres de clases o separando propiedades. La idea principal de estos estándares es escribir un CSS más limpio y más fácil de entender y hacerle mantenimiento.

Algunos puntos para agregar: Es interesante para quienes quieran seguir este camino tener conocimientos de JavaScript para pequeñas interacciones y sobre todo saber lidiar con eventos. El conocimiento de JavaScript es extremadamente importante para trabajar con WebGL. Y también es un extra tener conocimientos en diseño.

¿Cuál es el nombre de esta profesión? ¿Qué hace?

Es un poco complicado decir exactamente cuál es el nombre de la persona que trabaja en este camino. Algunos lo llaman Diseñador Web, Diseñador de Interacción, Diseñador de interfaz de usuario, etc. Pero quizás el nombre más aceptado es Diseñador Front-end.

Una de las grandes ventajas de tener un diseñador front-end es que es el puente entre diseñadores y programadores. Precisamente porque esta persona tiene conocimientos básicos en ambas partes, es capaz de traducir lo que las dos áreas terminan pidiendo o peleando durante la fase de desarrollo. Ella es la persona principal a la hora de convertir el dibujo del equipo de diseño en una página real.

¡Me gusta mucho la parte lógica! ¿Cuál es mi camino?

Aquí es donde la especialización es total en JavaScript. Lo que les acaba pasando a algunas personas que siguen este camino es que solo aprenden frameworks CSS, ya que no es su objetivo aprender todo de CSS y HTML. Pero además del camino para quien quiera seguir la parte visual, hay varias tecnologías para elegir y profundizarse.

"Lenguaje"

TypeScript

Este es el "lenguaje" principal que se utiliza para escribir aplicaciones o funciones con JavaScript. Dejé el término "lenguaje" entre comillas porque en realidad es JavaScript. Hay otros "lenguajes" que no mencioné porque el principal y más usado es TypeScript, pero los otros son solo diferentes formas de escribir JavaScript.

Frameworks

React

Angular

Vue.js

Next.js

Ionic

React Native

Frameworks son herramientas de JavaScript que facilitan la escrita de aplicaciones y funciones más complejas y robustas. Como en el caso de los “lenguajes”, al final lo que se ejecuta es un código JavaScript.

Características / Tecnologías

• Fetch

• WebSocket

• LocalStorage

• [Async/Await

• Promises

• Map

• Arrays tipados

• SPA

• Progressive Web Apps

• WebGL

Aquí vienen funciones y conceptos que se usan comúnmente en las aplicaciones cotidianas, especialmente si su aplicación hace más que solo mostrar HTML y CSS. Muchos de estos conceptos son extremadamente importantes para las aplicaciones que se conectan con un servicio back-end u otras API. WebGL viene como un bono para el desarrollo de juegos, por ejemplo.

¿Cuál es el nombre de esta profesión? ¿Qué hace?

Aquí es un poco más complejo dar un nombre único porque algunas personas terminan especializándose en uno o más frameworks. Pero si se trata de dar un nombre genérico sería Ingeniera / Ingeniero Front-end o Desarrolladora/Desarrollador Front-end. Dependiendo del framework en el que desee enfocarse, puede buscar por Desarrolladora/Desarrollador React, por ejemplo.

Front-end es un área con muchos caminos a seguir, pero cabe mencionar que, independientemente del camino elegido, es necesario tener un cierto conocimiento básico. Tecnologías, frameworks y conceptos cambian a una velocidad extremadamente alta en el mundo front-end, por lo que siempre se recomienda actualizarse.

Les invitamos a conocer los cursos de front-end en la plataforma de Alura cursos.

Puedes leer también:

• Empezando con el desarrollo web Front-end
• Empezando a organizar tu CSS
• ¡Organiza tu código Javascript de una manera fácil!