Über 40, ohne technischen Hintergrund. So habe ich in 2 Wochen ein Frontend-Framework gelernt

In den letzten zwei Wochen habe ich meine persönlichen Erfahrungen mit dem schnellen Erlernen der Grundlagen von HTML, CSS und JavaScript geteilt, ohne Vorkenntnisse, Erfahrung oder Anleitung. Wenn Ihr Ziel jedoch, wie ich, darin besteht, ein Full-Stack-Webentwickler oder ein unabhängiger Entwickler zu werden, der in der Lage ist, Ihre eigenen Produkte zu erstellen, reicht es nicht aus, diese drei grundlegenden Tech-Stacks zu beherrschen. Deshalb werde ich diese Woche einen vollständigen Leitfaden für Einsteiger veröffentlichen, mit dem Sie schnell die Grundlagen eines Frontend-Frameworks erlernen und einfache Produkte erstellen können. Alle in diesem Beitrag enthaltenen Lernressourcen sind kostenlos!

Nachdem ich mein Lernen abgeschlossen hatte, habe ich eine Web-App wie diese Web-App erstellt. Bitte verzeihen Sie mir, dass ich nicht mein eigenes Projekt bereitgestellt habe, sondern stattdessen das Projektbeispiel im zugehörigen Tutorial verwendet habe. Hier ist mein eigenes Repository . Tatsächlich habe ich über 90 % aller Effekte im Beispielprojekt repliziert. Die Gründe für die Nichtbereitstellung werden später besprochen. Wie Sie sehen, handelt es sich um ein relativ vollständiges Projekt, das viele Aspekte wie Frontend- und Backend-Kommunikation, Frontend-Animationsdesign, Lebenszyklus-Hook-Design, Backend-Datenstrukturdesign, Statusverwaltung, Routenverwaltung usw. umfasst. Ich habe sogar einen Rich-Text-Editor und tailwindcss in dieses Projekt integriert, wodurch das Frontend sehr professionell aussieht. Wenn selbst ich die Grundlagen eines Frontend-Frameworks schnell beherrschen kann, warum können Sie das nicht?

Lassen Sie uns wie üblich zunächst über die Umwege sprechen, die ich während meines Frontend-Framework-Lernprozesses unternommen habe.

Welches sollte ein Anfänger bei so vielen Frontend-Frameworks wählen?

Dies ist eine der verwirrendsten Fragen für Anfänger, insbesondere für autodidaktische Anfänger. Es handelt sich um eine höchst personalisierte Frage, die Ihre Grundkompetenzen, die Wahl Ihres Lernpfads, Ihre Lernfähigkeit, Ihre kurz- und langfristigen Ziele und sogar das Land und die Region, in der Sie leben, betrifft. Daher ist es schwierig, eine Standardantwort zu geben. Anfängern mangelt es oft an Wissen und Branchenerfahrung, um unter all diesen Faktoren die beste Option zu beurteilen.

Dies ist ein entscheidender Punkt, da das Frontend-Framework eng mit der Hauptprogrammiersprache verknüpft ist, die Sie beim Erstellen einer Web-App verwenden. Wenn Sie sich außerdem für ein weniger beliebtes Framework entscheiden, fällt es Ihnen möglicherweise schwer, relevante Community-Ressourcen zu finden, und Sie fühlen sich sogar eingeschränkt, wenn Sie an Kursen teilnehmen und mit anderen zusammenarbeiten. Ich war darüber lange verwirrt und habe sogar versucht, Flask und Django zu lernen, habe aber schließlich aus verschiedenen Gründen aufgegeben.

Ich könnte einen Artikel mit 10.000 Wörtern zu diesem Thema schreiben, aber das ist nicht der Sinn des heutigen Beitrags. Hier ist meine kurze Antwort: Wenn Sie auf der Suche nach einem Job sind, lernen Sie am besten React und machen Sie es zu Ihrem Hauptframework. Wenn Sie wie ich ein Anfänger mit geringen Vorkenntnissen sind und schnell lernen, schnell bauen und in Zukunft selbstständig Produkte entwickeln möchten, dann können Sie sich für Vue3 entscheiden. Die Lernkurve verläuft vergleichsweise reibungsloser und erleichtert Anfängern den Einstieg.

Reicht es für einen Anfänger, nur ein Framework zu lernen?

