Una de las preguntas más comunes que hacen los estudiantes de EDteam que quieren dedicarse a desarrollo web, están comenzando desde cero y quieren conseguir su primer empleo, es ¿Qué debo aprender? y la segunda, ¿En qué orden?
Para contestar esas preguntas, lo primero que hay que saber es que la web está basada en tecnologías abiertas porque su creador, Tim Berners-Lee, decidió no patentar la web (sería multimillonario el día de hoy). Al contrario, decidió regalar su creación al mundo, por lo que cualquier persona o empresa puede crear sus propias tecnologías web, navegadores, librerías, frameworks, así como recomendar nuevos cambios a la especificación y crear nuevos lenguajes sin tener que pagarle nada a nadie ni pedir permiso.
Eso está muy cool, porque la web crece cada día más. Sin embargo, para la persona que está comenzando en la web, no tanto, porque encuentra un laberinto de tecnologías que lo confunde y no sabe por cuál decidirse. Si eres de esas personas que quiere saber cómo convertirse en un programador frontend, luego de este blog no te quedarán más dudas, porque en español, #NadieExplicaMejor que EDteam.
1. Backend y Frontend
El desarrollo web se divide en dos grandes áreas, llamadas Backend y Frontend. El primero es todo lo que tú no ves pero le da funcionamiento a la web. Es decir, todo lo que se programe en el backend está en servidores de Internet, donde está toda la lógica de negocio y luego está el frontend, que son las pantallas.
Por ejemplo, cuando entras a EDteam, en tu pantalla ves el logo de EDteam, unos botones en los cursos que dicen Sube a Premium, ves un buscador, los cursos, entre otras cosas. Tú no solamente ves contenido en la página de EDteam, sino que puedes interactuar con ese contenido. Es decir, podrías buscar cursos con el buscador, puedes agregar cursos al carrito, puedes comentar en la comunidad. En general, interactúas con la aplicación web.
El Backend y Frontend se comunican por algo llamado API. Por ejemplo, si un usuario quiere comprar un curso, lo hace desde el frontend, dándole clic a comprar y es la API quién se lo comunica a backend. Entonces, backend le devuelve la respuesta de si se pudo comprar o no el curso. Para ponerte un ejemplo más simple, piensa en un restaurante: la cocina sería el backend, donde se preparan los alimentos, que es la parte más importante del restaurante. Pero los clientes no pueden meterse a la cocina, no pueden ver qué está pasando allí y solo confían. La parte visible del restaurante, donde están las mesas y se sientan los clientes, hacen sus pedidos y comen, eso sería el frontend. ¿Y qué serían las API? sí, claro, los meseros, porque son quienes comunican al backend con el frontend.
Esta es una explicación súper resumida, pero si quieres más detalles, te recomiendo ver nuestro video de Youtube: ¿Backend o Frontend?, dónde te explicamos estos términos más a detalle.
2. Lenguajes web
Si estuviste prestando atención a lo que leías, te diste cuenta que el frontend ocurre en los navegadores. ¿Por qué en los navegadores? porque es allí donde entran los usuarios para consumir una página web. Existen muchos navegadores, como Chrome, Edge, Firefox Ópera, Safari, entre otros. Lo importante es recordar que el mundo frontend ocurre en los navegadores, y para eso, existen tres lenguajes: HTML, CSS y JavaScript.
HTML significa HyperTex MarKup Language. Es decir, un lenguaje para escribir supertextos (o hipertexto): es un texto capaz de conectarse con otros a través de algo llamado enlace. Es decir, el portal mágico que conecta a dos textos es un link. Esto es algo muy común al día de hoy, pero para 1989, cuando se creó la web, esto era un mágico portal. Entonces, si tú podías conectar todos los documentos, podías crear una red mundial y de ahí viene el famoso WWW o World Wide Web.
Por otro lado, tenemos a CSS, que significa Cascades Style Sheet, que en español sería: hojas de estilo en cascada. Este es un lenguaje que se encarga de hacer hermosa la web, HTML solo crea el contenido y lo estructura, pero CSS le da a colores, les da tamaños a las fuentes, le da forma, alinea los elementos, los posiciona e, incluso, agrega animaciones. Entonces, gracias a CSS, la web es hermosa. CSS es como el maquillaje de la web.
Luego viene JavaScript, que ya es un lenguaje de programación. Con JavaScript ya estás programando, con CSS y HTML, todavía no. JS es un lenguaje ineludible (inevitable como Thanos). Si quieres ser frontend, entonces vas a tener que ver y aprender JavaScript.
Javascript es el único lenguaje de programación que funciona dentro de un navegador. ¿Existen otros lenguajes para hacer frontend? por supuesto que sí, pero tienen que hacer alguna conversión para que el navegador los entienda. El único lenguaje capaz de funcionar directamente en el navegador es javascript, así que tu Ruta como desarrollador web, empieza aquí:
¡Todo lo puedes aprender en EDteam!
3. Frameworks y librerías
Tu camino como desarrollador web no termina con HTML, CSS y JavaScript. Que, además, son los únicos tres lenguajes creados exclusivamente para la web. Son los únicos tres lenguajes que el navegador procesa.
De aquí, tu camino se va a empezar a ramificar bastante. Luego de estas tres tecnologías, tenemos librerías y frameworks. No puedes desarrollar aplicaciones completas con HTML, CSS y JS porque te tomaría mucho tiempo. Es como construir un auto y ponerte a fabricar las llantas, ponerte a fabricar el motor, etc. No es así. Mejor es comprar el motor y las llantas ya hechas y lo que vas haciendo es ensamblar. Las librerías y framework son así. Nos traen cosas ya hechas para que nosotros las aprovechemos y nuestro desarrollo sea más rápido. Por eso, es que sí o sí tienes que aprenderlas.
Si te postulas a un trabajo solo con JavaScript, estará muy complicado que te contraten. Quizás te den el trabajo, algo muy básico, para apoyar en cosas básicas, pero no vas hacer aplicaciones completas con JS puro, necesitas un framework o librería.
¿Cuál es la diferencia entre framework y librería?
Un framework se encarga de todo el proyecto. Es decir, tiene herramientas que funcionarán para el proyecto completo, mientras que una librería se encarga de una parte específica. Entonces, una librería es como un martillo (o un serrucho), y un framework es como una caja de herramientas, que tiene todo. Si quieres ampliar esta información, puedes ver nuestro video en Youtube: Framework Vs Librería.
Frameworks y librerías para el frontend
- React
- Es una de las librerías más usadas en el mundo actualmente.
- Angular
- Vue
- Svelte
Estas son las más conocidas, pero en realidad hay un montón. Todas estas utilizan JavaScript y un error muy común, es no dominar bien JavaScript y pasar de frente a los frameworks y librerías. Es un error terrible, porque todas están basadas en JavaScript. Si no sabes JS, no podrás dominar estas tecnología. O, por ejemplo, cuando te salga un error, no sabrás de dónde vino. Así que ya sabes, aprende bien JavaScript. En EDteam tenemos varios cursos para que te conviertas en un profesional: JavaScript desde cero, JavaScript: Programación Orientada a Objetos, JavaScript en el navegador, entre otros.
Entonces, Angular, Vue y Svelte son framworks. Es decir, te dan todas las herramientas para un proyecto completito, mientras que React es una librería y se encarga de una cosa específica. En este caso, de los componentes. Pero, ¿Qué cosa es un componente? un componente, en el desarrollo web actual, es una pieza de interfaz.
Por ejemplo, piensa en la web de EDteam: tenemos el logo, un buscador, el menu, los cursos, entre otros. Cada uno de esos son componentes, cada pieza de interfaz es un componente. Sin embargo, la parte de cursos, cada uno de ellos es lo mismo, solo cambia el título y el póster, pero en esencia, es lo mismo. Entonces, podríamos tener un componente de cursos, y ese componente, utilizarlo dos veces o, si tenemos 500 cursos, utilizarlos 500 veces.
Si toca cambiar algo en el componente de curso, por ejemplo: un icono adicional, un texto adicional, que se muestre la fecha, entre otros. Solo debes hacer el cambio en el componente, y ese cambio se replicará en los cientos de cursos que hay en la aplicación. Imagínate hacerlo de otro modo, tendrías que cambiar uno por uno. En resumen, los componentes son pedazos de la interfaz que puedes reutilizar. Así es como se construye el frontend actual, a través de componentes.
En EDteam recomendamos aprender React, porque es lo que tiene más salida laboral. Sin desmerecer para nada a Angular o Vue, Svelte si está más abajo. Curiosamente, Svelte es el framework que más le gusta a los frontend porque respeta mucho la filosofía del JavaScript puro, mientras que los demás le meten sus propias cosas encima.
Ok, ya sabes JavaScript y ya sabes un frameworks. ¿Ya estás listo para trabajar? todavía no, te faltan algunos detalles adicionales.
4. Otras tecnologías
Existen otras tecnologías adicionales que no te he comentado pero que son muy importantes. La primero, que es obligatoria y transversal a todo el proyecto. No importa si haces HTML, CSS, Angular, o lo que sea. Esta tecnología se llama Git y es un sistema de control de versiones.
¿Qué pasa? estás escribiendo código y pones, por ejemplo, tu archivo app.js. Cuando lo creas está vacío, el primer día escribes unas cuantas líneas, el segundo día escribes más líneas, el tercer día vas a escribir más líneas. ¿Pero cómo le hacemos seguimiento a todos estos cambios? además, probablemente no trabajarás solo en este proyecto. ¿Cómo hacemos que no se crucen los cambios? ¿Cómo sabemos quién hizo un cambio? Todo eso se sabe con Git (y lo puedes aprender en EDteam).
En resumen, Git se trata de avisarle cada vez que hagas un cambio. Pero no le avisarás en cada línea de código, o cada punto y coma que pongas, sino cada vez que cierres algo o alguna funcionalidad, alguna corrección de algún problema. Algo que tenga un significado en el proyecto. ¿Por qué? cada vez que tú le dices a Git que hiciste un cambio, tienes que explicarle qué cambio hiciste. Es cómo un diario:
Querido Git, allí te envio mi Commit, en el que he agregado la función de login.
Entonces, Git registra quién envió este Commit, lo guarda como “Pepito hizo esto…”, guarda la fecha y, automáticamente, guarda qué línea de código y en qué archivo se ha modificado. De esa manera, se puede hacer el seguimiento de todo el proyecto. El proyecto puede durar años y, durante todos esos años, se va guardando un historial de todo lo que se ha hecho.
Por ejemplo, Github tiene un repositorio de Git de más de 13 gigabytes de todos los años que se ha venido trabajando en este proyecto. Entonces Git es transversal y no es un lenguaje de programación. Es simplemente ir marcando los cambios del proyecto. No le tengas miedo a Git, ve a ed.team/cursos/git y comienza completamente gratis.
Asimismo, otro lenguaje muy importante es TypeScript. Es como un JavaScript pero con superpoderes y muchos programadores prefieren usar TypeScript a JavaScript. Sin embargo, si quieres usar TypeScript, primero debes aprender JavaScript, porque TypeScript usa JavaScript y le añade cosas adicionales. Estudia todas estas tecnologías en EDteam con nuestro descuento de Black Friday. ¡Esta es tu oportunidad de superar tus miedos y construir un mejor futuro!
Entonces, TypeScript estaría después de JavaScript, pero antes de las librerías y frameworks 👇.
Adicionalmente, una de las partes que más les hace doler la cabeza a los programadores, tanto frontend como backend, es la dupla HTML y CSS. No te imaginas el dolor que le causa a los programadores (o quizás sí) porque la estructura y la maquetación es bastante complejo. Es decir, los estilos, para que una página web se vea bien, no se vean las cosas torcidas, o las cosas que salen de la pantalla, u objetos unos encima de otros, entre otros ejemplos. Dominar HTML + CSS a un nivel tan alto, es algo complejo.
Entonces, al profesional que se encarga de HTML + CSS, se le llama maquetador. Pero, antes que pienses que estoy loca porque en tu empresa “no existe el maquetador”, déjame decirte que eso depende del tipo de empresa y del presupuesto que tenga. Existen compañías que no tienen tanto presupuesto para contratar a mucho personal, entonces el frontend le toca hacer todo. Pero, si la empresa tiene más presupuesto, puede especializar sus roles de manera muy fina.
Algunos puestos de trabajo, para que suene más cool y “más pro”, le llaman UI developer al maquetador, y el frontend puro, sería el que hace JS + todas las demás tecnologías.
¿Cómo se clasifica un frontend?
- Maquetador (UI developer) - HTML + CSS
- Frontend developer (programador, que hace toda la lógica) - JavaScript puro.
El maquetador no hace lógica, solamente hace que las cosas se vean bonitas y diseña. El frontend developer le agrega la funcionalidad.
En ese sentido, en el lado de la maquetación, existe un framework muy chévere llamado Tailwind. También tenemos a Boostrap, aunque ya no se usa mucho, tuvo su momento, pero actualmente se usa es Tailwind, y lo puedes aprender en EDteam. ¡Y ya tienes tu ruta para convertirte en un programador frontend! 👇
¿Ya conocías esta ruta para ser programador frontend? Recuerda aprovechar el Black Friday para convertirte en un profesional, porque en español, #NadieExplicaMejor que EDteam.