I'm trying to use ExtJS5.1.2 as a front-end to replace Flex3 UI.
I heard that ExtJS can use AMF. I tested calling AMF from ExtJS, and it was success.
I expected it returns the same response as AMF+Flex3. But it didn't. The response it called from ExtJS is slower and heavy than Flex.
What I tested: Get 10000 records from Oracle DB and show it at DataGrid.
The data size: 13.1MB(ExtJS) 2.6MB(Flex3)
I saw the responses at Firebug.
The binary response is garbling, but it looks that the data structures are different.
in ExtJS5.1.2
The field names appeared every record.
POST request
������foo.getTestRecords�/1ÿÿÿÿ
����
POST response
������/1/onResult��ÿÿÿÿ�!flex.messaging.io.ArrayCollection�source
��'�modules.entity.APR361�SEQNO� APM20HSEQ�KOCHGCD�HVPNO�FGAINO�TORYOKBN�NOTE1�MSIZE3
�0�SECKBN�MSIZE2�0�MSIZE1�0�REQFL�SKSEQNO�DJKBN�1�PCLS�1�ZUBAN�GACD� HUNITNONM
�SRCLS�502�PYVPNO�0�ZBNHCNT�DSPSEQ�YOSETU�PVPUNIT� APR363SEQ�UWSID�25803�PHKADOFL
�PBANNO�SECHGCD�PGDNM�PVLIN�0�APR36SEQ�892999�PJVSEQ�BA00010G0090�ITEMKB�GKBN�LINECD
�HKS�ZAICD�PVJAN�NYCHGCD�IPRGID�PA012X�PEND�0�FVPNO�0�PSYDATBt×oÏ���MKCD�PPRKBN2
�0�PPRKBN1�0�ISEQ�893000�PPRKBN3�0�TOSOCLO2�TOSOCLO1�PGDOHCLS�TOSOCLO3�SGVJAN�2621
�UPRGID�PA014X�IDATBtø5 Î��PPRDAT2�PPRDAT1�COMKBN�BUNCNT�PPRDAT3�ICHGCD�EMORI�NXGKBN
�GAOHCLS�PPRBSU3�PPRBSU2�ITEMOPE�PVCNT�WARI�B�TIM�20151019140515920� GENCHKDAT�VISEQ
�1343�SEC�NNOTE� APR362SEQ�UCHGCD�1053�MSGGRPID�PPRBSU1� APR361SEQ�HCNT�DDAT�SYUZUJK
�HINKB�UDATBuç˯��WRKPTN�00�MCOMSEQ�LVL�MKNM�PVPNO�0� APM21HSEQ�1018811�
SKKKSEREDA�A0010�BHCLS�PXFL�PLOT�PPRBAT1�GANM�PPRBAT2�CNCOMSEQ�RGENZU�ZAINM�NOTE10
�NOTE7�NOTE6�DFLG�0�CAMKBN�NOTE9�IWSID�6102�NOTE8�TOSOPRO�NOTE3�NOTE2�PPRBAT3
�NOTE5�NOTE4�PEYDATBtãýOØ���� �modules.entity.APR361�SEQNO� APM20HSEQ�KOCHGCD�HVPNO
�FGAINO�TORYOKBN�NOTE1�MSIZE3�SECKBN�MSIZE2�MSIZE1�REQFL�SKSEQNO�DJKBN�0�PCLS
�2�ZUBAN�GACD� HUNITNONM�SRCLS�503�PYVPNO�0�ZBNHCNT�DSPSEQ�YOSETU�PVPUNIT� APR363SEQ
�1064563�UWSID�7823�PHKADOFL�PBANNO�SECHGCD�PGDNM�PVLIN�0�APR36SEQ�1064307�PJVSEQ
�BA00013G0010�ITEMKB�GKBN�LINECD�HKS�ZAICD�PVJAN�NYCHGCD�IPRGID�PA014X�PEND�0�FVPNO
�0�PSYDAT�MKCD�PPRKBN2�0�PPRKBN1�0�ISEQ�1064567�PPRKBN3�0�TOSOCLO2�TOSOCLO1�PGDOHCLS
�TOSOCLO3�SGVJAN�1123�UPRGID�PA025X�IDATBtà¨ÈÆ���PPRDAT2�PPRDAT1�COMKBN�BUNCNT�
PPRDAT3�ICHGCD�EMORI�NXGKBN�GAOHCLS�PPRBSU3�PPRBSU2�ITEMOPE�PVCNT�WARI�B�TIM�20150803092306612
� GENCHKDAT�VISEQ�1691�SEC�NNOTE� APR362SEQ�UCHGCD�EMORI�MSGGRPID�PPRBSU1� APR361SEQ
�HCNT�DDAT�SYUZUJK�HINKB�UDATBtâÙh���WRKPTN�00�MCOMSEQ�LVL�MKNM�PVPNO�0� APM21HSEQ
�1018657�
SKKKSEREDA�BHCLS�1�PXFL�PLOT�PPRBAT1�GANM�PPRBAT2�CNCOMSEQ�RGENZU�ZAINM�NOTE10
�NOTE7�NOTE6�DFLG�0�CAMKBN�NOTE9�IWSID�7447�NOTE8�TOSOPRO�NOTE3�NOTE2�PPRBAT3
�NOTE5�NOTE4�PEYDAT�� �modules.entity.APR361�SEQNO�000100� APM20HSEQ�KOCHGCD�HVPNO�
FGAINO�TORYOKBN�NOTE1�MSIZE3�0�SECKBN�MSIZE2�0�MSIZE1�0�REQFL�0�SKSEQNO�000100
�DJKBN�0�PCLS�3�ZUBAN�GACD� HUNITNONM�SRCLS�505�PYVPNO�2�ZBNHCNT�DSPSEQ�10�YOSETU
�PVPUNIT�01� APR363SEQ�UWSID�PHKADOFL�0�PBANNO�00�SECHGCD�PGDNM�æ©ç¨®åï½ï½ï½
ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï
½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï¿¥�PVLIN�1�APR36SEQ�1064307�PJVSEQ�BA00013G0010�ITEMKB�0�GKBN
�G�LINECD�HKS�ZAICD�PVJAN�999000�NYCHGCD�IPRGID�PD230S�PEND�0�FVPNO�0�PSYDAT�
MKCD�PPRKBN2�0�PPRKBN1�0�ISEQ�1064589�PPRKBN3�0�TOSOCLO2�TOSOCLO1�PGDOHCLS�0�TOSOCLO3
�SGVJAN�1123�UPRGID�IDATBtà©bV��PPRDAT2�PPRDAT1�COMKBN�BUNCNT�PPRDAT3�ICHGCD�
EMORI�NXGKBN�1�GAOHCLS�PPRBSU3�PPRBSU2�ITEMOPE�PVCNT�1�WARI�B�TIM�20150803092306612
� GENCHKDAT�VISEQ�1700�SEC�NNOTE� APR362SEQ�UCHGCD�MSGGRPID�PPRBSU1� APR361SEQ�1064569
�HCNT�0�DDAT�SYUZUJK�HINKB�UDAT�WRKPTN�00�MCOMSEQ�LVL�0�MKNM�PVPNO�0� APM21HSEQ
�1018657�
in Flex3
The field names appeared once.
POST request
�����null�/10��,
���
Oflex.messaging.messages.RemotingMessageoperation
sourcedestinationtimestamp bodymessageIdclientIdtimeToLiveheadersgetTestRecords
foo� I92F7BB91-48E7-EB8E-D6A3-B69C86CDD6D8IDD3DCC46-C0C1-F47D-8317-4163090A7318�
DSEndpoint
my-amf DSIdIDD392F8D-20AF-9878-D0A1-9BEE2CFD8DB0
POST response
�����/10/onResult��ÿÿÿÿ
Uflex.messaging.messages.AcknowledgeMessagetimestampheaders bodycorrelationIdmessageIdtimeToLive
clientIddestinationBubSr0�
Cflex.messaging.io.ArrayCollection
#+modules.entity.APR361SEQNOAPM20HSEQKOCHGCDHVPNO
FGAINOTORYOKBNNOTE1
MSIZE3
SECKBN
MSIZE2
MSIZE1REQFLSKSEQNODJKBN PCLSZUBAN GACDHUNITNONMSRCLS
PYVPNOZBNHCNT
DSPSEQ
YOSETUPVPUNITAPR363SEQUWSIDPHKADOFL
PBANNOSECHGCDPGDNMPVLINAPR36SEQ
PJVSEQ
ITEMKB GKBN
LINECDZAICDPVJANNYCHGCD
IPRGID PENDFVPNO
PSYDAT MKCDPPRKBN2PPRKBN1 ISEQPPRKBN3TOSOCLO2TOSOCLO1PGDOHCLSTOSOCLO3
SGVJAN
UPRGID IDATPPRDAT2PPRDAT1
COMKBN
BUNCNTPPRDAT3
ICHGCD
NXGKBNGAOHCLSPPRBSU3PPRBSU2ITEMOPEPVCNT WARITIMGENCHKDATVISEQSECNNOTEAPR362SEQ
UCHGCDMSGGRPIDPPRBSU1APR361SEQ HCNT DDATSYUZUJKHINKB UDAT
WRKPTNMCOMSEQLVL MKNMPVPNOAPM21HSEQSKKKSEREDABHCLS PXFL PLOTPPRBAT1 GANMPPRBAT2CNCOMSEQ
RGENZUZAINM
NOTE10NOTE7NOTE6 DFLG
CAMKBNNOTE9IWSIDNOTE8TOSOPRONOTE3NOTE2PPRBAT3NOTE5NOTE4
PEYDAT0zz1|502z25803z
892999BA00010G0090HKS
PA012XzzBt×oÏ��zz
893000z 2621
PA014XBtø5 Î�EMORIB#20151019140515920 1343 1053Buç˯�00z
1018811A0010z 6102BtãýOØ��
z2503z1064563 7823z1064307BA00013G0010zzz
z1064567z 1123
PA025XBtà¨ÈÆ��#20150803092306612 1691BtâÙh��z1018657
|z 7447
000100zzzz<z3505"1001z-æ©ç¨®åï½ï½ï½ï½ï½ï½ï½ï½
ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï½ï
½ï½ï½ï½ï½ï¿¥|*,zG
999000
PD230Szzzz1064589zz0Btà©bV�||4 17001064569z
zz8"zz 7452
000200z>zzzVz> MCM-002864@420DzC溶ãã¼ãã§ã¼ã³ãï
¼¢ï¼«ï¼´"*,z
002864Lzzzz1064590zz0Btà©b��4P1064592Rz
zＳＳï¼ï¼ï¼z8"zzT
The question: In spite of both are calling same AMF, why are the responses different? I need lightweight response like a Flex+AMF if possible.
Any help would be greatly appreciated.
I'm using Ext JS 5.1.2, BlazeDS3, Tomcat6, Adobe Flex3.4.
Updated: Nov 04 16:05(JST)
I've read the source code of Ext.direct.AmfRemotingProvider and discovered this.
if (me.binary) {
encoder = new Ext.data.amf.Encoder( {format: 0}); // AMF message sending always uses AMF0 Here!!
// encode packet
encoder.writeAmfPacket(amfHeaders, amfMessages);
request.binaryData = encoder.bytes;
request.binary = true; // Binary response
request.headers = {'Content-Type': 'application/x-amf'};
} else {
encoder = new Ext.data.amf.XmlEncoder();
// encode packet
encoder.writeAmfxRemotingPacket(amfMessages[0]);
request.xmlData = encoder.body;
}
AmfRemotingProvider uses AMF0.
To be honest, I don't understand much about what's the difference between AMF0 and AMF3.
Anyway I'm doubting there and researching how to use AMF3 from ExtJS.
The common Java code
public List<APR361> getTestRecords() throws DAOException, IOException {
List<APR361> list = new ArrayList<APR361>();
Connection c = null;
PreparedStatement ps = null;
ResultSet rs = null;
String w_sql = "";
try {
w_sql = "SELECT A.* FROM APR361 A WHERE ROWNUM<10001";
c = ConnectionHelper.getConnection();
ps = c.prepareStatement(w_sql);
rs = ps.executeQuery();
while (rs.next()) {
list.add(new APR361(
rs.getString("ISEQ"),
rs.getString("TIM"),
rs.getString("DFLG"),
rs.getString("VISEQ"),
rs.getTimestamp("IDAT"),
rs.getString("IWSID"),
rs.getString("IPRGID"),
rs.getString("ICHGCD"),
rs.getTimestamp("UDAT"),
rs.getString("UWSID"),
rs.getString("UPRGID"),
rs.getString("UCHGCD"),
rs.getTimestamp("DDAT"),
rs.getString("LINECD"),
rs.getString("APR36SEQ"),
rs.getString("PJVSEQ"),
rs.getString("SRCLS"),
rs.getString("PCLS"),
rs.getString("BHCLS"),
rs.getString("PVLIN"),
rs.getString("PVCNT"),
rs.getString("PLOT"),
rs.getString("REQFL"),
rs.getString("PXFL"),
rs.getString("DJKBN"),
rs.getString("APR362SEQ"),
rs.getString("APR361SEQ"),
rs.getString("APR363SEQ"),
rs.getString("SEQNO"),
rs.getString("SKSEQNO"),
rs.getString("DSPSEQ"),
rs.getString("HCNT"),
rs.getString("BUNCNT"),
rs.getString("PVJAN"),
rs.getString("PGDOHCLS"),
rs.getString("PGDNM"),
rs.getString("WRKPTN"),
rs.getString("APM20HSEQ"),
rs.getString("APM21HSEQ"),
rs.getString("LVL"),
rs.getString("HINKB"),
rs.getString("SGVJAN"),
rs.getString("PYVPNO"),
rs.getString("PVPUNIT"),
rs.getTimestamp("PSYDAT"),
rs.getTimestamp("PEYDAT"),
rs.getString("PHKADOFL"),
rs.getString("WARI"),
rs.getString("SEC"),
rs.getString("MSGGRPID"),
rs.getString("HVPNO"),
rs.getString("NXGKBN"),
rs.getString("GACD"),
rs.getString("GAOHCLS"),
rs.getString("GANM"),
rs.getString("PVPNO"),
rs.getString("FVPNO"),
rs.getString("PEND"),
rs.getString("PPRKBN1"),
rs.getString("PPRBAT1"),
rs.getTimestamp("PPRDAT1"),
rs.getString("PPRBSU1"),
rs.getString("PPRKBN2"),
rs.getString("PPRBAT2"),
rs.getTimestamp("PPRDAT2"),
rs.getString("PPRBSU2"),
rs.getString("PPRKBN3"),
rs.getString("PPRBAT3"),
rs.getTimestamp("PPRDAT3"),
rs.getString("PPRBSU3"),
rs.getString("ITEMKB"),
rs.getString("ZUBAN"),
rs.getString("MKCD"),
rs.getString("MKNM"),
rs.getString("ZAICD"),
rs.getString("ZAINM"),
rs.getString("SECKBN"),
rs.getString("MSIZE1"),
rs.getString("MSIZE2"),
rs.getString("MSIZE3"),
rs.getString("RGENZU"),
rs.getString("FGAINO"),
rs.getString("TORYOKBN"),
rs.getString("GKBN"),
rs.getString("PBANNO"),
rs.getString("HUNITNONM"),
rs.getString("NNOTE"),
rs.getString("SKKKSEREDA"),
rs.getTimestamp("GENCHKDAT"),
rs.getString("KOCHGCD"),
rs.getString("SECHGCD"),
rs.getString("NYCHGCD"),
rs.getString("SYUZUJK"),
rs.getString("ITEMOPE"),
rs.getString("TOSOPRO"),
rs.getString("TOSOCLO1"),
rs.getString("TOSOCLO2"),
rs.getString("TOSOCLO3"),
rs.getString("NOTE1"),
rs.getString("NOTE2"),
rs.getString("NOTE3"),
rs.getString("NOTE4"),
rs.getString("NOTE5"),
rs.getString("NOTE6"),
rs.getString("NOTE7"),
rs.getString("NOTE8"),
rs.getString("NOTE9"),
rs.getString("NOTE10"),
rs.getString("ZBNHCNT"),
rs.getString("CAMKBN"),
rs.getString("YOSETU"),
rs.getString("MCOMSEQ"),
rs.getString("CNCOMSEQ"),
rs.getString("COMKBN")
));
}
} catch (SQLException e) {
e.printStackTrace();
throw new DAOException(e);
} finally {
try {
if (rs != null) rs.close();
if (ps != null) ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
ConnectionHelper.close(c);
}
return list;
}
Call AMF from ExtJS
Ext.Direct.addProvider({
"url":"http://127.0.0.1:8400/myTestApp/messagebroker/amf", // URL for the AMFEndpoint
"type":"amfremoting",
"endpoint": "my-amf", // the name of the AMFEndpoint channel as defined in the server's services-config.xml
"binary": true, // chooses AMF encoding
"actions":{
"foo":[{ // name of the destination as defined in remoting-config.xml on the server
"name":"getTestRecords", // method name of the method to call
"len":0 // number of parameters
}]
}
});
foo.getTestRecords((function(provider, response) {
var store = Ext.getStore("baz");
store.loadData(provider);
}));
Call AMF from Flex3
public var srv: RemoteObject;
public var arrTestRecords: ArrayCollection;
public function setSRV(): void
{
srv = new RemoteObject();
srv.showBusyCursor = true;
srv.destination = "foo";
var messageUrl:String = "http://{server.name}:{server.port}/myTestApp/messagebroker/amf";
var cs:ChannelSet = new ChannelSet();
cs.addChannel( new AMFChannel("my-amf", messageUrl) );
srv.channelSet = cs;
}
public function getTest(nextfunc: Function=null): void
{
var token: AsyncToken = srv.getTestRecords();
token.addResponder(new AsyncResponder(
// on success
function(e:ResultEvent, obj:Object=null):void
{
var w_arr: ArrayCollection;
var i: int;
w_arr = new ArrayCollection();
w_arr = e.result;
arrTestRecords = new ArrayCollection();
for (i=0; i<w_arr.length; i++) {
arrTestRecords.addItem(APR361(w_arr[i]));
}
arrTestRecords.refresh();
grid.dataProvider = arrTestRecords;
},
// NG
TokenFaultEvent
));
}
Updated: Feb 02 2016 11:35(JST)
I tried to use Node.js & node-oracledb driver with gzip compression instead of using the AMF & BlazeDS.
The response data size was 900KB!
ExtJS+Node.js(900KB) vs Flex3+AMF3(2.6MB)
However the AMF3 still about 2x faster than Node.js.