Ich dachte einmal, dass die Wahl eines einzigen Frontend-Frameworks im Ökosystem meiner Hauptprogrammiersprache alle Probleme lösen würde, da Mainstream-Frameworks über sehr umfangreiche Ökosysteme verfügen, die alle Arten von Entwicklungsszenarien bewältigen können. Als ich jedoch nach und nach andere Kurse lernte und Produkte baute, wurde mir klar, dass diese Idee naiv war.

Ich lerne zum Beispiel gerade das Solidity-Bootcamp der Alchemy University. Die offizielle Voraussetzung für diesen Kurs sind Grundkenntnisse in JavaScript. Ich dachte, ich könnte diesen Kurs problemlos bewältigen, da ich nicht nur HTML, CSS, JavaScript, sondern auch Vue3 gelernt hatte. In der dritten Woche stellte ich jedoch plötzlich fest, dass das Wochenprojekt mit dem Frontend von React erstellt wurde. Ich war sprachlos. Glücklicherweise war das Wochenprojekt unkompliziert und erforderte nur die Grundlagen von React. Trotzdem brauchte ich einen halben Tag, um schnell die Grundlagen von React zu erlernen, und schließlich schloss ich das einwöchige Projekt erfolgreich ab. Setzen Sie als Anfänger Ihre Hoffnungen also nie auf einen einzigen Tech-Stack. Schnelle Lernfähigkeit und Anpassungsfähigkeit sind für uns wesentliche Fähigkeiten.

Meine Front-End-Framework-Lernstrategie

Einfachheit, Praktikabilität und Zielorientierung

Ich erwarte nicht, in nur zwei Wochen ein Experte für ein Front-End-Framework zu werden. Obwohl Vue3 einsteigerfreundlicher als React ist, ist sein Ökosystem reichhaltig und voller Inhalte, darunter zahlreiche Dokumente wie Vue3s eigene, Vite, Vue Router, Pinia und mehr. Wenn Sie eine hochwertige Frontend-Benutzeroberfläche erstellen möchten, müssen Sie sich auch mit UI-Bibliotheken wie Element Plus befassen. Wenn unser Produkt außerdem über besondere Funktionen verfügt, müssen wir einige Bibliotheken speziell für diese Funktion erlernen, beispielsweise den Rich-Text-Editor wangEditor, den ich in meine Web-App integriert habe.

Es ist unmöglich, das alles in 2 Wochen zu lernen, daher habe ich mir zum Ziel gesetzt, die Kernfunktionen von Vue3 zu verstehen und zunächst ein professionell aussehendes Frontend zu erstellen.

Konzentration auf die Vue3-Dokumentation und allmählich zunehmende Komplexität der Praxis

Ich habe viele Dokumente überprüft, seit ich mit dem Programmieren im Selbststudium begonnen habe, und ich muss zugeben, dass Vue3 eines der anfängerfreundlichsten Dokumente ist. Das hervorragende Schreiben der Dokumentation ermöglichte es mir, Frontend-Frameworks zu erlernen. Daher empfehle ich denjenigen, die Vue lernen möchten, dringend, die eigene Dokumentation von Vue3 zu ihrem Kernlernmaterial zu machen, anstatt Tutorials von Drittanbietern zu empfehlen.

Gute Lernmaterialien allein reichen nicht aus, um ein Framework zu beherrschen. Der beste Weg, ein Framework zu verstehen, besteht darin, es zum Erstellen von Projekten zu verwenden. Der Versuch, die Web-App zu erstellen, die ich am Anfang dieses Artikels gezeigt habe, ist jedoch möglicherweise keine gute Idee. Ich habe während meines Studiums tatsächlich zwei Projekte erstellt, das erste war sehr einfach, hauptsächlich um ein Gefühl für die Verwendung des Frameworks zu bekommen und den allgemeinen Prozess und die Kernteile zu verstehen. Das zweite Projekt ist eine Erweiterung des ersten und erlernt, wie man die Ressourcen findet, die zum Erstellen einer echten Web-App innerhalb des Ökosystems eines Frameworks erforderlich sind.

Lernzeit und Zeitplan

1. Ich habe einen halben Tag damit verbracht, die möglichen Lernressourcen zu sortieren, hauptsächlich einige Dokumente und zwei sorgfältig ausgewählte Projekt-Tutorials. Die Dokumente umfassen Folgendes: Vue3-Dokumentation , Vite-Dokumentation , Vue-Router-Dokumentation , Axios-Dokumentation , Element+-Dokumentation und Pinia-Dokumentation . Die Vue3-Dokumentation ist dabei die wichtigste.

   
   

