suchen

Heim >Web-Frontend >js-Tutorial >Ein unkomplizierter Frontend-Leitfaden für Backend-Entwickler

Ein unkomplizierter Frontend-Leitfaden für Backend-Entwickler

Patricia Arquette
Patricia ArquetteOriginal
2025-01-03 11:42:40394Durchsuche
  • Einführung
  • Absolute Grundlagen
  • Clientseitig vs. Serverseitig
  • Komponenten
  • Frontend-Bibliotheken
  • Fazit

Einführung

Ich bin ein Backend-Entwickler ... der übliche Typ ... der Typ, der gut in Mathe, aber schrecklich in der Ästhetik ist. Jeder Designversuch, den ich jemals unternommen habe, endete immer mit langweilig aussehendem, generischem Schrott. Ich habe Dutzende Tools ausprobiert, aber das Endergebnis sah immer so aus, als wäre es in Microsoft FrontPage 2003

geschrieben worden

Ich war selbstbewusst genug, um das zu erkennen, also gab ich es auf, es zu versuchen. Ich werde Ihnen ein Dokument schreiben, aber nur, wenn Sie mir eine fertige Datei im $LaTeX$-Stil geben. Ich werde einen Blog schreiben, aber nur in Markdown und jemand anderem die Sorge um die optische Attraktivität überlassen. Ich werde eine DevFest-Präsentation vorbereiten, aber nur, wenn die Organisatoren eine PowerPoint-Vorlage bereitstellen. Ich werde niemals versuchen, etwas zu entwerfen, sei es eine Schaltfläche oder ein Anmeldeformular.

Und dennoch kann ich nicht einfach den Kopf rasieren und mich in den Zufluchtsort der Backend-JSON-API zurückziehen – ich muss immer noch ein Frontend für meine Lieblingsprojekte schreiben und Dashboards für den internen Gebrauch erstellen. Aber der Versuch, in die Frontend-Welt einzusteigen, ist unglaublich schmerzhaft – Dutzende Frameworks, Bibliotheken, Philosophien. Ich höre seit acht Jahren die Wörter React, Angular oder Node, aber ich hatte zu viel Angst, um tatsächlich zu versuchen, sie zu verstehen. Das Erlernen von C oder Leetcode war einfacher.

Trotzdem habe ich mich dazu gezwungen, es zu lernen, und jetzt möchte ich ein Prometheus sein (ich bin mir nicht sicher, ob es nicht bereits ein JS-Framework mit diesem Namen gibt) und dieses Wissen zu meinen Leuten bringen – dem Backend Entwickler.

Als Bonus habe ich die ultimative Empfehlung für das zu wählende Frontend-Framework beigefügt. Ich selbst hatte sehr lange eine Entscheidungslähmung und dies wird Ihnen helfen, diese zu überwinden und mit dem Aufbau von Dingen zu beginnen, ohne zu viel darüber nachzudenken.

Absolute Grundlagen

Beginnen wir mit den absoluten Grundlagen, um sicherzustellen, dass wir auf dem gleichen Stand sind, bevor wir über Frameworks sprechen. Sie können diesen Abschnitt überspringen, wenn Sie möchten.

Minimale Webseite

Eine minimale Webseite besteht aus einer Textdatei mit der Erweiterung .html und Tags für den Inhalt:

<html>
    <div>Hello World!</div>
</html>

Um eine Formatierung hinzuzufügen, können Sie entweder ein Stilattribut hinzufügen:

<html>
    <div>



<p>or if you have a lot of formatting, add id to your content and refer to it from <style> tag. The style is formatted using CSS language which looks like an HTML element followed by JSON related to it:<br>


<pre class="brush:php;toolbar:false"><html>
    <div>



<p>This will create static pages that do not change and do not react to any events. To add some interactivity, like checking if you left a form field empty or entered a valid email, you will need JavaScript.</p>

<h3>
  
  
  Running JavaScript
</h3>

