SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret

34 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
34
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Thank Hager
    Unfortunately they couldn’t speak with us today but we thank us for having authorized us introducing their system


  • This is Hager’s Agardio System

    -> Show real object

    HAGER’s AGARDIO™ is an Intelligent Low-Voltage Switchgear

    competitors Siemens, Schneider, ABB and specialists
    market positioning easiest to install and to configure
    increase the energy efficiency of the electrical installation
    segment commercial buildings
    target specifiers


  • Inside we have
  • Inside we have
  • Harder today with Ext 6 but common in Ext 4
  • Hager needed some tailor-made visualizations, with very custom behaviors
    The project started before Sencha’s announce of d3.js native support
    D3.js was the best pick due to all this custom needs (nvd3 and other libraries don’t offer the same liberty)
    We had large issues with browser support due to very different behaviors of the SVG manipulation
    Long-term approach would be to switch to Sencha’s official implementation (waiting for 6.2 to be considered as Production Grade)
  • Hager needed some tailor-made visualizations, with very custom behaviors
    The project started before Sencha’s announce of d3.js native support
    D3.js was the best pick due to all this custom needs (nvd3 and other libraries don’t offer the same liberty)
    We had large issues with browser support due to very different behaviors of the SVG manipulation
    Long-term approach would be to switch to Sencha’s official implementation (waiting for 6.2 to be considered as Production Grade)
  • Hager needed some tailor-made visualizations, with very custom behaviors
    The project started before Sencha’s announce of d3.js native support
    D3.js was the best pick due to all this custom needs (nvd3 and other libraries don’t offer the same liberty)
    We had large issues with browser support due to very different behaviors of the SVG manipulation
    Long-term approach would be to switch to Sencha’s official implementation (waiting for 6.2 to be considered as Production Grade)
  • SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret

    1. 1. A Data-Driven Application for the Embedded World Jean-Philippe EHRET Las Vegas, November 6th 2016
    2. 2. A History of User Interfaces...
    3. 3. Embedded Systems’ Humble Beginnings A simple message, and only this one : “It’s WORKING! Or is it?!” 3 The blinking LED
    4. 4. Embedded Systems’ Evolved BETTER! But user-friendly? 4 Switches and lights
    5. 5. Expectations Nowadays 5 Interactive data-driven dashboards
    6. 6. Expectations Nowadays 6 Interactive data-driven dashboards  Real Time
    7. 7. Expectations Nowadays 7 Interactive data-driven dashboards  Real Time  Interactive
    8. 8. Expectations Nowadays 8 Interactive data-driven dashboards  Real Time  Interactive  Data Driven
    9. 9. Expectations Nowadays 9 Interactive data-driven dashboards  Real Time  Interactive  Data Driven  Reliable
    10. 10. Expectations Nowadays 10 Interactive data-driven dashboards  Real Time  Interactive  Data Driven  Reliable  And nice looking!
    11. 11. Expectations Nowadays 11 Interactive data-driven dashboards  Real Time  Interactive  Data Driven  Reliable  And nice looking! NOT ONLY on powerful machines!
    12. 12. Expectations Nowadays 12 Interactive data-driven dashboards  Real Time  Interactive  Data Driven  Reliable  And nice looking! Everywhere
    13. 13. Hardware Constraints
    14. 14. Embedded Generally Means You don’t have that… 14 Non-extensible computing power…
    15. 15. Embedded Generally Means But more something like that! 15 Already limited to start with…
    16. 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. 17. Embedded Generally Means 17 You don’t have this
    18. 18. Embedded Generally Means 18 You have that
    19. 19. Consequences for Developers
    20. 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. 21. You Have to Be Really Smart! BUT! 21
    22. 22. You Have to Be Really Smart! • But YOU HAVE GOT very limited resources 22
    23. 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. 24. You Have to Be Really Smart! AND 24
    25. 25. You Have to Be Really Smart! • You cannot develop on your computer leaving the question of performance for later: 25
    26. 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. 27. Real Life Application
    28. 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. 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. 30. Building Efficiency Hager’s Agardio™ system
    31. 31. Building Efficiency Hager’s Agardio™ system Technical details
    32. 32. Building Efficiency Hager’s Agardio™ system
    33. 33. Target Architecture
    34. 34. How to Include Ext JS in an Embedded Project?
    35. 35. How to Include Ext JS in an Embedded Project? Modularity • Multilingual and modular across Python backend and Ext JS frontend
    36. 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. 37. What does it mean in Ext JS?
    38. 38. What does it mean in Ext JS? Sencha CMD
    39. 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. 40. What does it mean in Ext JS? Dynamic Loading
    41. 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. 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. 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. 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. 45. What does it mean in Ext JS? Data Driven Dynamic Charts
    46. 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. 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. 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. 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. 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. 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. 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. 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. 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. 55. What does it involve in ExtJS? Dynamic Internationalization
    56. 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. 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. 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. 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. 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. 61. What does it involves in ExtJS? Various Performance Optimizations
    62. 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. 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. 64. Application Optimization Some best practices for embedding • You have to be reasonable in the use of websocket / SSE data exchanges
    65. 65. Application Optimization Some best practices for embedding • Don’t forget to ask for compression in the backend!
    66. 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. 67. Is ExtJS Fit for Embedded?
    68. 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. 69. To Summarize • Keep in mind that resources are scarce
    70. 70. To Summarize • Keep in mind that resources are scarce • Be smart not just comprehensive:
    71. 71. To Summarize • Keep in mind that resources are scarce • Be smart not just comprehensive: - Design modular!
    72. 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. 73. To Conclude Making Ext JS work with « Things » is nothing much than legitimate expectation.
    74. 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!

    ×