? Pending

User tests: Successful: Unsuccessful:

avatar dgt41
dgt41
4 Sep 2017

Pull Request for Issue # .

Summary of Changes

Glimpse of Joomla 4 fully componentized

This PR moves the menu script from the template to the respected module (mod_menu) and adds the dropdown script for the status module (mod_status, on the top right corner).
Both scripts are custom elements!!!

So now the dashboard is the first page in the administrator area the implements fully custom elements!

What does it mean?

Well there is a reduction in the scripts size over 250% which of course results to an exactly same amount of reduction in the parse time and execution time of the browser!!! Do the math...

And here's the proof:
Joomla 3.7.5, total scripts size: 148.791Kb
screen shot 2017-09-04 at 20 17 35

Joomla 4.0 pre-alpha, total scripts size: 57.24Kb
screen shot 2017-09-04 at 20 16 46

Testing Instructions

Apply patch, menu and top right links (user & bell icon) still functioning as before

Expected result

Actual result

Documentation Changes Required

a14863f 4 Sep 2017 avatar dgrammatiko more
avatar joomla-cms-bot joomla-cms-bot - change - 4 Sep 2017
Category Modules Administration Templates (admin) JavaScript
avatar dgt41 dgt41 - open - 4 Sep 2017
avatar dgt41 dgt41 - change - 4 Sep 2017
Status New Pending
avatar C-Lodder
C-Lodder - comment - 4 Sep 2017

Update checks arent even minified, so scripts size is even smaller :)

avatar alikon
alikon - comment - 4 Sep 2017

i like that (250%) number
i hope to see "shortly" same number from frontend too
?

avatar dgt41
dgt41 - comment - 4 Sep 2017

@alikon expect more than 300% reduction for the front end scripts size. Joomla 4 will be a good base for delivering mobile ready sites, as long as 3rd PD follow the same path

avatar C-Lodder
C-Lodder - comment - 5 Sep 2017

Nearly there. Basic functionality is working fine, however navigating via a keyboard seems a bit broken.

Compare against the 4.0-dev branch and you'll see what I mean

avatar dgt41
dgt41 - comment - 5 Sep 2017

@C-Lodder most probably is coming from wrong context (the keyboard listening functions is bound to the wrong element). Should be easy to fix.
There is is bigger issue that needs to be solved here: the workflow for web components/custom elements that are not part of the other repo, do we:

  • create a srcWebComponents folder (or something similar) in the root
  • deal in the other repo and just import
  • beef up grunt to deal with the source (same folder, reads a specific file and creates the minified es6 + the transpiled ones)

@wilsonge @mbabker any input will be welcome here

avatar mbabker
mbabker - comment - 5 Sep 2017

If you need to put raw undistributed resources into this repo use the build folder, that already has a plethora of stuff.

avatar C-Lodder
C-Lodder - comment - 6 Sep 2017

@dgt41 - I'd say lets put them in the other repo but in src/joomla. We can then continue to work on them as normal. Then beef up grunt a little and use the following paths when pulling them in:

official components

media/vendor/webcomponents/xxx

components for Joomla

media/system/js/webcomponents/xxx

thoughts?

avatar dgt41
dgt41 - comment - 6 Sep 2017

@C-Lodder importing all scripts has a huge negative in the PR workflow, someone needs to clone Joomla repo and the custom element repo. Do the work in the ce repo and copy paste to the actual Joomla folder to test. The basic UI components its ok to be another repo, but fields and components/modules/plugins need to stay in the same repo for easier bug fixing/code improvements. TBH I'm doing that for some time and it's way too hard.

media/system/js/webcomponents/xxx

That also cannot be good option for few reasons:

  • web components use the relative path code in JHtml, means that the correct path would be media/system/webcomponents/xxx, Note there is no js folder involved
  • adding uncompiled scripts to the above location, even if we beef up grunt etc, we are going to deliver uncompiled scripts as well, not a good idea (or we need to unnecessarily complicate the build script...)
  • we need to differentiate old ES5 script from ES6 as much as possible, think ESLint, Hound, airBnB CS

I think build/webcomponents is a good option in conjunction with the beefed up grunt (or shall we go to gulp or even web pack? Although such a move is a pretty big task on it's own)

avatar roland-d roland-d - test_item - 9 Sep 2017 - Tested successfully
avatar roland-d
roland-d - comment - 9 Sep 2017

I have tested this item successfully on a14863f

Here are the sizes before and after applying the patch

Page | Before Chrome / FireFox | After Chrome / FireFox
Control Panel | 219KB / 229.15KB | 62.3KB / 72.98KB
Article list | 200KB / 209.36KB | 200KB / 208.81KB
Category list | 241KB / 249.72KB | 241KB / 249.17KB
User list | 231KB / 239.96KB | 231KB / 239.41KB
Extension Man | 200KB / 209.36KB | 200KB / 208.81KB

So there is a huge gain on the control panel, other pages it has no effect but I think this is as expected but it would be great if the same can be done for other pages.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/17868.

avatar FPerisa FPerisa - test_item - 26 Oct 2017 - Tested unsuccessfully
avatar FPerisa
FPerisa - comment - 26 Oct 2017

I have tested this item ? unsuccessfully on a14863f

Scripts are a lot smaller, yes! But the bell and user icon on the top right corner are not working anymore. Before the patch they showed their boxes. Now when I click on them, nothing happens :/
Windows Chrome v62.0.3202.62 and Firefox v56.0.1, testet on Joomla 4.0


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/17868.

avatar FPerisa
FPerisa - comment - 26 Oct 2017

I have tested this item ? unsuccessfully on a14863f

Scripts are a lot smaller, yes! But the bell and user icon on the top right corner are not working anymore. Before the patch they showed their boxes. Now when I click on them, nothing happens :/
Windows Chrome v62.0.3202.62 and Firefox v56.0.1, testet on Joomla 4.0


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/17868.

avatar dgrammatiko dgrammatiko - change - 21 May 2018
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2018-05-21 20:02:07
Closed_By dgrammatiko
Labels Added: ?
avatar dgrammatiko dgrammatiko - close - 21 May 2018

Add a Comment

Login with GitHub to post a comment