Clever Geek Handbook

¿Cómo convertirse en desarrollador front-end? Una guía paso a paso del mundo del frontend





¡Saludos a todos! Mi nombre es Anastasia Puchnina, soy un desarrollador líder en DomClick, estoy involucrada en la interfaz de exhibición de anuncios. Hoy me gustaría compartir con ustedes mi opinión sobre lo que es importante que sepa un desarrollador front-end. Este artículo será útil para aquellos que recién están comenzando su camino en el desarrollo o que tienen experiencia en programación en otra área y decidieron cambiar al front-end.



Contenido:



  1. ¿Quién es un frontend y qué hace?
  2. ¿Por dónde empezar y qué leer? Lista de verificación de capacitación
  3. ¿Qué dificultades puede haber? Errores al inicio del camino
  4. Preparación para una entrevista de desarrollador junior




¿Quién es un frontend y qué hace?



Supongamos que quiere alquilar un apartamento: tiene una computadora con acceso a Internet, conoce la dirección de otra computadora más potente que almacena una gran variedad de anuncios. Si imagina que los sitios habituales no existen y no puede, por ejemplo, ver anuncios en el mapa, filtrar los innecesarios completando un formulario conveniente, tendrá que redactar una solicitud de red y averiguar cómo y dónde enviar datos.



Afortunadamente, los ingenieros han creado navegadores y las tecnologías web se están desarrollando, y solo necesita usar la conveniente interfaz proporcionada por desarrolladores de diferentes compañías. Queda por hacer un par de clics, y se ha encontrado la información necesaria.



Los desarrolladores de front-end son programadores que son responsables de crear un sitio web de front-end. Este es el lado del cliente del sitio con el que el usuario interactúa directamente en su computadora o teléfono (cliente).



Mucha gente sabe que los sitios incluyen el marcado y los estilos necesarios para proporcionar una estructura y un diseño de página claros, pero el desarrollo de la interfaz no se detiene ahí. La mayoría de los sitios que usamos constantemente son aplicaciones web completas: correo, banca en línea, cines en línea, editores de fotografías, notas. Para que estas aplicaciones funcionen, los desarrolladores front-end agregan código que se ejecuta en el navegador, implementa la funcionalidad deseada y, si es necesario, interactúa con el servidor, recibiendo dinámicamente la información necesaria.





Desarrollador front-end:



  • crea una interfaz de usuario, agrega marcas y estilos de páginas del sitio;
  • programa la lógica que se ejecuta en el dispositivo cliente, desarrolla la arquitectura de la aplicación cliente;
  • optimiza el rendimiento del front-end para que el proyecto se cargue rápidamente, los motores de búsqueda eleven el sitio en el SERP y los usuarios no sientan demoras en la navegación e interacción con la interfaz;
  • prueba la funcionalidad desarrollada y escribe pruebas automatizadas para garantizar una alta calidad y evitar errores al cambiar el código;
  • configura la construcción del proyecto, lo que le permite automatizar el procesamiento adicional de código y archivos antes de iniciar la aplicación;
  • realiza la implementación de la aplicación: la carga en el servidor para que la aplicación esté disponible en la red y los usuarios puedan usarla;
  • monitorea los errores emergentes utilizando herramientas de monitoreo y los elimina a tiempo :)


En diferentes equipos, los desarrolladores front-end pueden resolver tareas completamente diferentes, por ejemplo:



  • Desarrolle la interfaz de una aplicación web empresarial (lo que ven los usuarios finales cuando utilizan varios servicios en línea).
  • Desarrolle una biblioteca de componentes de interfaz: bloques individuales que otros desarrolladores usan en sus proyectos (por ejemplo, botones, ventanas emergentes, campos de formulario o elementos para gráficos). Pueden ser bibliotecas de código abierto conectadas por desarrolladores de todo el mundo o una biblioteca de componentes internos de una empresa con un diseño específico.
  • . , , - -, . !


? -



Independientemente del área en la que quiera trabajar y qué soluciones crear, existe una base determinada que, en mi opinión, cualquier desarrollador de front-end debería conocer.



