Plus de 40 ans, sans formation technique, c'est ainsi que j'ai appris un framework frontend en 2 semaines

Au cours des deux dernières semaines, j'ai partagé mes expériences personnelles d'apprentissage rapide des bases de HTML, CSS et JavaScript, sans aucune connaissance, expérience ou orientation préalable. Cependant, si votre objectif, comme le mien, est de devenir un développeur web full-stack ou un développeur indépendant capable de créer vos propres produits, maîtriser ces trois piles technologiques de base ne suffit pas. Donc, cette semaine, je partagerai un guide complet du débutant pour apprendre rapidement les bases d'un framework frontal et créer des produits simples. Toutes les ressources d'apprentissage impliquées dans cet article sont gratuites !

Après avoir terminé mon apprentissage, j'ai créé une application Web comme cette application Web . Veuillez m'excuser de ne pas déployer mon propre projet mais d'utiliser à la place l'exemple de projet du didacticiel associé. Voici mon propre dépôt . En fait, j'ai reproduit plus de 90 % de tous les effets dans l'exemple de projet. Les raisons de ne pas se déployer seront discutées plus tard. Comme vous pouvez le constater, il s'agit d'un projet relativement complet, impliquant de nombreux aspects tels que la communication frontend et backend, la conception d'animations frontend, la conception de hook de cycle de vie, la conception de structure de données backend, la gestion d'état, la gestion de route, etc. J'ai même intégré un éditeur de texte enrichi et tailwindcss dans ce projet, donnant à l'interface un aspect très professionnel. Si même moi je peux maîtriser rapidement les bases d'un framework frontend, pourquoi pas vous ?

Comme d'habitude, parlons d'abord des détours que j'ai pris lors de mon apprentissage du framework frontend.

Avec autant de frameworks frontaux, lequel choisir pour un débutant ?

C'est l'une des questions les plus déroutantes pour les débutants, en particulier les débutants autodidactes. Il s'agit d'une question hautement personnalisée qui implique vos compétences de base, votre choix de parcours d'apprentissage, votre capacité d'apprentissage, vos objectifs à court et à long terme, et même le pays et la région dans lesquels vous vivez. Par conséquent, il est difficile de donner une réponse standard. Les débutants manquent souvent de connaissances et d'expérience dans l'industrie pour évaluer la meilleure option parmi tous ces facteurs.

Il s'agit d'un problème crucial car le framework frontal est étroitement lié au langage de programmation principal que vous utilisez lors de la création d'une application Web. De plus, si vous choisissez un cadre moins populaire, vous aurez peut-être du mal à trouver des ressources communautaires pertinentes, et même vous sentirez limité lorsque vous suivrez des cours et collaborerez avec d'autres. J'ai été confus à ce sujet pendant longtemps et j'ai même essayé d'apprendre Flask et Django, mais j'ai finalement abandonné pour diverses raisons.

Je pourrais écrire un article de 10 000 mots sur ce problème, mais ce n'est pas le but de l'article d'aujourd'hui. Voici donc ma réponse courte : si vous cherchez un emploi, il est préférable d'apprendre React et d'en faire votre cadre principal. Si vous êtes un débutant comme moi avec peu de connaissances préalables et que vous souhaitez apprendre rapidement, construire rapidement et développer des produits de manière indépendante à l'avenir, vous pouvez choisir Vue3. Sa courbe d'apprentissage est relativement plus fluide et plus facile pour les débutants.

Est-ce suffisant pour un débutant d'apprendre un seul framework ?

Une fois, j'ai pensé que choisir un framework frontal dans l'écosystème de mon langage de programmation principal résoudrait tous les problèmes car les frameworks traditionnels ont des écosystèmes très riches qui peuvent gérer toutes sortes de scénarios de développement. Cependant, au fur et à mesure que j'apprenais d'autres cours et construisais des produits, j'ai réalisé que cette idée était naïve.

Par exemple, j'apprends actuellement le bootcamp Solidity d'Alchemy University. Le prérequis officiel pour ce cours est une connaissance de base de JavaScript. Je pensais pouvoir gérer ce cours facilement car j'avais non seulement appris HTML, CSS, JavaScript, mais aussi Vue3. Cependant, au cours de la troisième semaine, j'ai soudainement découvert que le projet de la semaine avait été construit avec l'interface de React. J'étais abasourdi. Heureusement, le projet de la semaine était simple et ne nécessitait que les bases de React. Malgré tout, il m'a fallu une demi-journée pour apprendre rapidement les bases de React, et j'ai finalement terminé le projet de la semaine avec succès. Donc, en tant que débutant, ne placez jamais vos espoirs sur une seule pile technologique. L'apprentissage rapide et l'adaptabilité sont des compétences essentielles pour nous.

Ma stratégie d'apprentissage du cadre frontal

Simplicité, praticité et orientation vers les objectifs

