¿Cómo convertirse en un desarrollador web de pila completa en 2021?

¿Cómo te sentiste cuando creaste tu primer formulario de inicio de sesión en una página web después de tantas pruebas y plantillas probadas (no digas que creaste todo desde cero…)? … ¿Cómo se sintió cuando le dio el diseño a su primera aplicación web después de múltiples cambios (Sí… tomó la referencia de otros sitios web o plantillas según el requisito…)?… ¿Cómo se sintió cuando manejó con éxito miles de usuarios? información confidencial en el backend para crear una aplicación (fue aterrador…)? 

La mayoría de los desarrolladores web pasan por todas las fases anteriores y al principio puede ser frustrante para algunos de ellos, pero la sensación general es realmente emocionante y sorprendente cuando ven que su sitio web está activo y que la gente lo usa en todo el mundo. Un desarrollador web es responsable de muchas tareas, desde la recopilación de requisitos hasta el diseño de un sitio web, el manejo de su parte de back-end y también hacer que funcione correctamente para los usuarios. 
Cada año surgen nuevas tecnologías y herramientas en las industrias para aumentar la productividad de los desarrolladores y mejorar el sitio web para los usuarios. Se vuelve un desafío para ellos mantenerse al tanto del juego de desarrollo web. Hoy vamos a discutir un mapa completo para convertirse en desarrollador web en 2021. Esta será una guía práctica para todo tipo de desarrolladores (front-end, backend y full-stack).  

Decide tu meta o camino primero

Discutiremos muchas tecnologías, tendencias y herramientas, pero no queremos que se sienta abrumado, por lo que primero debe decidir qué quiere hacer para convertirse en desarrollador web porque eso lo ayudará a elegir el correcto. herramientas y tecnología para aprender. Hay muchas razones diferentes para convertirse en un desarrollador web, algunas opciones se dan a continuación…  

• Desea trabajar para una empresa como desarrollador web, que es la razón más popular y común.
• Quieres trabajar como desarrollador independiente para iniciar tu propio negocio o agencia.
• Puedes convertirte en consultor de otras empresas.
• Puedes crear tu propia aplicación para ganar dinero.
• Quieres usar esta habilidad para convertirte en un creador de contenido.
• Programar como hobby.

Desde el área de interés u objetivo anterior, puede seleccionar las herramientas y la tecnología adecuadas que se aplican a su objetivo. Si su objetivo es convertirse solo en un desarrollador front-end, puede elegir las herramientas y la tecnología del desarrollo front-end. Lo mismo ocurre con el desarrollo backend y full-stack.  

Software y Herramientas Básicas para el Desarrollo Web 