<p>Before using any programming language you must first install it on your computer. For C/C++ you need to install a compiler like GCC or Clang, for Python you need to install a CPython interpreter.</p>

<p>To run JavaScript you only need a web browser --- all modern web browsers can run JS code. It is as simple as opening a web browser and going to pressing F12. This will open a JS console:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" alt="A no-nonsense guide to frontend for backend developers" /></p>

<p>You can also create a text file with extension .html  and put a <script> tag on it, open this file in browser, and the outcome will be displayed if you press F12:<br>


<pre class="brush:php;toolbar:false"><!-- myfile.html -->
<html>
    <script>
        // write a JS code here
        console.log('Hello World');
    </script>
</html>

Allerdings hat die Browserkonsole aus Sicherheitsgründen keinen Zugriff auf Ihr Dateisystem und es fehlen einige andere Funktionen, die es ermöglichen würden, mit JS zumindest die Funktionalität anderer Skriptsprachen wie Python oder Ruby zu erreichen. Es gibt also eine zweite Möglichkeit, JS-Code auf Ihrem Computer auszuführen: die Installation von Node.js. Es handelt sich im Wesentlichen um einen JS-Interpreter, der beispielsweise Dateien lesen und schreiben kann:

//$ node
//Welcome to Node.js v23.3.0.
//Type ".help" for more information.
> console.log('Creating a new directory');
> fs.mkdirSync('new_dir'); // access filesystem using fs

Mit Node.js können Sie JS-Code auf dem Server oder in Ihrem Docker-Container ausführen, ohne einen Webbrowser installieren zu müssen. Wir werden weiter unten sehen, dass dies sehr nützlich ist.

Klassischer Stapel

Durch die Kombination der obigen Abschnitte können wir eine Webseite mit dem klassischen HTML-CSS-JS-Setup erstellen.

Sie können in einer einzigen .html-Datei mit drei Abschnitten kombiniert werden: Inhalt selbst, Stile und Skripte:

<html>
    <div>Hello World!</div>
</html>

scripts.js

<html>
    <div>



<p>or if you have a lot of formatting, add id to your content and refer to it from <style> tag. The style is formatted using CSS language which looks like an HTML element followed by JSON related to it:<br>


<pre class="brush:php;toolbar:false"><html>
    <div>



<p>This will create static pages that do not change and do not react to any events. To add some interactivity, like checking if you left a form field empty or entered a valid email, you will need JavaScript.</p>

<h3>
  
  
  Running JavaScript
</h3>

<p>Before using any programming language you must first install it on your computer. For C/C++ you need to install a compiler like GCC or Clang, for Python you need to install a CPython interpreter.</p>

<p>To run JavaScript you only need a web browser --- all modern web browsers can run JS code. It is as simple as opening a web browser and going to pressing F12. This will open a JS console:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" alt="A no-nonsense guide to frontend for backend developers" /></p>

<p>You can also create a text file with extension .html  and put a <script> tag on it, open this file in browser, and the outcome will be displayed if you press F12:<br>


<pre class="brush:php;toolbar:false"><!-- myfile.html -->
<html>
    <script>
        // write a JS code here
        console.log('Hello World');
    </script>
</html>

Das größte Problem bei diesem Setup besteht darin, dass Sie beim Betrachten des HTML-Elements, beispielsweise der , nicht wissen können, welchen Stil es hat und welche Skripte es abhören, es sei denn, Sie sehen sich die anderen beiden Dateien an . Wenn Sie sich die .js-Datei ansehen, sehen Sie in ähnlicher Weise eine Funktion sayHelloWorld(), haben aber keine Ahnung, ob sie benötigt wird oder nicht, oder ob ein Element sie aufruft oder nicht, ohne einen Blick auf die .html-Datei zu werfen. Dies widerspricht dem sogenannten Locality of Behavior-Prinzip.

Jedenfalls wird dieses Setup seit mehreren Jahrzehnten im Web verwendet.

Clientseitig vs. Serverseitig