Je ne m'attends pas à devenir un expert dans un framework front-end en seulement 2 semaines. Bien que Vue3 soit plus convivial pour les débutants que React, son écosystème est riche et plein de contenu, y compris de nombreux documents tels que ceux de Vue3, Vite, Vue Router, Pinia, etc. Si vous souhaitez créer une interface utilisateur frontale de qualité, vous devez également étudier les bibliothèques d'interface utilisateur telles que Element Plus. De plus, si notre produit a des fonctionnalités spéciales, nous devons apprendre certaines bibliothèques spécifiquement pour cette fonctionnalité, comme l'éditeur de texte enrichi, wangEditor, que j'ai intégré à mon application Web.

Il est impossible d'apprendre tout cela en 2 semaines, j'ai donc fixé mon objectif de saisir les fonctions de base de Vue3 et de créer initialement une interface d'aspect professionnel.

Centrage sur la documentation Vue3 et augmentation progressive de la complexité de la pratique

J'ai passé en revue de nombreux documents depuis que j'ai commencé la programmation autodidacte, et je dois admettre que Vue3 est l'un des plus adaptés aux débutants. L'excellente rédaction de la documentation m'a permis d'apprendre les frameworks front-end. Par conséquent, au lieu de recommander des didacticiels tiers, je suggère fortement à ceux qui souhaitent apprendre Vue de faire de la propre documentation de Vue3 leur matériel d'étude de base.

Il ne suffit pas d'avoir de bons supports d'étude pour maîtriser un cadre ; la meilleure façon d'appréhender un framework est de l'utiliser pour construire des projets. Cependant, essayer de créer l'application Web que j'ai démontrée au début de cet article n'est peut-être pas une bonne idée. J'ai en fait construit deux projets au cours de mes études, le premier étant très simple, principalement pour avoir une idée de l'utilisation du framework, comprendre le processus général et les parties centrales. Le deuxième projet est une extension du premier, apprenant à trouver les ressources nécessaires pour construire une véritable application web au sein de l'écosystème d'un framework.

Temps et horaire d'étude

1. J'ai passé une demi-journée à trier les ressources d'apprentissage possibles, principalement quelques documents et deux tutoriels de projet soigneusement sélectionnés. Les documents incluent les éléments suivants : documentation Vue3 , documentation Vite , documentation Vue Router , documentation Axios , documentation Element+ et documentation Pinia . La documentation de Vue3 est la plus cruciale d'entre elles.

   
   

2. Ensuite, j'ai passé environ 3 jours et demi à lire la plupart de la documentation de Vue. L'accent est mis sur les bases, et même en tant que débutant, je vous garantis que vous pourrez passer à travers cette partie sans difficulté. Cependant, au fur et à mesure que j'arrivais aux dernières parties, certains contenus devenaient progressivement moins clairs. C'est normal pour les débutants, et ça va. Les parties que je ne pouvais pas comprendre pour l'instant, je les ai notées et je suis passée à autre chose. Certaines parties, comme les meilleures pratiques, TypeScript et les sujets avancés, j'ai décidé de les ignorer complètement. En bref, si vous vous concentrez uniquement sur les parties les plus essentielles et les plus basiques, 3 jours et demi, c'est amplement suffisant. Je n'apprends pas vite et mes bases étaient faibles, peut-être que vous n'aurez pas besoin d'autant de temps.

   
   

3. Le jour et demi suivant, j'ai suivi un tutoriel gratuit classique de Traversy Media et j'ai réalisé un petit projet - un suivi des tâches. Je veux particulièrement parler du style d'enseignement de Brad ici. Il est certainement une figure légendaire, considéré comme le parrain de la programmation par de nombreux autodidactes. Chaque fois que je regarde ses cours, j'apprends beaucoup. Il est très doué pour utiliser un petit projet pour démontrer pleinement tous les aspects qu'il faut apprendre au sein d'une pile technologique. ** Mais en tant que nouveau venu, il faut faire attention à une chose, ne pas écouter ses cours sans aucun fondement. ** Parce que le style d'enseignement de Brad est très concis et élégant. Si vous n'avez aucune base, vous ne pourrez peut-être pas suivre son rythme. Par conséquent, j'ai délibérément programmé ce petit tutoriel de projet dans la deuxième étape de mon apprentissage, et non dans la première.

   
   

4. Si vous avez suivi sérieusement son tutoriel, je crois que vous avez retrouvé la sensation de construire un front-end avec un framework, mais en même temps, vous vous posez plus de questions. J'étais comme ça, j'avais hâte de parcourir rapidement les documents de vite, vue Router, Axios et pinia. Cette fois, je n'y ai passé qu'un jour et demi. Parce que je sais déjà à peu près quelles connaissances de base de la pile technologique ci-dessus sont nécessaires pour construire un projet vue3, je me concentre sur ces contenus. Et d'autres contenus relativement compliqués mais pas si couramment utilisés, que j'ai juste rapidement parcourus. Si vous ne comprenez pas tout d'un coup, sautez-le.

   
   

