La mejor manera de aprender el desarrollo web frontend

¿Por qué desarrollo web?

El desarrollo web es un campo que no irá a ninguna parte pronto. La web avanza rápidamente y hay mejoras periódicas en los dispositivos que muchas personas usan a diario.

Las aplicaciones basadas en la nube nos han permitido hacer el trabajo pesado en la nube y usar el navegador como un puente para conectar servidores backend potentes con frontends menos capaces y potentes.

Ahora es el mejor momento para aprender sobre desarrollo web si está buscando aprender algo.

El desarrollo web no solo abre una gran cantidad de oportunidades para usted como individuo, sino que también podrá codificar e implementar proyectos completos de extremo a extremo que pueden ser consumidos por casi todos en el planeta.

Dado que la mayoría de la gente tiene acceso a un navegador, cada persona está a una única URL de la aplicación web que ha codificado. Si compara esto con una aplicación de escritorio o un producto basado en hardware, verá que simplemente no es tan escalable en comparación con la web.

Ahora que hemos establecido el hecho de que la web es el mejor camino a seguir en este momento, veamos cómo aprender desarrollo web de la mejor manera posible.

La Web es enorme: comience con algo pequeño y manténgalo pequeño

Probablemente haya visto una gran cantidad de marcos y bibliotecas de JavaScript como React, Angular, Vue, Ember, jQuery, XYZ, etc.

Algunas preguntas muy comunes que recibo como YouTuber al publicar contenido de desarrollo web son las siguientes:

¿Debería aprender X?

¿Es X mejor que Y?

¿Cuál es el alcance de Z?

Recuerde siempre dos cosas sobre la tecnología, especialmente sobre la web:

  1. Tu pila tecnológica casi siempre nunca importa. Si eres lo suficientemente bueno con tu lenguaje / marco, siempre ganarás.
  2. Nunca necesitas aprender todo. Nunca. Puede ser un experto en todos los oficios, pero asegúrese de ser un maestro en uno.

Para resumir esta sección, debe pensar muy poco cuando comience . Es muy fácil dejarse llevar por ese marco tan caliente que se acaba de lanzar. Simplemente no intente adelantarse abandonando la tecnología antigua y adaptando la nueva tecnología sin hacer una investigación adecuada.

Comience con HTML y CSS

No puedo enfatizar esto lo suficiente. Me duele ver a un montón de personas haciéndome preguntas sobre sus proyectos React cuando la respuesta está en HTML o CSS básico.

JavaScript era solo un lenguaje de programación de navegador al principio. Y aunque ahora es mucho más que eso, no cambia el hecho de que en la web complementa HTML y CSS.

Con los avances en los estándares web, hay mucho que puede lograr solo con CSS. Para muchas cosas, JavaScript ni siquiera es necesario.

Animaciones? Lo tienes. ¿Arrastrar y soltar? HTML puede manejar eso. Diseños? Consulte las API de CSS Flexbox o Grid.

¡Hay tantas cosas que puedes aprender sobre HTML y CSS! No se apresure a usar JavaScript porque todos los chicos geniales del bloque están en Angular. Esas bibliotecas y marcos no van a ninguna parte. Tómate tu tiempo .

¿Ir amplio o profundo?

Hay dos enfoques cuando aprendes sobre desarrollo web: profundizar o ampliar.

Ampliar significa que comienzan a aprender muchas cosas juntos. Esto podría funcionar para algunas personas, pero no para otras. Puede abrumarse con tutoriales, ejercicios, videos y blogs, y luego finalmente darse por vencido.

Profundizar significa que comienzas a aprender una cosa y tratas de aprender todo lo que puedas al respecto. Esto tiene su propio conjunto de pros y contras. Puede aburrirse o darse por vencido porque no ve resultados.

Entonces, ¿cuál es la solución? La respuesta es, sorprendentemente, no hacer ninguna de las dos cosas. Elija una pila de tecnología pequeña como HTML / CSS / JavaScript, y profundice moderadamente en los tres. Esto tiene un par de ventajas:

  1. No te aburrirás, ya que los tres tienen propósitos relativamente diferentes y los escribes de manera diferente.
  2. Puede combinar los tres y crear y ver algo significativo rápidamente sin meses de esfuerzo (lo que generalmente requieren otros lenguajes como C / C ++). Esto lo mantendrá motivado para seguir adelante.

No elijas React, Angular o Vue

Cuando la gente comienza a trabajar con JavaScript, surge la necesidad de elegir una biblioteca como React, un sistema de interfaz de usuario como Material UI, y sumergirse en la creación de cosas increíbles.

