Desarrollo Web 2024
Hey Coder bienvenido a mi Roadmap de desarrollo web del 2024, este año he querido darles una ruta mucho más enfocada en algunas tecnologías puntuales para todos aquellos que estan aprendiendo desarrollo web o estan considerando invertir tiemo en el desarrollo de Proyecto web.
Este video es una ruta enfocada en desarrollar proyecto practicos y va abarcar tanto temas de Frontend, Backend, Fullstack y herramientas de software relacionadas.
Por cierto este video esta mas enfocado en personas que estan iniciando por lo que muchos de los termino seras sobre simplificados y hasta aveces imprecisos con el objetivo de que den una idea mas simple,
La Areas del Desarrollo Web
El concepto más basico del desarrollo web es que este esta dividio en muchas areas, pero las mas notorias son el Desarrollo web Frontend, y el Desarrollo web Backend.
El desarrollo web frontend trata basicamente de todo lo que puedes ver e interactuar en una aplicacion web, por ejemplo si estas viendo esto en Youtube, el video que se esta reproduciendo, el boton de like, la caja de comentarios, todos esos elementos forman parte del desarrollo web frontend.
El desarrollo web backend por otro lado trata mucho mas de los datos que estan detras de una aplicacion web, por lo general esta relacionado a crear codigo que recibe datos y los guarda en una base de datos. Usando el ejemplo de youtube, los videos, tus datos personales de tu cuenta, los pagos de suscripciones, toda esa logica que esta escrita en codigo de algun lenguaje de programacion, forma parte del desarrollo web Backend.
Los programadores que solo se enfocan en programar interfaces de usuario como botones, inputs, y la parte visual, son los desarrolladores web Frontend y los que solo se encargan de escribir logica para procesar datos, hacer conexiones con bases de datos son desarrolladores web Backend.
¿Pero que pasa si hay un programador que conoce ambas areas? Bueno a este se le llama un desarrollador web FullStack, ya que puede crear aplicaciones web que conlleven usar ambas areas (Backend y Frontend), y que es la meta de muchos desarrolladores, pero no de todos, porque hay algunos que solo se enfocaran en el frontend, otros en el backend y otros menos van a ser fullstack.
Entonces ¿Como empezar en desarrollo web?
Bueno hay muchas formas, pero la mas comun es empezar por el frontend, luego seguir por el backend, y de esta forma tambien puedes llegar a ser fullstack si asi lo quieres.
La forma mas simple de empezar como Frontend es aprender las tecnologias fundamentales de las paginas web, que son HTML, CSS y Javascript.
HTML es un lenguaje que tienes que aprender primero, no es un opcional, este lenguaje te permite crear textos para el navegador, es decir con HTMl puedes especificar encabezados, parrafos, imagenes, y todo el contenido que una persona puede leer dentro del navegador. Este lenguaje cosiste en etiquetas que tienes que memorizar, y que luego usaras para crear esos documentos. Este no es un lenguaje de programacion por cierto, es un lenguaje solo para crear Textos por asi decirlo, asi que no te vayas a creer programador despues de aprender HTML.
Ademas si solo aprendes HTML, vas a tener paginas web pero que lucen como si fueran documentos de word, por lo que lo siguiente que tienes que aprender es CSS.
CSS es otro lenguaje que permite mejorar visualmente los documentos de HTML, es decir te permite añadir colores, cambiar las fuentes de texto, cambiar el tamaño de las imagenes, colocar animaciones a tus sitios, es decir permite convertir tus documentos de HTMl en las tipicas paginas web que ves a diario en la web. Aprender CSS es una tarea simple al comienzo, pero a mas lo aprendes puedes crear sitios cada vez mas atractivos visualmente, asi que muchos les gusta tanto esta area que solo se enfocan en crear diseños.
Lo siguiente que tienes que aprender es Javascript, el cual es un lenguaje de programacion que si o si debes dominar si quieres ser un desarrollador web competente, la razon es que este el lenguaje de la web, es un estandar, todos los navegador permiten ejecutar este lenguaje, si lo aprendes podras controlar eleementos interactivos en tus interfaces graficas, que aunque parezca algu no muy util, esta es la razon de que pltaformas como youtube, facebook, netflix, y muchas mas puedan tener elementos interactivos, como al hacer click que se reproduzca un video, o audio, o tener chats en donde puedas subir imagenes, ver elementos que van cambiando,y asi.
Y para aprender estos tres no es necesario saber todo el lenguaje, lo mejor es ir aprendiendo un poco e ir poniendo en practica lo que vas a aprendiendo en proyectos pequeños. Esto es como aprender un lenguaje nuevo, como ingles por ejemplo, es decir si solo aprendes voacabulario dificilmente lo hablaras, necesitas ponerlo en practica en oraciones, escribir textos, formular ideas con estas palbaras lo que te dara realmente un mejor dominio del lenguaje. lo mismo es cuando aprendes un lenguaje de programacion.
Conociendo estos temas, podras crear sitios web sencillos y visualmente atractivos, pero aun asi para crear logica mas compleja es necesario aprender lo que seria un Framework de Desarrollo web Frontend.
Frameworks de Frontend
Ahora una vez dominadas los elementos anteriores estaras creando paginas sencillas con interactividad, pero dificilmente aplicaciones web mas complejas, asi que lo que necesitas aprender despues de HTML, CSS y Js, es un Framework de Javascript Frontend.
Un framework solo es codigo que otros desarrolladores ya han escrito para que no tengamos que resolver el mismo problema en cada proyecto, piensalo como un punto de partida de muchos proyectos, como esquelto que ya usamos para que podamos adaptarlo a nuestra web, no es algo visual, estoy hablando de codigo.
Por ejemplo muchos proyectos web necesitan tener multiples paginas, cambiar elementos de forma instantanea, comunicarse con servidores, reducir el peso en produccion, bueno los frameworks ya hacen esto por defecto por lo que son necesarios aprenderlos si se necesitan crear proyectos reales.
Entre los frameworks de este año podemos encontrar a React, Vuejs, Svelte, Astro, Angular y otros.
Y si digo los de este año porque cada año surgen nuevos o se van popularizando otros, pero lo cierto es que en la practica al final todos producen el mismo tipo de proyecto, asi que investiga estos mas a fondos y escoge uno. En lo personal yo te recomiendo aprender React, es el mas popular, hay mucha informacion y hay mucho demanda por desarrolladores que sepan React, asi que aprenderlo puede ser una decision practica.
Ahora React en si es un tema amplio, asi que no solo es ir directo a aprender React, primero tienes que saber muy bien los conceptos de Javascript, Javascript intermedio y luego ir por las bases de React.
Conceptos y Herramientas necesarias
Conociendo esto
- Git
- Github
- JSON
- Hosting de sitios y dominios
Git y Github son dos cosas distintas.
Lenguajes de programación de Backend
Ahora con el frontend desarrollas interfaces pero tambien necesitas aprender a crear logica de backend para guardar y procesar datos. Lo siento por no dar muchos detalles pero para darles una idea simple.
El backend se trata de escribir un programa que se va a mantener ejecutando siempre, el cual se encargara de recibir y servir datos a tu frontend, este tipo de programas son llamados programas de servidores, y conlleva conocer algun lenguaje de programacion enfocado a crear servidores, por ejemplo aqui podemos encontrar a Python, Java, PHP, C#, Go, y tambien esta aqui Javascript, a traves de un programa adicional llamado Nodejs, que permite que Javascript tambien pueda crear aplicaciones backend.
El escoger uno u otro varia mucho de en donde estudies, por ejemplo cuando estudie en la universidad toque lenguajes como C# y Java, mientras que de forma autodidacta aprendi PHP y Python, y ya en proyectos de clientes he usado mucho Go, y actualmente uso mucho Javascript.
Y de hecho este es el lenguaje que te recomendaria aprender, es decir, los lenguajes mas simple en mi opinion para el backend son Python y Javascript, son simples practicos y hay mucha informacion. Ademas que los conceptos basicos de Javascript que ya aprendiste en el frontend vas a poder aplicarlos aqui por lo que es muy util ahorrarse ese tiempo aprendiendo otro lenguaje.
Ademas que si aprendes bien los temas de desarrollo web backend como HTTP, REST APIs, Testing, Despliegue, todos estos conceptos son extrapolable a otro lenguaje de programacion.
Si decides ir por Javascript de hecho es necesario aprender Nodejs, el cual es un programa que permite ejecutar Javascript fuera del navegador,
Nodejs
Express
Frameworks de Backend
Base de datos
Ahora toda aplicacion real, lleva alguna forma en la que almacena los datos, la forma mas comun es usando una base de datos, esto en un proyecto web
Hay muchas
SQL NoSQL
LA ruta que te recomendaria seria PostgreSQL
MetaFrameworks
Svelte kit, Nextjs
La razon
Ya eres un desarrollo web Fullstack
Probablemente necesites muchas cosas
Typescript
Testing
Servicios de la nube
Especializaciones
Cloud Engineer
Desarrollo web en epocas de inteligencias artificiales
Aprender
¿Esta afectara el trabajo? Por supuesto que tendra algun efecto en el trabajo, al dia de hoy ya hay webs que generan interfaces de usuario usando inteligencia artificial, y hasta el mismo
Actualmente reviso mucho codigo de desarrolladores que estan empezando y estan creando proyectos de Nextjs, Svelte kit con ayuda del GPT, pero esto tambien viene con algunos problemas que quisieran
Trabajar
Finalmente estas son solo