React - Devcon 2013

Die Slides zu meinem Talk auf der DevCon 2013 in Hamburg.
http://www.developer-conference.eu/session_post/facebooks-react-komponentenorientiertes-javascript/

Transcript

1. DEVCON 2013 REACT A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
2. 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
3. ES GIBT ZWEI SCHWERE AUFGABEN IN DER IT …
4. 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”
5. 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”
6. Die Kern-Elemente •  Properties •  State •  JSX •  render() /getInitialState() / setState() •  Der DOM Mock
7. 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
8. 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
9. 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.
10. 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
11. 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!!)
12. 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.
13. 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
14. Inter-Komponenten Kommunikation EventEmitter2
15. Komponentenschachtelung
16. 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
17. BEISPIEL: AJAX SPINNER
21. XML & HTML? EMBEDDED? DAS IST “JSX”!
22. HIPSTER KRAM. oder doch nicht?
23. 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)
25. JSX •  Muss man es nutzen? Nein. •  Soll man es nutzen? Wird empfohlen. •  Will man es nutzen? Kommt drauf an.
26. 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
27. JSX Vorteile •  Spart Tipparbeit •  Erhöht (IMHO) die Lesbarkeit der Komponenten und deren Beziehung zueinander •  Stellt Markup auch klar als solches heraus
28. JSX (Positiv?) Beispiel
29. Was wir noch nicht betrachtet haben… •  Den Component Lifecycle •  componentWillMount, componentDidMount, etc. •  Forms •  Controlled/uncontrolled components •  Property Validation
30. 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
31. 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
32. Reactor - Kurzfassung •  PHP (Silex) für den Server •  Elasticsearch für die Suche •  Bower und Require.js, EventEmitter2 •  und React
34. So nebenher: We’re hiring! freshcells systems engineering GmbH Burghofstraße 40 40223 Düsseldorf http://www.freshcells.de/agentur.html#jobangebot