DEVCON 2013 REACT A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES 

me@local: ~/ # whoami •  Mario Mueller (@xenji) •  Software Engineer @ freshcells systems engineering GmbH / Düsseldorf •  PHP / JS / MySQL Developer, Fokus auf Performance und Architektur •  Java und Go, Elasticsearch und Redis •  OSX, FreeBSD & Arch Linux 

ES GIBT ZWEI SCHWERE AUFGABEN IN DER IT … 

Dingen einen Namen geben und… ach vergiss es. •  React !== React.js •  Zwei Projekte mit sehr ähnlichem Namen •  Zwei völlig unterschiedliche Ziele •  Wir sprechen über “React” 

Und was ist jetzt dieses React? •  ein Javascript Framework •  das V in MVC (auch wenn das untertrieben ist) •  wahlweise ein programmatischer Ansatz oder ein “Markup Gemisch” 

Die Kern-Elemente •  Properties •  State •  JSX •  render() /getInitialState() / setState() •  Der DOM Mock 

Properties •  Properties sind Werte, die von außerhalb in die Komponente übergeben werden und unveränderlich sind (Dependency Injection, externe Konfiguration) •  Properties “gehören” einem Elternelement •  Properties in der aktuellen Komponente können Teil eines States der Elternkomponente sein 

State •  Der State ist der interne, veränderliche Zustand der Komponente •  Bei State Veränderungen zeichnet die Komponente selbstständig die von der Änderung betroffenen Teile des Markups neu •  Komponenten == simple State Machine 

render() •  Die render() Funktion muss implementiert werden •  Sie gibt das gesamte Markup der Komponente zurück •  Gehören zu dieser Komponente noch weitere, gekapselte Komponenten, werden diese im render() Rückgabewert referenziert. 

getInitialState() / setState() •  getInitialState() kann implementiert werden um einen … einen initialen Zustand zu setzen. •  setState() verändert den internen Zustand und löst bei Bedarf ein Neuzeichnen der Komponente und der mit diesem Wert verbundenen Kind-Komponenten aus 

Der DOM Mock •  React arbeitet nie direkt auf dem DOM •  Alle anstehenden Operationen werden erst in der in-memory Kopie bearbeitet •  Dann wird versucht, den effizientesten Weg für die Anwendung auf dem “echten” DOM zu finden (Magic 1!11!!) 

Server-Side Rendering •  Durch die 100% Javascript Lösung kommt es zu einer Ladeverzögerung bzw. einer Seite ohne Inhalt •  JSON im HTML kann zur schnellen Initialisierung verwendet werden, behebt aber das SEO Problem nicht •  HTML kann vollständig auf dem Server gerendert werden, React übernimmt später die Kontrolle – leider durch das Ersetzen des Inhaltes. 

Inter-Komponenten Austausch •  Komponenten kennen nur sich selbst und die selbst gerenderten, direkten Kinder •  Für eine Kommunikation zwischen Komponenten braucht man “Hilfe”. (z. B. einen event bus via EventEmitter2) •  DOM-gebundene jQuery Events sind aus Effizienzgründen eine schlechte Idee 

Inter-Komponenten Kommunikation EventEmitter2 

Komponentenschachtelung 

Mobile •  Auch für Mobile Browser geeignet •  Touch Event Handler können per React.initializeTouchEvents(true); aktiviert werden •  Von mir bisher erfolgreich auf iOS 6/7 Safari und dem integrierten Android 4.3 Browser getestet 

BEISPIEL: AJAX SPINNER 

No content

No content

No content

XML & HTML? EMBEDDED? DAS IST “JSX”! 

HIPSTER KRAM. oder doch nicht? 

Javascript XML •  Deklarative Auszeichnung von Komponenten •  Mischung von HTML und XML •  Properties und States können direkt verwendet werden •  Es gibt einen Node.js Compiler und ein Browser JIT Compiler Script (ähnlich wie z. B. less.js) 

No content

JSX •  Muss man es nutzen? Nein. •  Soll man es nutzen? Wird empfohlen. •  Will man es nutzen? Kommt drauf an. 

JSX Nachteile •  Fühlt sich "nicht richtig" an •  Kaum Support in IDEs und Editoren •  IDEs reagieren meist seltsam (z. B. PHPStorm) •  Die Fehlermeldungen des Watchers (Node.js) sind manchmal recht bescheiden 

JSX Vorteile •  Spart Tipparbeit •  Erhöht (IMHO) die Lesbarkeit der Komponenten und deren Beziehung zueinander •  Stellt Markup auch klar als solches heraus 

JSX (Positiv?) Beispiel 

Was wir noch nicht betrachtet haben… •  Den Component Lifecycle •  componentWillMount, componentDidMount, etc. •  Forms •  Controlled/uncontrolled components •  Property Validation 

GET IN TOUCH ... •  Google Group https://groups.google.com/forum/#!forum/reactjs •  Twitter: @zpao und @floydophone •  IRC #reactjs auf freenode •  Stack Overflow: Tagge es mit #react 

Reactor •  Eine Suchmaschine für React Komponenten •  Sie heißt “Reactor” (kreativ, ne?) •  ist Open Source •  und ja, auf Github: https://github.com/xenji/reactor •  React wird für das UI eingesetzt 

Reactor - Kurzfassung •  PHP (Silex) für den Server •  Elasticsearch für die Suche •  Bower und Require.js, EventEmitter2 •  und React 

No content

So nebenher: We’re hiring! freshcells systems engineering GmbH Burghofstraße 40 40223 Düsseldorf http://www.freshcells.de/agentur.html#jobangebot 

No content