• Computadora y sistema operativo: no puede escribir código sin una computadora y un sistema operativo ejecutándose en él. Para aprender desarrollo web no necesitas ningún tipo de computadora sofisticada (si tienes una, es buena…). Puede usar cualquier tipo de computadora portátil o de escritorio de gama media. Para el sistema operativo, puede usar MacOS, Windows (última versión) o Linux , lo que sea más cómodo para usted.
• Editor de texto / IDE: Sin duda , VSCode es bueno para la mayoría de los casos y la mayoría de los idiomas. Tiene un buen rendimiento, excelentes extensiones, una terminal incorporada y también un montón de funciones. En la encuesta de StackOverflow de 2019, VSCode también fue la primera preferencia de los desarrolladores. También tienes otras buenas opciones como Sublime Text , Vim o Atom . Si hablamos de IDE, Visual Studio (ASP.net o C# ), Eclipse y Netbeans (Java). son buenas opciones.
• Navegador web: la primera opción de la mayoría de los desarrolladores es Chrome o Firefox . Chrome es rápido y utiliza un motor V8 (motor JavaScript). Firefox también ha recorrido un largo camino y algunas de sus cosas buenas no están en el navegador Chrome. Ambos navegadores tienen fantásticas herramientas de desarrollo para solucionar problemas en el desarrollo web. Otros navegadores web con los que puede familiarizarse son Safari , Edge y Brave .
• Terminal: trabajará mucho con CLI utilizando algunos comandos del sistema. Puede utilizar el terminal predeterminado o de terceros para su proyecto de desarrollo web. Bash, Zsh, Powershell, Git Bash, iTerm, Hyper, todas son opciones disponibles para usar.
• Diseño (Opcional): No todo el mundo necesita aprender esto. En las empresas hay un equipo específico para hacer imágenes, logos o bocetos pero si eres desarrollador front-end, o estás trabajando como freelance entonces quizás tengas que aprender Adobe XD, Photoshop, Sketch o Figma .

Comience con HTML y CSS

HTML y CSS son los componentes básicos del desarrollo web. No importa qué tan avanzada sea su aplicación web o qué marcos y lenguaje de back-end esté usando, tendrá que construir su aplicación de front-end usando HTML y CSS. Así que esto es lo primero que hay que aprender en el desarrollo web.  

• HTML5 (etiquetas semánticas, atributos, doctype, etc.)
• Fundamentos de CSS Colores, fuentes, posicionamiento, modelo de caja, etc.
• CSS Grid y Flexbox para alinear cosas o crear columnas.
• Propiedades personalizadas de CSS
• Las transiciones y las animaciones son bastante importantes para los desarrolladores frontend.

Diseños receptivos

Su aplicación debe ser visible y utilizable en todo tipo de dispositivos, como teléfonos inteligentes, tabletas, computadoras de escritorio, iPad o cualquier otro dispositivo de tamaño de pantalla. Por lo tanto, es importante aprender a crear un diseño o diseño receptivo. Veamos algunos temas importantes para eso.  

• Más información sobre cómo configurar la ventana gráfica
• Consultas de medios para diferentes tamaños de pantalla.
• Anchos de fluido
• unidades rem
• Móvil primero

Componentes CSS reutilizables personalizados

En lugar de depender de marcos CSS grandes como Bootstrap, es bueno crear sus propios componentes CSS modulares y reutilizables para usar en sus proyectos. No necesita importar la biblioteca completa si crea su propio diseño personalizado. Usted crea el componente que solo necesita para la interfaz de usuario particular. 

Una nueva tendencia Saas también ha aparecido recientemente que ayuda a escribir código CSS de manera más eficiente. Si ya conoce CSS, entonces no necesita esforzarse tanto en aprender Saas. Saas es un preprocesador de CSS que agrega más funcionalidad al CSS estándar y lo hace más eficiente. Puede usar variables, anidamiento, condicionales para reducir la repetición de CSS y hacerlo más eficiente. 

Saas ofrece cosas como variables, mixins, funciones, anidamiento, etc. También puede crear su archivo Saas por separado para cada componente reutilizable. Saas realmente ahorra mucho tiempo, por lo que definitivamente deberías aprenderlo en 2021.  

Marcos CSS

Aprender marcos CSS es un poco menos popular que el año pasado, pero sigue siendo muy relevante o útil para los desarrolladores que no son buenos con el diseño. Hay muchos marcos CSS populares disponibles para usar, algunos de ellos se detallan a continuación.  

• Bootstrap Es el marco CSS más popular (Bootstrap 5 lanzado) para aprender. Aprender bootstrap también ayuda a aprender otros marcos.
• Tailwind CSS es otro marco que está ganando popularidad y es un poco diferente de los demás. Es un conjunto de clases de utilidad para que pueda crear sus propios botones y otras cosas que realmente se ven diferentes a los demás. También son altamente personalizables.
• Materialise : basado en el diseño del material, este marco es una combinación de HTML, CSS y JavaScript. Esta también es una biblioteca muy útil y popular para diseñar su aplicación frontend.
• Bulma: Framework CSS modular y ligero de código abierto.

Diseño de interfaz de usuario

Para los desarrolladores front-end, será genial si mejoran sus habilidades para aprender algunos principios y prácticas de diseño de interfaz de usuario. En las empresas, tal vez alguien más haga esto por usted, pero es bueno tener un ojo en algunas cosas básicas de diseño de interfaz de usuario.

• Color y Contraste
• espacio en blanco
• Escalado (dimensionamiento relativo a otros elementos)
• Jerarquía visual (Organizar en orden de importancia)
• Tipografía (Tipos de texto, tamaño, etc.)

JavaScript

Después de aprender HTML y CSS, lo siguiente que debe aprender es JavaScript. Es muy importante que los desarrolladores tengan un buen dominio de los fundamentos de JavaScript. Usará mucho JavaScript con lenguajes del lado del servidor como PHP, Python o ASP.net, y aprender este lenguaje es muy necesario si desea trabajar con React, Angular, NodeJS, Vue o cualquier otro marco de JavaScript. o biblioteca. A continuación hay algunos temas importantes que debe cubrir en JavaScript…  

• Fundamentos de JavaScript (variables, funciones, bucles, arrays, condicionales, etc.)
• DOM (modelo de objeto de documento)
• Métodos de array foreach, map, filter, reduce, etc.
• JSON (Notación de objetos de JavaScript)
• Requests HTTP Fetch API- GET, POST, PUT, DELETE

Algunas herramientas importantes

Hay algunas herramientas que utilizará en el desarrollo web. Estas herramientas lo ayudarán a depurar, aumentar su productividad, administrar su código, colaborar con otros desarrolladores y muchas cosas por el estilo. Analicemos algunas de estas herramientas. 

• Git (Control de versiones) y GitHub es la herramienta más popular que definitivamente debería aprender en 2021. Git ayuda mucho a colaborar con otros desarrolladores y administrar su código. También tiene algunas otras opciones como GitLab, Bitbucket y algunas otras también.
• Aprenda a usar las herramientas de desarrollo del navegador . Ya sea Chrome o Firefox, debe saber cómo usar las diferentes pestañas, como la pestaña de elementos, la consola para JavaScript, la pestaña de red para solicitud y respuesta, la pestaña de aplicaciones y otras pestañas para diferentes propósitos.
• La mayoría de los IDE o editores de texto tienen la capacidad de agregar extensiones o complementos que son muy útiles para aumentar la productividad y crear aplicaciones web. Por ejemplo, VSCode Extensions en Visual Studio Code ayuda a descargar la extensión, como el compilador live-server o live-saas, para trabajar con React.
• Aprenda a usar el administrador de paquetes de JavaScript, como NPM e Yarn. Estos administradores de paquetes los usará mucho si está trabajando con marcos de JavaScript o bibliotecas como React, pero para otros lenguajes (como Python o PHP) usará un administrador de paquetes diferente.
• Si desea instalar paquetes NPM en la interfaz, debe usar paquetes de módulos JS como Webpack, Parcel o Rollup . Si desea crear su propio módulo o si desea llevar un archivo JavaScript a otro archivo JavaScript, no puede hacerlo de manera predeterminada solo con el navegador, por lo que necesita que Webpack o Parcel lo empaqueten por usted.
• También es posible que desee ver algunas extensiones y ayudantes útiles del editor de texto. Linting (para encontrar errores), Prettier (para formatear el código), Live Server, Emmet (para escribir código HTML y CSS rápido), fragmentos, etc.

Implementación básica de front-end

En este punto, una vez que sepa qué herramientas o tecnología debe aprender para el desarrollo frontend, necesita saber cómo implementar su sitio web frontend en Internet. 

Si está creando algunas aplicaciones pequeñas, páginas de destino o sitios personales para pequeñas empresas, no es necesario que aprenda AWS o DevOps solo porque es brillante y moderno. Estarás complicando más las cosas en lugar de simplificarlas. Hay diferentes rutas a tomar. Algunos de ellos se dan a continuación…

• Registro de dominios (Namecheap, Google Domains, etc.)
• Alojamiento gestionado (InMotion, Hostgator, Bluehost, etc.)
• Hosting estático (Netlify, GitHub Pages)
• Alojamiento de correo electrónico (Namecheap, Zoho Mail, CPanel)
• Certificado SSL (Let’s Encrypt, Cloudflare, Namecheap)
• FTP, SFTP (Protocolo de transferencia de archivos) es bueno para aplicaciones más pequeñas.
• SSH (Secure Shell) para la aplicación avanzada.
• CLI y Git.

Cualesquiera que sean las herramientas, las tendencias tecnológicas o los pasos que hemos discutido hasta ahora, son parte del desarrollo frontend. Todavía no conoce el marco, pero puede crear el sitio web para empresas individuales y pequeñas, o puede crear un diseño compatible con dispositivos móviles. 

Implemente su pequeña aplicación o proyecto usando las herramientas o tecnologías que hemos discutido hasta ahora. Si desea postularse para los trabajos, sería genial aprender algunos marcos front-end como Vue o Angular, o bibliotecas como React. 

Marco front-end y administración de estado

Los marcos le permiten hacer un desarrollo frontend más avanzado. Le brinda muchas ventajas, como componentes reutilizables, una interfaz de usuario más organizada o interacción de página. Entonces, usar un marco ahorra mucho tiempo.

Elija un marco frontend para mejorar su habilidad e intente elegir uno que la mayoría de las empresas estén utilizando en el escenario actual. Además, aprenda sobre la gestión estatal. Cada marco tiene diferentes formas de hacer esto. Para 2021, a continuación se muestran algunos marcos populares y administradores de estado. 
 

• React : la biblioteca React es la más popular para aprender sobre desarrollo web, y es bastante fácil en comparación con otros marcos y bibliotecas. También hay muchos trabajos disponibles para los desarrolladores de React. Puede usar Redux y Context API con Hooks para la gestión del estado.
• Vue: Vue también está ganando popularidad y los desarrolladores también pueden preferir aprender Vue. Vue es el más fácil de aprender en comparación con React y Angular. VueX es el administrador de estado creado para la vista.
• Angular : este marco se usa generalmente en organizaciones grandes. Tiene una bonita curva de aprendizaje de pasos. Tendrás que aprender TypeScript para trabajar con Angular. Le permite usar escritura estática opcional y soporte para las características de ES2015. NgRx y Services son buenos administradores de estado para aprender en este marco.
• Svelte : Svelte es básicamente un compilador que se ha vuelto muy popular en los últimos uno o dos años. Tiene una curva de aprendizaje bastante fácil, pero es posible que tenga algunas dificultades para trabajar con algunas aplicaciones más grandes. Encontrar el trabajo también es un poco más difícil que el otro marco. Svelte tiene una API de contexto incorporada para administrar el estado.

Opcional para aprender:  

• Puedes aprender TypeScript , que es bastante popular en la industria. Es el superconjunto de JavaScript lo que hace que su código sea más robusto y menos propenso a errores. TypeScript es ideal para proyectos grandes.
• Más información sobre la representación del lado del servidor. NextJS (React), NuxtJS (Vue) y Angular Universal (Angular) es el marco que le permite ejecutar React, Vue y Angular en el servidor. Todos ellos tienen excelentes características como Mejor SEO, Enrutamiento del sistema de archivos, División automática de código, Exportación estática, CSS en JS y muchas otras características.
• Generadores de sitios estáticos: Gatsby (React), Gridsome (Vue), 11ty (JS alternativas a Jekyll), Jekyll (basado en Ruby), Hugo (basado en Go)

Hemos discutido la mayoría de las herramientas y tecnologías de desarrollo front-end. Ahora hablemos sobre el lenguaje y la tecnología para convertirse en un desarrollador backend o un desarrollador full-stack. 

Idioma del lado del servidor (elija uno)

Debe tener conocimiento de al menos un idioma del lado del servidor. Para elegir un idioma en 2020 se dan algunas opciones a continuación…  

• NodeJS (No es un lenguaje sino un entorno de tiempo de ejecución)
• Python (bueno para principiantes absolutos)
• Java (bueno para una organización grande)
• Php (bueno para trabajar por cuenta propia)
• Ruby (Menos popular en 2020)
• C#
• kotlin
• Golang
• Deno

Nota: Independientemente del idioma del lado del servidor que prefiera aprender, asegúrese de conocer las estructuras de datos y los algoritmos que utilizan ese idioma. Las estructuras de datos y los algoritmos lo ayudarán a representar sus datos para el usuario y lo ayudarán a optimizar su código en una aplicación web. Le recomendamos especialmente que se concentre en trabajar con Array y String (lo más importante). Trabajarás mucho con ambos.  

Aprenda también sobre los patrones de diseño de software . Los patrones de diseño proporcionan soluciones reutilizables generales para problemas comunes. Aprender patrones de diseño ayudará a que su código sea reutilizable, libre de errores y limpio. Acelerará su proceso de desarrollo. 

Marco del lado del servidor (elija uno)

Una vez que aprenda un idioma del lado del servidor de su propia elección, vaya con uno de los marcos para su idioma. Puede elegir una de las opciones que se dan a continuación…  

• Node.js – Express, Koa, Adonis, Feather.js, Nest.js, Loopback
• Python: Django, Frasco,
• Java: Spring MVC, Griales
• PHP: Laravel, Symfony, Codeignitor, Slim
• Ruby: Ruby sobre rieles, Sinatra
• C#: ASP.NET
• Ir : Deleitarse
• Kotlin : Javalin, KTor

Base de datos (Elija uno)

La mayoría de las aplicaciones web necesitan un lugar para almacenar datos. En algunos casos, cierta tecnología o ciertos lenguajes van bien con ciertas bases de datos. Por ejemplo: en la pila Mern, M significa MongoDB y en la pila LAMP M significa MySQL, pero depende totalmente de usted qué base de datos desea elegir para su aplicación. Vamos a discutir algunas bases de datos populares para 2020. 

• Base de datos relacional: RDBMS sigue siendo la base de datos más popular. PostgreSQL, MySQL, MS SQL sigue siendo el más preferido para usar.
• NoSQL: MongoDB, CouchDB, Elasticsearch
• Base de datos en la nube: Firebase, Azure podría DB, AWS
• Peso ligero y caché: Redis, SQLite

GraphQL: (Opcional) Puede obtener información sobre GraphQL, que es bastante popular hoy en día. Es un lenguaje de consulta para su API. Tiene una sintaxis simple similar a JSON y es bastante fácil de implementar. 

Pruebas 

Muchos desarrolladores se saltan las pruebas de aprendizaje y piensan que es una pérdida de tiempo, pero te recomendamos que aprendas para ahorrar tiempo y hacer tu vida mucho más fácil como desarrollador. 

• Pruebas unitarias
• Pruebas de integración
• Pruebas de extremo a extremo

Hay marcos de prueba disponibles para diferentes lenguajes, como Jest y Mocha para JS Testing y PyTest y Robot para Python.

Gestión de contenido

Definitivamente debería aprender sobre el sistema de gestión de contenido, especialmente si trabaja por cuenta propia. Un CMS se utiliza para agregar contenido a su sitio web o aplicación. Es genial para los clientes poder actualizar su propio contenido. 

• CMS tradicional: WordPress (PHP), Drupal (PHP), Keystone (JavaScript), Enduro (JavaScript)
• CMS sin cabeza: (Consiguiendo popularidad en 2021) Contentful, Prismic.io, Strapi, Sanity.io.

Implementación y DevOps

Alojar una aplicación full-stack o una aplicación backend es un poco más complicado que solo una aplicación frontend, especialmente cuando tiene bases de datos. Asegúrese de saber cómo usar la CLI para la implementación. 
En la mayoría de las empresas, hay un equipo diferente que trabaja en DevOps. Por lo tanto, es completamente opcional tener conocimientos sobre DevOps. Puedes aprender eso si estás trabajando en tu propio proyecto. 

Obtenga información sobre las cosas que se detallan a continuación para implementar su aplicación en el servidor.

• Plataforma de alojamiento: Heroku, Digital Ocean, AWS, Azure., Linode
• Servidores Web: NGINX, Apache
• Contenedores: Docker / Kubernetes , Vagrant
• Imagen/Video: Nublado, S3
• CI (Integración Continua)/CD (Entrega Continua); Jenkins, Travis CI, Círculo CI

Pensamiento final

Toda la tecnología anterior, las herramientas son lo suficientemente buenas como para convertirlo en un desarrollador frontend, backend o full-stack. No te abrumes con el contenido que hemos mencionado en este artículo. No tienes que aprender todo. Elija el conjunto adecuado de herramientas y tecnología según su objetivo final. Siga los puntos que se dan a continuación para establecer el camino correcto para usted…

• Crea una ruta de aprendizaje basada en lo que quieres hacer
• Aprende los fundamentos y tecnologías necesarias
• Mire tutoriales/videos, lea la documentación, pero asegúrese de ensuciarse las manos con la codificación. Haz tu propio proyecto basado en lo que aprendes.
• Cree una cartera y tome medidas según su objetivo final. Solicitar puestos de trabajo, encontrar un cliente para usted, etc.

open-sourcefor “Escribe menos, haz más” Tutorial de jQuery Ejemplos de jQuery