SenchaCon 2016: Developing and Delivering Quality Code, Frequently - Neil Manvar
SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret
-
Upload
sencha -
Category
Technology
-
view
67 -
download
0
Transcript of SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret
![Page 1: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/1.jpg)
A Data-Driven Application for the Embedded World
Jean-Philippe EHRETLas Vegas, November 6th 2016
![Page 2: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/2.jpg)
A History of User Interfaces...
![Page 3: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/3.jpg)
Embedded Systems’ Humble Beginnings
A simple message, and only this one : “It’s WORKING! Or is it?!”
3
The blinking LED
![Page 4: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/4.jpg)
Embedded Systems’ Evolved
BETTER! But user-friendly?
4
Switches and lights
![Page 5: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/5.jpg)
Expectations Nowadays
5
Interactive data-driven dashboards
![Page 6: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/6.jpg)
Expectations Nowadays
6
Interactive data-driven dashboards
Real Time
![Page 7: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/7.jpg)
Expectations Nowadays
7
Interactive data-driven dashboards
Real Time
Interactive
![Page 8: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/8.jpg)
Expectations Nowadays
8
Interactive data-driven dashboards
Real Time
Interactive
Data Driven
![Page 9: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/9.jpg)
Expectations Nowadays
9
Interactive data-driven dashboards
Real Time
Interactive
Data Driven
Reliable
![Page 10: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/10.jpg)
Expectations Nowadays
10
Interactive data-driven dashboards
Real Time
Interactive
Data Driven
Reliable
And nice looking!
![Page 11: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/11.jpg)
Expectations Nowadays
11
Interactive data-driven dashboards
Real Time
Interactive
Data Driven
Reliable
And nice looking!
NOT ONLYon powerful machines!
![Page 12: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/12.jpg)
Expectations Nowadays
12
Interactive data-driven dashboards
Real Time
Interactive
Data Driven
Reliable
And nice looking!
Everywhere
![Page 13: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/13.jpg)
Hardware Constraints
![Page 14: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/14.jpg)
Embedded Generally Means
You don’t have that…
14
Non-extensible computing power…
![Page 15: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/15.jpg)
Embedded Generally Means
But more something like that!
15
Already limited to start with…
![Page 16: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/16.jpg)
Embedded Generally Means
16
For a slight difference!
EnterpriseServer
EmbeddedEquipment
RAM 32 GB+ 1 MB to 1 GBCPU Core i7, Octo Xeon, etc. ARM
Hard Drive RAID hard drives NopeLocal Storage Several dozens GB Up to a few GB
![Page 17: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/17.jpg)
Embedded Generally Means
17
You don’t have this
![Page 18: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/18.jpg)
Embedded Generally Means
18
You have that
![Page 19: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/19.jpg)
Consequences for Developers
![Page 20: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/20.jpg)
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...
But more something like that
20
![Page 21: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/21.jpg)
You Have to Be Really Smart!
BUT!
21
![Page 22: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/22.jpg)
You Have to Be Really Smart!
• But YOU HAVE GOT very limited resources
22
![Page 23: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/23.jpg)
You Have to Be Really Smart!
• But YOU HAVE GOT very limited resources- The only resources you have are in a few components
But more something like that
23
![Page 24: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/24.jpg)
You Have to Be Really Smart!
AND
24
![Page 25: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/25.jpg)
You Have to Be Really Smart!
• You cannot develop on your computer leaving the question of performance for later:
25
![Page 26: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/26.jpg)
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!
![Page 27: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/27.jpg)
Real Life Application
![Page 28: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/28.jpg)
HAGER in a Few WordsBasic stats
12,000 people
€1.6bn ($1.77bn) turnover
HQ in Germany, present in 23 countries
Clients in over 80 countries
![Page 29: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/29.jpg)
Building EfficiencyA 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
![Page 30: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/30.jpg)
Building EfficiencyHager’s Agardio™ system
![Page 31: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/31.jpg)
Building EfficiencyHager’s Agardio™ system
Technical details
![Page 32: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/32.jpg)
Building EfficiencyHager’s Agardio™ system
![Page 33: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/33.jpg)
Target Architecture
![Page 34: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/34.jpg)
How to Include Ext JS in an Embedded Project?
![Page 35: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/35.jpg)
How to Include Ext JS in an Embedded Project?Modularity
• Multilingual and modular across Python backend and Ext JS frontend
![Page 36: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/36.jpg)
How to Include Ext JS in an Embedded Project?No configuration
• Must be available through tablets without any configuration
• Directly served by the equipment
![Page 37: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/37.jpg)
What does it mean in Ext JS?
![Page 38: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/38.jpg)
What does it mean in Ext JS?Sencha CMD
![Page 39: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/39.jpg)
Small Memory FootprintYou 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
![Page 40: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/40.jpg)
What does it mean in Ext JS?Dynamic Loading
![Page 41: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/41.jpg)
Dynamic LoadingLoad a resource only when neededHager’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
-
![Page 42: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/42.jpg)
Dynamic LoadingLoad 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.
![Page 43: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/43.jpg)
Dynamic LoadingLoad 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
![Page 44: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/44.jpg)
Dynamic LoadingLoad 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
![Page 45: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/45.jpg)
What does it mean in Ext JS?Data Driven Dynamic Charts
![Page 46: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/46.jpg)
Data RepresentationMassive 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)
![Page 47: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/47.jpg)
Data RepresentationMassive usage of d3.js visualizations Why not Sencha’s implementation?
• The project started before Sencha’s announcement of d3.js native support
![Page 48: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/48.jpg)
Data RepresentationMassive 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
![Page 49: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/49.jpg)
Data RepresentationExt.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)); } },…});
![Page 50: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/50.jpg)
Data RepresentationExt.define('Hes.common.d3.Chart', { extend: 'Ext.Component', xtype: 'd3-chart', fieldMappings: {}, autoEl: { tag: 'svg' }, … onBoxReady: function(…) {…}, …
Data DrivenMust deal with various software- modules-specific data
this.setChart( this.getChartGenerator(w, he));…this.getChart().updateChart( Hes.util.Format.storeToD3Data( chartDataStore, this.fieldMappings));
![Page 51: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/51.jpg)
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;}
![Page 52: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/52.jpg)
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); });
![Page 53: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/53.jpg)
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") …
![Page 54: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/54.jpg)
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") …
updateChartOverride for specific drawing
updateChart:function(data) {…
Data-drivenGeneric whatever is the property
return { date: d.date, value: d[fieldName]}
![Page 55: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/55.jpg)
What does it involve in ExtJS?Dynamic Internationalization
![Page 56: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/56.jpg)
InternationalizationOne app to rule them allWe 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
![Page 57: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/57.jpg)
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'); } }); }});
![Page 58: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/58.jpg)
InternationalizationExt.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 languageThe singleton gets new values
url: 'get-localization', params:{locale:'fr'},…Ext.override(Jnesis.Labels, data);
![Page 59: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/59.jpg)
InternationalizationExt.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' }]});
![Page 60: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/60.jpg)
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',
![Page 61: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/61.jpg)
What does it involves in ExtJS?Various Performance Optimizations
![Page 62: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/62.jpg)
Application OptimizationSome 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):
![Page 63: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/63.jpg)
Application OptimizationSome 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
![Page 64: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/64.jpg)
Application OptimizationSome best practices for embedding • You have to be reasonable in the use of websocket / SSE data exchanges
![Page 65: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/65.jpg)
Application OptimizationSome best practices for embedding • Don’t forget to ask for compression in the backend!
![Page 66: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/66.jpg)
Application OptimizationSome best practices for embedding • What can be performed on the frontend must be done on the frontend (e.g. CSV export,
data sorting, …)
![Page 67: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/67.jpg)
Is ExtJS Fit for Embedded?
![Page 68: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/68.jpg)
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.
![Page 69: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/69.jpg)
To Summarize
• Keep in mind that resources are scarce
![Page 70: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/70.jpg)
To Summarize
• Keep in mind that resources are scarce
• Be smart not just comprehensive:
![Page 71: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/71.jpg)
To Summarize
• Keep in mind that resources are scarce
• Be smart not just comprehensive:
- Design modular!
![Page 72: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/72.jpg)
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
![Page 73: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/73.jpg)
To Conclude
Making Ext JS work with « Things » is nothing much than legitimate expectation.
![Page 74: SenchaCon 2016: A Data-Driven Application for the Embedded World - Jean-Philippe Ehret](https://reader035.fdocuments.us/reader035/viewer/2022062412/587fe5d41a28ab46228b55bf/html5/thumbnails/74.jpg)
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!