View this presentation to see a real-time and data-centric application designed to help people manage large facilities, buildings, and homes in a smart way. It notably features D3.js dashboards, user-friendly device mapping, and automatic alerts on suspicious power consumptions.

1. A Data-Driven Application
for the Embedded World
Jean-Philippe EHRET
Las Vegas, November 6th 2016

2. A History of User Interfaces...

3. Embedded Systems’ Humble Beginnings
A simple message, and only this one : “It’s WORKING! Or is it?!”
3
The blinking LED

4. Embedded Systems’ Evolved
BETTER! But user-friendly?
4
Switches and lights

5. Expectations Nowadays
5
Interactive data-driven dashboards

6. Expectations Nowadays
6
Interactive data-driven dashboards
 Real Time

7. Expectations Nowadays
7
Interactive data-driven dashboards
 Real Time
 Interactive

8. Expectations Nowadays
8
Interactive data-driven dashboards
 Real Time
 Interactive
 Data Driven

9. Expectations Nowadays
9
Interactive data-driven dashboards
 Real Time
 Interactive
 Data Driven
 Reliable

10. Expectations Nowadays
10
Interactive data-driven dashboards
 Real Time
 Interactive
 Data Driven
 Reliable
 And nice looking!

11. Expectations Nowadays
11
Interactive data-driven dashboards
 Real Time
 Interactive
 Data Driven
 Reliable
 And nice looking!
NOT ONLY
on powerful
machines!

12. Expectations Nowadays
12
Interactive data-driven dashboards
 Real Time
 Interactive
 Data Driven
 Reliable
 And nice looking!
Everywhere

13. Hardware Constraints

14. Embedded Generally Means
You don’t have that…
14
Non-extensible computing power…

15. Embedded Generally Means
But more something like that!
15
Already limited to start with…

16. Embedded Generally Means
16
For a slight difference!
Enterprise
Server
Embedded
Equipment
RAM 32 GB+ 1 MB to 1 GB
CPU Core i7, Octo Xeon, etc. ARM
Hard Drive RAID hard drives Nope
Local Storage Several dozens GB Up to a few GB

17. Embedded Generally Means
17
You don’t have this

18. Embedded Generally Means
18
You have that

19. Consequences for
Developers

20. You Have to Be Really Smart!
• Because people want real-time, rich and reactive interfaces
- And of course adaptive and working on many kind of devices : tablets, laptops, desktops...
20

21. You Have to Be Really Smart!
BUT!
21

22. You Have to Be Really Smart!
• But YOU HAVE GOT very limited resources
22

23. You Have to Be Really Smart!
• But YOU HAVE GOT very limited resources
- The only resources you have are in a few components
23

24. You Have to Be Really Smart!
AND
24

25. You Have to Be Really Smart!
• You cannot develop on your computer
leaving the question of performance for
later:
25

26. You Have to Be Really Smart!
• You cannot develop on your computer
leaving the question of performance for
later:
26
Patching an embedded device remotely may just NOT BE POSSIBLE!

27. Real Life Application

28. HAGER in a Few Words
Basic stats
12,000 people
€1.6bn ($1.77bn) turnover
HQ in Germany, present in 23 countries
Clients in over 80 countries

29. Building Efficiency
A large step towards intelligent buildings
Agardio system contributes to the management of low
voltage (LV) electrical system:
• Optimizing the building’s energy consumption:
- Saving money and preserving the environment
• Maintaining service continuity:
- Preventing operational losses
- Providing stable conditions for occupants

30. Building Efficiency
Hager’s Agardio™ system

31. Building Efficiency
Hager’s Agardio™ system
Technical details

32. Building Efficiency
Hager’s Agardio™ system

33. Target Architecture

34. How to Include Ext JS in an Embedded Project?

35. How to Include Ext JS in an Embedded Project?
Modularity
• Multilingual and
modular across
Python backend
and Ext JS
frontend

36. How to Include Ext JS in an Embedded Project?
No configuration
• Must be available
through tablets
without any
configuration
• Directly served
by the
equipment

37. What does it mean in Ext JS?

38. What does it mean in Ext JS?
Sencha CMD

39. Small Memory Footprint
You definitely want to use Sencha CMD
• Tablets will download the application from the equipment
• Heavy app is not such a problem in terms of memory, but the power of the CPU used
to deliver the app is a different story

40. What does it mean in Ext JS?
Dynamic Loading

41. Dynamic Loading
Load a resource only when needed
Hager’s product is fully modular:
• Depending on the physical modules installed (light sensor, temperature sensor…),
backend and frontend will have different features.
Additionally:
• The new modules can be plugged without any reboot
• Configuration files can be uploaded on-the-fly
• A new piece of UI can serve many purposes across multiple modules
-

42. Dynamic Loading
Load a resource only when needed
The magic is that all of this is loaded
dynamically like a sort of “plugin” :
• The Ext JS app CANNOT be deployed as
a single JS as we are used to.