2. Anschließend verbrachte ich etwa dreieinhalb Tage damit, den Großteil der Vue-Dokumentation zu lesen. Der Fokus liegt auf den Grundlagen, und ich garantiere Ihnen, dass Sie diesen Teil auch als Anfänger problemlos bewältigen können. Je weiter ich jedoch zu den späteren Teilen kam, desto weniger klar wurden einige Inhalte. Das ist für Anfänger normal und in Ordnung. Die Teile, die ich im Moment nicht verstehen konnte, habe ich mir notiert und bin weitergegangen. Einige Teile, wie Best Practices, TypeScript und fortgeschrittene Themen, habe ich beschlossen, komplett zu überspringen. Kurz gesagt: Wenn Sie sich nur auf das Wesentliche und Grundlegende konzentrieren, sind dreieinhalb Tage ausreichend Zeit. Ich lerne nicht schnell und meine Grundlagen waren schwach, vielleicht brauchen Sie nicht so viel Zeit.

   
   

3. In den nächsten anderthalb Tagen folgte ich einem klassischen kostenlosen Tutorial von Traversy Media und machte ein kleines Projekt – einen Task-Tracker. Ich möchte hier insbesondere über Brads Unterrichtsstil sprechen. Er ist sicherlich eine legendäre Figur und wird von vielen Selbstlernern als Pate des Programmierens angesehen. Jedes Mal, wenn ich mir seine Kurse anschaue, lerne ich viel. Er ist sehr gut darin, anhand eines kleinen Projekts alle Aspekte, die man innerhalb eines Technologie-Stacks lernen muss, vollständig zu demonstrieren. ** Aber als Neuling muss man auf eines achten: Hören Sie sich seine Kurse nicht ohne jegliche Grundlage an. ** Weil Brads Unterrichtsstil sehr prägnant und elegant ist. Wenn Sie keine Grundkenntnisse haben, können Sie möglicherweise nicht mit seinem Tempo mithalten. Deshalb habe ich dieses kleine Projekt-Tutorial bewusst in die zweite Phase meines Lernens eingeplant, nicht in die erste.

   
   

4. Wenn Sie seinem Tutorial ernsthaft gefolgt sind, haben Sie meiner Meinung nach das Gefühl gefunden, ein Frontend mit einem Framework zu erstellen, haben aber gleichzeitig weitere Fragen. So ging es mir, ich konnte es kaum erwarten, schnell die Dokumente von vite, vue Router, Axios und pinia zu durchstöbern. Diesmal habe ich nur anderthalb Tage verbracht. Da ich bereits ungefähr weiß, welche Grundkenntnisse des oben genannten Technologie-Stacks zum Aufbau eines vue3-Projekts erforderlich sind, konzentriere ich mich auf diese Inhalte. Und andere relativ komplizierte, aber nicht so häufig verwendete Inhalte habe ich einfach schnell durchgesehen. Wenn Sie nicht alles auf einmal verstehen, überspringen Sie es einfach.

   
   

5. In der zweiten Woche war ich zuversichtlich genug, das Grundwissen, das ich in der ersten Woche gelernt hatte, durch den Aufbau eines relativ komplexen Projekts zu festigen. Erweitern Sie die zuvor erlernten Inhalte entsprechend den Anforderungen zum Erstellen einer echten Web-App. Dieses Mal habe ich mich immer noch für ein beliebtes Vue-Tutorial entschieden – FireBlog von Traversy Media. Dieses Tutorial wird von John Komarnicki erklärt. Lassen Sie mich erklären, warum ich dieses Tutorial ausgewählt habe.

   
   

• Der Vorteil dieses Projekts besteht darin, dass es sehr vollständig ist und über eine professionelle Front-End-Benutzeroberfläche und eine mithilfe von Firebase implementierte Backend-API verfügt. Das gesamte Projekt umfasst viele Aspekte wie Front-End- und Back-End-Kommunikation, Front-End-Animationsdesign, Lebenszyklus-Hook-Design, Back-End-Datenstrukturdesign, Statusverwaltung, Routenverwaltung usw. Ich habe sogar viele Inhalte gelernt, die ich beim Lesen der Dokumentation während des Bauprozesses nicht verstanden habe. Wenn wir in Zukunft Web-Apps entwickeln wollen, ist dies eine tolle Gelegenheit, praktische Erfahrungen zu sammeln.

