React(.js) the Domino Way High-Performance Client for Domino. Knut Herrmann

Size: px

Start display at page:

Download "React(.js) the Domino Way High-Performance Client for Domino. Knut Herrmann"

Matthew Robinson
5 years ago
Views:

1 React(.js) the Domino Way High-Performance Client for Domino Knut Herrmann

2 CollabSphere 2018 Sponsors

3 Knut Herrmann Senior Software Architect Leonso GmbH Notes Domino developer since version 2 Web application developer StackOverflow contributor knut.herrmann@leonso.de Skype: knut.herrmann #engageug 3

4 Why React? #engageug 4

5 Notes Client Code Data Domino Server #engageug 5

6 Browser Dojo HTML JS Data Domino Server XPages #engageug 6

7 Browser Dojo HTML JS Data Java Domino Server XPages #engageug 7

8 Select2 Bootstrap Browser HTML JS Data Java Domino Server jqgrid Dojo jquery XPages #engageug 8

9 Wanted: Browser? Code Data Java Domino Server XPages UI JSON Database #engageug 9

10 Angular.js? React.js Vue.js #engageug 10

11 React! #engageug 11

12 React high performance reusable components declarative readable code developed by Facebook #engageug 12

13 #engageug 13

14 What is React? #engageug 14

15 React JavaScript library not a framework renders page (HTML/CSS/JS) on client side virtual DOM one-way data flow #engageug 15

16 virtual DOM #engageug 16

17 virtual DOM #engageug 17

18 Component props data and functions as parameter component state render() lifecycle functions internal data returns elements to render and event handling mounting, updating, unmounting component component child components component component #engageug 18

19 import React, {Component} from 'react'; import ReactDOM from 'react-dom'; class Person extends Component { render() { return ( <div> <h3>{this.props.name}</h3> </div> ); } } Example class App extends Component { render() { return ( <div> <h1>{this.props.headline}</h1> <Person name="kurt Meier"/> <Person name="hans Schulze"/> </div> ); } } ReactDOM.render(<App headline="list of Attendees"/>, document.getelementbyid('root')); <!doctype html> <html lang="en"> <head>... </head> <body> <div id="root"></div> <script type="text/javascript" src="/static/js/bundle.js"/> </body> </html> #engageug 19

20 <!doctype html> <html lang="en"> <head>... </head> <body> <div id="root"></div> <script type="text/javascript" src="/static/js/bundle.js"/> </body> </html>... ReactDOM.render(<App headline="list of Attendees"/>, document.getelementbyid('root')); #engageug 20

21 ... class App extends Component { render() { return ( <div> <h1>{this.props.headline}</h1> <Person name="kurt Meier"/> <Person name="hans Schulze"/> </div> ); } } ReactDOM.render(<App headline="list of Attendees"/>, document.getelementbyid('root')); #engageug 21

22 ... class Person extends Component { render() { return ( <div> <h3>{this.props.name}</h3> </div> ); } } class App extends Component {... <Person name="kurt Meier"/> <Person name="hans Schulze"/>... #engageug 22

23 Example class App extends Component { render() { return ( <div> <h1>{this.props.headline}</h1> <Person name="kurt Meier" /> <Person name="hans Müller" /> </div> ); } } JSX ReactDOM.render(<App headline="list of Attendees"/>, document.getelementbyid('root')); #engageug 23

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

25 Babel converts JSX into normal JavaScript <App headline="list of Attendees"/> React.createElement(App, {headline: "List of Attendees"}); converts ES6(+) into browser's JavaScript version develop in a future language version #engageug 25

26 Events class App extends Component { constructor(props) { super(props); this.state = { people: ["Kurt Meier", "Hans Schulze"] }; } } deleteperson = (person) => { this.setstate({ people: this.state.people.filter(elem => (elem!== person)) }) }... #engageug 26

27 Events class App extends Component {... } render() { return ( <div> <h1>{this.props.headline}</h1> {this.state.people.map(person => <Person key={person} name={person} deleteperson={this.deleteperson} /> )} </div> ); } #engageug 27

28 Events class Person extends Component { render() { return ( <div> <h3>{this.props.name}</h3> <button onclick={() => this.props.deleteperson(this.props.name)}> delete </button> </div> ); } } #engageug 28

29 Events #engageug 29

30 Events #engageug 30

31 Events Store #engageug 31

32 Events Store Events Data #engageug 32

33 Events Store Dispatcher (previousstate, action) => newstate Components Actions #engageug 33

34 Redux all data (state) is stored in a single store state can be changed by actions only new state is a copy of current state with changes allows time travel #engageug 34

35 React Router declarative routing for React for Single-Page-Applications keeps UI in sync with URL lazy code loading #engageug 35

36 Bootstrap components as easy to use as own components buttons, dialog boxes, navigation, page layout, forms, V4 React-Bootstrap V3 #engageug 36

37 Demo #engageug 37

38 Development tools IDE Atom (free) WebStorm (my recommendation) Sublime Text Visual Studio Code (free) ESLint syntax check, rules Babel #engageug 38

39 Development tools webpack bundles code/css/resources in one or few files npm / yarn Package Manager Node.js JavaScript Runtime #engageug 39

40 Development tools browser extensions for Chrome and Firefox React Developer Tools Redux DevTools #engageug 40

41 Why Domino? #engageug 41

42 Domino database Web server (XPages / Java / REST) security / user management cluster / replication #engageug 42

43 Domino our customers have Domino in production all in one file (.nsf) just put React project's build files into nsf's folder WebContent #engageug 43

44 Domino REST-Services XPages + Java Domino Data Service (DDS) SmartNSF OSGi-Plugin ( Blog Sven Hasselbach) #engageug 44

45 React und more? #engageug 45

46 React Native ios & Android creates real mobile apps uses native components learn once write anywhere 85-90% shared code #engageug 46

47 Relay uses GraphQL data declaration aggregated queries to fetch data automatic data consistency optimistic updates #engageug 47

48 Found: Browser React & Co. Code Data Java Domino Server XPages #engageug 48

49 Benefits clear separation between client and server code great tools for client development reusable components high performance #engageug 49

50 install node.js Try it out! install "Create React App" code #engageug 50

51 Demo Code: #engageug 51

52 Level up to Progressive Web App Questions? 52

53 Level up to Progressive Web App Thank you! Sources: Pictures virtual DOM: 53

Getting Started with ReactJS

Getting Started with ReactJS By Juned Laliwala About this ReactJS e-book. Basic Understanding of ReactJS Concept of JSX Use of Refs and Keys Practical Demonstrations Animation in ReactJS @2016 Attune World