Transcription
ExtJS 6Buffered StoreInternalsExtJS 6
„Struggle within, it suits you fineStruggle within, your ruin.“- James Hetfield, Lars UlrichThe Struggle Within (The Black Album)ExtJS 6
„Struggle within, it suits you fineStruggle within, your ruin.“- James Hetfield, Lars UlrichThe Struggle Within (The Black Album)ExtJS 6
„Struggle within, it suits you fineStruggle within, your ruin.“- James Hetfield, Lars UlrichThe Struggle Within (The Black Album)ExtJS 6
„Struggle within, it suits you fineStruggle within, your ruin.“- James Hetfield, Lars UlrichThe Struggle Within (The Black Album)ExtJS 6
Browsing„Struggle within, it suits you fineStruggle within, your ruin.“- James Hetfield, Lars Ulrich InformationThe Struggle Within (TheBlack Album)ExtJS 6
„Struggle within, it suits you fineStruggle within, your ruin.“- James Hetfield, Lars UlrichThe Struggle Within (The Black Album)ExtJS 6
1 . nExtJS 6
1 . nPros:- easy to maintain- view on snapshots of datado not ask for much code wise- user stays focusedCons:- browsing through/operations ondata require more user interaction- ux not consistent (e.g. data doesnot shift)ExtJS 6
GridView / skip recalculating the row index if we are currently buffering, but not if we// are just pre-buffering// . also, skip recalculating if the store is currently invalidExtJS 6
Challenges:Minor:- Rendering Performance(Solution: only render the rows which can be rendered intothe currently visible rectangle)Major:Mirroring state of data was key!- Delete- Add- Update- MultiSelect (Range)ExtJS 6
ExtJS 4:- BufferedRenderer (rendering performance)- BufferedStoreExtJS 6
ExtJS 4:- BufferedRenderer (rendering performance)- BufferedStoreadd: function () {Ext.raise('add method may not be called on a buffered store - the store is a map of remote data');},insert: function () {Ext.raise('insert method may not be called on a buffered store - the store is a map of remote data');},ExtJS 6
addremoveupdateExtJS 6
RequirementsRequirements uggle within, it suits you fineStruggle within, your ruin.“- James Hetfield, Lars UlrichThe Struggle Within (The Black Album)ExtJS 6
UpdateUpdate mentedrendererrendererImprovements- ouoncefine data waschanged Struggle(remoteSort: truesince this does notwithin,your),ruin.“happen automatically- James Hetfield, Lars UlrichThe Struggle Within (The Black Album)ExtJS 6
addremoveupdateExtJS 6
AddAdd uggle within, it suits you fineStruggle within, your ruin.“- James Hetfield, Lars UlrichThe Struggle Within (The Black Album)ExtJS 6
eredStore.„Struggle within, it suits you fineStruggle within, your ruin.“- James Hetfield, Lars UlrichThe Struggle Within (The Black Album)ExtJS 6
StoreBufferedStoreapplyData :Ext.util.Collectionadd()insert()removeAt()ExtJS 6
StoreapplyData dStoreapplyData ExtJS 6
Ext.util.LruCache- maintains most recently accessed items and discardsLeast Recently Used (maxSize-property)- maps pages, not store data:scrolling reusePage/loadPage/discardPage- adding/ removing data solely works on pages, not„store data“ExtJS 6
re.getData().map)1: {prev: { },2: {prev: { },3: {prev: { },4: {prev: { },5: {prev: null,.12: {prev: { },next:next:next:next:next:{ },{ },{ },{ },{ )}Array(25)}next: null, key: 12, value: Array(25)}ExtJS 6
re.getData().map)Pages1: {prev: { },2: {prev: { },3: {prev: { },4: {prev: { },5: {prev: null,.12: {prev: { },next:next:next:next:next:{ },{ },{ },{ },{ )}Array(25)}Ext.data.Modelnext: null, key: 12, value: Array(25)}ExtJS 6
re.getData().indexMap){1 : 0, 2 : 1, 3 : 2, 4 : 3, 5 : 4, , 300 : 299} table id "tableview-1018-record-2" . data-recordid "2" data-recordindex "3" class "." ExtJS 6
AddAdd(concrete)(concrete) tadata„Struggle within, it suits you fine Refresh viewRefresh view Struggle within, your ruin.“ - James Hetfield, Lars UlrichThe Struggle Within (The Black Album)ExtJS 6
addSorted : function(record) {var me this,data me.getData(),index dex 0,page, pos, values;if (index null) {return null;}page index[0];pos index[1];values data.map[page].value;Ext.Array.splice(values, pos, 0, record);values.pop();// Update the indexMapfor (var startIdx in data.map) {for (var i 0, len data.map[startIdx].value.length; i len; i ) lId] storeIndex ;}}return record;},„Struggle within, it suits you fineStruggle within, your ruin.“- James Hetfield, Lars UlrichThe Struggle Within (The Black Album)ExtJS 6
map:1 ::::addSorted : function(record) {2var me this,3data me.getData(),index ndex 0,page, pos, values;{values{values{values{values::::[.]},[.]},[ ]},[ ]}if (index null) {return null;}page index[0];pos index[1];values data.map[page].value;Ext.Array.splice(values, pos, 0, record);values.pop();// Update the indexMapfor (var startIdx in data.map) {for (var i 0, len data.map[startIdx].value.length; i len; i ) lId] storeIndex ;}}return record;},„Struggle within, it suits you fineStruggle within, your ruin.“- James Hetfield, Lars UlrichThe Struggle Within (The Black Album)ExtJS 6
map:1 ::::addSorted : function(record) {2var me this,3data me.getData(),index ndex 0,page, pos, values;{values{values{values{values::::[.]},[.]},[ ]},[ ]}if (index null) {return null;}page index[0];pos index[1];values data.map[page].value;1:Ext.Array.splice(values, pos, 0, record);values.pop();// Update the indexMapfor (var startIdx in data.map) {for (var i 0, len data.map[startIdx].value.length; i len; i ) lId] storeIndex ;}}2:3:return record;},5:„Struggle within, it suits you fineStruggle within, your ruin.“- James Hetfield, Lars UlrichThe Struggle Within (The Black Album)ExtJS 6
map:1 ::::addSorted : function(record) {2var me this,3data me.getData(),index ndex 0,page, pos, values;{values{values{values{values::::[.]},[.]},[ ]},[ ]}if (index null) {return null;}page index[0];pos index[1];values data.map[page].value;1:Ext.Array.splice(values, pos, 0, record);values.pop();// Update the indexMapfor (var startIdx in data.map) {for (var i 0, len data.map[startIdx].value.length; i len; i ) lId] storeIndex ;}}2:3:return record;},5:„Struggle within, it suits you fineStruggle within, your ruin.“- James Hetfield, Lars UlrichThe Struggle Within (The Black Album)ExtJS 6
map:1 ::::addSorted : function(record) {2var me this,3data me.getData(),index ndex 0,page, pos, values;{values{values{values{values::::[.]},[.]},[ ]},[ ]}if (index null) {return null;}page index[0];pos index[1];values data.map[page].value;1:Ext.Array.splice(values, pos, 0, record);values.pop();// Update the indexMapfor (var startIdx in data.map) {for (var i 0, len data.map[startIdx].value.length; i len; i ) lId] storeIndex ;}}2:3:return record;},5:„Struggle within, it suits you fineStruggle within, your ruin.“- James Hetfield, Lars UlrichThe Struggle Within (The Black Album)ExtJS 6
map:1 ::::addSorted : function(record) {2var me this,3data me.getData(),index ndex 0,page, pos, values;{values{values{values{values::::[.]},[.]},[ ]},[ ]}if (index null) {return null;}page index[0];pos index[1];values data.map[page].value;1:Ext.Array.splice(values, pos, 0, record);values.pop();// Update the indexMapfor (var startIdx in data.map) {for (var i 0, len data.map[startIdx].value.length; i len; i ) lId] storeIndex ;}}2:3:return record;},5:„Struggle within, it suits you fineStruggle within, your ruin.“- James Hetfield, Lars UlrichThe Struggle Within (The Black Album)ExtJS 6
map:1 ::::addSorted : function(record) {2var me this,3data me.getData(),index ndex 0,page, pos, values;{values{values{values{values::::[.]},[.]},[ ]},[ ]}if (index null) {return null;}page index[0];pos index[1];values data.map[page].value;1:Ext.Array.splice(values, pos, 0, record);values.pop();// Update the indexMapfor (var startIdx in data.map) {for (var i 0, len data.map[startIdx].value.length; i len; i ) lId] storeIndex ;}}2:3:return record;},5:„Struggle within, it suits you fineStruggle within, your ruin.“- James Hetfield, Lars UlrichThe Struggle Within (The Black Album)ExtJS 6
map:1 ::::addSorted : function(record) {2var me this,3data me.getData(),index ndex 0,page, pos, values;{values{values{values{values::::[.]},[.]},[ ]},[ ]}if (index null) {return null;}page index[0];pos index[1];values data.map[page].value;1:Ext.Array.splice(values, pos, 0, record);values.pop();// Update the indexMapfor (var startIdx in data.map) {for (var i 0, len data.map[startIdx].value.length; i len; i ) lId] storeIndex ;}}2:3:return record;},5:ofop„Struggle within, it suits you fineStruggle within, your ruin.“- James Hetfield, Lars UlrichThe Struggle Within (The Black Album)ExtJS 6
addremoveupdateExtJS 6
RequirementsRequirements uggle within, it suits you fineStruggle within, your ruin.“- James Hetfield, Lars UlrichThe Struggle Within (The Black Album)ExtJS 6
LruCacheLruCache shiftingshiftingproblemproblem wndown pendatatthetheendend„Struggle within, it suits you fineStruggle within, your ruin.“- James Hetfield, Lars UlrichThe Struggle Within (The Black Album)ExtJS 6
LruCacheLruCache shiftingshiftingproblemproblem wndown pendatatthetheendend Computing pages to reloadDoes LRU discard or keep existingpages (add new, remove lru)Backend Interaction„Struggle within, it suits you fineAsynchronous processesStruggle within, your ruin.“Waiting for server responseUser scrolls through data while request- James Hetfield, Lars Ulrichis activeThe Struggle Within (The Black Album)Blocking inputExtJS 6
LruCacheLruCache shiftingshiftingproblemproblem ruCache-mapmaylooklikedowndown ndappendatatthetheendend33 pages to reload Computing11 11Does LRUdiscard or keep existing1212pages 21Backend21Interaction„Strugglewithin, it suits you fine22 22 processesAsynchronousStrugglewithin, your ruin.“23 23serverWaiting forresponse24 24 through data while requestUser scrolls- James Hetfield, Lars Ulrich.is active .The Struggle Within (The Black Album) Blocking input ExtJS 6
ilable,available,pagebufferedshown- afterremovingdata, alreadyFragmentation!Fragmentation!pages need to be purged once a new Removing data in page 1 – solution: shift dataRemovingpage1 – solution:shift datapageloads data in down11 Load data from server and append at the enddataappend at the end1 : 1,2,Load3, 4,5,22from6, 7,server8, 9, and10 [VISIBLE]2 : 11, 12, 13, 14, 15,316, 17, 18, 19, 20 3 pages to reloadComputing11DELPage 1, id 311Does LRUdiscard or keep existingSCROLL Page 3 (Request Parameters: Start 21, Limit 10)1212pages1 : 1,2,5,216, 7, 8, 9, 10 [3], 4,21BackendInteraction2 : 11, 12, 13, 14, 15,„Struggle16, 17, 18,19, 20within,it suits you fine22 223 : 22, 23, Asynchronous24, 25, 26, 27, 28,processes29, 30, 31 [VISIBLE]Strugglewithin, your ruin.“23 23serverWaitingforresponse- Record 21 missing since data shifted in the backend24 24 through data while requestUser scrolls- James Hetfield, Lars Ulrich.isactive*[n] marked as deleted, i.e.in theUI, butn/aBlackfrom backendThevisibleStruggleWithin(TheAlbum) Blocking input ExtJS 6
addremoveupdateExtJS 6
ExtJS 6 ExtJS 4: - BufferedRenderer (rendering performance) - BufferedStore add: function {Ext.raise('add method may not be called on a buffered store - the store is a map of remote data');}, insert: function {Ext.raise('insert method may not be called on a buffered store - the store is a map of remote data');},
