Received: from malur.postgresql.org ([217.196.149.56]) by arkaria.postgresql.org with esmtp (Exim 4.84_2) (envelope-from ) id 1dIfQB-0003nj-HL for pgadmin-hackers@arkaria.postgresql.org; Wed, 07 Jun 2017 18:11:07 +0000 Received: from localhost ([127.0.0.1] helo=postgresql.org) by malur.postgresql.org with smtp (Exim 4.84_2) (envelope-from ) id 1dIfQA-0005Mq-Jx for pgadmin-hackers@arkaria.postgresql.org; Wed, 07 Jun 2017 18:11:06 +0000 Received: from makus.postgresql.org ([2001:4800:1501:1::229]) by malur.postgresql.org with esmtps (TLS1.2:ECDHE_RSA_AES_256_CBC_SHA384:256) (Exim 4.84_2) (envelope-from ) id 1dIfPu-0004RY-1D for pgadmin-hackers@postgresql.org; Wed, 07 Jun 2017 18:10:50 +0000 Received: from mail-vk0-x236.google.com ([2607:f8b0:400c:c05::236]) by makus.postgresql.org with esmtps (TLS1.2:ECDHE_RSA_AES_256_CBC_SHA1:256) (Exim 4.84_2) (envelope-from ) id 1dIfPq-0005fz-2n for pgadmin-hackers@postgresql.org; Wed, 07 Jun 2017 18:10:48 +0000 Received: by mail-vk0-x236.google.com with SMTP id g66so8372521vki.1 for ; Wed, 07 Jun 2017 11:10:45 -0700 (PDT) DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=pivotal-io.20150623.gappssmtp.com; s=20150623; h=mime-version:in-reply-to:references:from:date:message-id:subject:to :cc; bh=rVASkSrEDiK265jCEpEnA8YB/ywJkI8YWb4jIUPUGas=; b=emBTBpnPkT0e5tNHYRtwYc8fYTGFPhhkoCH3FhpGdeTWXHw+PrGmwHmXpZcowngw6o Emiubg4+Qy37Txny/vPwffeOX/6zZC/yJM6gN/papUDvFiGX5tJz7zbnPA8XJ36+I+LC EYiPNAAApnAjXv4zeuyGT7F9Jw++9VDliu4thKVl8VjCRtCxWAxUJ4LPEMzPwsE8yUUB d1Era2IwsGOL3QGctBsh7dLxU3Io6Ba4/EnlLoj69Quyil5JSzd/QyDjtiSNRI517lPs GEniM5PG5CNUtOjahnXn1zxoE4xfY1Ac2utZV6zfAWD59BZK2ltep1wKKkFtgowvmgSX O/3w== X-Google-DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=1e100.net; s=20161025; h=x-gm-message-state:mime-version:in-reply-to:references:from:date :message-id:subject:to:cc; bh=rVASkSrEDiK265jCEpEnA8YB/ywJkI8YWb4jIUPUGas=; b=gaq83MpI0RLmMFnhkPejkD1JSI8X6V6H3C2lo2VbEn1tssnNKy8tfbUXlB811V18Vd W1klFbT3Z6XSNaTfm9drE4AhlHK3PY0axcOjuYiIag0kRHaCB5ttWevBPVIT4Zwg/azb Sj1JB3WBLYAwGkPIC8d9cHaUq8f3Gq1oUiibLqtkJ8G2yrwOvbEsBJ7qdlEKA1jtGiAc qoRfbW7zPuXQ1em377NroKodFIz7s6h+J95Nby80UmYgBrKC9JGy3nNN0wBc/OUw1UmX HRVx8njJp/ozkXw/JQDnYDW/Gk9U+ZMVtGr15kg2I3zObTI1CFZbk684GbBfDKnrhEoy DUMQ== X-Gm-Message-State: AODbwcDGDdfNmh5NJyYkOJMXozCzhETiKqh/ll34v6zRuGvnlupcIhj4 dh+5XOR/c5eA93WY0za66kjZmq5nuwUr X-Received: by 10.31.16.65 with SMTP id g62mr15573840vki.49.1496859044831; Wed, 07 Jun 2017 11:10:44 -0700 (PDT) MIME-Version: 1.0 Received: by 10.103.14.198 with HTTP; Wed, 7 Jun 2017 11:10:04 -0700 (PDT) In-Reply-To: References: From: Joao Pedro De Almeida Pereira Date: Wed, 7 Jun 2017 14:10:04 -0400 Message-ID: Subject: Re: [pgAdmin4][Patch]: Load module's JS files only when required To: Dave Page Cc: Surinder Kumar , pgadmin-hackers Content-Type: multipart/alternative; boundary="001a114324a2a5a608055162a74d" X-Pg-Spam-Score: -2.6 (--) List-Archive: List-Help: List-ID: List-Owner: List-Post: List-Subscribe: List-Unsubscribe: X-Mailing-List: pgadmin-hackers Precedence: bulk Sender: pgadmin-hackers-owner@postgresql.org --001a114324a2a5a608055162a74d Content-Type: text/plain; charset="UTF-8" Hello Dave, By the description on the email, it looks like the process is very similar to the Grunt process that we were talking about, but without the patch, it is a bit hard to get more specifics. Can you forward the patch so we can take a look at it. We believe that every effort done to eliminate templated Javascript and CSS files is well worth it, and should be followed. Thanks Joao & Sarah On Tue, Jun 6, 2017 at 9:39 AM, Dave Page wrote: > Hi > > On Mon, Jun 5, 2017 at 10:22 AM, Surinder Kumar > wrote: > > Hi Dave, > > > > Please find attached patch for minifying CSS files and optimize images > using > > Webpack. > > > > Steps to run: > > > > 1) After applying patch, go to web directory and run npm install on > terminal > > to install packages which are used to parse/minify CSS files. > > > > 2) Run npm run build which creates dist folder inside web/pgadmin/static/ > > directory to store processed images, fonts and css files. > > > > 3. Set DEBUG = False in config_local.py and then run python pgAdmin.py to > > start server. > > I kept generated main.css and overrides.css conditional in base.html to > load > > them only when debug mode is False > > > > > > After running "npm run build", following files/directories are generated: > > > > 1) main.css - about 20 vendor CSS files are packed into this file and > more > > importantly the paths to images are preserved. > > > > 2) overrides.css - it contains bootstrap.overrides.css and pgadmin.css, > they > > has to be packed separately and loaded after all CSS files are loaded > > because the purpose of these files is to override the vendor or modules > css. > > > > 3) img - it contains the images used in CSS files. The name of image > files > > can also be hashed names for caching purpose which we can use. > > > > 4) fonts - it contains the fonts used in fontawesome.css and other css > > files. > > > > This is a simple patch to demonstrate how CSS files will be minified with > > Webpack. > > I think this is a good, simple method. It handles debug v.s release, > and of course, any plugin modules can include their own images/CSS > without even having to worry about webpacking if installed later. > > > For now it minifies only vendor CSS files, I will add modules static > files > > in the list later on. > > I think we need to do that to get a better idea of the benefits. We > also need to get some of the JS code in there as well (Ashesh should > be able to help with that - he told me he's de-templatised a lot of > that now). > > > Any thoughts on minifying template CSS files which are built dynamically > and > > loaded with dependency on other modules? > > Let's look at why they are templates. Is that required, or could they > be made static? > > > Also, I looked into Flask-webpack which generates bundled assets using > > Webpack(webpack.config.js) and provide additionally global template tags > to > > use in Jinja templates. > > > > But it might not work with latest version of Webpack as this repo is not > > updated since last 2 years. I need to check with latest version and I > will > > update on this. > > Given how straightforward this seems to be, I'm not sure it's needed. > > Joao, any comments? > > Nice work - thanks! > > -- > Dave Page > Blog: http://pgsnake.blogspot.com > Twitter: @pgsnake > > EnterpriseDB UK: http://www.enterprisedb.com > The Enterprise PostgreSQL Company > --001a114324a2a5a608055162a74d Content-Type: text/html; charset="UTF-8" Content-Transfer-Encoding: quoted-printable
Hello Dave,
By the description on the email, it looks = like the process is very similar to the Grunt process that we were talking = about, but without the patch, it is a bit hard to get more specifics.
=
Can you forward the patch so we can take a look at it.

