Re: [pgAdmin4]: Webpacking of static JS/CSS

From: George Gelashvili <ggelashvili(at)pivotal(dot)io>
To: Surinder Kumar <surinder(dot)kumar(at)enterprisedb(dot)com>
Cc: pgadmin-hackers <pgadmin-hackers(at)postgresql(dot)org>, Matthew Kleiman <mkleiman(at)pivotal(dot)io>
Subject: Re: [pgAdmin4]: Webpacking of static JS/CSS
Date: 2017-06-29 20:59:11
Message-ID: CAHowoHYNQO6RRt6JbBWy0GU3J_09WD_mtW0NeMPQePpMJGHbTQ@mail.gmail.com
Views: Raw Message | Whole Thread | Download mbox | Resend email
Thread:
Lists: pgadmin-hackers

Hey Surinder,

​1. ​
> Tools
> ​(tools.js)​ - It will contain all JS modules under tools directory
>
>
> ​2. ​
> Browser
> ​(browser.js)​ - It will contain all JS modules under browser directory
>

By under, do you mean every javascript file recursively under the browser
directory?

> ​4. Common.js and/or vendor.js - Common.js will contains all common js
> files/libraries shared by modules like backform, backbone, underscore etc.
>

We're okay with bundling vendorized code for a first pass to webpack
everything. The goal should be to pull code out of the shared javascript
bundle as we unvendor dependencies.
For naming: Common.js is an overloaded term (
http://requirejs.org/docs/commonjs.html). We prefer vendor.js. Will there
be non-vendor code put into this bundle?

> Entry points JS: main.js - It will load above modules ascynchronusly or it
> will be minified version of all.
> define('', ['common', 'tools', 'browser', 'grid'], function(...) {});
>
or these modules can also be loaded using dependency; For example, load
> grid.js on database node expand.
>

Could you go into some more detail on this decision? How would main.js be
used in the app? Is the idea to still use define from require.js in
javascript being webpacked?

​Currently I am working on converting 'requirejs config shim dependency
> into webpack' using imports-loader and exports-loader which is taking
> time and will look for alternative if it doesn't works. Once dependency is
> properly defined, the task to generate other module JS will become quite
> easy.
>

We used imports-loader and exports-loader for tests (see
web/webpack.test.config.js)

> I also found, the CSS imported using import 'slickgrid/slick.grid.css'; statement
> is put into <style></style> tags
> ​ in html​
> , instead must be loaded separately as a file so overrides.css can work.
>

Those three css files from slickgrid need to be brought into the
application somehow because they won't be available after building the app,
since SlickGrid has been un-vendored. We opted to webpack the css together
with the required slickgrid js files. Can the overrides.css files be
modified to work with this bundle? Which overrides.css file is not working
now?

Cheers,
Matt and George

In response to

Responses

Browse pgadmin-hackers by date

  From Date Subject
Next Message Matthew Kleiman 2017-06-29 21:07:26 Re: [pgadmin-hackers] Invitation to a Community Developer Forum
Previous Message pgAdmin 4 Jenkins 2017-06-29 14:13:29 Jenkins build is back to normal : pgadmin4-master-python27 #211