Großartig! Wir haben die Grundlagen behandelt. Lassen Sie uns nun über das Hauptdilemma sprechen, das allen Diskussionen über die Wahl eines Frontend-Frameworks und der Architektur Ihrer App im Allgemeinen zugrunde liegt. Bevor wir beginnen, klären wir einige Begriffe: Client-Seite bezeichnet den Browser oder eine App, in der die Benutzer Ihre Inhalte konsumieren, und Server-Seite ist normalerweise der Backend-Server, der die Inhalte speichert Anmeldeinformationen, hat Zugriff auf die Datenbank und dient insgesamt als Rückgrat der gesamten App. Jetzt sind wir bereit, tiefer einzutauchen.

Klassische HTML-Generierung

In jeder nicht-trivialen Web-App, die Daten jeglicher Art anzeigt, benötigen wir eine Möglichkeit, HTML-Skripte automatisch zu generieren. Andernfalls muss bei jeder Aktualisierung der Daten jemand die HTML-Tags manuell aktualisieren.

Da es sich bei HTML um eine einfache Textdatei handelt, kann sie von jeder Skriptsprache problemlos als String erstellt werden. Es gibt viele Bibliotheken, die dies tun. Mit der Jinja2-Bibliothek können wir beispielsweise alle Elemente einer Liste mylist = [1,2,3,4,5] in Tabellenzeilen schreiben, indem wir eine Sprache verwenden, die Python ähnelt:

//$ node
//Welcome to Node.js v23.3.0.
//Type ".help" for more information.
> console.log('Creating a new directory');
> fs.mkdirSync('new_dir'); // access filesystem using fs

Natürlich würde der Browser das nicht verstehen – Sie müssen dieses Jinja2-Skript in echtes HTML rendern, indem Sie spezielle Befehle in Python ausführen, wodurch eine .html-Datei gerendert wird:

<html>
    <!-- page HTML content here -->
    <div>



<p>You can see that we have a button that triggers a function sayHelloWorld(), which is defined inside  <script> tags and it has font size of 40pt, which is defined inside <style> tags.</p>

<p>Also note that the comment symbols are different in all 3 sections:</p>
  • inside pure HTML it is
  • inside CSS it is /* */
  • inside JS it is //.

This shows that the browser understands that these are 3 different languages. So, the usual practice is not to clutter .html file too much and separate it into 3 files and call styles and scripts by file path:

content.html

<html>
    <div>



<p><strong>styles.css</strong><br>
</p>

<pre class="brush:php;toolbar:false">#mytext {color:red; font-size:20pt}
button {font-size: 40pt}

Diese Funktion ist so wichtig, dass sie sogar einen besonderen Namen hat --- Vorlage. Eines möchte ich betonen: Eine solche HTML-Generierung aus einer Vorlage erfolgt auf dem Server in einer Sprache Ihrer Wahl (Python/Ruby/Java/C#), normalerweise einer Sprache, in der Ihr Backend-Code geschrieben ist. Browser verstehen diese Sprachen nicht nativ --- sie verstehen nur JS, also senden wir ihnen eine vorgerenderte HTML-Datei. Dies wird später wichtig werden.

JSON vs. HTML-API

Im vorherigen Abschnitt haben wir gesehen, wie das Backend HTML-Skripte generieren und diese mit Daten aus der Datenbank und anderen Informationen füllen kann. Wenn der Benutzer beispielsweise bei einem Social-Media-Beitrag auf die Schaltfläche Gefällt mir klickt, muss das Backend den Inhalt der Seite Gefällt mir-Beiträge aktualisieren, um den neuen Beitrag dort einzuschließen. Dies kann auf zwei Arten erfolgen:

1) Das Backend verfügt über eine HTML-Vorlage mit einem Jinja2-Skript und rendert diese mit dem neuesten Abfrageergebnis aus der Datenbank:

<html>
    <div>Hello World!</div>
</html>

Hier wird das gerenderte HTML zusammen mit den CSS-Stilen und JS-Skripten direkt an das Frontend gesendet. Der Browser zeigt lediglich an, was das Backend bereits vorbereitet hat, und kennt weder die Datentypen noch die Logik auf der Seite.