<= /div>
We believe that every effort done to eliminate templated Javascri= pt and CSS files is well worth it, and should be followed.

Thanks
Joao & Sarah

On Tue, Jun 6, 2017 at 9:39 AM, Dave P= age <dpage@pgadmin.org> wrote:
Hi

On Mon, Jun 5, 2017 at 10:22 AM, Surinder Kumar
<surinder.kumar@enter= prisedb.com> wrote:
> Hi Dave,
>
> Please find attached patch for minifying CSS files and optimize images= using
> Webpack.
>
> Steps to run:
>
> 1) After applying patch, go to web directory and run npm install on te= rminal
> to install packages which are used to parse/minify CSS files.
>
> 2) Run npm run build which creates dist folder inside web/pgadmin/stat= ic/
> directory to store processed images, fonts and css files.
>
> 3. Set DEBUG =3D False in config_local.py and then run python pgAdmin.= py to
> start server.
> I kept generated main.css and overrides.css conditional in base.html t= o load
> them only when debug mode is False
>
>
> After running "npm run build", following files/directories a= re generated:
>
> 1) main.css -=C2=A0 about 20 vendor CSS files are packed into this fil= e and more
> importantly the paths to images are preserved.
>
> 2) overrides.css - it contains bootstrap.overrides.css and pgadmin.css= , they
> has to be packed separately and loaded after all CSS files are loaded<= br> > because the purpose of these files is to override the vendor or module= s css.
>
> 3) img - it contains the images used in CSS files. The name of image f= iles
> can also be hashed names for caching purpose which we can use.
>
> 4) fonts - it contains the fonts used in fontawesome.css and other css=
> files.
>
> This is a simple patch to demonstrate how CSS files will be minified w= ith
> Webpack.

I think this is a good, simple method. It handles debug v.s release,
and of course, any plugin modules can include their own images/CSS
without even having to worry about webpacking if installed later.

> For now it minifies only vendor CSS files, I will add modules static f= iles
> in the list later on.

I think we need to do that to get a better idea of the benefits. We
also need to get some of the JS code in there as well (Ashesh should
be able to help with that - he told me he's de-templatised a lot of
that now).

> Any thoughts on minifying template CSS files which are built dynamical= ly and
> loaded with dependency on other modules?

Let's look at why they are templates. Is that required, or could they be made static?

> Also, I looked into Flask-webpack which generates bundled assets using=
> Webpack(webpack.config.js) and provide additionally global template ta= gs to
> use in Jinja templates.
>
> But it might not work with latest version of Webpack as this repo is n= ot
> updated since last 2 years. I need to check with latest version and I = will
> update on this.

Given how straightforward this seems to be, I'm not sure it's neede= d.

Joao, any comments?

Nice work - thanks!

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

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

--001a114324a2a5a608055162a74d--