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 Daniel Mies, 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:
- Introduction
- ReactJS
- ReactJS + Redux
- Electron framework
- ES5 vs. ES6 vs. TypeScript
- WebPack
- Build, test and release process
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].
1const fs = require('fs'); 2const SQL = require('sql.js'); 3const filebuffer = fs.readFileSync('test.sqlite'); 4const db = new SQL.Database(filebuffer); 5const 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.
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
- [ELE] Electron: https://electron.atom.io
- [REACT] ReactJS: https://facebook.github.io/react
- [REDUX] Redux: http://redux.js.org/docs/introduction
- [BOOT] Bootstrap: https://react-bootstrap.github.io
- [HOC] React Higher Order Component: https://www.npmjs.com/package/react-sortable-hoc
- [NODE] NodeJS: https://nodejs.org/en
- [SQLJS] SQL.js: https://www.npmjs.com/package/sql.js
- [X2JS] X2JS: https://www.npmjs.com/package/x2js
Was this post helpful?
More articles
fromMarcel Birkner
6.11.2017 Your job at codecentric?
Jobs
Agile Developer und Consultant (w/d/m)
Alle Standorte
More articles in this subject area
Discover exciting further topics and let the codecentric world inspire you.
Gemeinsam bessere Projekte umsetzen.
Wir helfen deinem Unternehmen.
Du stehst vor einer großen IT-Herausforderung? Wir sorgen für eine maßgeschneiderte Unterstützung. Informiere dich jetzt.
Hilf uns, noch besser zu werden.
Wir sind immer auf der Suche nach neuen Talenten. Auch für dich ist die passende Stelle dabei.
Blog author
Marcel Birkner
Do you still have questions? Just send me a message.
Do you still have questions? Just send me a message.