Home Elements Boards Recipes

Micro Implementations Details

There are many frameworks for building a Web UI but when implementing on a memory restricted device the size of basis functionality and components becomes the most limiting factor and therefore the HomeDing UI implementation has to be as small as possible and provides only the required functionality to visualize the internal available elements, the actions and their state.

Using the Single Page Application (SPA) implementation pattern

By using the SPA pattern the server needs to implement

This is a good architecture for the web browsers available on desktops and phones. Modern frameworks like Angular, react or Vue give you a good set of tools to efficiently implement applications. However, the size of these applications tends to get huge.

In contrast to these full-blown frameworks the micro frameworks offer only the essential required functionality. They support better the current available boards for IoT things that will not have enough space nor enough power to host server web applications like those built in Angular, react or Vue.

The HomeDing library is also using this approach by using “micro” implementations to minimize the footprint of the downloaded files.

The Micro Implementations

By using the following micro implementations a small component framework is available that fits in to web servers with the space restrictions we can find in the boards and chips.

The micro IDE is a simple text editing utility primary use case is to modify the env.json and config.json configuration files. More in: Micro IDE

The micro templates are used to build HTML components that can be used at different places to visualize elements, data and other UI components like dialogs. More in: Micro Templates

The micro behaviors are modules covering the functionality required to work with a component itself. More in: Micro Behaviors

The micro databinding is the functionality to transfer data from the device or other JSON formatted data into the HTML components.

The micro stylesheet contains a collection of CSS rules that are available in a central file. By using the SCSS technology the resulting CSS file can be compressed to save memory and bandwidth while offering a well structured input.

Icons are available for all elements and general purpose. They are implemented in SVG format that results in minimal size while supporting a good scalability.
More in: Micro Icons

Charts There are some charting elements available for the HTML UI that are implemented using SVG and JavaScript. They are implemented in SVG format that results in minimal size while supporting a good scalability.
More in: Micro Charts

Web Site on board

The HomeDing library comes with a web server implementation and a small web site that can be stored in the file system of a ESP8266 base device that offers the following pages:

This functionality or at least a part of it is required even for even small HomeDing based devices and needs to be hosted in the available memory of the available boards.

The way how the web server is implemented is based on avoiding consuming server resources as much as possible and using the browser resources where possible.

Implementing minimal javascript and CSS libraries is also part of the strategy of many web interfaces that must run smoothly on mobile devices because the network bandwidth is the most restricted resource for these use-cases as well. Some “micro” implementations are available on the internet that just offer basic features with the focus on size. More on this can be found in links provided below.

Implementing the web files

There is a special project available to develop these UI components.

This project is using a node.js / express server to mock some of the features of the webserver of a HomeDing device and offers building a minified version of the resulting files.

https://github.com/HomeDing/WebFiles

Micro IDE

The Web UI implementation from the HomeDing library supports a minimal Integrated Development Environment (IDE) that allows modifying text based files using any browser.

For Details see Micro-IDE.

micro JavaScript Library

The minimalist JavaScript implementation that implements templates, function and data binding and is available to the HomeDing devices.

The functionality offers

For Details see Micro-JavaScript

micro JSON Parser

Parsing JSON formats in the browser is supported natively and was chosen for the payload of the services and the configuration. This is not a strictly requirement for the UI to use JSON in the devices and the service but it is a common approach that works well.

To handle JSON based files in a C++ programming environment a parser for this file format was used. The standard library ArduinoJson was used in the beginning but after some first implementation I found out that a streaming parser fits better to the problem of the HomeDing library.

The micro JSON Parser is implemented in the MicroJsonParser class.

For Details see Micro-JSON

micro Hub and Store

The problem the Micro Hub and Store solves is passing data from various sources over to the UI components that implement the visualization.

When visualizing data structures in Web Applications the Flux pattern is known to be a good approach. A full featured implementation is maintained by facebook and was adopted to many reactive web applications.

For the UI of the HomeDing devices the most important features of the FLUX pattern are implemented within the miro hub implementation. It was created by extending the original OpenAjax Hub idea and implementation that the OpenAjax Alliance published around 2007 as a minimal implementation of a publish and subscribe mechanism to exchange messages between libraries.

At these days a dedicated store was not part of the specification and is now added into the micro hub implementation. This allows replaying data messages to the components based on the actual data in the store.

actions -(publish)- > [data store] -> [filter] -> [library/component]
                          |                               |
                          +  <----- (subscribe) --------- +

The data store here is a native javascript structured data object representing a tree of nodes and key-values.

All data changes are serialized and passed through a filter that only forwards relevant changes to the component. It is focusing on a one way data flow but updates initiated by the components can be processed as well.

A component that wants to participate in the data flows needs to register a callback function to the

The filter gets all data changes

More reading material