Al comienzo del viaje, algunos se sienten intimidados por la lista de tecnologías, nombres y abreviaturas en la interfaz. Hay muchos de ellos. Pero incluso un desarrollador experimentado no sabe, y no debería conocer absolutamente todas las tecnologías y bibliotecas que solo existen (hay rumores de que cada segundo en el mundo frontend se lanza una nueva biblioteca :)







Tres ballenas de desarrollo para navegadores son HTML, CSS y JavaScript, con que vale la pena comenzar.



Si no tiene experiencia en desarrollo y le resulta difícil aprender por su cuenta, sería una buena solución ir a cursos de desarrollador front-end con un mentor en una de las escuelas de programación más conocidas. También hay buenos cursos sobre diseño y desarrollo de front-end en Udemy y Coursera. Sin embargo, esto no es en absoluto necesario, hay muchos materiales y fuentes gratuitos en Internet sobre los temas necesarios.



Para ayudarlo a navegar, he elaborado una lista de verificación paso a paso para obtener el conocimiento que necesita para entrevistar a un desarrollador front-end principiante. También se adjuntan enlaces a materiales y fuentes en ruso e inglés, que pueden serle útiles.



Guardar en marcadores y usar.



1. Cómo funciona la Web



Antes de comenzar a desarrollar sitios, debe comprender qué sucede cuando abre un sitio en un navegador, cómo funciona el modelo cliente-servidor y qué es el protocolo HTTP.





2. Entorno de desarrollo



Incluso puede escribir código y marcado en el bloc de notas, pero es más conveniente utilizar editores especiales. Más popular entre los desarrolladores de frontend:



  • VSCode es un editor rápido y gratuito con muchos complementos para el desarrollo;
  • JetBrains WebStorm : IDE completo, hay un período de prueba y la posibilidad de obtener acceso con una licencia de estudiante;
  • Si necesita enviar a otra persona un fragmento de código, verifique o guarde rápidamente el código en línea, puede usar un editor en línea como Codepen .


3. Conceptos básicos de HTML



Aprenda la estructura de un documento HTML, qué son y qué son las etiquetas, metaetiquetas, atributos, cómo agregar imágenes, crear formularios. La semántica y la accesibilidad son puntos importantes en el diseño.





4. CSS





Adición de estilos para elementos de página. Estudiamos el modelo de bloque, posicionamiento, estilos en cascada, especificidad del selector, pseudo-elementos, diseño adaptativo (para computadoras, tabletas y teléfonos). Aprenda a componer diseños modernos con Flexbox y Grid.





5. Sistema de control de versiones de Git



Git te ayuda a llevar tu proceso de codificación al siguiente nivel. Esta es una herramienta indispensable para los desarrolladores que le permite guardar información paso a paso sobre todos los cambios en el código, volver a un estado diferente y mucho más. Es recomendable aprender a trabajar con Git en la terminal, así como practicar: crear un repositorio en Github o Gitlab y probar las características básicas de Git en tu repositorio de prueba.





Práctica. Práctica. ¡Práctica!





En esta etapa, le sugiero que practique un poco más y haga su propio pequeño proyecto para recordar el material tratado. No es necesario que usted mismo cree un diseño de sitio web, puede tomar un diseño listo para usar. Cree una página de destino o, por ejemplo, cree un sitio de cartera, guarde el código en Github durante el desarrollo e intente alojar el sitio en un alojamiento gratuito para sitios estáticos: páginas de Github . Si no tiene suficiente práctica, intente ver el código de otros y repita. Hay suficientes tutoriales en video sobre este tema en YouTube (por ejemplo, para la consulta "diseño del sitio usando el diseño figma").



Si ha estudiado profundamente HTML y CSS, luego de pasar los párrafos anteriores puede convertirse en diseñador de sitios web. Pero para aprender a escribir aplicaciones web interactivas y convertirse en un desarrollador front-end profesional, debe continuar su viaje en el mundo front-end y sumergirse en la programación .



6. lenguaje de programación JavaScript



