‫Dozent: In der
‫vorherigen Vorlesung habe ich, als ich über
‫das Frontend und das Backend sprach, ein paar Mal
‫einfache, statische und dynamische Websites oder Anwendungen
‫erwähnt, aber ohne wirklich zu definieren, was sie sind.
‫In diesem Video wollte ich diese Dinge klären
‫und auch über APIs sprechen, um
‫all diese Konzepte in das Gesamtbild der
‫Back-End-Webentwicklung im Allgemeinen zu bringen.
‫Beginnen wir also damit, über statische
‫versus dynamische Websites zu sprechen.
‫Eine statische Website oder eine einfache Website,
‫wie ich sie im
‫letzten Video genannt habe, ist also,
‫wenn ein Entwickler die endgültigen servierfertigen Dateien einer Website auf den Webserver hochlädt.
‫Diese Dateien enthalten normalerweise HTML, CSS,
‫JavaScript, Bilder und mehr, und wie gesagt, dies sind
‫genau die Dateien, die der Server später an den
‫Browser sendet, wenn die Website angefordert wird.
‫Der Browser nimmt diese Dateien
‫dann und rendert sie so, wie sie sind.
‫Das bedeutet, dass auf dem Server keine Arbeit
‫verrichtet wird, es keinen Back-End-Code gibt und auch keine
‫Anwendung läuft.
‫Okay?
‫Es ist also nur ein statischer Webserver, der statische Dateien bereitstellt,
‫genau wie ich im letzten Video erwähnt habe.
‫Jetzt denkst du vielleicht, warte,
‫wenn JavaScript auf der
‫Seite ist, dann gibt es normalerweise
‫dynamische Effekte wie Animationen und so, oder?
‫Nun, diese Dynamik, die Sie meinen, ist
‫eine andere Dynamik.
‫Es ist nur im Kontext der Front-End-Entwicklung.
‫Im Browserkontext hat Dynamik nichts mit Auswirkungen auf
‫eine Seite oder Dinge zu tun, die sich bewegen, sondern
‫mit der Art und Weise, wie Websites auf Servern generiert werden.
‫Okay?
‫Dynamische Websites unterscheiden sich also von statischen Websites, da sie
‫normalerweise jedes Mal auf dem
‫Server erstellt werden, wenn eine neue Anfrage eingeht.
‫Wie wir im
‫letzten Video gesehen haben, enthalten dynamische Websites normalerweise
‫eine Datenbank, dann läuft auch eine
‫Anwendung, wie ein Node. js-App, die Daten aus
‫der Datenbank abruft und dann zusammen mit einer
‫vordefinierten Vorlage jede Seite erstellt, die der Benutzer dynamisch auf
‫der Grundlage von Daten aus der Datenbank anfordert.
‫Jedes Mal, wenn ein Browser
‫eine Seite anfordert, wird diese Seite als HTML-, CSS- und JavaScript-Dateien erstellt,
‫die dann an den Browser zurückgesendet werden.
‫Dieser ganze Prozess wird manchmal
‫als serverseitiges Rendering bezeichnet.
‫Aus diesem Grund wird es auch als
‫dynamisch bezeichnet, da sich die Website ständig entsprechend dem
‫Inhalt der Datenbank oder den
‫Aktionen des Benutzers auf der Website ändern kann.
‫Wenn Sie sich beispielsweise bei Twitter angemeldet haben,
‫wird Ihnen eine völlig andere Seite
‫angezeigt, als wenn Sie sich abgemeldet haben, oder?
‫Und es zeigt Ihnen morgen auch eine andere
‫Seite als heute, weil es neue Tweets gibt,
‫also neue Daten in der Datenbank.
‫Und genau darum geht es bei dynamischen Websites.
‫Wenn Sie jetzt zum Beispiel zu Jonas gehen. io, und das
‫solltest du übrigens, dann
‫siehst du immer den gleichen Inhalt,
‫die gleiche Website, egal wann du besuchst oder
‫was du dort machst.
‫Das bedeutet, dass es sich um eine statische Seite handelt, in Ordnung?
‫Macht dieser Unterschied Sinn?
‫Nun, manchmal verwenden wir den Begriff dynamische Websites
‫und manchmal den Begriff
‫Webanwendung, aber sie sind irgendwie dasselbe.
‫Wenn Leute von Webanwendungen sprechen,
‫meinen sie normalerweise eine dynamische Website mit
‫einigen Funktionen wie Anmelden, Erstellen von
‫Benutzerprofilen, Suchen nach Inhalten und dergleichen im Allgemeinen.
‫Websites sind zum Beispiel so etwas wie ein WordPress-Blog.
‫Sie werden immer noch dynamisch generiert,
‫aber wir können eigentlich nichts anderes tun, als sie zu lesen, oder?
‫Und traditionell waren statische und dynamische Websites die einzigen
‫beiden Arten von Websites, aber in den
‫letzten Jahren sehen wir dank
‫der leistungsstarken Browser auf der Clientseite immer mehr
‫Websites, die im Wesentlichen auf APIs basieren.
‫Lassen Sie uns also lernen, wie diese
‫funktionieren und wie wir Node. js, um sie mit Strom zu versorgen.
‫Lassen Sie uns einfach die dynamischen Websites hier
‫in der Folie belassen, damit wir die beiden besser vergleichen können.
‫Genau wie bei den dynamischen Websites haben wir
‫hier eine Datenbank und wir haben eine App,
‫die jedes Mal, wenn ein
‫Client eine Anfrage stellt, Daten aus der Datenbank abruft. In
‫diesem Sinne ist eine API-basierte Website einer dynamischen
‫Website ziemlich ähnlich Webseite.
‫Beide arbeiten also dynamisch.
‫Der große Unterschied besteht nun darin, dass wir
‫mit einer API nur die Daten, meist
‫im JSON-Datenformat, an den Browser
‫senden und nicht die gesamte Website.
‫Es werden also wieder nur die Daten an den Client
‫gesendet und nicht die zur Anzeige bereite Website.
‫Also kein HTML, kein CSS, nur die JSON-Daten, in Ordnung?
‫Beim Erstellen von API-basierten Websites gibt
‫es also immer diese beiden
‫Schritte, eine API zu erstellen und dann die
‫API auf der Clientseite zu konsumieren, und
‫übrigens steht API für Application Programming Interface, und auf einer
‫sehr hohen Ebene ist es im Grunde
‫eine Software, die von einer anderen Software verwendet werden
‫kann, um im Grunde Anwendungen zu ermöglichen, miteinander zu kommunizieren.
‫Und wir werden etwas ausführlicher darüber
‫sprechen, was eine API eigentlich ist, sobald wir mit der Erstellung einer API beginnen.
‫Wie auch immer, jetzt zur Client-Seite, die ich gerade erwähnt habe.
‫Hier wird die Website also tatsächlich zusammengestellt, indem
‫die Daten, die wir erhalten, in eine
‫Art von Vorlagen eingefügt werden, normalerweise unter Verwendung eines ausgefallenen
‫Front-End-Frameworks wie React, Angular oder Vue.
‫Ich werde hier nicht
‫auf Einzelheiten eingehen, weil das für einen
‫Front-End-Kurs wäre, aber ganz allgemein funktioniert es so.
‫Sie sehen also, dass sich beim Erstellen einer
‫API-basierten Website die Aufbauphase der Website
‫vom Backend zum Frontend verlagert hat, oder?
‫Oder wir können auch sagen, dass es vom Server zum Client verschoben wurde.
‫Aus diesem Grund
‫werden dynamische Websites oft als serverseitig gerendert bezeichnet,
‫da sie tatsächlich auf dem Server erstellt wurden.
‫Auf der anderen Seite werden API-gestützte
‫Websites oft als clientseitig gerendert bezeichnet, was Sinn macht, oder?
‫Für uns Back-End-Entwickler ist
‫es eigentlich viel einfacher, einfach eine API zu erstellen
‫und die Front-End-Leute eine Site erstellen zu lassen, oder?
‫Und tatsächlich ist Node ein absolut perfektes Tool zum
‫Erstellen von APIs, und es wird sehr häufig dafür verwendet,
‫aber es ist natürlich auch
‫perfekt geeignet, um eine dynamische serverseitig gerenderte Website zu erstellen.
‫In diesem Kurs werden wir also tatsächlich beide Versionen durchführen,
‫beginnend mit der API und am Ende des
‫Kurses auch eine gerenderte Website mit genau den gleichen Daten erstellen.
‫Ich habe mich für beides entschieden, weil ich glaube, dass es für Sie
‫äußerst wichtig ist, zu wissen, wie Sie sowohl eine API als auch
‫eine serverseitig gerenderte Website erstellen.
‫Und jetzt, um dieses Video
‫zu beenden, wollte ich noch kurz
‫erwähnen, dass die APIs, die wir mit Node oder wirklich jeder
‫anderen Sprache erstellen,
‫natürlich von anderen Clients als nur dem Browser
‫verwendet werden können, was ein großer Vorteil ist Erstellen
‫einer API anstelle einer serverseitig gerenderten Website.
‫Nehmen wir an,
‫wir erstellen eine Beispiel-API auf Jonas. io/api/myCourseData.
‫Wenn wir also auf diese URL zugreifen, sendet der Server Daten
‫über die Webentwicklungskurse
‫zurück, die ich derzeit unterrichte.
‫Bisher haben wir nur über
‫Anfragen von Webbrowsern gesprochen, aber wir könnten auch
‫genau dieselben JSON-Daten in einer nativen
‫iOS-App oder einer Android-App oder sogar in Desktop-Apps
‫für den Mac oder für Windows-Computer
‫anfordern und dann konsumieren.
‫Die Möglichkeiten sind wirklich endlos, wenn wir eine API bauen,
‫weil wir einfach eine Datenquelle haben, die
‫dann überall angefordert und verwendet werden kann, nicht
‫nur in Browsern.
‫Das ist das Problem, wenn wir eine normale
‫dynamische Website erstellen.
‫Wir geben HTML-, CSS- und JavaScript-Dateien
‫zurück, und nur Browser können diese wirklich verstehen,
‫also sind wir dann in dieser einzigen Plattform gefangen.
‫Und das mag in vielen
‫Fällen kein Problem sein, aber für komplexe Produkte,
‫die viele Apps und dann Websites und
‫Web-Apps benötigen, wird normalerweise immer eine API benötigt.
‫Also in diesem Beispiel auf Jonas. io, ich könnte diese API
‫erstellen und dann eine API-basierte Website und einige Apps erstellen
‫und meine Daten zu all diesen
‫Clients aus einer einzigen Quelle beziehen, in Ordnung?
‫Und manche Leute oder Teams haben noch nicht einmal
‫einen eigenen Client und verkaufen einfach den Zugriff
‫auf ihre API an
‫Dritte, die dann diese APIs konsumieren und nicht ihre eigenen.
‫Es gibt also wirklich ganze Unternehmen, die
‫auf dieser Philosophie basieren, eine API einfach an andere Entwickler
‫oder Unternehmen zu verkaufen.
‫Wie auch immer, ich hoffe, dass Ihnen mit dieser
‫letzten Folie das Konzept und der Grund und
‫gewissermaßen die Philosophie hinter dem Erstellen von APIs kristallklar geworden sind.
‫Also, lass uns jetzt weitermachen.