Más de 40 años, sin experiencia técnica, así es como aprendí un marco frontend en 2 semanas

En las últimas dos semanas, he compartido mis experiencias personales de aprendizaje rápido de los conceptos básicos de HTML, CSS y JavaScript, sin ningún conocimiento previo, experiencia u orientación. Sin embargo, si tu objetivo, como el mío, es convertirte en un desarrollador web full-stack o un desarrollador independiente capaz de crear tus propios productos, dominar estas tres pilas tecnológicas básicas no es suficiente. Entonces, esta semana, compartiré una guía completa para principiantes para aprender rápidamente los conceptos básicos de un marco frontend y crear productos simples. ¡Todos los recursos de aprendizaje involucrados en esta publicación son gratuitos!

Después de terminar mi aprendizaje, hice una aplicación web como esta aplicación web . Perdóneme por no implementar mi propio proyecto, sino por usar el ejemplo del proyecto en el tutorial relacionado. Aquí está mi propio repositorio . De hecho, he replicado más del 90% de todos los efectos en el proyecto de muestra. Las razones para no implementar se discutirán más adelante. Como puede ver, este es un proyecto relativamente completo, que involucra muchos aspectos, como la comunicación de frontend y backend, el diseño de animación de frontend, el diseño de enlace de ciclo de vida, el diseño de estructura de datos de backend, la gestión de estado, la gestión de rutas, etc. Incluso integré un editor de texto enriquecido y tailwindcss en este proyecto, lo que hizo que la interfaz se viera muy profesional. Si incluso yo puedo dominar rápidamente los conceptos básicos de un marco frontend, ¿por qué no puedes?

Como de costumbre, primero hablemos de los desvíos que tomé durante mi proceso de aprendizaje del marco frontend.

Con tantos marcos frontend, ¿cuál debería elegir un principiante?

Esta es una de las preguntas más confusas para los principiantes, especialmente para los principiantes autodidactas. Es una pregunta altamente personalizada que involucra sus habilidades básicas, la elección de la ruta de aprendizaje, la capacidad de aprendizaje, los objetivos a corto y largo plazo e incluso el país y la región en los que vive. Por lo tanto, es difícil dar una respuesta estándar. Los principiantes a menudo carecen de conocimientos y experiencia en la industria para evaluar la mejor opción entre todos estos factores.

Este es un tema crucial porque el marco de la interfaz está estrechamente relacionado con el lenguaje de programación principal que usa al crear una aplicación web. Además, si elige un marco menos popular, es posible que le resulte difícil encontrar recursos comunitarios relevantes e incluso se sienta limitado al tomar cursos y colaborar con otros. Estuve confundido acerca de esto durante mucho tiempo e incluso intenté aprender Flask y Django, pero finalmente me di por vencido por varias razones.

Podría escribir un artículo de 10.000 palabras sobre este tema, pero ese no es el objetivo de la publicación de hoy. Entonces, aquí está mi respuesta corta: si está buscando trabajo, es mejor aprender React y convertirlo en su marco principal. Si es un principiante como yo con pocos conocimientos previos y desea aprender rápidamente, construir rápidamente y desarrollar productos de forma independiente en el futuro, entonces puede elegir Vue3. Su curva de aprendizaje es relativamente más suave y más fácil para los principiantes.

¿Es suficiente para un principiante aprender solo un marco?

Una vez pensé que elegir un marco frontend en el ecosistema de mi lenguaje de programación principal resolvería todos los problemas porque los marcos principales tienen ecosistemas muy ricos que pueden manejar todo tipo de escenarios en desarrollo. Sin embargo, a medida que aprendí gradualmente otros cursos y construí productos, me di cuenta de que esta idea era ingenua.

Por ejemplo, actualmente estoy aprendiendo el campo de entrenamiento Solidity de la Universidad de Alchemy. El requisito previo oficial para este curso es un conocimiento básico de JavaScript. Pensé que podría manejar este curso fácilmente ya que no solo había aprendido HTML, CSS, JavaScript, sino también Vue3. Sin embargo, en la tercera semana, descubrí de repente que el proyecto de la semana se creó con la interfaz de React. Estaba estupefacto. Afortunadamente, el proyecto de la semana fue sencillo y solo requirió los conceptos básicos de React. Aún así, me tomó medio día aprender rápidamente los conceptos básicos de React, y finalmente completé el proyecto de la semana con éxito. Entonces, como principiante, nunca fije sus esperanzas en una sola pila de tecnología. El aprendizaje rápido y la adaptabilidad son habilidades esenciales para nosotros.

Mi estrategia de aprendizaje del marco front-end

