Weiter geht es mit dem zweiten Teil der React Europe 2016 Nachlese.

Jonas Gebhardt zeigt seinen Prototypen von Combine, einem visuellen Prototypingtool für React Applikationen. In den Containern die man sich zusammenklickt, und die durch Pfeile verbunden sind, steht mitnichten nur Code oder Props, nein auch graphische Elemente wie 3D Animationen oder Dialogelemente zur direkten Anpassung von Parametern. Eindrücklich war das Beispiel, schnell mal eben (TM) einen Graphen aus per Socket empfangenen Daten zu zeichnen:

  • Klick: Socketverbindung initialisieren
  • Klick: Daten puffern
  • Klick: Daten transformieren
  • Klick: Daten visualisieren

Leider hat das Tool noch keine Marktreife, auch eine public Beta gibt es nicht.

Visual IDE

Learn once, write everywhere

Bonnie Eisenmann zeigt in ihrem Rückblick die kurze Geschichte von React Native auf. Von Zuckerberg noch als Fehler bezeichnet, auf HTML5 zu setzen, dann der verschwörerische Geheimrelease von React Native nach einer Konferenz hin zum effizienten Crossplatformtool für iOS und Android:

Native quality apps with JS and React

rNat Retrospective

Einen absoluten Knaller in meinen Augen präsentieren Max Stoiber und Nik Graf mit ihrem Open Source Tool Carte blanche. Es handelt sich um

  • einen visual Styleguide
  • ein Testtool (fuzzy Testing)
  • um ein Werkzeug zur komponentenbasierten Entwicklung

Man kann sich mehrere Variationen einer Komponente zusammenklicken und speichern. Spannend sind dabei die Edgecase die man beim spielerischen Ausprobieren dabei entdeckt und die später für Tests persistiert werden.

Carte blanche konkurrenziert damit nicht nur unseren eigenen Inhouse Styleguide sondern auch das just erschienene React Storybook.

React UI Evo

Andrew Clark, Autor von Flummox, Mitautor von Redux philosophiert über higher order components. Er beschreibt die Usecases für hoc, aber auch die Fallstricke. Als Lösungsversuch stellt er seine Library recompose vor, die weihnachtsbaumartige Auswüchse im Markup durch verschachtelte hoc verhindert. Seine Bibliothek eignet sich besonders für pure Components und stellt diverse Helper zum Dekorieren bereit:

  • withProps()
  • withState()
  • withHandlers()

Recompose

Jafar Husain stellt Falcor (von Netflix) und GraphQL (von Facebook) gegenüber, und wirkt dabei ein kleines bisschen wie Stan der Schiffsverkäufer aus Monkey Island. Der Vortrag betont, ziemlich biased die Vorteile von Falcor,

  • keine spezielle query-language, sondern vanilla JS object paths
  • kleinere API als GraphQL
  • geringere Dateigrösse

hat mich aber dennoch gepackt. Beide Ansätzen lassen den Client entscheiden, welche Daten vom Server angefordert werden. Falcor definiert gegenüber GraphQL nicht die Art und Weise, wie Updates am Model zu erfolgen haben und spielt damit gut mit Redux zusammen. Versöhnliche Töne gibt es gegen Ende des Vortrags. GraphQL eigne sich für grosse, komplexe, dynamische Systeme, deren Schema des öfteren ändert. Falcor ist für tendenziell kleinere Systeme mit eher festen Schemas.

Falcor

Performance-Optimierungen bei der Verwendung von React Native sind auch schon in anderen Talks Nebenschauplätze gewesen, in Tadeu Zagallos Vortrag ist es der Hauptschauplatz. Die Optimierungsziele sind primär der Speicherverbrauch und die Startup Zeit. Mittel zur Erreichung der Ziele:

  • lazy require
  • dead code elimination
  • Optimierungen an der Java-VM (Android)
  • Batching
  • optimistic view creation ...

Mitgenommen habe ich auch den sequentiellen Ablauf beginnend vom Laden des JS bis zum Erstellen der nativen Views auf dem Device.

rNat Performance

Zwei Main-Committer von GraphQL zeigen die Zukunft von GraphQL auf. Lee Byron und Laney Kuenzel beleuchten das entstandene Ökosystem um GraphQL, zeigen, welche Probleme es löst und an welchen Features bei Facebook gerade gearbeitet wird, um den Mainfocus

GET DATA QUICK

noch besser verfolgen zu können:

  • Batches
  • @deferred
  • @stream und
  • Live Observables

GraphQL Future

Im letzten von mir mitgezeichneten Talk berichtet Martijn Walraven über seine Erfahrungen bei der Verwendung von GraphQL in Native Apps. Seine Main Goals sind dabei:

  • high network latency zu begegnen und
  • client und services weitgehend zu entkoppeln.

rNat GraphQL