43. Dynamic Loading
Load a resource only when needed
The magic is that all of this is loaded
dynamically like a sort of “plugin” :
• The Ext JS app CANNOT be deployed as
a single JS as we are used to.
• Each physical module brings its piece of
extra Ext JS and resources within a
dedicated Ext JS package

44. Dynamic Loading
Load a resource only when needed
The magic is that all of this is loaded
dynamically like a sort of “plugin” :
• The Ext JS app CANNOT be deployed as
a single JS as we are used to.
• Each physical module brings its piece of
extra Ext JS and resources within a
dedicated Ext JS package
• Sencha CMD is to produce MULTIPLE
JavaScript files, one per package / module

45. What does it mean in Ext JS?
Data Driven Dynamic Charts

46. Data Representation
Massive usage of d3.js visualizations
Why d3.js?
• Hager needed custom visualizations and behaviors
• D3.js was the best pick due to that (SVG low-level building)

47. Data Representation
Massive usage of d3.js visualizations
Why not Sencha’s implementation?
• The project started before Sencha’s announcement of d3.js native support

48. Data Representation
Massive usage of d3.js visualizations
What’s next?
• Many issues with browser support due to very different behaviors of the SVG
manipulation
• Long-term approach : switch to Sencha’s official implementation

49. Data Representation
Ext.define('Hes.common.d3.Chart', {
extend: 'Ext.Component',
xtype: 'd3-chart',
fieldMappings: {},
autoEl: {
tag: 'svg'
},
…
onBoxReady: function(…) {…},
createChart:function(w, he) {
…
this.setChart(this.getChartGenerator(w, he));
…
this.getChart().updateChart(
Hes.util.Format.storeToD3Data(chartDataStore, this.fieldMappings));
}
},
…});

