SenchaCon 2016: Handle Real-World Data with Confidence - Fredric Berling

Handle real world data
with confidence.
Fredric Berling
@FredricBerling
fredric@entence.se

• Reading & saving simple data
When we live in a perfect world. Domain model is perfect. We decide everything.
• Real world data and demands
Still simple data but add real world scenarios and demands. Learn how to configure to cope with it.
• Associations
How to handle associate data.
• Multi model scenarios
Learn about Ext.data.Session to track changes in multiple models and associations.
• Errors
2
Agenda

Model View ViewModel ViewController
Sencha MVVM recap

Sencha MVVM recap
Ext.data.Model Ext.Component Ext.app.ViewModel Ext.app.ViewControlle
r

Sencha MVVM recap
Ext.data.Model Ext.Component Ext.app.ViewModel Ext.app.ViewControlle
r
View Package

CRM.view.Viewport CRM.view.ViewportModel CRM.view.ViewportController
Our sample application
View Package

SenchaCon 2016: Handle Real-World Data with Confidence - Fredric Berling

resources/getCompanyById.json
• Id field is lowercase
• Date is formatted in a understandable
format
{
id : 100,
companyName : 'Ikea',
address : 'Storgatan 1',
city : 'Stockholm',
country : 'Sweden',
updatedDate : '1973-11-17 05:30'
}

The data model
• Fields config are not really needed for
simple data types.
.. except date
• Simple proxy config
Ext.define('CRM.model.CompanyProfile', {
extend: 'Ext.data.Model',
fields:[
{
name : 'updatedDate',
type : 'date’
}
],
proxy: {
url : 'resources/getCompanyById.json'
}
});

Data loading
• linkTo function
Creates a link to a record by loading data
from configured proxy and setting it on the
view model with a simple name.
"companyProfile" will be our reference in
all bindings referring to company data
record.
Ext.define('CRM.view.ViewportController', {
extend : 'Ext.app.ViewController',
alias : 'controller.viewportcontroller',
init: function() {
this.getViewModel().linkTo('companyProfile',{
type : 'CRM.model.CompanyProfile',
id : 100
});
}
});

Ext.define('CRM.view.Viewport', {
extend : 'Ext.Container',
viewModel : 'viewportmodel',
controller : 'viewportcontroller',
padding : 20,
items: [
{
xtype : 'textfield',
fieldLabel : 'Company name',
bind : '{companyProfile.companyName}'
},
{
fieldLabel : 'Address',
bind : '{companyProfile.address}'
}
...
]
});
Bind fields to view

