Re: [pgadmin-hackers] [pgAdmin4][Patch]: Load module's JS files only when required

[Dave Page]

Hi

On Monday, May 22, 2017, Surinder Kumar 
wrote:

> Hi
>
> On Mon, May 22, 2017 at 4:22 PM, Dave Page  > wrote:
>
>> Hi
>>
>> On Monday, May 22, 2017, Surinder Kumar 
>> wrote:
>>
>>> Hi
>>>
>>> As per pgAdmin4 design, template JS files can either be preloaded or
>>> load when a specific node expands (by adding for e.g.: when: 'server').
>>>
>>> The JS files of several modules found to be loaded when pgAdmin4 loads
>>> which results in increasing:
>>>
>>>- the number of http requests
>>>- latency(greater request time)
>>>- pgAdmin4 load time
>>>
>>> *Tested on Firefox:*
>>>
>>> Before applying patch
>>>
>>>- http requests - 143
>>>- Content size - 3.4 MB
>>>- Load time: 4.1s (onload: 524ms)
>>>
>>> After applying patch
>>>
>>>- http requests: 68
>>>- Content size: 2.1 MB
>>>- Load time: 2.84s (onload: 481ms)
>>>
>>> This is great work!
>>
>> However (sorry!) - I'm planning on working on an alternative change on my
>> flight in a couple of hours. Joao has broken the Grunt code out of the
>> History tab patch for me to work with - the idea is something like:
>>
>> - We continue to migrate all the JS out of templates and into static
>> files whereever possible, using the client-side translation.
>>
> ​Yes. It will be then easier to cover most of the JS code for minify if
> client side ​translation is used.
>

Unfortunately, I looked at this on my flight and it looks like it'll be a
mammoth task. Many/most JS files also currently use the url_for template
function - so we need to figure out how to replace that with JS code first.


>
>> - We then have a set of Grunt tasks that will collect all the static JS,
>> minimise it, and pack it into a single file to load at startup.
>>
> ​I wrote few grunt tasks using r.js optimizer this weekend which:
>
> 1. Finds all static JS file recursively into the modules using regex
> pattern and then creates the tasks to minify each JS file and store its
> 'min.js' in same directory and loads min.js when current_app.debug is False
> else returns JS file.
>

> 2. A task to merge given list of CSS files into a single file and then
> minify using 'grunt-contrib-cssmin' task and then insert that file with
> 

Re: [pgadmin-hackers] [pgAdmin4][Patch]: Load module's JS files only when required

[Surinder Kumar]

Hi

On Mon, May 22, 2017 at 4:22 PM, Dave Page  wrote:

> Hi
>
> On Monday, May 22, 2017, Surinder Kumar 
> wrote:
>
>> Hi
>>
>> As per pgAdmin4 design, template JS files can either be preloaded or load
>> when a specific node expands (by adding for e.g.: when: 'server').
>>
>> The JS files of several modules found to be loaded when pgAdmin4 loads
>> which results in increasing:
>>
>>- the number of http requests
>>- latency(greater request time)
>>- pgAdmin4 load time
>>
>> *Tested on Firefox:*
>>
>> Before applying patch
>>
>>- http requests - 143
>>- Content size - 3.4 MB
>>- Load time: 4.1s (onload: 524ms)
>>
>> After applying patch
>>
>>- http requests: 68
>>- Content size: 2.1 MB
>>- Load time: 2.84s (onload: 481ms)
>>
>> This is great work!
>
> However (sorry!) - I'm planning on working on an alternative change on my
> flight in a couple of hours. Joao has broken the Grunt code out of the
> History tab patch for me to work with - the idea is something like:
>
> - We continue to migrate all the JS out of templates and into static files
> whereever possible, using the client-side translation.
>
​Yes. It will be then easier to cover most of the JS code for minify if
client side ​translation is used.

>
> - We then have a set of Grunt tasks that will collect all the static JS,
> minimise it, and pack it into a single file to load at startup.
>
​I wrote few grunt tasks using r.js optimizer this weekend which:

1. Finds all static JS file recursively into the modules using regex
pattern and then creates the tasks to minify each JS file and store its
'min.js' in same directory and loads min.js when current_app.debug is False
else returns JS file.

2. A task to merge given list of CSS files into a single file and then
minify using 'grunt-contrib-cssmin' task and then insert that file with

[pgadmin-hackers] [pgAdmin4][Patch]: Load module's JS files only when required

[Dave Page]

Hi

On Monday, May 22, 2017, Surinder Kumar > wrote:

> Hi
>
> As per pgAdmin4 design, template JS files can either be preloaded or load
> when a specific node expands (by adding for e.g.: when: 'server').
>
> The JS files of several modules found to be loaded when pgAdmin4 loads
> which results in increasing:
>
>- the number of http requests
>- latency(greater request time)
>- pgAdmin4 load time
>
> *Tested on Firefox:*
>
> Before applying patch
>
>- http requests - 143
>- Content size - 3.4 MB
>- Load time: 4.1s (onload: 524ms)
>
> After applying patch
>
>- http requests: 68
>- Content size: 2.1 MB
>- Load time: 2.84s (onload: 481ms)
>
> This is great work!

However (sorry!) - I'm planning on working on an alternative change on my
flight in a couple of hours. Joao has broken the Grunt code out of the
History tab patch for me to work with - the idea is something like:

- We continue to migrate all the JS out of templates and into static files
whereever possible, using the client-side translation.

- We then have a set of Grunt tasks that will collect all the static JS,
minimise it, and pack it into a single file to load at startup.

I'm currently thinking that non-debug/package builds will pre-pack
everything for installation. The aim is to have JS HTTP requests be down in
single figures to maximise loading time.

The are various issues to work through however; at least, how do we handle
debug builds, and how do we re-pack everything if a user installs a new
module (or updates something).

We'd also need to get rid of requirejs.



>
> Also, I found the http request for gravtar takes much time(depending on
> internet speed) to load which increases load time.
> https://secure.gravatar.com/avatar/d30aea269994f01256a99a8e7
> 154a328?s=100=retro=g
>
> Shouldn't the gravatar image be replaced with custom image ? I don't see
> its any use except displaying for user.
>

Maybe. Doesn't it load asynchronously though?


>
> *Patch changes:*
>
> 1) Load following modules JS when 'servers' node expands:
>
>-  Roles
>-  FileManager
>-  Backup
>-  Datagrid
>-  Grant wizard
>-  Import/Export, Maintenance & restore
>-  Sqleditor
>
> 2) Load Debugger JS when database node expands
>
> 3) Load Flotr2 when render function is called in dashboard.js
>
> 4) Load BigNumber library when sorting is performed on Statistics tab in
> backgrid.pgadmin.js
>
> 5) Remove 'backgrid.select.all' from dependency list(user_management.js)
> as it had no use.
>
> After applying this patch, Menu items such "Query tool", "Grant wizard"
> don't appear in Tools menu.
> I have logged an RM2424  to
> track this.
>

OK. Lets hold fire on this for now though, until I can PoC the work above.

Of course, any thoughts or comments are welcome.


-- 
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company