Der aktuelle heiße Scheiß im Frontend-Business heißt ja React. Da ich mit Angular nie so richtig warm geworden bin und Facebook vor ein paar Wochen React Native vorstellte, fand ich, dass es an der Zeit war, mich mal damit zu beschäftigen.

Das Problem

In der Firma benutzen wir Redmine zum Ticket-Verwalten und Zeiterfassen. Leider fand ich bisher keine wirklich komfortable Möglichkeit, das damit zu erledigen. Alle Plugins, Mac- und iPhone-Apps gefielen mir nicht so gut, daher passiert es oft, dass ich mir Zeiten einfach in mein Notizbuch schreibe und dann manuell übertrage.

Letzte Woche kam mir die Idee, dass ich ja eine App machen könnte, mit der man ganz leicht Zeiten aufnehmen kann. Die kann den ganzen Tag auf dem iPad geöffnet sein, welches dann immer im Blickfeld herumliegt. Vielleicht löst das dann das Problem, dass ich vergesse das ich ja tracken sollte.

Die Lösung

(In Wirklichkeit stehen da natürlich echte Task-Namen und nicht nur zufällige Buchstaben.)

Wie ist denn React nun?

Die Entwicklung machte im Großen und Ganzen Spaß und ging auch relativ schnell. Das ganze Konzept von React gefällt mir sehr gut, die Dokumentation ist okay und man findet auch schon allerhand Lösungen bei Stackoverflow.

Probleme?

Mein Hauptproblem ist eigentlich, dass React nicht so gut mit fastclick.js funktioniert und man daher nicht um dieses 300ms-Delay auf Touchgeräten herum kommt. Also, es gibt schon ein paar React-Module mit denen man das Anscheinend nachbauen kann, die waren aber hässlicher als "Einfach nur fastclick.js einbinden". Da muss ich nochmal nachforschen.

Ein zweites Schönheitsproblem ist, dass React keine onClick-Handler ausführt, wenn ein Element -webkit-overflow-scrolling: touch hat. Da die Task-Liste auf der linken Seite eben genau so funktioniert, ist das etwas schade.

Etwas verwirrend fand ich zunächst, dass React ja wirklich nur ein Tool für die "View"-Ebene ist. Es gibt daher keine wirklichen Vorschriften, wie man jetzt seine Datenquellen zu bauen hat. Einerseits ist das natürlich eine schöne Freiheit, andererseits erzeugt es natürlich auch zusätzliche Denkarbeit, wie man nun sein Model-Layer aufbaut. (Mit Flux gibt's da auch eine Empfehlung von Facebook)

Ansonsten lief alles gut, aber wie man sieht, ist es ja auch nur ein sehr kleines Projekt.

Browserify

Da ich natürlich nicht nur eine Sache gleichzeitig angucken kann, probierte ich auch noch Browserify aus um den ganzen Kram zusammenzupacken.

Meine bisherigen Erfahrungen mit Dependency-Managern im Frontend beschränkten sich auf Bower und RequireJS -- das gefiel mir alles überhaupt nicht damals. Mit Browserify kann ich nun npm benutzen und muss nicht zwei Stunden googlen, wie denn die RequireJS-Syntax funktioniert. Klare Empfehlung!

Fazit

React hat erstmal einen wesentlich besseren Eindruck auf mich gemacht, als Angular. Browserify ist RequireJS in gut. Ein Samstagabend halbwegs sinnvoll und spaßig verbracht!

Für die Neugierigen: Den Code gibt's natürlich auf GitHub!