Arthur Rehm 18. Oktober 2016

ReactJs und Ruby on Rails

Die JavaScript-Bibliothek ReactJS basiert auf Komponenten und deren Komposition zu einer Anwendung. © Artem Furman / Fotolia.com — © Artem Furman / Fotolia.com

Jeder, der schon einmal an einer größeren Webanwendung mitentwickelt hat und miterlebt hat, wie sich Anforderungen mit der Zeit verändern, kennt den Schmerz, der entsteht, wenn man das User Interface (UI) nachträglich anpassen oder erweitern muss. Selbst vermeintlich kleine Änderungen können hier zu erhöhtem Aufwand führen.

Durch ständige Erweiterungen entstehen Anwendungen, die "historisch gewachsen" und infolgedessen nur schwer wartbar sind. Die Entwickler von Facebook und Instagram standen vor einer ähnlichen Herausforderung und entwickelten als Lösung ReactJS [1].

Was ist ReactJS?

ReactJS ist eine JavaScript-Bibliothek, die von Facebook entwickelt wurde, um komplexe Benutzeroberflächen umzusetzen. Sie basiert auf Komponenten und deren Komposition zu einer Anwendung. Änderungen werden nicht direkt im nativen DOM (Document Object Model) sondern zuerst in einem virtuellen DOM vorberechnet. React führt zunächst Änderungen im virtuellen DOM durch. Befinden sich darunter Elemente im sichtbaren Bereich, werden diese an den browsereigenen DOM übergeben. Dadurch wird die Performance der UI erheblich gesteigert.

Warum ReactJS?

Aktuell scheint es ein großes Hype-Thema zu sein. Im Folgenden sind drei gute Gründe aufgeführt, sich die JS-Bibliothek genauer anzuschauen.

Einfachheit
React lässt sich schnell erlernen und durch die Architektur bleiben auch große Anwendungen noch verständlich, nachvollziehbar und vor allem wartbar.
Integrierbarkeit
React ist ein reines View-Framework. Es lässt sich also in viele Frameworks ohne größere Probleme integrieren und ermöglicht somit eine softe Migration.
Community
React wird seit 2013 von vielen großen Firmen wie Facebook, Netflix und AirBnB eingesetzt und hat bereits jetzt eine große Anhängerschaft. Man findet viele Erfahrungsberichte und Lernmaterial.

Abb.1: React ersetzt quasi das V im MVC-Framework. © Arthur Rehm

Ruby on Rails mit ReactJs

Ruby on Rails ist ein MVC-Framework (Model View Controller) [2]. Für den View-Layer werden in der Regel die Templatesprachen ERB oder HAML verwendet. ReactJS ist ein reiner View-Layer und ersetzt sozusagen das V in MVC im Ruby on Rails-Kontext.

Um mit React arbeiten zu können, müssen wir zunächst das react-rails Gem installieren.
Hierzu ergänzen wir unser gemfile um folgende Zeile:

gem 'react-rails', '~> 1.8'

Anschließend installieren wir das Gem mit dem Befehl:

bundle install

Das react-rails Gem kommt mit einem Installationsskript, welches wir mit folgendem Befehl installieren können:

rails g react:install

Dies erzeugt eine compontent.js-Manifest-Datei und einen Ordner (app/assets/javascript/compontents/), in dem anschließend die Komponenten abgelegt werden.

Wenn wir die applications.js überprüfen, sehen wir, dass hier folgende Zeilen hinzugefügt wurden:

//= require react?
//= require react_ujs?
//= require components

Zunächst definieren wir die zwei React-Komponenten TaskApp und TaskList.

Die TaskApp fungiert als Rahmen-Komponente und beinhaltet neben dem Zustand noch eine TaskList-Komponente. Diese ist wie folgt definiert:

class TaskList extends React.Component {
  render() {
    return (
      <div>
        {this.props.items.map(task => (
          <div key={task.id}>
            <input type="checkbox" 
                  checked={task.completed} /> 
                  {task.title}
            </div>
        ))}
      </div>
    );
  }
}

Die beiden Beispiel-Komponenten sind dem Beispiel von der ReactJS-Webseite entnommen [1].

Anschließend müssen wir unseren Controller dazu bringen, der React-Komponente Daten anzuliefern.

def index            
   @tasks = Task.all
End

Für komplexe JSON-Strukturen, die einer Komponente als Eingabe dienen, lässt sich dies mit dem jbuilderGem[3] bewerkstelligen.

Mit der Hilfsfunktion react_component lassen sich definierte React-Komponenten im Template rendern.

<%= react_component 'TaskApp', { tasks: @tasks } %>

Als Ergebnis erhalten wir schließlich unsere gerenderte Aufgaben-Komponente.

Zusammenfassung

Wie wir gesehen haben, lässt sich ReactJS unkompliziert in Ruby on Rails verwenden. Dabei sind auch Mischformen möglich, sodass es auch in bereits fertigen Anwendungen verwendet werden kann.

ReactJs ist zwar Open Source und wurde von Facebook unter der BSD Lizenz veröffentlicht, jedoch existiert eine Patent-Klausel, die die Nutzung von React für Facebook-Wettbewerber einschränkt [4]. Hier empfiehlt es sich, die Lizenzbestimmungen vor Projektbeginn genauer zu studieren.

Beim Arbeiten mit ReactJS fühlt sich das Vermischen von Programmlogik und Templating im ersten Moment rückständig an, die Vorzüge werden jedoch bei intensiverer Auseinandersetzung deutlich spürbar.

Ein wesentlicher Vorteil von ReactJs ist, dass sich die Komponenten auch bei steigender Komplexität gut verwalten lassen. Insbesondere Anwendungen, die prädestiniert sind "historisch zu wachsen", sind mit ReactJS gut in den Griff zu bekommen.

Die Auftrennung vom View-Layer bietet darüber hinaus die Möglichkeit einer sanften Migration. Bereits entwickelte Komponenten lassen sich außerhalb von Ruby on Rails durch die Kapselung von Funktion und Darstellung in einer Komponente leichter wiederverwenden.

Quellen