2016 SUTOL: React.js – High-Performance Client for Domino

Leonso 1
8th Sutol Conference, November 2016
React.js – High-Performance
Client for Domino
Knut Herrmann

Leonso 2
Thanks to our sponsors!

Leonso 3
Knut Herrmann
• Senior Software Architect
Leonso GmbH
• Notes Domino developer since version 2
• Web application developer
• StackOverflow contributor
E-Mail: knut.herrmann@leonso.de
Twitter: @KnutHerrmann
Skype: knut.herrmann

Leonso 4
Why React?

Leonso 5
Domino
Server
Notes
Client
Code
Data

Leonso 6
Domino
Server
XPages
Browser
Dojo
Data
HTML
JS

Leonso 7
Domino
Server
XPages
Browser
Dojo
Data
HTML
JS
Java

Leonso 8
Domino
Server
XPages
Browser
Dojo
Data
HTML
JS
Java
jQueryjqGrid
Select2 Bootstrap

Leonso 9
Domino
Server
XPages
Browser
Java
?
Code
Data
Database JSON UI
Wanted:

Leonso 10
Angular ?

Leonso 11
React !

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

Leonso 13
GitHub Star Ranking
2013 May - first commit
2014 December - #33
2016 November - #5

Leonso 14
Websites built with React

Leonso 15
What is React?

Leonso 16
React
JavaScript library – not a framework
renders HTML on client side
virtual DOM
One-way data flow

Leonso 17
virtual DOM

Leonso 18
virtual DOM

Leonso 19
Component
component
state – internal data
render() – returns elements to render and event handling
lifecycle functions – mounting, changes, unmounting
props – data and functions as parameter
child componentscomponent component …
component component …

Leonso 20
Example
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 Schulze" />
</div>
);
}
}
ReactDOM.render(<App headline="List of Attendees"/>,
document.getElementById('root'));
class Person extends Component {
render() {
return (
<div>
<h3>{this.props.name}</h3>
</div>
);
}
}

Leonso 21
Example
render() {
return (
<div>
</div>
);
}
}
ReactDOM.render(<App headline="List of Attendees"/>,
document.getElementById('root'));
JSX

Leonso 22
Example
import React from 'react';
import ReactDOM from 'react-dom';
render() {
return (
<div>
</div>
);
}
}
ES6 (ECMAScript2015)

Leonso 23
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
you develop in a future language version 

Leonso 24
Events
deletePerson(person) {
this.setState(…)
}
…
<Person name={person}
deletePerson={this.deletePerson} />
class Person extends Component {
render() {
return (
<div>
<h3>{this.props.name}</h3>
<button onClick={() => this.props.deletePerson(this.props.name)}>
delete
</button>
</div>
);
}
}

Leonso 25
Events

Leonso 26
Events

Leonso 27
Events
Store

Leonso 28
Events
Store
Events Data

Leonso 29
Events
DispatcherStore
ActionsComponents
(previousState, action) => newState

Leonso 30
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

Leonso 31
Demo

Leonso 32
Demo's components
App
Row
Prices Price
ReservedSeats
ReservedSeat
Button
Seat
Theatre
Stage

Leonso 33
Development tools
• IDE
– Atom (free)
– WebStorm (my recommendation)
– Sublime Text
– Visual Studio Code (free)
• ESLint
– syntax check, rules
• Babel

Leonso 34
Development tools
• webpack
– bundles code/CSS/resources in one file
"bundle.js"
• npm
– package manager
• Node.js
– JavaScript runtime

Leonso 35
Development tools
• Browser Extensions for
Chrome and Firefox
– React Developer Tools
– Redux DevTools

Leonso 36
Why Domino ?

Leonso 37
Domino
database
Web server (XPages / Java / REST)
security
user management
cluster / replication

Leonso 38
Domino
our customers have Domino
in production
all in one file (.nsf)

Leonso 39
React and more ?

Leonso 40
React Router
keeps UI in sync with the URL
lazy code loading

Leonso 41
React Bootstrap
Bootstrap components
as easy to use as own components
buttons,
dialog boxes,
navigation,
page layout,
forms,
…

Leonso 42
React Native
iOS & Android
creates real mobile apps
uses native components
learn once – write anywhere
85-90% shared code

Leonso 43
Relay
uses GraphQL
data declaration
aggregated queries to fetch data
automatic data consistency
optimistic updates

Leonso 44
Found:
Domino
Server
XPages
Browser
Java
React
& Co.
Code
Data

Leonso 45
Benefits
– clear separation between client and server code
– great tools for client development
– reusable components
– high performance

Leonso 46
Try it out!
• install node.js
• install "Create React App"
– https://github.com/facebookincubator/create-react-app
• code

Leonso 47
Questions ?

Leonso 48
Thank you!
Sources:
Pictures virtual DOM:
http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html

2016 SUTOL: React.js – High-Performance Client for Domino

More Related Content

Viewers also liked

Similar to 2016 SUTOL: React.js – High-Performance Client for Domino

Recently uploaded

2016 SUTOL: React.js – High-Performance Client for Domino