No confunda JavaScript con Java. Aprenda los conceptos básicos del lenguaje: variables, objetos, tipos de datos, funciones, contexto y cierres, clases. Compare las diferencias entre las especificaciones EcmaScript nuevas y antiguas. Después de comprender los conceptos básicos, pase a cosas más complejas: las complejidades de la programación asincrónica (devoluciones de llamada, promesas, async-await) y realizar solicitudes al servidor (XmlHttpRequest, Ajax, Fetch, Cookie).





7. DOM (Document Object Model)



El DOM es el modelo de objetos de documento, el árbol que crea el navegador para representar su página en la pantalla. Una vez que aprenda a trabajar con DOM, puede usar JavaScript para crear o modificar elementos en una página, responder a los clics de los usuarios y mucho más. Una parte separada de LearnJavascript está dedicada a trabajar con DOM y eventos en el navegador .



El tema DOM también se trata en detalle en JavaScript expresivo de Marein Haverbeck.



8. Node.js, NPM



Gracias a la plataforma de software Node.js, JavaScript solo se puede usar fuera del navegador. Con esta herramienta, puede escribir un programa de consola o una aplicación del lado del servidor.



Intente escribir su propio servidor pequeño .



Puede utilizar módulos escritos por otros desarrolladores en sus programas JavaScript. Consulte el repositorio en línea de paquetes NPM .



9. Babel



Babel Js es un compilador de código JavaScript que le permite utilizar las últimas funciones del lenguaje, como funciones de flecha, clases, encadenamiento opcional, sin esperar a que su navegador sea totalmente compatible. Solo necesita configurar correctamente Babel para la versión deseada de EcmaScript o la lista de navegadores compatibles, el código fuente se convertirá automáticamente.



Intente usar el compilador de código en línea en el sitio web oficial para ver en qué se convierten las construcciones modernas de JavaScript. Configure la compilación de código para una pequeña aplicación de JavaScript al incluir Babel como un paquete NPM.



10. Constructores de módulos, Webpack



Al crear aplicaciones, los desarrolladores dividen el código en partes (módulos), conectan controladores de código adicionales y configuran aplicaciones para diferentes entornos (desarrollo y producción). Para que esto sea posible, y no tuvimos que conectar manualmente los módulos en el archivo HTML en el orden requerido y monitorear los cambios, las aplicaciones usan recopiladores de módulos (paquetes).



Los constructores conectan y combinan módulos y sus dependencias en uno o más archivos en el orden correcto y también permiten transformaciones de código adicionales.



Webpack es uno de los creadores de módulos más populares. Este es un asistente de desarrollo, aunque pueda parecer abrumador al principio. Su flexibilidad le permite personalizar la compilación utilizando una gran variedad de complementos y cargadores (preprocesadores y posprocesadores CSS y HTML, Babel, etc.), optimizar los recursos, cargar rápidamente los cambios durante el desarrollo mediante el reemplazo de módulos en caliente y mucho más.





11. preprocesadores CSS



El preprocesador de CSS es un complemento de CSS que proporciona una nueva sintaxis conveniente para el desarrollador, agregando nuevas características que facilitan y aceleran el desarrollo y mantenimiento de estilos.



Preprocesadores más populares:





Las principales ventajas de utilizar preprocesadores CSS son:



  • Modularidad. Podrá crear código CSS en diferentes archivos e importar estilos según sea necesario.
  • Anidamiento. Nido de selectores uno dentro del otro para una estructura de código compacta y lógica. Esto mejorará la legibilidad y reducirá la duplicación (especialmente útil si usa la metodología BEM para escribir CSS).
  • Usar variables y funciones CSS (mixins).
  • Puede elegir un preprocesador con una sintaxis que sea conveniente para usted (por ejemplo, código CSS sin llaves y punto y coma).


También recomiendo en esta etapa que se familiarice con la herramienta de transformación de estilo PostCSS y, en particular, con el complemento Autoprefixer. Este complemento le permite agregar automáticamente prefijos de proveedor para las propiedades CSS de su código.



12. Preprocesadores HTML (plantillas)



Los preprocesadores HTML tienen los mismos beneficios que los preprocesadores CSS. Le permiten escribir marcado HTML de manera más eficiente, dividir código en módulos y también usar condiciones, bucles, mixins, herencia.



