Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,007 views

Published on

Why to use Facebook's React.js with IBM Domino and how.
Presented at SUTOL Conference 2016 in Prague.

Published in: Software
  • Don't ask yourself if you can afford the "Demolisher" Betting System. Ask yourself if you can afford NOT to! ◆◆◆ https://bit.ly/2TSt66k
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @sotola hello.. I think you can use HashRouter to handle your routing on XPAGES
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • yes please!! I have a react.js app that consumes domino data rest service running in osgi plugin in a domino server. The app works fine but if I deploy my app into the nsf react-router stop working. I need to know how to handle the URL route into the nsf approach
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @sotola I 2nd that. A sample database would be great :-)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello Mr Herrmann, do you have a sample database? I am particularly interested in how to use react-router inside de nsf with react
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. Leonso 1 8th Sutol Conference, November 2016 React.js – High-Performance Client for Domino Knut Herrmann
  2. 2. Leonso 2 Thanks to our sponsors!
  3. 3. Leonso 3 8th Sutol Conference, November 2016 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
  4. 4. Leonso 4 8th Sutol Conference, November 2016 Why React?
  5. 5. Leonso 5 8th Sutol Conference, November 2016 Domino Server Notes Client Code Data
  6. 6. Leonso 6 8th Sutol Conference, November 2016 Domino Server XPages Browser Dojo Data HTML JS
  7. 7. Leonso 7 8th Sutol Conference, November 2016 Domino Server XPages Browser Dojo Data HTML JS Java
  8. 8. Leonso 8 8th Sutol Conference, November 2016 Domino Server XPages Browser Dojo Data HTML JS Java jQueryjqGrid Select2 Bootstrap
  9. 9. Leonso 9 8th Sutol Conference, November 2016 Domino Server XPages Browser Java ? Code Data Database JSON UI Wanted:
  10. 10. Leonso 10 8th Sutol Conference, November 2016 Angular ?
  11. 11. Leonso 11 8th Sutol Conference, November 2016 React !
  12. 12. Leonso 12 8th Sutol Conference, November 2016 React high performance reusable components declarative readable code developed by Facebook
  13. 13. Leonso 13 8th Sutol Conference, November 2016 GitHub Star Ranking 2013 May - first commit 2014 December - #33 2016 November - #5
  14. 14. Leonso 14 8th Sutol Conference, November 2016 Websites built with React
  15. 15. Leonso 15 8th Sutol Conference, November 2016 What is React?
  16. 16. Leonso 16 8th Sutol Conference, November 2016 React JavaScript library – not a framework renders HTML on client side virtual DOM One-way data flow
  17. 17. Leonso 17 8th Sutol Conference, November 2016 virtual DOM
  18. 18. Leonso 18 8th Sutol Conference, November 2016 virtual DOM
  19. 19. Leonso 19 8th Sutol Conference, November 2016 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 …
  20. 20. Leonso 20 8th Sutol Conference, November 2016 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> ); } }
  21. 21. Leonso 21 8th Sutol Conference, November 2016 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')); JSX
  22. 22. Leonso 22 8th Sutol Conference, November 2016 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> ); } } ES6 (ECMAScript2015)
  23. 23. Leonso 23 8th Sutol Conference, November 2016 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 
  24. 24. Leonso 24 8th Sutol Conference, November 2016 Events class App extends Component { 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> ); } }
  25. 25. Leonso 25 8th Sutol Conference, November 2016 Events
  26. 26. Leonso 26 8th Sutol Conference, November 2016 Events
  27. 27. Leonso 27 8th Sutol Conference, November 2016 Events Store
  28. 28. Leonso 28 8th Sutol Conference, November 2016 Events Store Events Data
  29. 29. Leonso 29 8th Sutol Conference, November 2016 Events DispatcherStore ActionsComponents (previousState, action) => newState
  30. 30. Leonso 30 8th Sutol Conference, November 2016 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
  31. 31. Leonso 31 8th Sutol Conference, November 2016 Demo
  32. 32. Leonso 32 8th Sutol Conference, November 2016 Demo's components App Row Prices Price ReservedSeats ReservedSeat Button Seat Theatre Stage
  33. 33. Leonso 33 8th Sutol Conference, November 2016 Development tools • IDE – Atom (free) – WebStorm (my recommendation) – Sublime Text – Visual Studio Code (free) • ESLint – syntax check, rules • Babel
  34. 34. Leonso 34 8th Sutol Conference, November 2016 Development tools • webpack – bundles code/CSS/resources in one file "bundle.js" • npm – package manager • Node.js – JavaScript runtime
  35. 35. Leonso 35 8th Sutol Conference, November 2016 Development tools • Browser Extensions for Chrome and Firefox – React Developer Tools – Redux DevTools
  36. 36. Leonso 36 8th Sutol Conference, November 2016 Why Domino ?
  37. 37. Leonso 37 8th Sutol Conference, November 2016 Domino database Web server (XPages / Java / REST) security user management cluster / replication
  38. 38. Leonso 38 8th Sutol Conference, November 2016 Domino our customers have Domino in production all in one file (.nsf)
  39. 39. Leonso 39 8th Sutol Conference, November 2016 React and more ?
  40. 40. Leonso 40 8th Sutol Conference, November 2016 React Router keeps UI in sync with the URL lazy code loading
  41. 41. Leonso 41 8th Sutol Conference, November 2016 React Bootstrap Bootstrap components as easy to use as own components buttons, dialog boxes, navigation, page layout, forms, …
  42. 42. Leonso 42 8th Sutol Conference, November 2016 React Native iOS & Android creates real mobile apps uses native components learn once – write anywhere 85-90% shared code
  43. 43. Leonso 43 8th Sutol Conference, November 2016 Relay uses GraphQL data declaration aggregated queries to fetch data automatic data consistency optimistic updates
  44. 44. Leonso 44 8th Sutol Conference, November 2016 Found: Domino Server XPages Browser Java React & Co. Code Data
  45. 45. Leonso 45 8th Sutol Conference, November 2016 Benefits – clear separation between client and server code – great tools for client development – reusable components – high performance
  46. 46. Leonso 46 8th Sutol Conference, November 2016 Try it out! • install node.js • install "Create React App" – https://github.com/facebookincubator/create-react-app • code
  47. 47. Leonso 47 8th Sutol Conference, November 2016 Questions ?
  48. 48. Leonso 48 8th Sutol Conference, November 2016 Thank you! Sources: Pictures virtual DOM: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html

×