Desafortunadamente, esto no lleva más que a dispararse en el pie. Nunca, nunca, podrá crear proyectos de nivel intermedio a avanzado con estos marcos si no comprende los conceptos básicos de JavaScript. Y la aplicación de JavaScript lleva algún tiempo.

Observe que utilicé la palabra aplicar, y no aprender, en la oración anterior. Hay una gran diferencia entre aprender algo y aplicar algo que ha aprendido.

Cree un proyecto pequeño pero funcional con HTML / CSS / JavaScript. Y cuando lo haga, cree uno más y luego cree otro proyecto.

En cada paso del camino, siga aumentando la complejidad del proyecto y las expectativas también, hasta que su código base se vuelva inmanejable. En ese punto, ha llegado a lo que me gusta llamar el límite del aprendizaje superior .

Verás, los marcos existen para descargarte el trabajo repetitivo. No existen, por lo que ignora lo que realmente está sucediendo bajo el capó y confía en el hecho de que todo es magia.

La primera vez que elija un marco como React o Angular para sus proyectos debe ser cuando esté seguro de que puede crear ese proyecto sin React o Angular .

Maestro de un oficio

Ahora, cuando sea bueno con HTML / CSS / JavaScript, es hora de pasar a los estándares de la industria. La verdad es que, no importa qué tan bueno sea un desarrollador de JavaScript, a menudo necesitará trabajar con marcos modernos como React, y solo con su conocimiento de JavaScript, no puede dominarlo de inmediato.

Tomará tiempo aprender y comprender la terminología, los conceptos y cómo funciona ese marco bajo el capó. Así que tome un marco y domínelo.

¿Cómo, podrías preguntar? La respuesta es simple, depende de usted. Cree un proyecto simple en todos los marcos principales (Angular, Vue y React) y vea cuál vibra más con usted. Elige uno y no mires atrás

Luego crea todos tus proyectos con ese marco. Trate de hacer algo que aún no sepa cómo hacer. Esta es la mejor manera de salir de su zona de confort y aprender cosas nuevas .

Pero no te olvides de los demás

Es igualmente importante vigilar a otros candidatos también. Esto no solo involucra a los competidores directos de su marco "favorito", sino también a algunas valiosas herramientas de desarrollo web.

No tiene que "dominar" estas otras herramientas porque muchas veces solo requieren una configuración única con un mantenimiento regular. Pero siempre es bueno tenerlos en tu lista de verificación de habilidades.

Esto podría incluir varias cosas, como pruebas unitarias con Jest, pruebas de un extremo a otro con Cypress, Webpack, Babel o Parcel, un poco de devops, secuencias de comandos de shell de Linux, implementaciones de servidores, etc.

Siempre puede aprender los conceptos básicos de estas habilidades rápidamente, ya que han existido durante mucho tiempo, por lo que tienen una gran cantidad de material útil disponible.

Siga adelante

Créame, es una sensación divertida, pero una vez que desarrolla muchos proyectos y escribe mucho código con su pila favorita, comienza a sentir que puede hacer cualquier cosa. En este punto, puede conseguir un trabajo y seguir haciendo lo mismo, está bien. O puede subir de nivel sus habilidades a través del techo y seguir adelante.

La web. Es. Vasto.

Entonces, si ha terminado con HTML / CSS / JavaScript / React / Angular / Vue, continúe con los servidores. Obtenga información sobre la implementación de servidores, NGiNX, HAProxy, equilibrio de carga, configuración de infraestructura en la nube, firewalls y ajuste de escala automático.

¿Terminaste con eso también? Pase a WebAssembly, el lenguaje para la próxima iteración de la web.

¿Terminó de aprender WebAssembly? Err, no lo sé entonces. ¿Quizás pasar a otras áreas de programación o cocinar? :)

Conclusión

En el mundo de hoy, es muy fácil para ti no repetir los errores que cometí mientras aprendía desarrollo web. ¡Porque todos esos errores ahora son públicos para que todos los lean!

Tienes tantos recursos disponibles para ti, ¡y he estado trabajando en uno para que los desarrolladores web lo aprendan! Aquí está mi canal de YouTube donde te enseño a programar cosas increíbles. Y aquí está la plataforma codedamn, la plataforma real que le permite convertirse en un gran desarrollador al combinar un montón de videos, artículos y ejercicios.

Déjame saber lo que piensas sobre este artículo y el desarrollo web en general, a través de mis identificadores de Twitter e Instagram. ¡Me encantaría conectarme contigo!

¡Paz!