Overview

Developing modern offline apps with ReactJS, Redux and Electron – Part 1 – Introduction

No Comments

Introduction

For a recent project we developed an offline app. Application Programming Specialists use this software for creating and managing use this software for creating and managing programs that run on laboratory machines. We have several projects with industry customers that have similar requirements and use an identical technology stack. Therefore my colleagues Ansgar Schulte, Michael Reinartz, Sandy Weck and I decided to write a blog series about our experiences, what libraries and frameworks we chose and how we developed the offline client.

To keep the articles shorter and easier to read, we separated them into smaller chunks. Here is a list of upcoming articles in this series:

  1. Introduction
  2. ReactJS
  3. ReactJS + Redux
  4. Electron framework
  5. ES5 vs. ES6 vs. TypeScript
  6. WebPack
  7. Build, test and release process
  8. Development environment

We hope you will enjoy this series. Feel free to leave comments or contact us if you have questions. We will try to answer your comments in a timely manner.

Project Requirements

Before we started the project, we had to make several architectural and design decisions. Key features of the new desktop client are:

  • Platform independence (Windows, Linux, MacOS)
  • Offline capability
  • Drag & Drop
  • Responsive Design
  • Reusability

There are several alternative technologies that we evaluated, for example JavaFX, Eclipse RCP, .Net, to name just a few. One reason for choosing ReactJS, Redux, and Electron was the speed in which we developed the initial prototypes. For every critical feature we found at least one matching NPM module that we could use. Just to give you a few examples:

Responsive Design

We chose Bootstrap as CSS framework to handle all the nitty-gritty details of responsive design and styling. The perfect npm module in our case was react-bootstrap that provides all Bootstrap components as ReactJS components [REACT].

<ButtonToolbar>
 <Button>Default</Button>
 <Button bsStyle="primary">Primary</Button>
 <Button bsStyle="success">Success</Button>
 <Button bsStyle="info">Info</Button>
 <Button bsStyle="warning">Warning</Button>
 <Button bsStyle="danger">Danger</Button>
 <Button bsStyle="link">Link</Button>
</ButtonToolbar>

For special use cases like tooltips, notifications, and so on, we found other npm modules that provide ReactJS components out of the box.

SQL Database

The offline app is packaged with a SQLite database file that contains all commands and parameters that are used for developing programs for the laboratory devices. We needed to access this data from within the ReactJS app. There are a number of SQL npm modules and we chose sql.js in the end [SQLJS].

const fs = require('fs');
const SQL = require('sql.js');
const filebuffer = fs.readFileSync('test.sqlite');
const db = new SQL.Database(filebuffer);
const contents = db.exec("SELECT * FROM table");

XML parser

The programs are stored in an XML format that the laboratory machines can read and execute. Therefore we needed to find a JavaScript library that made it easy to read and write XML files. After a few tests x2js did the trick for us and worked perfectly [X2JS].

XML to JSON

const x2js = new X2JS();
const xmlText = "<root><name>Program 1</name></root>"; 
const jsonObj = x2js.xml_str2json( xmlText );

JSON to XML

const x2js = new X2JS();
const jsonObj = { root : { name: 'Program 1', } }; 
const xmlAsStr = x2js.json2xml_str( jsonObj );

Drag & Drop

This was one of the more complicated features to figure out. HTML5 supports drag & drop, but obviously this can get very complicated for large applications to do everything by hand. For our use case the React sortable higher order component npm module did the trick and all we needed to take care of was styling the components and adding some logic [HOC].

React HOC before and after CSS styling

Reusability

We chose to create a plain web app with HTML5, CSS3, and JavaScript (ES6). The web app is packaged with Electron for different operating systems and can be deployed on an nginx server and accessed through a web browser. We will go into more detail on these technologies in the following articles. As  a result of this architecture, almost all components of the app can be reused for future web apps. Examples for popular Electron apps are Slack, Visual Studio Code, and Atom editor. The following diagram gives a high level overview of the overall architecture.

Architecture overview

Summary

We hope you got a good impression of the project scope and are curious about the technologies we used in this project. In the next article we will introduce ReactJS and show you how easy it is to start and create your own React components.

References

 

Comment

Your email address will not be published. Required fields are marked *