Open Source im professionellen Einsatz
Linux-Magazin 12/2014
© William Perugini, 123RF

© William Perugini, 123RF

Webinterfaces mit React

Gefällt mir

Vom Unternehmen Facebook kommt das quelloffene Javascript-Framework React, das Weboberflächen geschickt mit Datenschätzen verknüpft. Insbesondere die Renderfunktion macht sich dabei nützlich.

484

Mit dem Javascript-Framework React [1] erlebt die CGI-Programmierung eine Renaissance. Daneben bietet React aber die Vorzüge reaktiver Programmierung [2], der auch die Javascript-Frameworks Angular [3] und Meteor [4] huldigen. Schreiben Entwickler React-Anwendungen zudem nach dem Entwurfsmuster Flux [5], erhalten sie eine robuste Architektur für den Praxiseinsatz dazu. Der Artikel zeigt eine Beispiel-App [6], die neben React und Flux HTML 5, Javascript, das Geolocation-API [7] sowie CSS 3 verwendet. Ein Report listet dabei die Erdbeben der letzten Tage tabellarisch auf.

CGI und Ajax

Ende der 90er Jahre erzeugten auf Webservern laufende CGI-Skripte die meisten dynamischen Webseiten und sandten diese an den Browser. Perl-Subroutinen generierten Fragmente, welche die Skripte zu einem HTML-Dokument zusammenfügten. Die Anwendungsdaten übergaben diese Skripte in Form von Aufrufparametern.

Dank der XML-HTTP-Request-Objekte (Ajax) ließen sich dynamische Seiten ab Mitte der 2000er Jahre auch im Browser generieren. Ein Javascript-Programm lud Anwendungsdaten per Ajax nach und ersetzte so die CGI-Skripte. Seitdem haben Entwickler zahllose Javascript-Bibliotheken veröffentlicht, die das Programmieren von Javascript-Anwendungen vereinfachen, ein Beispiel ist Jquery.

Seit Beginn der 2010er Jahre gesellen sich zu den Bibliotheken reaktive Javascript-Frameworks. Sie verringern den Programmieraufwand im Vergleich zu Jquery nochmals, denn sie aktualisieren einen DOM-Baum im Browser automatisch oder auf Befehl.

React

Neben Googles Angular und dem Echtzeit-fähigen Meteor gehört React zu den reaktiven Emporkömmlingen. Facebook entwickelt und verwendet es selbst und hat es unter der freien Apache-2.0-Lizenz veröffentlicht. Es läuft auf den aktuellen Versionen der gängigen Browser, derzeit liegt React in der Version 0.11 vor. Ähnlich wie die Subroutinen von Perl erzeugen unter React die so genannten Komponenten den HTML-Code. Ihr Mehrwert: Der Entwickler kann sie wie Funktionen aufrufen und in seiner Anwendung mehrfach einsetzen.

Listing 1 zeigt die React-Komponente »ReportTable« . Das Listing stellt – genau wie Listing 2, Listing 5 und Listing 6 – einen Ausschnitt der Datei »report.js« aus der Beispielanwendung [6] dar, der Artikel erklärt den Code vollständig. Indem es die Methode »createClass()« in der Zeile 2 aufruft, erzeugt das Skript die Komponente »ReportTable« und übergibt zugleich ein Objekt mit der Eigenschaft »render« (Zeile 3), die auf die so genannte Renderfunktion der Komponente verweist. Letztere erzeugt zum Schluss das HTML und verwendet dafür das React-eigene XML-Vokabular JSX [8].

Listing 1

report.js (Auszug)

01 /** @jsx React.DOM */
02 var ReportTable = React.createClass({
03     render: function() {
04         var rows = [];
05         geoSort(this.props.position, this.props.items).forEach(function(item) {
06             item.distance = geoDistance(this.props.position, item);
07             rows.push(<ReportRow item={item} key={item.date_time + " " + item.location}/>);
08         }.bind(this));
09         return (
10         <table>
11             <thead>
12             <tr>
13             <th>Datum</th>
14             <th>Ort</th>
15                  <th>Entf. (km)</th>
16                  <th>Ereig. (h)</th>
17                  <th>Magn.</th>
18                  <th>Tiefe (km)</th>
19             </tr>
20             </thead>
21             <tbody>{rows}</tbody>
22             </table>
23         );
24     }
25 });

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 5 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • Developer Tools für React fertig

    Laut Ben Alpert aus dem React-Projekt haben die neuen Entwicklertools für React den Betastatus verlassen. Sie helfen beim Einsatz von Facebooks Javascript-Bibliothek, mit deren Hilfe sich grafische Oberflächen entwickeln lassen.

  • Russland zählt ReactOS zur offiziellen Windows-Alternative

    Russland versucht sich in Sachen Software von der Abhängigkeit von Herstellern und Lizenzen zu befreien. Die dafür eingesetzte Initiative des Ministeriums für Telekommunikation hat nun den freien Windows-Nachbau ReactOS als Alternative für Windows in ihre Empfehlungsliste aufgenommen.

  • Tragendes Rahmenwerk

    Wer Web- oder SaaS-Anwendungen anbieten will, bekommt es mit Kodierungsrelikten der HTML- und Skriptsprachen-Frühzeit zu tun. Abhilfe schaffen moderne Frameworks wie Prado, die viele Elemente und Templates bereits als fertige Bausteine bereitstellen. Doch deren Struktur will zuerst verstanden sein.

  • React 15: Schneller und vollständiger

    Signifikante Verbesserungen im Umgang mit dem DOM und vollen SVG-Support versprechen die Macher für Version 15 von React.

  • Flux heißt jetzt Vizceral und ist Open Source

    Im Oktober 2015 stellte Netflix im hauseigenen Blog die Software Flux vor. Nun veröffentlicht die Firma die Software unter neuem Namen und unter einer Open-Source-Lizenz als Vizceral.

comments powered by Disqus

Ausgabe 09/2017

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.