JavaRush /Java-Blog /Random-DE /Kaffeepause Nr. 157. Verwendung von Java für Front-End-We...

Kaffeepause Nr. 157. Verwendung von Java für Front-End-Webanwendungen im Jahr 2022

Veröffentlicht in der Gruppe Random-DE
Quelle: Nocodefunctions Wir machen Sie auf einen Artikel über die Erfahrungen bei der Entwicklung einer unabhängigen Webanwendung mit Java aufmerksam. Kaffeepause Nr. 157.  Verwendung von Java für Front-End-Webanwendungen im Jahr 2022 – 1

Java für das Frontend – ist das wirklich möglich?

Viele Menschen glauben, dass die Verwendung von Java für die Front-End-Entwicklung einfach unmöglich ist: Schließlich ist Java für das Back-End konzipiert. Ja, vor langer Zeit konnten Sie mit Java-Applets und Java Webstart Java-Anwendungen über den Browser ausführen. Aber das ist eine alte Geschichte, so alt wie Flash-Plugins. Aber auch ohne Applets gibt es eine Möglichkeit, Java für das Frontend zu nutzen – das sind JSP (Java Server Pages), die viele Schüler im Informatikunterricht gelernt haben. Obwohl JSP in einigen Java-Büchern immer noch diskutiert wird, ist die Technologie seit den 2010er Jahren veraltet. Ist es wirklich eine weitere Sackgasse? Es gibt auch Frameworks, die es Java-Entwicklern ermöglichen, ihren Code mit dem Google Web Toolkit (GWT, das ist auch nicht ganz neu ) oder über J2Cl (ebenfalls von Google) in JavaScript zu „transpilieren“ (auf komplexe Weise umzuwandeln). Es ist wichtig zu beachten, dass GWT und J2Cl nicht für Anfänger geeignet sind, sondern eher von Google für den Einsatz in großen Projekten entwickelte Unternehmenstools.

Der unbesungene Held von Java für das Frontend: Jakarta Faces (JSF)

Java Server Faces (JSF), heute bekannt als „Jakarta Faces“, gibt es mindestens seit Anfang der 2010er Jahre. Ich bin immer wieder überrascht, dass es wenig bekannt ist und selten erwähnt wird, da dieses Framework es einfach macht, Webanwendungen schnell, sicher und zuverlässig zu entwickeln. JSF ist leicht zu erlernen und nutzt die Vorteile des Java-Ökosystems voll aus. So erstellen Sie beispielsweise eine Webseite mit dynamischen Inhalten:
  • Erstellen Sie eine HTML-Seite (mit der Erweiterung .xhtml).
  • Ändern Sie die HTML-Tags <head> und <body> in die Tags <h:head> und <h:body>.
  • Um nun dynamische Inhalte durch den Aufruf einer Eigenschaft im Backend anzuzeigen, platzieren Sie einfach diesen Code nach dem Hashtag und zwischen den Steuerleisten:

    #{backendscript.myText}
Erstellen Sie dann eine Backendscript.java-Datei in Ihrem Backend und fügen Sie eine Variable namens String myText = „hi! Willkommen auf meiner Seite!“ hinzu. . Es wird auf der Webseite angezeigt. JSF ist wirklich sehr einfach. Es ist dank vieler Fragen zu Stackoverflow , offizieller Dokumentation , mehreren Büchern ( dieser Link , und ich mag auch die Bücher von David Heffelfinger ) und natürlich YouTube-Videos gut dokumentiert .

Ist JSF kompliziert? Was sind seine Vorteile?

