Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React - Devcon 2013

React - Devcon 2013

6f676db35d9c4a3b701ca41f266d693c?s=128

Mario Mueller

November 07, 2013
Tweet

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

  18. None
  19. None
  20. None
  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)
  24. None
  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
  33. None
  34. So nebenher: We’re hiring! freshcells systems engineering GmbH Burghofstraße 40

    40223 Düsseldorf http://www.freshcells.de/agentur.html#jobangebot
  35. None