Motores de plantillas populares:





Personalice su proyecto agregando cargadores a la configuración del paquete web para preprocesar código CSS y HTML.



13. Estilo de código y linters



El estilo de código es un conjunto de reglas que le permite hacer que su código sea consistente, lo más fácil de usar posible y legible para usted y otros desarrolladores. Tales reglas describen dónde y qué sangrías y corchetes deben estar, la longitud máxima de las líneas, los nombres de las variables, le permiten determinar el código demasiado confuso o innecesario y muchos otros aspectos.



Algunas empresas crean su propio estilo de codificación. Un conjunto de reglas de front-end bien conocido es el estándar de Airbnb , con el que te aconsejo que te familiarices para mejorar la calidad de tu código.



Existen herramientas especiales que pueden verificar su código automáticamente y facilitar el mantenimiento de su código en un estilo específico al configurar la configuración de su proyecto una vez:





Consulte la documentación de las herramientas, intente conectarlas a su proyecto e IDE, siga un cierto estilo de código en su proyecto para mejorar la aplicación.



14. Aprendizaje del marco / biblioteca de interfaz de usuario



Reaccionar, Angular o Vue? Para 2020, la principal lucha es entre estas bibliotecas. Puedes elegir cualquiera de ellos. Si le gusta una empresa en particular para la que le gustaría trabajar, puede elegir el marco que utilizan.



Le aconsejaría que comience con React: es muy popular entre los desarrolladores y las empresas, continúa evolucionando, es fácil de entender para los desarrolladores principiantes de front-end, se han desarrollado muchas otras herramientas y una gran comunidad a su alrededor.



Empiece a aprender React con la documentación oficial , es bastante detallada. Si lo encuentra insuficiente, puede encontrar un curso completo en Udemy (por ejemplo, Modern React y Redux- en inglés, con una explicación muy clara y detallada para principiantes, ejercicios prácticos y todo el material necesario sobre React y bibliotecas).



Preste atención a describir los tipos de parámetros de entrada para los componentes de React ( verificación de tipos con PropTypes ), así como a escribir comentarios de acuerdo con el estándar JSDoc (una serie de artículos sobre el uso de JSDoc).



A medida que avance, deberá aprender a administrar el estado de la aplicación. Bibliotecas que ayudan con esto: Redux y Mobx. Recomiendo comenzar con Redux : esta es la biblioteca más popular junto con React. Consulta la documentación oficial o la traducción . También recomiendo un curso de uno de los autores de la biblioteca (Introducción a Redux por Dan Abramov).



Luego comience a explorar la biblioteca para realizar acciones asincrónicas convenientemente (por ejemplo, solicitudes al servidor). La biblioteca más fácil para empezar es Redux Thunk ( documentación ).



15. Prueba automática



La prueba es el proceso de evaluar que todos los módulos de una aplicación se comportan como se espera. Al probar, puede evitar muchos errores que quizás no note. Aprenda qué son las pruebas y qué tipos son ( Pruebas para "dummies" ). Aprenda a escribir pruebas unitarias para su código utilizando una de las bibliotecas de prueba como Jest .



16. En profundidad





¿Qué dificultades puede haber? Errores al inicio del camino







Marcos de aprendizaje en lugar de conocimientos básicos



A veces, parecerá que es mejor aprender un marco o biblioteca popular de inmediato. Este es un error bastante común, especialmente en el front-end: las personas comienzan a aprender React o codificar con Bootstrap y Material UI sin comprender los conceptos básicos y sin tener suficientes conocimientos de HTML, CSS y JavaScript. Puede utilizar este enfoque si está "corriendo una distancia corta" y necesita completar rápidamente un proyecto. Pero si planea convertirse en desarrollador, no obtendrá el resultado deseado.





No necesita saber de memoria absolutamente todas las propiedades o métodos CSS en JS, puede buscarlos si lo olvida. Es importante comprender los conceptos básicos y las complejidades: esto es lo que será su base sólida en el desarrollo de front-end.



Aprender es trabajo duro, autodisciplina y mucha práctica.