50. Data Representation
Ext.define('Hes.common.d3.Chart', {
extend: 'Ext.Component',
xtype: 'd3-chart',
fieldMappings: {},
autoEl: {
tag: 'svg'
},
…
onBoxReady: function(…) {…},
…
Data Driven
Must deal with
various software-
modules-specific
data
this.setChart(
this.getChartGenerator(w, he));
…
this.getChart().updateChart(
Hes.util.Format.storeToD3Data(
chartDataStore,
this.fieldMappings
));

51. Transform Data to D3 Data
storeToD3Data: function(chartData, fieldMappings) {
var data = [];
fieldMappings = fieldMappings || {};
if (chartData && Ext.isFunction(chartData.each)) {
chartData.each(function(datum) {
var dataObj = datum.data;
var seriesData = {};
var dataKeys = Ext.Object.getKeys(dataObj);
dataKeys.forEach(function(key) {
seriesData[fieldMappings[key] || key] = datum.get(key);
});
data.push(seriesData);
});}
return data;
}

52. Transform Data to D3 Data
storeToD3Data: function(chartData, fieldMappings) {
var data = [];
fieldMappings = fieldMappings || {};
if (chartData && Ext.isFunction(chartData.each)) {
chartData.each(function(datum) {
var dataObj = datum.data;
var seriesData = {};
var dataKeys = Ext.Object.getKeys(dataObj);
dataKeys.forEach(function(key) {
pieData[fieldMappings[key] || key] = datum.get(key);
});
data.push(pieData);
});}
return data;
}
To find axis and all
important D3 data types
var dataKeys = Ext.Object.getKeys(dataObj);
dataKeys.forEach(function(key) {
seriesData[fieldMappings[key] || key] =
datum.get(key);
});

53. A Generator
Ext.define('Hes.common.d3.line.LineGenerator', {
extend: 'Ext.Base',
mixins: ['Ext.mixin.Observable'],
…
updateChart: function(data) {
var seriesFields = this.chartOwner.getSeriesFields() || ['value'];
this.data = data;
this.seriesData = seriesFields.map(function(fieldName) {
return {
id: fieldName,
values: data.map(function(d) {
return {
date: d.date,
value: d[fieldName]
};})};});
…
this.svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + this.height + ")")
.call(this.xAxis)
.append("text")
.style("font-size", "1.6em")
.attr("y", -this.height)
.attr("x", 15)
.attr("fill", "#000")
.text(this.chartOwner.getXTitle());
this.svg.append("g")
.attr("class", "y axis")
…

54. A Generator
Ext.define('Hes.common.d3.line.LineGenerator', {
extend: 'Ext.Base',
mixins: ['Ext.mixin.Observable'],
…
updateChart: function(data) {
var seriesFields = this.chartOwner.getSeriesFields() || ['value'];
this.data = data;
this.seriesData = seriesFields.map(function(fieldName) {
return {
id: fieldName,
values: data.map(function(d) {
return {
date: d.date,
value: d[fieldName]
};})};});
…
this.svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + this.height + ")")
.call(this.xAxis)
.append("text")
.style("font-size", "1.6em")
.attr("y", -this.height)
.attr("x", 15)
.attr("fill", "#000")
.text(this.chartOwner.getXTitle());
this.svg.append("g")
.attr("class", "y axis")
…
updateChart
Override for specific
drawing
updateChart:function(data) {
…
Data-driven
Generic whatever is the
property
return {
date: d.date,
value: d[fieldName]
}

55. What does it involve in ExtJS?
Dynamic Internationalization

56. Internationalization
One app to rule them all
We use an approach with elements on top of Sencha’s official guidelines:
• One multilingual build instead of one build per language
• Dynamic loading to switch language as required
• Easily extendable for multiple language support
• Contents can be translated by non developers through specific products
• No redeployment needed
For more information about internationalization,
please read our blogpost on sencha.com

57. Internationalization
Json result is language specific
{"button": "Mon Bouton",
"title": "Mon titre"}
Ext.define('Jnesis.Labels', {
singleton: true,
button: 'My english button',
title: 'My english title'
});
…
Ext.define ('Jnesis.Application', {
launch: function () {
Ext.Ajax.request({
url: 'get-localization',
params:{locale:'fr'},
callback: function (options, success, response) {
var data = Ext.decode(response.responseText, true);
Ext.override(Jnesis.Labels, data);
Ext.create('Jnesis.view.main.Main');
}
});
}
});

58. Internationalization
Ext.define('Jnesis.Labels', {
singleton: true,
button: 'My english button',
title: 'My english title'
});
…
Ext.define ('Jnesis.Application', {
launch: function () {
Ext.Ajax.request({
url: 'get-localization',
params:{locale:'fr'},
callback: function (options, success, response) {
var data = Ext.decode(response.responseText, true);
Ext.override(Jnesis.Labels, data);
Ext.create('Jnesis.view.main.Main');
}
});
}
});
Override with selected
language
The singleton gets new
values
url: 'get-localization',
params:{locale:'fr'},
…
Ext.override(Jnesis.Labels, data);

59. Internationalization
Ext.define('overrides.localized.Component', {
override: 'Ext.Component',
initComponent: function() {
var me = this,
localized = me.localized,
value;
if (Ext.isObject(localized)) {
for (var prop in localized) {
value = localized[prop];
if (value) {
me[prop] = eval(value);
}}}
me.callParent(arguments);});
Ext.define('Jnesis.view.main.Main', {
extend: 'Ext.panel.Panel',
localized: {
title: 'Jnesis.Labels.title'
},
buttons: [{
localized: {
text: 'Jnesis.Labels.button'
},
handler: 'onClickButton'
}]});

60. Ext.define('overrides.localized.Component', {
override: 'Ext.Component',
initComponent: function() {
var me = this,
localized = me.localized,
value;
if (Ext.isObject(localized)) {
for (var prop in localized) {
value = localized[prop];
if (value) {
me[prop] = eval(value);
}}}
me.callParent(arguments);});
Ext.define('Jnesis.view.main.Main', {
extend: 'Ext.panel.Panel',
localized: {
title: 'Jnesis.Labels.title'
},
buttons: [{
localized: {
text: 'Jnesis.Labels.button'
},
handler: 'onClickButton'
}]});
Localized property
“Bind like” property
localized: {
title: 'Jnesis.Labels.title'
},
Override Ext Components Ext.define('overrides.localized.Component', {
override: 'Ext.Component',

61. What does it involves in ExtJS?
Various Performance
Optimizations

62. Application Optimization
Some best practices for embedding
• Don’t blame the backend guy! Every REST call can harm the resources!
• Store locally every time it is possible (inside the end-user device):

63. Application Optimization
Some best practices for embedding
• Don’t blame the backend guy! Every REST call can harm the resources!
• Store locally every time it is possible (inside the end-user device):
duplicate data = need for optimization

64. Application Optimization
Some best practices for embedding
• You have to be reasonable in the use of websocket / SSE data exchanges

65. Application Optimization
Some best practices for embedding
• Don’t forget to ask for compression in the backend!

66. Application Optimization
Some best practices for embedding
• What can be performed on the frontend must be done on the frontend (e.g. CSV
export, data sorting, …)

67. Is ExtJS Fit for Embedded?

68. YES!
But developers MUST understand
what‘s happening behind the
scene, although Sencha did a good
job sparing this to developers in
most other cases.

69. To Summarize
• Keep in mind that resources are scarce

70. To Summarize
• Keep in mind that resources are scarce
• Be smart not just comprehensive:

71. To Summarize
• Keep in mind that resources are scarce
• Be smart not just comprehensive:
- Design modular!

72. To Summarize
• Keep in mind that resources are scarce
• Be smart not just comprehensive
- Design modular!
• Test, re-test, re-re-test before releasing, you work in an embedded
system

73. To Conclude
Making Ext JS work with « Things » is nothing
much than legitimate expectation.

74. To Conclude
Making Ext JS work with « Things » is nothing
much than legitimate expectation.
Jnesis is always looking for
solutions to use Ext JS wherever it
can be in a beneficial way for its
clients, check us out at the sponsor
zone!