• Der Hauptnachteil besteht darin, dass es sich um ein Tutorial von vor zwei Jahren handelt und daher zwangsläufig einige Technologie-Stacks aktualisiert wurden. Beispielsweise befindet sich die im Tutorial verwendete Vue-CLI jetzt im Wartungsstatus, ich habe beim Erstellen Vite verwendet. Ein weiteres Beispiel ist, dass der im Tutorial verwendete Rich-Text-Editor schon lange nicht mehr aktualisiert wurde. Ich habe wangEditor verwendet, der ebenfalls leichtgewichtig ist, aber neuere Wartung hat und sich beim Erstellen besser in vue3 integrieren lässt.

  
  

6. Das Backend dieses Tutorials verwendet Firebase zum Erstellen. Obwohl es nicht kompliziert ist, entspricht es möglicherweise nicht unseren eigenen Übungsanforderungen. Mein ideales Backend ist beispielsweise eine erholsame API, die mit node.js+express+mongodb+mongoose erstellt wurde. Daher habe ich das Tutorial zum Erstellen eines Firebase-Backends nicht befolgt, sondern vorübergehend ein virtuelles Backend mit JSON-Server erstellt, um das Verhalten einer Restful-API zu simulieren. Aus diesem Grund habe ich mein Projekt auch nicht online bereitgestellt. Da sowohl Github Page als auch Vercel nur statische Webseiten bereitstellen können und das Terminal des JSON-Servers nur lokal ausgeführt werden kann, kann es nicht auf ihnen bereitgestellt werden. Sie können bei der Befolgung dieses Tutorials nach Ihren eigenen Bedürfnissen wählen oder ein ähnliches Firebase-Backend erstellen.

   
   

7. Dieses Tutorial dauert sechseinhalb Stunden. Normalerweise sollten sechs Tage mehr als ausreichen, wenn Sie jeden Tag eine Stunde lang den Inhalt lernen. Je älter ich werde, desto langsamer ist meine Lerngeschwindigkeit. Möglicherweise können Sie den Bau in weniger als sechs Tagen abschließen. Am letzten Tag habe ich noch wie gewohnt die vorherigen Inhalte durchgesehen. Das Wichtigste ist, die Notizen, die ich während der zwei Wochen des Lernens gemacht habe, zu ordnen und einen guten Spickzettel zu erstellen. Weil ich diese Aktion als entscheidend empfand. Wenn ich meinen Code einen Monat nach Abschluss des Lernens oft erneut öffne, gibt es viele Teile, die ich nicht verstehe oder an die ich mich nicht erinnere. Wenn Sie an dieser Stelle ein neues Projekt erstellen möchten, können sich Notizen und Spickzettel oft als nützlich erweisen.

Einige abschließende Ratschläge:

1. Früher war ich immer davon besessen, das „perfekte Tutorial“ zu finden. Aber später stellte ich fest, dass es eigentlich kein perfektes Tutorial gibt. Nehmen Sie als Beispiel das FireBlog-Tutorial, das wir in der zweiten Woche gelernt haben. Es weist viele Mängel auf und sogar einige Teile entsprechen nicht unseren Anforderungen. Na und? Es ist immer noch ein hervorragendes Tutorial und ein seltenes praktisches Projekt. Wir müssen nur die Teile aufrüsten oder modifizieren, die nicht den Anforderungen entsprechen.

   
   

2. Das Erlernen eines Frontend-Frameworks ähnelt in gewisser Weise dem Erlernen von Javascript, über das wir letzte Woche gesprochen haben. Erwarten Sie nicht, dass Sie in zwei Wochen alles schaffen. Es gibt viele Inhalte in seinem Ökosystem und es wird ständig aktualisiert. Ganz zu schweigen davon, dass es, wie wir bereits besprochen haben, unrealistisch ist, mit nur dem Erlernen eines Frameworks alle Aspekte zu meistern, sodass dies ein kontinuierlicher Lernprozess sein wird. Wir müssen das alles genießen und dürfen es nicht als Belastung betrachten.

   
   

3. Wenn Sie vorhaben, Reagieren statt Vue oder sogar Angular zu lernen, gilt der oben erwähnte Inhalt weiterhin. So verhält es sich mit Front-End-Frameworks, die Lernmethoden und die Richtung bei der Auswahl der Lernressourcen sind eigentlich ziemlich ähnlich.

   
   

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