GERMAN Wenn das Wort "Framework" Panik auslöst - Eine Methode zum schrittweise lernen

Photo by Annie Spratt on Unsplash

Das Internet und vor allem das World Wide Web ist eine weite Landschaft. InternetLiveStats sagt es gibt rund 1.700.000.000 (eine Milliarde, 700 Millionen) Webseiten. Das ist eine Menge. Im vergleich dazu gibt es knapp 1.024.470 (1 Millionen) npm Pakete. Das ist zwar nur ein Bruchteil von dem, was es an Webseiten gibt, aber immernoch sehr, sehr viel.

Durch diese Masse an Paketen, Frameworks und Design Konzepte durchzublicken ist gerade am Anfang extrem überfordert und kann ab einem gewissen Punkt für viel Frust sorgen.

So war es auch bei mir. Was darin resultierte, dass ich maximal bei basic HTML, CSS und Javascript geblieben bin. Oberste grenze war jQuery und Bootstrap. Worte wie React, Redux, Vue, SCSS oder Express waren das Grauen für mich.

Man denkt sich: "Ich mach das jetzt!", öffnet die Dokumentation und versteht nur Bahnhof. Googelt nach Tutorials, setzt ein "Hello World" auf und versteht immer noch nicht mehr.

Aber ich habe es geschafft, aus diesem Teufelskreis auszubrechen und möchte euch heute verraten wie!

Die Lernmethode

Jeder lernt anders. Manche mit einem Buch, andere mit Youtube Videos, Beispiele oder Dokumentation. Ich kann mit allem was anfangen, aber nichts von dem hat mich so wirklich 100% zufrieden gestellt. Selten lag es aber am Material. Häufiger wie ich damit umgegangen bin.

Diese Umgang habe ich mit FreeCodeCamp gelernt. #notSponsored

FreeCodeCamp ist eine non-profit, die kostenlos Online Kurse zur Webentwicklung anbieten. Sie verwenden eine Mischung zwischen einem Praktischen und einem Theoretisch Ansatz, der auf sich aufbaut.

Nehmen wir an ich möchte Javascript lernen. Ich starte also den Kurs und bekomme erst mal erzählt, was Javascript überhaupt ist. Darauf hin geht es aber recht schnell zu den Übungen. Auf der linken Seite des Bildschirms wird mir nun ein Konzept erklärt und auf der rechten Seite gibt es einen Code Editor. Man liest sich also die linke Seite, mit dem Konzept und Code Beispielen durch. Am ende gibt es eine kleine Aufgabe dieses Beispiel in die Realität umsetzen. Zum Beispiel bekommt man also erklärt, was eine Variable ist, wie die Syntax aussieht und was man damit alles so machen kann. Nachdem man es sich durchgelesen hat, soll man selber im angeschlossenen Editor eine Variable initialisieren, sie belegen oder ändern.

Dadurch nimmt man das abstrakte Konzept direkt in die Hand, setzt es um und kann direkt nachvollziehen ob man es verstanden oder nicht. Bei der zweiten Übung geht es dann um Schleifen. Dort muss man also seine Wissen der Variablen mit reinbringen, aber auch das neue der Schleifen anwenden.

Wozu führt das nun?

1. Man sitz nicht vor einem großen Haufen an Code Beispielen, wo es verlangt wird mehrere Konzepte und Eigenarten gleichzeitig zu verstehen.
2. Durch die direkte Anwendung dessen findet schon eine Transferleistung statt. Man muss sich direkt damit auseinandersetzen, was eine Schleife ist und überliest es nicht einfach.
3. Wenn man diesen Prozess 2-3 durchgemacht hat, erhält man eine gute Einschätzung, wie man selber in Teilaufgaben und Konzepte unterteilt.

Und damit können wir wieder den Bogen nach oben machen. Dokumentation und Büchern. Die gleiche Methode kann man nämlich auch dort anwenden, man kriegt sie nur nicht so schön vorgekaut. Auch Bücher und die meisten Dokumentation gehen abschnittsweise und Konzept für Konzept durch. Anstatt aber nun diese nur stur zu lesen oder in zu großen Code Beispielen reinzuspringen, können wir uns währenddessen eine kleine Zusammenfassung schreiben. Nichts großes, nichts wildes. Es soll kein Lehrbuch werden. Der Clue ist aber: Wir copy & pasten uns nicht einfach die Beispiele, sondern schreiben unsere eigenen. Sei es, dass wir einfach die Variablen Namen ändern.

class Car {
    constructor(horsepower, doors, buildYear){
    this.horsepower = horsepower
    this.doors = doors
    this.buildYear = buildYear
    }

    get info(){
        retun `The Car has ${horsepower} horsepower and ${doors} doors. It was build in ${buildYear}.`
    }
}

const car = new Car(200, 4, 2019)

Würde zum Beispiel im Buch stehen. Darauf aufbauend übertragen wir das in meinetwegen einem Cheat-Sheet als

class Cat {
    constructor(name, pawPower, birthYear){
    this.name = name
    this.pawPower = pawPower
    this.birthYear = birthYear
    }

    get info(){
        retun `This is ${name}. ${name} has ${pawPower} paws and was born in ${birthYear}`
    }
}

const cat = new Cat(200, 4, 2019)

Im Grunde, steht da das selbe. Da wir uns aber Gedanken machen, ob jetzt pawPower wirklich so sinnvoll ist, machen wir uns gleichzeit mit Gedanken über constructor, this. und get info(){}. Wir möchten ja schließlich sinnvolle Beispiele und keine die nur für sich stehen.

Der letzte Schritt

Baue dinge! Die letzten Übungen zu einem Thema bestehen im FreeCodeCamp immer daraus selbstständig Dinge zu bauen. Das muss nichts großes oder außergewöhnlich sein. Vielleicht ist so gar ganz sinnvoll etwas umsetzen dessen Algorithmen und Datenstrom man schon verstanden hat. So kann man sich voll und ganz auf das Framework konzentrieren.

Zusammengefast

1. Breche Frameworks und Sprachen in kleine Teile auf
2. Gehe eins nach dem anderen durch.
3. Schreibe selbst die banalsten Code Beispiele noch ein mal mit eigenen Gedanken auf
4. Setze deine gelernten Fähigkeiten direkt in die Praxis um

Vielen dank fürs Leben lesen, falls ihr darüber weiter quatschen möchtet, haut mich auf Mastodon, Twitter oder per Mail an!