Simplicidad, practicidad y orientación a objetivos

No espero convertirme en un experto en un marco front-end en solo 2 semanas. A pesar de que Vue3 es más amigable para principiantes que React, su ecosistema es rico y está lleno de contenido, incluidos numerosos documentos como el propio Vue3, Vite, Vue Router, Pinia y más. Si desea crear una interfaz de usuario de calidad, también debe estudiar bibliotecas de interfaz de usuario como Element Plus. Además, si nuestro producto tiene algunas funciones especiales, debemos aprender algunas bibliotecas específicamente para esa función, como el editor de texto enriquecido, wangEditor, que integré en mi aplicación web.

Es imposible aprender todo esto en 2 semanas, por lo que me propuse comprender las funciones principales de Vue3 e inicialmente crear una interfaz de aspecto profesional.

Centrarse en la documentación de Vue3 y aumentar gradualmente la complejidad de la práctica

He revisado muchos documentos desde que comencé a programar de forma autodidacta, y debo admitir que Vue3 es uno de los más amigables para principiantes. La excelente redacción de la documentación me permitió aprender los marcos front-end. Por lo tanto, en lugar de recomendar tutoriales de terceros, sugiero encarecidamente a aquellos que quieran aprender Vue que hagan de la propia documentación de Vue3 su material de estudio principal.

Tener buenos materiales de estudio por sí solo no es suficiente para dominar un marco; la mejor manera de comprender un marco es usarlo para construir proyectos. Sin embargo, tratar de crear la aplicación web que mostré al principio de este artículo podría no ser una buena idea. De hecho, construí dos proyectos durante mi estudio, el primero es muy simple, principalmente para tener una idea del uso del marco, comprender el proceso general y las partes centrales. El segundo proyecto es una extensión del primero, aprendiendo cómo encontrar los recursos necesarios para construir una aplicación web real dentro del ecosistema de un marco.

Horario y tiempo de estudio

1. Pasé medio día clasificando los posibles recursos de aprendizaje, principalmente algunos documentos y dos tutoriales de proyectos cuidadosamente seleccionados. Los documentos incluyen lo siguiente: documentación de Vue3 , documentación de Vite , documentación de Vue Router , documentación de Axios , documentación de Element+ y documentación de Pinia . La documentación de Vue3 es la más crucial entre ellas.

   
   

2. Luego, pasé unos 3 días y medio leyendo la mayor parte de la documentación de Vue. La atención se centra en lo básico, e incluso como principiante, te garantizo que puedes superar esta parte sin dificultad. Sin embargo, a medida que llegué a las últimas partes, parte del contenido se volvió gradualmente menos claro. Eso es normal para los principiantes, y está bien. Las partes que no podía entender por ahora, las anoté y seguí adelante. Algunas partes, como Mejores prácticas, TypeScript y Temas avanzados, decidí omitirlas por completo. En resumen, si solo te enfocas en las partes más esenciales y básicas, 3 días y medio es tiempo suficiente. No aprendo rápido y mis conceptos básicos eran débiles, tal vez no necesites tanto tiempo.

   
   

3. En el día y medio siguiente, seguí un tutorial gratuito clásico de Traversy Media e hice un pequeño proyecto: un rastreador de tareas. Particularmente quiero hablar aquí sobre el estilo de enseñanza de Brad. Sin duda es una figura legendaria, considerado el padrino de la programación por muchos autodidactas. Cada vez que veo sus cursos, aprendo mucho. Es muy bueno en el uso de un proyecto pequeño para demostrar completamente todos los aspectos que uno necesita aprender dentro de una pila de tecnología. ** Pero como novato, debes prestar atención a una cosa, no escuches sus clases sin ningún fundamento. ** Porque el estilo de enseñanza de Brad es muy conciso y elegante. Si no tienes nada básico, es posible que no puedas seguir su ritmo. Por lo tanto, programé deliberadamente este pequeño proyecto tutorial en la segunda etapa de mi aprendizaje, no en la primera.

   
   

4. Si ha seguido seriamente su tutorial, creo que ha encontrado la sensación de construir una interfaz con un marco, pero al mismo tiempo, tiene más preguntas. Así era yo, no veía la hora de navegar rápidamente por los documentos de vite, vue Router, Axios y pinia. Esta vez solo estuve un día y medio. Debido a que ya sé aproximadamente qué conocimiento básico de la pila de tecnología anterior se necesita para construir un proyecto vue3, me enfoco en estos contenidos. Y otros contenidos relativamente complicados pero de uso no tan común, los hojeé rápidamente. Si no lo entiendes todo de una vez, sáltatelo.

   
   