5. Dès la deuxième semaine, j'étais suffisamment en confiance pour consolider les connaissances de base acquises la première semaine en construisant un projet relativement complexe. Et selon les besoins de création d'une véritable application Web, développez le contenu appris précédemment. Cette fois, j'ai toujours choisi un tutoriel vue populaire - FireBlog de Traversy Media. Ce tutoriel est expliqué par John Komarnicki , laissez-moi vous expliquer pourquoi j'ai choisi ce tutoriel.

   
   

• L'avantage de ce projet est qu'il est très complet, avec une interface utilisateur frontale professionnelle et une API backend implémentée à l'aide de firebase. L'ensemble du projet implique de nombreux aspects tels que la communication front-end et back-end, la conception d'animation front-end, la conception de hook de cycle de vie, la conception de structure de données back-end, la gestion d'état, la gestion d'itinéraire, etc. J'ai même appris beaucoup de contenu que je n'ai pas compris en lisant la documentation pendant le processus de construction. Si nous voulons développer des applications Web à l'avenir, c'est une excellente occasion d'acquérir une expérience pratique.

• Son principal inconvénient est qu'il s'agit d'un tutoriel d'il y a deux ans, donc inévitablement certaines piles technologiques ont été mises à niveau. Par exemple, la vue-cli utilisée dans le tutoriel est maintenant en état de maintenance, j'ai utilisé vite lors de la construction. Un autre exemple est que l'éditeur de texte enrichi utilisé dans le tutoriel n'a pas été mis à jour depuis longtemps, j'ai utilisé wangEditor qui est également léger mais a une maintenance plus récente et s'intègre mieux avec vue3 lors de la construction.

  
  

6. Le backend de ce didacticiel utilise firebase pour construire, bien que ce ne soit pas compliqué, il peut ne pas répondre à nos propres besoins de pratique. Par exemple, mon backend idéal est une API reposante construite avec node.js+express+mongodb+mongoose. Par conséquent, je n'ai pas suivi le tutoriel pour construire un backend firebase, mais j'ai temporairement construit un backend virtuel avec json-server pour simuler le comportement d'une API reposante. C'est aussi pour cela que je n'ai pas déployé mon projet en ligne. Étant donné que la page github et vercel ne peuvent déployer que des pages Web statiques et que le terminal de json-server ne peut s'exécuter que localement, il ne peut pas être déployé sur celles-ci. Vous pouvez choisir en fonction de vos propres besoins lorsque vous suivez ce didacticiel, ou vous pouvez créer un backend firebase comme celui-ci.

   
   

7. Ce tutoriel dure six heures et demie. Normalement, si vous étudiez le contenu d'une heure chaque jour, six jours devraient être plus que suffisants. En vieillissant, ma vitesse d'apprentissage est plus lente. Vous pourrez peut-être terminer la construction en moins de six jours. Le dernier jour, j'ai encore revu le contenu précédent comme d'habitude, le plus important est d'organiser les notes que j'ai prises pendant les deux semaines d'apprentissage et de faire une bonne feuille de triche. Parce que j'ai trouvé cette action cruciale. Souvent, un mois après avoir fini d'apprendre, lorsque j'ouvre à nouveau mon code, il y a de nombreuses parties que je ne comprends pas ou dont je ne me souviens pas. À ce stade, si vous souhaitez créer un nouveau projet, les notes et les aide-mémoire peuvent souvent s'avérer utiles.

Quelques derniers conseils :

1. Avant, j'étais toujours obsédé par la recherche du "tutoriel parfait". Mais plus tard, j'ai découvert qu'il n'y avait en fait pas de tutoriel parfait. Prenez le didacticiel FireBlog que nous avons appris la deuxième semaine à titre d'exemple, il présente de nombreuses lacunes et même certaines parties ne répondent pas à nos exigences. Mais alors quoi? C'est toujours un excellent tutoriel et un projet pratique rare. Nous devons uniquement mettre à niveau ou modifier les pièces qui ne répondent pas aux exigences.

   
   

2. L'apprentissage d'un framework front-end est un peu similaire à l'apprentissage du javascript dont nous avons parlé la semaine dernière, ne vous attendez pas à tout accomplir en deux semaines. Il y a beaucoup de contenu dans son écosystème, et il est constamment mis à jour. Sans oublier, comme nous en avons discuté précédemment, qu'il est irréaliste de s'attendre à conquérir tous les aspects en apprenant simplement un cadre, il s'agit donc d'un processus d'apprentissage continu. Ce que nous devons faire, c'est profiter de tout cela et ne pas le voir comme un fardeau.

   
   

3. Si vous envisagez d'apprendre réagir au lieu de vue, ou même angulaire, le contenu que j'ai mentionné ci-dessus s'applique toujours. C'est comme ça avec les frameworks front-end, les méthodes d'apprentissage et la direction du choix des ressources d'apprentissage sont en fait assez similaires.

   
   

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