JSF ist überhaupt nicht kompliziert. Außerdem:
  1. Es ist gut in klassische Java-IDEs (NetBeans, IntelliJ IDEA und Eclipse) integriert. Jede IDE bietet:
    • Vorlagenprojekte, die die Vorlage für die Maven-Konfiguration ausfüllen (was übrigens sehr einfach ist).
    • Debugging-Tools (mit Hot-Reloading, zumindest für NetBeans).
    • Leistungsstarke Tools zur automatischen Vervollständigung, Umgestaltung, Navigation und Fehlerhervorhebung für das Java-Ökosystem. Die IDE kann nützliche Informationen zu jeder Klasse bereitstellen, die Sie auf der HTML-Seite erwähnen (z. B. das oben erwähnte #{backendscript.myText} ). Die HTML-Seiten werden tatsächlich in den Rest Ihrer Codebasis integriert!
  2. Es verarbeitet komplexe Codevariationen auf HTML-Seiten sehr einfach.
    • Müssen Sie einen Teil einer Seite mit einem einfachen Klick aktualisieren? Fügen Sie Ihrer Schaltfläche eine Update-Eigenschaft hinzu , gefolgt von der ID der Komponente, die Sie aktualisieren möchten.
    • Bezüglich Aktualisierung und dynamischem Inhalt: Mir gefällt die Einfachheit von JSF sehr: Das Frontend aktualisiert das Backend, aktualisiert sich selbst oder das Backend aktualisiert das Frontend. All dies sind die Grundvoraussetzungen einer Webanwendung und sie sind hier vorhanden.
    • Wenn Sie möchten, dass der Benutzer eine oder mehrere Dateien mit Bedingungen für Dateitypen und -größen herunterladen kann, fügen Sie dem Code einfach eine Zeile mit eindeutigen Parametern hinzu .
    • Müssen Sie eine Website in mehreren Sprachen erstellen? Fügen Sie das Tag <f:view> zu Ihrem HTML hinzu und erhalten Sie die Sprache des Benutzers mit nur einer Zeile im Backend.
  3. Sie können HTML-Tags, JS- und CSS-Skripte hinzufügen und mischen, und alles ist SEO-optimiert.
Sie haben die volle Kontrolle über den von JSF generierten HTML-Code und können jederzeit HTML- und JS-Code hinzufügen. Dies erleichtert die Zusammenarbeit mit Designern und Front-End-Entwicklern, die JSF nicht kennen oder sich nicht für JSF interessieren. Als ich mit CSS arbeitete, hatte ich die Hilfe eines Designers, der mit den HTML-Seiten, die ich mit JSF erstellt hatte, arbeiten und die notwendigen Änderungen problemlos vornehmen konnte. JSF generiert HTML-Code, den Sie in Ihrem Browser anzeigen und lesen können. Dies ist sehr hilfreich beim Debuggen mit regulären Entwicklungstools und beim Überprüfen, ob Ihre SEO-Aktionen korrekt implementiert werden.

Primefaces: Riesige Liste kostenloser JSF-Komponenten und -Themen

JSF verfügt über eine lange Liste gebrauchsfertiger Komponenten, die die klassischen Teile einer HTML-Seite erstellen, sodass Sie dies nicht selbst tun müssen. Verwenden Sie beispielsweise das Tag <h:dataTable> , um eine Tabelle zu erstellen, die bestimmte von Ihrem Backend geladene Daten anzeigt – ohne sie von Grund auf neu erstellen zu müssen. Und es gibt eine bessere Option: Prime Tek hat einen Open-Source-Komponentensatz namens Primefaces entwickelt . Sie verfügen über zusätzliche Funktionen und bieten mehrere Vorteile. Verwenden Sie beispielsweise anstelle von <h:dataTable> einfach das Primefaces-Tag <p:dataTable>. Dadurch wird eine Basisdatentabelle erstellt , zu der Sie problemlos Spaltenschalter , dynamische Spalten oder Bearbeitungsfunktionen in der Tabelle hinzufügen können.

Aber Java ist langsam und schwer?

1. Ist Java langsam?

Nein. Das Lustige ist, dass JS-Frameworks wie React, Angular und Vue mit dem Versprechen erstellt wurden, schneller und intelligenter als JSF in Java zu sein, weil sie sofort die gesamte Anwendungslogik an den Browser des Website-Besuchers sendeten. JSF funktioniert anders: Wenn ein Benutzer eine Seite aufruft (z. B. https://nocodefunctions.com), generiert die Anwendung im Backend nur den HTML-Code für diese Seite und sendet ihn zurück. Dies wird als „serverseitiges Rendering“ (SSR) bezeichnet. In der Praxis kann es bei Einzelseitenanwendungen sehr lange dauern, bis der Benutzer die Javascript-Dateien, aus denen die gesamte Anwendung besteht, abruft und lädt. Dies kann zu einer schlechten Benutzererfahrung (Sie müssen warten, bis die erste Seite geladen wird) und SEO-Problemen führen. Infolgedessen hat das serverseitige Rendering im Java-Stil wieder an Popularität gewonnen, da es hinsichtlich Geschwindigkeit und Leistung als dem clientseitigen Rendering überlegen gilt. Es entstehen neue SSR-Frameworks , die von Entwicklern verlangen, die mit clientseitigem Rendering vertraut sind, um diese beiden unterschiedlichen Logiken zu handhaben und zu mischen.

2. Ist Java schwer?

Nein. Was Sie zum Bereitstellen einer JSF-Anwendung benötigen:
  • Die Anwendung selbst. Eine einfache JSF-Anwendung „Hallo Welt“ ist wahrscheinlich 10 KB oder weniger groß.
  • Optional sind Primefaces (siehe oben), wenn Sie höherwertige Komponenten benötigen. Das sind zusätzliche 4,5 MB .
Führen Sie nun alles auf dem Server aus. Dazu benötigen Sie:
  1. Haben Sie einen Server in der Cloud oder woanders. Für die Testversion von Nocodefunctions (https://test.nocodefunctions.com) nutze ich Hetzner, wo ich für 4,15 Euro im Monat einen Bare-Metal-Server mit 2 GB RAM miete. Ich könnte weniger RAM verwenden, aber meine Anwendung stellt einige datenintensive Dienste bereit und muss in den Speicher passen. Die echte (nicht getestete) Version von nocodefunctions läuft auf einem größeren Server (ebenfalls bei Hetzner), um datenintensive Aufgaben von mehr Benutzern parallel zu unterstützen – für weniger als 50 € pro Monat.

  2. Sie müssen Java installiert haben. Dies ist ein einzelner Datei-Download unter 200 MB für Mac, Win oder Linux, völlig kostenlos, auch für die kommerzielle Nutzung.

  3. Um es auszuführen, benötigen Sie einen Java-Webserver. Es gibt viele davon. Persönlich verwende ich Payara Micro (Community Edition), das kostenlos ist und als einzelne 77-MB-Datei heruntergeladen werden kann.

  4. Starten Sie Ihre Anwendung.

Fazit: Denken Sie an Java!

Ich habe das Gefühl, dass einige Programmierer denken, dass Python, Ruby, PHP, NodeJS + React... die einzige Wahl sind, wenn sie eine kleine Webanwendung starten. Aber jetzt hoffe ich, dass sie für ihr nächstes Projekt auch Java + JSF in Betracht ziehen.
Kommentare
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION