201308Jul

React: User Interfaces mit JavaScript und XML-Syntax

Dass die Programmierer von Facebook interessante Projekte für Webentwickler veröffentlichten, dürfte seit dem PHP-JIT-Compiler HipHop bekannt sein. Nun gibt es auch für JavaScript-Entwickler ein interessantes Framework, das von Facebook und Instagram erarbeitet wurde: Die Bibliothek nennt sich React und ermöglicht das Schreiben einer XML-Syntax innerhalb von JavaScript. Die auf "JSX" (JavaScript XML) getaufte Syntax wird durch einen kleinen Interpreter möglich und erlaubt das direkte Einfügen von DOM-Strukturen in JavaScript-Code.

React - A JavaScript library for building user interfaces

Wie das Ganze aussehen kann, zeigt folgendes Beispiel:

  • var app = <Nav color="blue"><Profile>click</Profile></Nav>;

Daraus wird:

  • var app = Nav({ color: 'blue' }, Profile({}, 'click'));

Bei JSX handelt es sich also um eine syntaktische Transformation, die lediglich einen Teilbereich des React-Frameworks darstellt: Durch deklarative Bindings können ähnlich wie bei Knockout DOM-Elemente direkt manipuliert und mit Daten befüllt werden, die in JavaScript verfügbar sind. So können dynamische User Interfaces schneller erzeugt werden und es entfällt ein zusätzliches DOM-Traversing. Kleine Beispiele dazu finden sich auf der Website von React. Den Quellcode gibt es wieder bei GitHub.