2) Das Backend sendet den JSON, der das Abfrageergebnis aus der Tabelle „liked_posts“ der Datenbank angibt, in einem Format, das der Browser verstehen würde:

<html>
    <div>



<p>or if you have a lot of formatting, add id to your content and refer to it from <style> tag. The style is formatted using CSS language which looks like an HTML element followed by JSON related to it:<br>


<pre class="brush:php;toolbar:false"><html>
    <div>



<p>This will create static pages that do not change and do not react to any events. To add some interactivity, like checking if you left a form field empty or entered a valid email, you will need JavaScript.</p>

<h3>
  
  
  Running JavaScript
</h3>

<p>Before using any programming language you must first install it on your computer. For C/C++ you need to install a compiler like GCC or Clang, for Python you need to install a CPython interpreter.</p>

<p>To run JavaScript you only need a web browser --- all modern web browsers can run JS code. It is as simple as opening a web browser and going to pressing F12. This will open a JS console:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" alt="A no-nonsense guide to frontend for backend developers" /></p>

<p>You can also create a text file with extension .html  and put a <script> tag on it, open this file in browser, and the outcome will be displayed if you press F12:<br>


<pre class="brush:php;toolbar:false"><!-- myfile.html -->
<html>
    <script>
        // write a JS code here
        console.log('Hello World');
    </script>
</html>

Der Browser führt spezielle JS-Funktionen aus, die JSON anfordern, und wenn sie es erhalten, extrahieren sie daraus Daten und generieren daraus HTML im Browser selbst:

//$ node
//Welcome to Node.js v23.3.0.
//Type ".help" for more information.
> console.log('Creating a new directory');
> fs.mkdirSync('new_dir'); // access filesystem using fs

Option 2 ist aus irgendeinem Grund beliebt, obwohl sie komplizierter ist. In diesem Setup stellen Sie dem Client nur den Frontend-Port zur Verfügung und er stellt die statische HTML-JS-App bereit, ohne dass das Backend erforderlich ist. Und nur wenn es Daten vom Backend abrufen muss, stellt das Frontend eine Verbindung zum Backend selbst her und abstrahiert diese Funktionalität vom Browser. Dazu benötigt das Frontend nun natürlich einen eigenen Router. Im Grunde ist es das Frontend, das versucht, das zu tun, was das Backend tun sollte.

Komponenten

Bisher haben wir die Grundlagen behandelt, wie der funktionierende Frontend-Code geschrieben werden kann und wo er sich befindet. Wir haben gesehen, wie HTML automatisch generiert werden kann, gingen aber bisher davon aus, dass der JS-Teil manuell geschrieben wird. Dies ist in der realen Frontend-Entwicklung sehr oft nicht der Fall. Das manuelle Schreiben von JS-Skripten ist umständlich und Ihre Codestruktur wird sehr schnell sehr unübersichtlich. Darüber hinaus müssen Sie Skripte, wenn Sie sie wiederverwenden müssen, auf altmodische Weise kopieren und einfügen. Daher verwendeten Entwickler von Anfang an einige Arten von Bibliotheken, um die JS-Entwicklung einfacher und strukturierter zu gestalten.

JQuery

Anfangs war die Verwendung von Vanilla JS zum Suchen und Ändern von Elementen oder zum Senden von AJAX-Anfragen an den Server sehr umständlich. Daher verwendeten viele Entwickler JQuery, eine nette syntaktische Ergänzung zum Vanilla JS. Viele Add-ons wurden in JQuery geschrieben, wie z. B. Datentabellen (interaktive Tabellen mit Suche, Paginierung, Out-of-Box-Sortierung) oder animierte Uhren oder Zähler usw. Die Verwendung solcher von jemand anderem vorab geschriebenen Komponenten war wirklich einfach – einfach Laden Sie den Code herunter und fügen Sie ihn Ihrer HTML-Seite unter