extend : 'Ext.Container',
padding : 20,
items: [
'''
]
});
• viewModel
- connects this view to the viewmodel with
alias "viewportmodel"
• controller
- connects this view to the viewController
with alias "viewportcontroller"
View configs

Save button
onSave:function(){
this.getViewModel().get('companyProfile').save();
}
});
extend : 'Ext.Panel',
padding : 20,
buttons:[
{
text:'Save',
handler:'onSave'
}
],
items: [
{
fieldLabel : 'Company name',
bind : '{companyProfile.companyName}'
}
...
Save function

HTTP Post
{
"id": 100,
"companyName": "Ikea AB",
"address": "Storgatan 1",
"city": "Malmö",
"country": "Sweden",
"updatedDate": "2016-08-23 19:47"
}
{
id:100,
companyName:"Ikea AB"
}
Required response

Noteworthy
• Only dirty field data was sent.
• Id was always sent
• Same URL as read
• Response data was automatically realized in view
19

Real world data from Customer
• Observations
- id field is not "id"
{
_id : "57bb5d639baeb676ced2b0de",
address : {
street : 'Storgatan 1',
city : 'Stockholm',
country : 'Sweden'
},
updatedDate : '2016-08-23T21:26:08.358Z'
}

• Observations
- Some data resides is in objects
{
address : {
city : 'Stockholm',
country : 'Sweden'
},
updatedDate : '2016-08-23T21:26:08.358Z'
}

• Observations
- Some data resides is in objects
- Date format
{
address : {
city : 'Stockholm',
country : 'Sweden'
},
updatedDate : '2016-08-23T21:26:08.358Z'
}

Scenarios/Customer demands
• Id must be "_id". We are using Mongo DB.
• Updated date should ignore timezones
• The exact same JSON structure must be sent on save.
• Always send all data on save.
• Save must be on separate url.
24

Specify your own id field
idProperty
Consider doing this in abstract base
class or even override Ext.data.Model.
Ext.define('CRM.model.CompanyProfile', {
idProperty:'_id',
fields:[
{
name: 'updatedDate',
type : 'date’
}
],
proxy: {
url : 'resources/getCompanyById.json'
}
});

Read data from nested objects
mapping
Specify a dot notated path in the fields
array of data model.
fields:[
{
name : 'street',
mapping : 'address.street',
type : 'string'
},
{
name : 'city',
mapping : 'address.city',
type : 'string'
},
{
name : 'country',
mapping : 'address.country',
type : 'string'
},
...
],

Send all fields on save
writeAllFields
Proxy writer configs to ensure all fields
will be sent.
proxy: {
type : 'ajax',
url : '/companies',
reader:{
type:'json'
},
writer:{
type : 'json',
writeAllFields : true
}
}

Keep object nesting on save
{
address : {
city : 'Stockholm',
country: 'Sweden'
},
updatedDate : '2016-08-23T21:26:08.358Z'
}

Keep object nesting on save
expandData
Makes sure the mapped field data sent
back is in a nested format.
nameProperty
Property used to read the key for each
value that will be sent to the server.
proxy: {
type : 'ajax',
url : '/companies',
reader:{
type:'json'
},
writer:{
type : 'json',
writeAllFields : true,
nameProperty : 'mapping',
expandData : true
}
}

Date should not add timezone
By default you will get a localized date
in the current browsers timezone
{
address : {
city : 'Stockholm',
country: 'Sweden'
},
updatedDate : '2016-08-23T21:26:08.358Z'
}

dateFormat
Adding the exact date format will make
sure date is not altered.
fields:[
'''
{
name:'updatedDate',
type:'date',
dateFormat:'Y-m-dTH:i:s.uZ'
}
],

Read/Update on separate Url´s
Instead of using the proxy standard url
config, we change to the more versatile
api config
proxy: {
type : 'ajax',
url : '/companies'
reader:{
type:'json'
},
writer:{
type : 'json',
expandData : true
}
}

Read/Update on separate Url´s
Instead of using the proxy standard url
config, we change to the more versatile
api config
proxy: {
type : 'ajax',
api : {
read: '/companies',
update: '/updateCompanies'
},
reader:{
type:'json'
},
writer:{
type : 'json',
expandData : true
}
}