5. Para la segunda semana, tenía la confianza suficiente para consolidar el conocimiento básico que aprendí en la primera semana construyendo un proyecto relativamente complejo. Y de acuerdo con las necesidades de crear una aplicación web real, amplíe el contenido aprendido anteriormente. Esta vez elegí un popular tutorial de vue : FireBlog de Traversy Media. Este tutorial está explicado por John Komarnicki , déjame explicarte por qué elegí este tutorial.

   
   

• La ventaja de este proyecto es que es muy completo, con una interfaz de usuario de front-end profesional y una api de back-end implementada con la ayuda de firebase. Todo el proyecto involucra muchos aspectos, como la comunicación de front-end y back-end, el diseño de animación de front-end, el diseño de enlace de ciclo de vida, el diseño de estructura de datos de back-end, la gestión de estado, la gestión de rutas, etc. Incluso aprendí mucho contenido que no entendía al leer la documentación durante el proceso de construcción. Si queremos desarrollar aplicaciones web en el futuro, esta es una gran oportunidad para la experiencia práctica.

• Su principal desventaja es que se trata de un tutorial de hace dos años, por lo que inevitablemente se han actualizado algunas pilas de tecnología. Por ejemplo, el vue-cli usado en el tutorial ahora está en estado de mantenimiento, usé vite cuando construí. Otro ejemplo es que el editor de texto enriquecido utilizado en el tutorial no se ha actualizado durante mucho tiempo. Usé wangEditor, que también es liviano pero tiene un mantenimiento más reciente y se integra mejor con vue3 al compilar.

  
  

6. El backend de este tutorial usa firebase para compilar, aunque no es complicado, es posible que no satisfaga nuestras propias necesidades de práctica. Por ejemplo, mi backend ideal es una API tranquila creada con node.js+express+mongodb+mongoose. Por lo tanto, no seguí el tutorial para construir un backend de firebase, sino que construí temporalmente un backend virtual con json-server para simular el comportamiento de una API tranquila. Esta es también la razón por la que no implementé mi proyecto en línea. Debido a que tanto la página de github como vercel solo pueden implementar páginas web estáticas, y el terminal de json-server solo puede ejecutarse localmente, no se puede implementar en ellas. Puede elegir según sus propias necesidades al seguir este tutorial, o puede crear un backend de firebase como este.

   
   

7. Este tutorial tiene una duración de seis horas y media. Normalmente, si estudias el contenido de una hora todos los días, seis días deberían ser más que suficientes. A medida que envejezco, mi velocidad de aprendizaje es más lenta. Es posible que pueda completar la compilación en menos de seis días. El último día sigo repasando el contenido anterior como de costumbre, lo más importante es organizar los apuntes que hice durante las dos semanas de aprendizaje y hacer una buena hoja de trucos. Porque encontré que esta acción es crucial. A menudo, un mes después de terminar de aprender, cuando vuelvo a abrir mi código, hay muchas partes que no entiendo o no recuerdo. En este punto, si desea construir un nuevo proyecto, las notas y las hojas de trucos a menudo pueden ser útiles.

Algunos consejos finales:

1. Antes, siempre estaba obsesionado con encontrar el "tutorial perfecto". Pero luego descubrí que en realidad no hay un tutorial perfecto. Tome el tutorial de FireBlog que aprendimos en la segunda semana como ejemplo, tiene muchas deficiencias e incluso algunas partes no cumplen con nuestros requisitos. ¿Y qué? Sigue siendo un excelente tutorial y un proyecto práctico raro. Solo necesitamos actualizar o modificar las piezas que no cumplen con los requisitos.

   
   

2. Aprender un framework front-end es algo similar a aprender javascript del que hablamos la semana pasada, no esperes lograr todo en dos semanas. Hay mucho contenido en su ecosistema y se actualiza constantemente. Sin mencionar que, como discutimos anteriormente, no es realista esperar conquistar todos los aspectos con solo aprender un marco, por lo que está destinado a ser un proceso de aprendizaje continuo. Lo que tenemos que hacer es disfrutar de todo esto y no verlo como una carga.

   
   

3. Si planea aprender reaccionar en lugar de vue, o incluso angular, el contenido que mencioné anteriormente aún se aplica. Así es con los marcos front-end, los métodos de aprendizaje y la dirección de elegir los recursos de aprendizaje son bastante similares.

   
   

#WebDevelopment #FrontendDevelopment #VueJS #JavaScript #LearningToCode #CodeNewbie #TraversyMedia #SelfImprovement #SelfTaught #CodingResources #React