Es un error esperar que se ocupe de todo el material en una semana o que aprenda JS en un día. La cantidad de tiempo que necesita es un asunto muy individual y lo más probable es que el proceso tarde más de un mes.



No se alarme, aprenda paso a paso y gradualmente practique más, de esta manera podrá avanzar más rápido en el aprendizaje. Todos necesitamos algo de tiempo para aprender cosas nuevas.



Decide por qué y por qué quieres convertirte en desarrollador front-end. ¡Frontend es un área donde puede implementar soluciones interesantes y trabajar en proyectos que serán utilizados por una gran cantidad de personas en todo el mundo! Además de esto, cuanto más conocimiento y experiencia obtenga, mayor será su salario.



Recuerda los momentos que te motivan, cuando tu código no funcionará, y el siguiente bloque no se alineará como tú quieres :) Si te gusta ver el resultado de tu trabajo, estudia el material a través de tareas prácticas o creando tu propio proyecto, así serás más rápido obtener una devolución.



Copiar el código de otra persona



Si se encuentra con problemas y errores que no puede resolver, no dude en buscar ayuda en Google. Aprenda a usar la búsqueda y encuentre la causa del problema, pero no copie a ciegas el código de otra persona.



Asegúrese de averiguar qué está sucediendo en la solución que encuentre y por qué. Será más largo y más costoso, pero si no lo resuelve, es más probable que se enfrente a un problema similar y nuevamente no pueda resolverlo usted mismo, y su código se convertirá en fideos con diferentes estilos debido a que copia el código de otra persona.



No confíe al 100% en el código que encuentre



Otras personas pueden estar equivocadas o carecer de experiencia también. Si encuentra un video tutorial de un Master en JavaScript o Layout, no siempre significa que lo que le están presentando sea la solución perfecta y el mejor código posible.



Mire varias fuentes y sea crítico con lo que encuentre. A medida que gane experiencia, comprenderá qué código y enfoques son mejores y cuáles solo complican su aplicación y agrega muletas con las que tropezará más adelante.



Preparación para una entrevista de desarrollador junior



Las entrevistas en diferentes empresas pueden realizarse de formas completamente distintas, me gustaría hablar sobre los conocimientos necesarios, en base a mi experiencia.



Las áreas más frecuentemente entrevistadas para el puesto de desarrollador front-end son diseño, JavaScript, en particular, asincronía y conocimiento de uno de los frameworks o bibliotecas front-end. Para la posición de Junior, se presta más atención al diseño y JavaScript.



Las preguntas pueden ser tanto teóricas como prácticas, para resolver pequeños problemas.



La comunidad de desarrolladores ha compilado una lista de muestra de preguntas para entrevistas . Repase todas las preguntas e intente dar una respuesta. Si no pudo responder algo, esta es una señal para repetir el tema.



Programar sitios con problemas puede ayudarlo a prepararse para resolver problemas de JavaScript, donde puede practicar en línea y probar sus habilidades (comience con la sección de problemas fáciles). Las tareas particularmente populares son aquellas que involucran la aplicación de métodos para trabajar con matrices. Un ejemplo de tales tareas: buscar un palíndromo o anagrama.



Sitios web con tareas de programación:





Los canales de Telegram con tareas y pruebas de JavaScript (por ejemplo, @js_test) también pueden ayudar a verificar el conocimiento.



Las tareas de usar algoritmos realmente complejos y el conocimiento de estructuras de datos como árboles y gráficos casi nunca se dan en una entrevista para un desarrollador front-end junior. Así que no tenga miedo: incluso si la entrevista le parece muy aterradora, de hecho, si pudiera responder todas las preguntas anteriores, lo más probable es que pueda obtener la entrevista.



Un pequeño consejo: si no confía en sus habilidades, obtenga una entrevista con una empresa. E incluso si no recibe una oferta, comprenderá sus debilidades. ¡Puede prepararse aún mejor para su próxima entrevista!





Gracias por leer hasta el final. Espero que el artículo te haya sido útil. Si sabe que puede ser útil para otra persona, compártalo.



¡Te deseo buena suerte en la conquista de nuevos picos!


More articles:


All Articles