Associated licenses
{
"_id": "57bf32fe9baeb676ced2b0e1",
"companyName": "Ikea",
"address": {
"street": "Storgatan 3",
"city": "Malmö",
"country": "Sweden"
},
"updatedDate": "2016-08-25T18:51:39.671Z",
"licenses": [
{
"id": 1,
"product": "ExtJS 2.1",
"amount": 5
},
{
"id": 2,
"amount": 5
},
.......
]

License references Company
Ext.define('CRM.model.License', {
idgen:'uuid',
idProperty:'_id',
fields:[
{name:'product', type:'string'},
{name:'amount', type:'float'},
{
name: 'companyId',
reference: {
parent : 'CRM.model.CompanyProfile',
inverse : {
role : 'licenses'
}
}
}
Company
License
License
License

Useful?
• Automatically created stores.
Company model function licenses() will return
accociated licenses.
var viewModel = this.getViewModel(),
companyProfile = viewModel.get('companyProfile'),
store = companyProfile.licenses();

Useful?
• License function getCompany() will
return Company model.
varviewModel = this.getViewModel(),
companyProfile = viewModel.get('licenses'),
store = companyProfile.licenses(),
firstLicense = store.first(),
console.log(firstCompany.getCompany());
// Returns companyProfile

Useful?
• License function getCompany() will
return Company model.
• Nice bindings.
companyProfile.licenses references
the store
{
xtype : 'grid',
plugins : 'cellediting',
columnLines:true,
bind : {
store:'{companyProfile.licenses}'
},
columns:[
{text: 'Licence', dataIndex:'product'},
{text: 'Amount', dataIndex:'amount'}
]
}

• Inline associations
Licence data is array in company JSON and should be saved in same call as company profile.
• Proxy/Remote associations
Licence data is fetched from its own web service and CRUD operations are handled here
43
Possible business scenarios

Inline associations
{
"address": {
"city": "Malmö",
"country": "Sweden"
},
"updatedDate": "2016-08-25T18:51:39.671Z",
"licenses": [
{
"id": 1,
"amount": 5
},
{
"id": 2,
"amount": 5
},
.......
]
GET

Inline associations
{
"address": {
"city": "Malmö",
"country": "Sweden"
},
"updatedDate": "2016-08-25T18:51:39.671Z",
"licenses": [
{
"id": 1,
"amount": 5
},
{
"id": 2,
"amount": 5
},
.......
]
POST

allDataOptions
Proxy writer needs to be told to save
associated data.
.
proxy: {
type : 'ajax',
api : {
read: '/companies',
},
writer:{
type : 'json',
expandData : true,
allDataOptions :{
associated:true
}
}
}
Company model

Associated store data is not realized on save.
Live example
47

Saving associated data in a big JSON is generally a bad idea
The associated data is probably saved in a table in a database
Empty arrays will have to force delete
48

3 Possible solutions
• Re-load all data after successful
save
- extra call
- safe
onSave:function(){
this.getViewModel().get('companyProfile').save({
callback:function(){
this.getViewModel().linkTo('companyProfile',{
id : '57bf32fe9baeb676ced2b0e1'
});
},
scope:this
});
}

save
- extra call
- safe
• Forced commitChanges()
- no extra call
- response data is ignored.
onSave:function(){
var store = this.getViewModel().get('companyProfile.licenses')
this.getViewModel().get('companyProfile').save({
callback:function(){
store.commitChanges(); },
},
scope:this
});
}

save
- extra call
- safe
• Forced commitChanges()
- no extra call
- response data is ignored.
• Code around it
- complex

What happens if license array is missing?
Demo!
52

Associated stores will default to a ajax
proxy.
Avoid remote reads by changing this to
a memory proxy.
fields:[
{name:'product', type:'string'},
{name:'amount', type:'float'},
{
name: 'companyId',
reference: {
parent : 'CRM.model.CompanyProfile',
inverse : {
role:'licenses',
storeConfig:{
proxy:{
type:'memory'
}
}
}
}
. . .
Store config

Proxy/Remote associations
onSave:function(){
var vm = this.getViewModel();
vm.get('companyProfile').save();
vm.get('companyProfile.licenses').sync();
},
...
• Call save() on model.
• Call sync() on stores.

idProperty:'_id',
fields:[..],
proxy: {
type : 'ajax',
api : {
read : '/licenses',
create : '/addLicenses',
update : '/updateLicenses',
destroy : '/deleteLicenses'
},
writer:{
type : 'json',
writeAllFields : true
}
}
});
• Specify all api´s on associated data
model

{
xtype: 'grid',
plugins: 'cellediting',
columnLines: true,
tbar: [{text: 'Add', handler: 'addLicense'}],
bind: {
store: '{companyProfile.licenses}'
}
},
• Associated data will only load if store
is used in a binding

filter:[
{
"property":"companyId",
"value":"57bcbaa29baeb676ced2b0e0",
"exactMatch":true
}
]
• On read, a filter will be posted.
- property is the reference name,
- value is the reference Id
Backend must honor this filter and return
the correct subset.
• Live Example
HTTP GET /licenses

Ext.data.Session
The primary job of a Session is to manage a collection of records of many different
types and their associations. This often starts by loading records when requested
and culminates when it is time to save to the
60

View with multiple models
61
Company
Licenses
Pool cars
Feedback

62
Company
Licenses
Pool cars
Feedback
Data model + association

63
Company
Licenses
Pool cars
Feedback
Store

64
Company
Licenses
Pool cars
Feedback
Store
Data model

• getChanges()
- Returns an object describing all of the modified fields, created or dropped records
maintained by this session.
- Used to track if ANY data is dirty
• getSaveBatch()
- Returns an Ext.data.Batch containing the Ext.data.operation.Operation instances that
are needed to save all of the changes in this session
65
Session features

One point save onSave:function(){
if(this.getSession().getChanges()){
this.getSession().getSaveBatch().start();
}
},

Enable session Ext.define('CRM.view.Viewport', {
extend : 'Ext.Panel',
bodyPadding : 20,
session:true,
buttons:[
{
text:'Save',
handler:'onSave'
}
],
layout:{
type:'vbox',
align:'stretch'
},
. . . .
• Enable session in view

Enable session var store = this.getViewModel().getStore('cars');
store.setSession(this.getSession());
• Add stores to session

Enable session CRM.model.Feedback.load('57d072659baeb676ced2b0e5',{
success:function(record){
this.getViewModel().set('feedback', record);
},
scope:this
}, this.getSession());
• Provide session in model load

Enable session this.getViewModel().linkTo('companyProfile',{
id : '57bcbaa29baeb676ced2b0e0'
});• Enable session in view
• Provide session in model load
• Use LinkTo
- uses session from viewModel

Extra proxy parameters proxy: {
type : 'ajax',
extraParams:{
appName:'CRM'
},
api : {
read: '/companies',
},
reader:{
type:'json'
},
writer:{
type : 'json',
}
}
• Set in proxy using extraParams
config

Extra proxy parameters var proxy = Ext.ClassManager.get(<class>).getProxy();
proxy.setExtraParam('appName', 'CRM');
• Set in proxy using extraParams
config
• Set from controller using the
setExtraParam function

Operation parameters vm.get('companyProfile').save({
params:{
appHeight:this.getView().getHeight();
}
});
vm.get('companyProfile.licenses').sync({
params:{
appHeight:this.getView().getHeight();
}
});
• Send params config into operational
methods,

Handle error response {
"IsSuccess": false,
"ErrorMessage": "Missing company"
}Error returned from the server in a json
response when logic fails or data is
missing.

Configure the proxy reader proxy: {
type : 'ajax',
api : {
read: '/companies',
},
reader:{
type:'json',
successProperty:'IsSuccess',
messageProperty:'ErrorMessage'
}
. . .
• successProperty
The property indicating that the operation
was successful or not.
• messageProperty
The property where the error message is
returned.

Listen for proxy exception Ext.mixin.Observable.observe(Ext.data.proxy.Server);
Ext.data.proxy.Server.on('exception',
function(proxy, resp, operation){
Ext.Msg.alert('Error', operation.getError());
}
);
• exception
- fires when "success" is false
- fires on HTTP exceptions
• operation.getError()
- returns messageProperty content

Please Take the Survey in the Mobile App
• Navigate to this session in the mobile app
• Click on “Evaluate Session”
• Respondents will be entered into a drawing to win one of five $50 Amazon gift cards

SenchaCon 2016: Handle Real-World Data with Confidence - Fredric Berling

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to SenchaCon 2016: Handle Real-World Data with Confidence - Fredric Berling (20)

More from Sencha (14)

Recently uploaded (20)

SenchaCon 2016: Handle Real-World Data with Confidence - Fredric Berling

Editor's Notes