Using React, Drupal and Google Chrome to build an interactive kiosk

Using React, Drupal and Google Chrome to build an interactive kiosk

What is React? React (sometimes styled React.js or ReactJS) is an open-source JavaScript library providing a view for data rendered as HTML. 1 It was developed by Facebook. React can embed and render components within components. React can accept arguments called props and maintain it’s own state data. React uses a syntax called JSX class Hello extends Component { render() { return ( div Hello {this.props.name} /div ) } }); class App extends Component { render() { return ( Hello name "World" / ) } }

Who uses React? Facebook Instagram DropBox Netflix Lullabot https://www.lullabot.com/news/announcing-the-new-lullabotcom

Why is React a good fit for a kiosk? Easy to conceptualize kiosk design using components. No page reloads and very responsive. Reuse of components works well. You may be able to even use a component for a different kiosk if needed. Large library of other modules to choose from to integrate. Potentially take the same concepts in ReactJS and move it to React Native if a mobile app is needed.

The React HTML !DOCTYPE html html head meta charset "utf-8" link rel "stylesheet" href "css/site.css" link rel "shortcut icon" href "img/favicon.ico" type "image/ico" /head body div id "app" script src "js/app.js" /script /div /body /html That’s it?

Recommended Modules React Router There are no pages within React, it is all done with DOM manipulation React Router adds hash router based state An AJAX Library SuperAgent Reqwest axios HTML Filter or Markdown Modules If you are importing remote data, you may need a way to filter it React-GA Track usage with Google Analytics.

What about jQuery? We use jQuery in our Drupal sites. You don’t need jQuery. You should be able to use React without it. You can rebuild or replicate much of the functionality that you would use on a jQuery site. The only recommendation for using jQuery is when you have a specific use case for a given jQuery module.

Developer Setup While you can write JavaScript directly for the browser, the current popular way is to use ES6 in NodeJS and transpile with Babel to the browser. For this method you will need to install NodeJS and NPM. Use a task runner, such as Grunt or Gulp to create a workflow for the application files. Use Browserify or Webpack to convert to browser code. What about stylesheets? There is discussion as to whether you should embed the styles inline within a component or use external styles. You can still use pure CSS, SASS or LESS to develop and style React components.

Testing Unit Testing Frameworks Jest – Recommended by Facebook and built on Jasmine Mocha QUnit Automated Testing WebDriverIO with Selenium Karma PhantomJS headless browser testing

What if I need more from React? React Bootstrap – A bootstrap implementation of React Flux – Adds the model and controller layer to a React application Vanilla Flux Redux Reflux Other implementations Relay GraphQL – Data composition and Fetching Immutable.js – Data object management

Bringing in Drupal! It’s got the content management part down! It is able to easily aggregate the needed data. We can leverage Drupal’s existing modules to create a workflow for data generation and management. It doesn’t have to be Drupal on the backend, it could be another CMS, framework, custom application or flat JSON files!

Drupal Setup Recommend creating a new content type if it is specific to the kiosk. Combine the data you need in views. Enable the Views JSON module to export the data needed. If you need content access restrictions: Rabbit Hole module for the content type New text format and Better Formats module if you use a WYSIWYG editor to restrict tags Access Filter module if you need to block access to the view results

Operating System User Permissions Create a new user specifically for the kiosk Remove all app permissions except for Chrome Set the kiosk to auto login to the kiosk user account Put Chrome in the startup task

Running in Chrome Kiosk Helper in the Chrome App Store If you need additional extensions, you have to run the browser in Kiosk mode with extensions enabled. Custom Extensions? – You have to register as an Chrome App Store developer. If you don’t want the store to list the extensions, you can set them to private.

References React logo by Facebook, source: https://github.com/facebook/react/blob/master/docs/img/logo.svg Drupal logo by Drupal, source: https://www.drupal.org/about/media-kit/logos Google Chrome logo by Google, source: https:// commons.wikimedia.org/wiki/File:Google Chrome for Android Icon 2016.svg 1 https://en.wikipedia.org/wiki/React %28JavaScript library%29