React.js flottes Front-End für Domino Knut Herrmann
Knut Herrmann Senior Software Architekt Leonso GmbH Notes Domino Entwickler seit Version 2 Web-App-Entwickler aktiv auf StackOverflow E-Mail: knut.herrmann@leonso.de Twitter: @KnutHerrmann Skype: knut.herrmann 2
Warum React? 3
Notes Client Code Daten Domino Server 4
Browser Dojo HTML JS Daten Domino Server XPages 5
Browser Dojo HTML JS Daten Java Domino Server XPages 6
Select2 Bootstrap Browser HTML JS Daten Java Domino Server jqgrid Dojo jquery XPages 7
Gesucht: Browser? Code Daten Java Domino Server XPages UI JSON Datenbank 8
Angular? 9
React! 3/23/2017 www.leonso.de 10
React hohe Performance wiederverwendbare Komponenten deklarativer gut lesbarer Code entwickelt von Facebook 11
GitHub Star Ranking 2017 4. Platz 2016 6. Platz 2014 33. Platz 2013 neu 12
Webseiten, die React nutzen 13
Was ist React? 14
React JavaScript Bibliothek kein Framework rendert HTML/CSS auf Clientseite virtueller DOM einseitig gerichteter Datenfluss 15
virtueller DOM 16
virtueller DOM 17
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
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
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
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
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
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
Datenänderungen - Events 24
Datenänderungen - Events 25
Datenänderungen - Events Store 26
Datenänderungen - Events Store Events Data 27
Datenänderungen - Events Store Dispatcher (previousstate, action) => newstate Components Actions 28
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
React Router für Single-Page-Webanwendungen hält UI mit der URL synchron URLs als Favorit speicherbar deklarativ durch Komponenten 30
Demo 31
Entwicklertools IDE Atom (frei) WebStorm (meine Empfehlung) Sublime Text Visual Studio Code (frei) ESLint Syntaxprüfung, Programmierregeln Babel 32
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
Entwicklertools Browser-Erweiterungen für Chrome und Firefox React Developer Tools Redux DevTools 34
Warum Domino? 35
Domino Datenbank Web-Server (XPages / Java / REST) Sicherheit / Nutzerverwaltung Cluster / Replikation Alles in einer Datei (.nsf) 36
Domino REST-Services XPages + Java Domino Data Service (DDS) OSGi-Plugin ( Sven Hasselbach) 37
React und mehr? 38
React Bootstrap Bootstrap-Komponenten so einfach zu nutzen wie eigene Buttons, Dialogboxen, Navigation, Seitenlayout, Forms, 39
React Native ios & Android nutzt native Komponenten einmal lernen, überall schreiben 85-90% gemeinsamer Code 40
Gefunden: Browser React & Co. Code Daten Java Domino Server XPages 41
Nutzen klare Trennung von Client und Server Code optimale Entwicklungsumgebung für Client UI Wiederverwendbare Komponenten Hohe Performance 42
node.js installieren "Create React App" installieren Versuch macht klug! https://github.com/facebookincubator/create-react-app codieren 43
Fragen? jetzt oder später E-Mail: knut.herrmann@leonso.de Twitter: @KnutHerrmann Skype: knut.herrmann 44
Quellen: Bilder zum virtuellem DOM: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html 45