This spring I was contacted by one company with the request of consulting on their application developed in PHP and ExtJS Javascript Library. They wanted to come on site, stay with them one week and advise. I usually take such jobs but I always want to know what product is expected so I know in advance if I can deliver it to the full satisfaction.
These guys succeeded to keep it covered and I was only told: “Come here and work with us for a week.” Being curious enough I succumbed to the temptation and taken the job.
The evening I came they had shown me a beautiful application with many windows, forms, grids, accordions. The application was very complex and I immediately knew that I’m going to work with pros. Uttering words of commendations I was still in a mystery because I still didn’t know what I was there for.
So I asked: “What do you expect from me that you were able to develop this alone?” They said: “Well, it is slow!”
Indeed, Ext window with a form and grid took around 4 seconds to show all it contents before the user could interact with it. And it was intranet! No slow internet connection bottlenecks.
“Yes, that’s too much! Let’s start tomorrow to find out why”, I said.
Next day I dug into the bowels of the application and I found that they generated javascript code on the server and then they loaded it to the client. I mean, not only JSON data but the full javascript executable code with the application.
I was not fully sure if this alone could cause the slowness so we started some profiling of both PHP and Javascript code and finally we decided to rewrite the application to adhere to Writing a Big Application in Ext.
To keep it short, by the end of the week, when done, the very same Ext window opened in less than 500ms. Well done, isn’t it.
Anyway, what could be the reasons why it was that slow in the first place?
- The server needs some time to generate the javascript. It may not be a lot, however, if you count all database accesses, decision logic and javascript code generation it is probably more than to create a JSON string with data only.
- The embedded javascript adds to the size of server-client data transfers. This didn’t attribute too much to the time in this particular case but it can get worse if the internet connection is slower.
- The embedded javascript cannot be cached at client. If the application is in a referenced javascript file then, if the server is configured properly, it is cached at client. Of course, the initial load takes longer but then only the html markup and JSON data are actually transferred from the server.
- And probably worst: In this kind of loading a request is sent to deliver a component, let’s say a grid. The grid code is returned, the grid is instantiated and rendered and now it needs data. So another request is sent to deliver the JSON data. It’s just too much.
Take this please as my observation and my experience. There may be cases when component loading can work better and faster and I’ll be only glad if I’ll have an opportunity to see such application.
- Ext, Angular, React, and Vue - 27. June 2019
- The Site Resurgence - 11. February 2018
- Configuring ViewModel Hierarchy - 19. June 2015
2 Responses
https://secure.workbooks.com/login?demo=1
I have been check this website, I hope the creator will tell us how to create complex layout with fast renderer..
Saki, what do you think of the approach these guys took?:
https://secure.workbooks.com/login?demo=1
The implementation appears to use server -generated markup but the application remains quite fast, with good use of memory.