Im Vortrag werden die Konzepte von React erläutert. Es wird gezeigt, warum und wie sich React und Domino perfekt ergänzen, um performante Anwendungen zu entwickeln.

1. Domino & React
Modernstes Front-End für
Domino: React
Knut Herrmann

2. Domino & React
Knut Herrmann
 Senior Software Architekt
Leonso GmbH
 Notes Domino Entwickler
seit Version 2
 StackOverflower
E-Mail: knut.herrmann@leonso.de
Twitter: @KnutHerrmann
Skype: knut.herrmann
03.06.2016 2www.leonso.de

3. Domino & React
Warum React?
03.06.2016 3www.leonso.de

4. Domino & React
03.06.2016 4www.leonso.de
Domino
Server
Notes
Client
Code
Daten

5. Domino & React
03.06.2016 5www.leonso.de
Domino
Server
XPages
Browser
Dojo
Daten
HTML
JS

6. Domino & React
03.06.2016 6www.leonso.de
Domino
Server
XPages
Browser
Dojo
Daten
HTML
JS
Java

7. Domino & React
03.06.2016 7www.leonso.de
Domino
Server
XPages
Browser
Dojo
Select2
jQuery
Daten
jqGrid
JavaBootstrap
JS
HTML

8. Domino & React
03.06.2016 8www.leonso.de
Domino
Server
XPages
Browser
Java
Gesucht:
Datenbank JSON UI
?
Daten
Code

9. Domino & React
Angular ?
03.06.2016 9www.leonso.de

10. Domino & React
React !
6/3/2016 10www.leonso.de

11. Domino & React
React
hohe Performance
wiederverwendbare Komponenten
deklarativer gut lesbarer Code
entwickelt von Facebook
03.06.2016 11www.leonso.de

12. Domino & React
03.06.2016 12www.leonso.de
Webseiten, die React nutzen

13. Domino & React
Was ist React?
03.06.2016 13www.leonso.de

14. Domino & React
React
JavaScript Bibliothek – kein Framework
Fokus auf UI (= das "V" in MVC)
virtueller DOM
einseitig gerichteter Datenfluss
03.06.2016 14www.leonso.de

15. Domino & React
03.06.2016 15www.leonso.de
virtueller DOM

16. Domino & React
03.06.2016 16www.leonso.de
virtueller DOM

17. Domino & React
03.06.2016 17www.leonso.de
Komponente
Komponente
state – interne Daten
render() – liefert Elemente zum Rendern incl. Eventbehandlung
Lebenszyklus-Funktionen - beim Erstellen / Ändern / Verwerfen
props – Daten / Funktionen als Parameter
Kind-Komponenten
Komponente Komponente …

18. Domino & React
03.06.2016 18www.leonso.de
Beispiel
import React from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div>
<h1>{this.props.headline}</h1>
<Person name="Kurt Meier" />
<Person name="Hans Müller" />
</div>
);
}
}
ReactDOM.render(<App headline="Personenliste"/>,
document.getElementById('root'));
class Person extends Component {
render() {
return (
<div>
<h3>{this.props.name}</h3>
</div>
);
}
}

19. Domino & React
03.06.2016 19www.leonso.de
Beispiel
class App extends Component {
render() {
return (
<div>
<h1>{this.props.headline}</h1>
<Person name="Kurt Meier" />
<Person name="Hans Müller" />
</div>
);
}
}
ReactDOM.render(<App headline="Personenliste"/>,
document.getElementById('root'));
JSX

20. Domino & React
03.06.2016 20www.leonso.de
Beispiel
import React from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div>
<h1>{this.props.headline}</h1>
<Person name="Kurt Meier" />
<Person name="Hans Müller" />
</div>
);
}
}
ES6 (ECMAScript2015)

21. Domino & React
Babel
• konvertiert JSX in normales JavaScript
• konvertiert ES6 in eine JavaScript-Version,
die aktuelle Browser beherrschen
 man programmiert in einer zukünftigen
