React.js flottes Front-End für Domino. Knut Herrmann

Transkript

1 React.js flottes Front-End für Domino Knut Herrmann

2 Knut Herrmann Senior Software Architekt Leonso GmbH Notes Domino Entwickler seit Version 2 Web-App-Entwickler aktiv auf StackOverflow knut.herrmann@leonso.de Skype: knut.herrmann 2

3 Warum React? 3

4 Notes Client Code Daten Domino Server 4

5 Browser Dojo HTML JS Daten Domino Server XPages 5

6 Browser Dojo HTML JS Daten Java Domino Server XPages 6

7 Select2 Bootstrap Browser HTML JS Daten Java Domino Server jqgrid Dojo jquery XPages 7

8 Gesucht: Browser? Code Daten Java Domino Server XPages UI JSON Datenbank 8

9 Angular? 9

10 React! 3/23/

11 React hohe Performance wiederverwendbare Komponenten deklarativer gut lesbarer Code entwickelt von Facebook 11

12 GitHub Star Ranking Platz Platz Platz 2013 neu 12

13 Webseiten, die React nutzen 13

14 Was ist React? 14

15 React JavaScript Bibliothek kein Framework rendert HTML/CSS auf Clientseite virtueller DOM einseitig gerichteter Datenfluss 15

16 virtueller DOM 16

17 virtueller DOM 17

18 Komponente props Daten / Funktionen als Parameter Komponente state render() Lebenszyklus-Funktionen interne Daten liefert Elemente zum Rendern incl. Events Code beim Erstellen / Ändern / Verwerfen Komponente Komponente Kind-Komponenten Komponente Komponente 18

19 Beispiel import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { render() { return ( <div> <h1>{this.props.headline}</h1> <Person name="kurt Meier" /> <Person name="hans Müller" /> </div> ); } } class Person extends React.Component { render() { return ( <div> <h3>{this.props.name}</h3> </div> ); } } ReactDOM.render(<App headline="personenliste"/>, document.getelementbyid('root')); 19

20 Beispiel class App extends React.Component { render() { return ( <div> <h1>{this.props.headline}</h1> <Person name="kurt Meier" /> <Person name="hans Müller" /> </div> ); } } JSX ReactDOM.render(<App headline="personenliste"/>, document.getelementbyid('root')); 20

21 Beispiel import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { render() { return ( <div> <h1>{this.props.headline}</h1> <Person name="kurt Meier" /> <Person name="hans Müller" /> </div> ); } } ES6 (ECMAScript2015) 21

22 Babel konvertiert JSX in normales JavaScript aus wird <App headline="personenliste"/> React.createElement(App, {headline:"personenliste"}); konvertiert ES6 in eine JavaScript-Version, die aktuelle Browser beherrschen man programmiert in einer zukünftigen Sprachversion 22

23 Datenänderungen - Events class App extends Component { deleteperson(name) { this.setstate( ) } <Person name={person} deleteperson={this.deleteperson} /> class Person extends React.Component { render() { return ( <div> <h3>{this.props.name}</h3> <button onclick={() => this.props.deleteperson(this.props.name)}> Entfernen </button> </div> 23

24 Datenänderungen - Events 24

25 Datenänderungen - Events 25

26 Datenänderungen - Events Store 26

27 Datenänderungen - Events Store Events Data 27

28 Datenänderungen - Events Store Dispatcher (previousstate, action) => newstate Components Actions 28

29 Redux Alle Daten (State) in einem Datenspeicher (Store) State-Änderungen nur durch Actions Aktueller State darf nicht geändert werden neuer State = Kopie mit Änderungen erlaubt Zeitreisen 29

30 React Router für Single-Page-Webanwendungen hält UI mit der URL synchron URLs als Favorit speicherbar deklarativ durch Komponenten 30

31 Demo 31

32 Entwicklertools IDE Atom (frei) WebStorm (meine Empfehlung) Sublime Text Visual Studio Code (frei) ESLint Syntaxprüfung, Programmierregeln Babel 32

33 Entwicklertools webpack bündelt Code/CSS/Ressourcen in eine Datei "bundle.js" npm Package Manager yarn der bessere Package Manager Node.js JavaScript Runtime 33

34 Entwicklertools Browser-Erweiterungen für Chrome und Firefox React Developer Tools Redux DevTools 34

35 Warum Domino? 35

36 Domino Datenbank Web-Server (XPages / Java / REST) Sicherheit / Nutzerverwaltung Cluster / Replikation Alles in einer Datei (.nsf) 36

37 Domino REST-Services XPages + Java Domino Data Service (DDS) OSGi-Plugin ( Sven Hasselbach) 37

38 React und mehr? 38

39 React Bootstrap Bootstrap-Komponenten so einfach zu nutzen wie eigene Buttons, Dialogboxen, Navigation, Seitenlayout, Forms, 39

40 React Native ios & Android nutzt native Komponenten einmal lernen, überall schreiben 85-90% gemeinsamer Code 40

41 Gefunden: Browser React & Co. Code Daten Java Domino Server XPages 41

42 Nutzen klare Trennung von Client und Server Code optimale Entwicklungsumgebung für Client UI Wiederverwendbare Komponenten Hohe Performance 42

43 node.js installieren "Create React App" installieren Versuch macht klug! codieren 43

44 Fragen? jetzt oder später Skype: knut.herrmann 44

45 Quellen: Bilder zum virtuellem DOM: 45