Sprachversion 
03.06.2016 21www.leonso.de
aus <App headline="Personenliste"/>
wird React.createElement(App, {headline:"Personenliste"});

22. Domino & React
Datenänderungen - Events
03.06.2016 22www.leonso.de
class Person extends Component {
render() {
return (
<div>
<h3>{this.props.name}</h3>
<button onClick={() => this.props.deletePerson(this.props.name)}>
Entfernen
</button>
</div>
);
}
}

23. Domino & React
Datenänderungen - Events
03.06.2016 23www.leonso.de

24. Domino & React
Datenänderungen - Events
03.06.2016 24www.leonso.de

25. Domino & React
Datenänderungen - Events
03.06.2016 25www.leonso.de
Store

26. Domino & React
Datenänderungen - Events
03.06.2016 26www.leonso.de
DispatcherStore
ActionsComponents
(previousState, action) => newState

27. Domino & React
Redux
 es gibt genau einen Datenspeicher (Store)
 State darf nicht geändert werden
neuer State = komplette Kopie mit Änderungen
 erlaubt Zeitreisen
03.06.2016 27www.leonso.de

28. Domino & React
Demo
03.06.2016 28www.leonso.de

29. Domino & React
Komponenten in Demo
6/3/2016 29www.leonso.de
App
Row
Prices Price
ReservedSeats
ReservedSeat
Button
Seat
Theatre
Stage

30. Domino & React
Entwicklertools
 IDE
 Atom (frei)
 WebStorm
 Sublime Text
 Visual Studio Code (frei)
 ESLint
 Syntaxprüfung, Programmierregeln
 Babel
03.06.2016 30www.leonso.de

31. Domino & React
Entwicklertools
 webpack
 bündelt Code/CSS/Ressourcen in eine Datei "bundle.js"
 npm
 Package Manager
 Node.js
 JavaScript Runtime
03.06.2016 31www.leonso.de

32. Domino & React
Entwicklertools
 Google Chrome Erweiterung
 React
 Redux
03.06.2016 32www.leonso.de

33. Domino & React
Warum Domino?
03.06.2016 33www.leonso.de

34. Domino & React
Domino
Datenbank
Web-Server (XPages / Java / REST)
Sicherheit / Nutzerverwaltung
Cluster / Replikation
03.06.2016 34www.leonso.de

35. Domino & React
Domino
unsere Kunden haben es
Alles in einer Datei (.nsf)
03.06.2016 35www.leonso.de

36. Domino & React
React und mehr?
03.06.2016 36www.leonso.de

37. Domino & React
React Router
hält UI mit der URL synchron
03.06.2016 37www.leonso.de

38. Domino & React
React Bootstrap
Bootstrap-Komponenten
so einfach zu nutzen wie eigene
Buttons, Dialogboxen, Navigation,
Seitenlayout, Forms, …
03.06.2016 38www.leonso.de

39. Domino & React
React Native
iOS & Android
nutzt native Komponenten
einmal lernen, überall schreiben
85-90% gemeinsamer Code
03.06.2016 39www.leonso.de

40. Domino & React
Relay
nutzt GraphQL
erforderliche Daten nur deklarieren
aggregierte Serveranfragen
automatische Datensynchronisation
optimistische Datenänderung
03.06.2016 40www.leonso.de

41. Domino & React
03.06.2016 41www.leonso.de
Domino
Server
XPages
Browser
Java
Gefunden:
React
& Co.
Daten
Code

42. Domino & React
03.06.2016 42www.leonso.de
Nutzen
 klare Trennung von Client und Server Code
 optimale Entwicklungsumgebung für Client UI
 Wiederverwendbare Komponenten
 Hohe Performance

43. Domino & React
Fragen? – jetzt …
… oder später
 E-Mail: knut.herrmann@leonso.de
 Twitter: @KnutHerrmann
 Skype: knut.herrmann
03.06.2016 43www.leonso.de

44. Domino & React
Quellen:
 Bilder zum virtuellem DOM:
http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html
03.06.2016 44www.leonso.de