Feature #12664

Idea about faster loading modules

Added by Kay Strobach about 3 years ago. Updated 11 months ago.

Status:Closed Start date:2011-01-31
Priority:Must have Due date:
Assignee:Kay Strobach % Done:

100%

Category:- Spent time: -
Target version:-
TYPO3 Version:4.6 Complexity:
PHP Version:
Votes: 1 (View)

Description

Hello guys,

using 4.5 since trunk now i do have a suggestion how to speed up module loading in backend rapidly ;) (It's still fast - but can be even more faster)

Step 1:
Use an ExtJS CardLayout for the right Module Frame.

Step 2:
Old modules get an iframe (eventually only one) in that CardLayout(Like Tabs but without userselectable card - needs to be selected via activeCard setting).
New Modules get an ExtPanel.

Step 3:
Event about changed env:
- module activated
- module deactivated
- pageselected
- ...

Using that the new modules like extmgm, trash, EXT:ks_sitemgr and others get the change to transfer only changed parts (grid stores, etc.) and thus it makes UI faster.

What do you think about that?

Regards
Kay

cards.zip - demo ext to add a card (for em, page, file_list) (17.1 kB) Kay Strobach, 2011-07-18 11:06

cardlayout_1px.png (938 Bytes) Björn Pedersen, 2011-07-21 08:38

cards.zip - example extjs extensions for be (23.5 kB) Kay Strobach, 2011-07-22 11:26


Related issues

related to Core - Task #30645: Revert "[FEATURE] Speed-up Backend with CardLayout" Resolved 2011-10-08
related to Core - Task #28590: Backport some changes for 4.6 to 4.5 as discussed before ... Rejected 2011-07-30
related to Core - Bug #28604: Switching from workspace module to another module does no... Resolved 2011-07-31
duplicated by Core - Feature #24901: Idea about faster loading modules Rejected 2011-01-31
precedes Core - Bug #28523: Problems with new Card Layout in backend modules Closed 2011-07-27
precedes Core - Feature #28384: Add ExtJS Xtype for BE Modules Resolved 2011-07-22

Associated revisions

Revision 120d38d1
Added by Kay Strobach over 2 years ago

[FEATURE] Speed-up Backend with CardLayout

This patch adds a cardlayout to the Backend.
BE Modules may register themselves to the page renderer and add cards
directly to the layout.

To achieve that, a new way of adding JavaScript to the BE is available.
$GLOBALS['TBE_MODULES']['_JSINIT']['key'] = 'JSCODE';

This way changing the module is quite fast.

To keep old behaviour the iframe is loaded with the module root
url if the module item of an already opened module is clicked.

The Extension Manager or the About module can be simply reworked to support
that feature.

Other new features like the dashboard depend on this change too.

API hints:

JavaScript
- in old times we used:
TYPO3.Backend.ContentContainer.setUrl(uri);

Now please use
TYPO3.ModuleMenu.App.openInContentFrame(uri, params);
The "new" function was available before and knows the current
module. This function uses the correct iframe - if it is allowed to
load the module.

PHP
- added new Parameter to t3lib_extMgm::addModule to disable the card
autocreation on demand

Change-Id: I2bf206b7154c20575b0d2ce72150621b2dfbdb35
Resolves: #12664
Releases: 4.6, 4.5
Reviewed-on: http://review.typo3.org/3370
Reviewed-by: Philipp Gampe
Tested-by: Philipp Gampe
Tested-by: Soren Malling
Reviewed-by: Xavier Perseguers
Tested-by: Xavier Perseguers

History

Updated by Jens Hoffmann about 3 years ago

  • Category changed from Usability to Technical
  • Status changed from New to Rejected
  • Priority changed from Should have to Could have

Hy,

this isn't a usability thing, beside good performance is good usability.
Open a Feature Request in the 4.6 Core Team Issue Tracker, please.

Greez Jens

Updated by Jens Hoffmann about 3 years ago

  • Status changed from Rejected to Closed

Thx for your quick reaction.

In general I got to say, I thought,
it was implemented like that :)

Greez Jens

Updated by Kay Strobach almost 3 years ago

  • Status changed from Closed to New
  • Assignee set to Kay Strobach

still valid.

had many talks to steffen kamper about that - will upload patch soon.
also got votes from xavier ;)

thanks in advice
Kay

Updated by Mr. Hudson almost 3 years ago

Patch set 1 of change I2bf206b7154c20575b0d2ce72150621b2dfbdb35 has been pushed to the review server.
It is available at http://review.typo3.org/3370

Updated by Kay Strobach almost 3 years ago

Example of use for extmgm:

TYPO3.Viewport.Panels.push({
    html:'<iframe width="100%" height="100%" src="mod.php?M=tools_em" frameborder="0"></iframe>',
    id  :'typo3-card-tools_em'
});

ideally the modules do not use iframes but real extjs panels ;)

Updated by Kay Strobach almost 3 years ago

adding js to the body should be done like it's done for the toolbars:

example in EXT:sitemgr:

EXT:sitemgr/ext_tables.php

if (TYPO3_MODE == 'BE') {
    $GLOBALS['TYPO3_CONF_VARS']['typo3/backend.php']['additionalBackendItems'][]
    = t3lib_extMgm::extPath($_EXTKEY).'Classes/ToolbarItems/CustomerSelector/Hook.php';
}

EXT:sitemgr/Classes/ToolbarItems/CustomerSelector/Hook.php

include_once(t3lib_extMgm::extPath('sitemgr').'Classes/ToolbarItems/CustomerSelector/Item.php');
$GLOBALS['TYPO3backend']->addToolbarItem('sitemgr', 'Tx_Sitemgr_ToolbarItems_CustomerSelector_Item');

EXT:sitemgr/Classes/ToolbarItems/CustomerSelector/Item.php

class Tx_Sitemgr_ToolbarItems_CustomerSelector_Item  implements backend_toolbarItem {
    //... add some functions and important the render function
}


Suggestion add an easy way (array) to add js files to the backend.

Regards
Kay

Updated by Jens Hoffmann almost 3 years ago

  • Status changed from New to Closed
  • Priority changed from Could have to Won't have this time

Hy Kay.

ONCE AGAIN. LAST TIME. NO!! Technical stuff here!
Don't reopen a closed ticked! Stop this "spam" here.
Open a issue at the core tracker instead. NOT here!

Jens.

Updated by Kay Strobach almost 3 years ago

  • Tracker changed from Feature to Suggestion
  • Project changed from TYPO3 CMS Usability Team to Skin Team
  • Category deleted (Technical)
  • Status changed from Closed to New
  • Priority changed from Won't have this time to Should have
  • Target version deleted (TYPO3 4.6)

Hi Jens just forgott to move the entry. ...

It's done now. If the skin team is invalid too - please move it to the Core.

Thanks
Kay

Updated by Kay Strobach almost 3 years ago

  • Tracker changed from Suggestion to Feature
  • Project changed from Skin Team to Core

Updated by Mr. Hudson almost 3 years ago

Patch set 2 of change I2bf206b7154c20575b0d2ce72150621b2dfbdb35 has been pushed to the review server.
It is available at http://review.typo3.org/3370

Updated by Stefan Neufeind almost 3 years ago

To my understanding these cards stay opened (just hidden) in the browser, right? So could it actually be that we're putting much more load on the client this way? Or might it actually be able to reuse components this way because components can be shared between cards? But this would require them to use more than just <iframes> inside the cards, right?

It looks like cards get loaded as soon as the backend itself loads. Might it make sense to "lazy-load" cards cards (load their contents on first use; or maybe even delay instantiaing of cards)?

Updated by Kay Strobach almost 3 years ago

@Stefan,

the idea of the cardlayout is to be prepared for new be modules which are mainly developed with extjs.
These modules won't need an iframe with a additional instance of extjs, but can place their code directly in the be.
The modules can also register for events on the pagetree and it's possible to drag'n'drop elements from the pagetree to such modules ;)

The iframe is just an example as it would take some time to rewrite the extmgm (1-2 days) - i think (old one will be removed with that change though).

With a good code architecture modules can be written so, that they work either with the card layout or with the old fashioned iframe ;)
I will can examples lateron ;)

Hope that helps to understand the change ;)

Thanks in Advance
Kay

Updated by Mr. Hudson almost 3 years ago

Patch set 3 of change I2bf206b7154c20575b0d2ce72150621b2dfbdb35 has been pushed to the review server.
It is available at http://review.typo3.org/3370

Updated by Steffen Kamper almost 3 years ago

  • TYPO3 Version set to 4.6

just some words i also commented in gerrit:

Make an API to register an easy way.
First, don't use Panel, this is too general. I made a suggestion:

TYPO3.Viewport.ContentCards = {
    ...
   addContentCard: function(config, name) {
     this.add(Ext.apply(config, {
        id: 'typo3-card-' + name
     });
   }
}

then also implement something like this in php, which adds cards inline.

Updated by Kay Strobach almost 3 years ago

@event

each card is allowed to register to any event of any extjs component ;)
This way it's possible to get the params from the tree instantly onclick.

@api:

ok i thought panels should not be added during runtime. But it can be usefull though.

Updated by Mr. Hudson almost 3 years ago

Patch set 4 of change I2bf206b7154c20575b0d2ce72150621b2dfbdb35 has been pushed to the review server.
It is available at http://review.typo3.org/3370

Updated by Kay Strobach almost 3 years ago

  • File cards.zip added
  • % Done changed from 0 to 60

Updated by Mr. Hudson almost 3 years ago

Patch set 5 of change I2bf206b7154c20575b0d2ce72150621b2dfbdb35 has been pushed to the review server.
It is available at http://review.typo3.org/3370

Updated by Mr. Hudson almost 3 years ago

Patch set 6 of change I2bf206b7154c20575b0d2ce72150621b2dfbdb35 has been pushed to the review server.
It is available at http://review.typo3.org/3370

Updated by Mr. Hudson almost 3 years ago

Patch set 7 of change I2bf206b7154c20575b0d2ce72150621b2dfbdb35 has been pushed to the review server.
It is available at http://review.typo3.org/3370

Updated by Mr. Hudson almost 3 years ago

Patch set 8 of change I2bf206b7154c20575b0d2ce72150621b2dfbdb35 has been pushed to the review server.
It is available at http://review.typo3.org/3370

Updated by Mr. Hudson almost 3 years ago

Patch set 9 of change I2bf206b7154c20575b0d2ce72150621b2dfbdb35 has been pushed to the review server.
It is available at http://review.typo3.org/3370

Updated by Mr. Hudson almost 3 years ago

Patch set 10 of change I2bf206b7154c20575b0d2ce72150621b2dfbdb35 has been pushed to the review server.
It is available at http://review.typo3.org/3370

Updated by Mr. Hudson almost 3 years ago

Patch set 11 of change I2bf206b7154c20575b0d2ce72150621b2dfbdb35 has been pushed to the review server.
It is available at http://review.typo3.org/3370

Updated by Mr. Hudson over 2 years ago

Patch set 12 of change I2bf206b7154c20575b0d2ce72150621b2dfbdb35 has been pushed to the review server.
It is available at http://review.typo3.org/3370

Updated by Mr. Hudson over 2 years ago

Patch set 13 of change I2bf206b7154c20575b0d2ce72150621b2dfbdb35 has been pushed to the review server.
It is available at http://review.typo3.org/3370

Updated by Björn Pedersen over 2 years ago

With the latest patch I experience a 1px offset in the main window, see screenshot.

(Firefox 5.0/Linux)

Updated by Mr. Hudson over 2 years ago

Patch set 14 of change I2bf206b7154c20575b0d2ce72150621b2dfbdb35 has been pushed to the review server.
It is available at http://review.typo3.org/3370

Updated by Mr. Hudson over 2 years ago

Patch set 15 of change I2bf206b7154c20575b0d2ce72150621b2dfbdb35 has been pushed to the review server.
It is available at http://review.typo3.org/3370

Updated by Mr. Hudson over 2 years ago

Patch set 16 of change I2bf206b7154c20575b0d2ce72150621b2dfbdb35 has been pushed to the review server.
It is available at http://review.typo3.org/3370

Updated by Kay Strobach over 2 years ago

Updated by Xavier Perseguers over 2 years ago

  • Status changed from New to Under Review
  • Priority changed from Should have to Must have
  • Target version set to 4.6.0-beta1

Updated by Mr. Hudson over 2 years ago

Patch set 17 of change I2bf206b7154c20575b0d2ce72150621b2dfbdb35 has been pushed to the review server.
It is available at http://review.typo3.org/3370

Updated by Mr. Hudson over 2 years ago

Patch set 18 of change I2bf206b7154c20575b0d2ce72150621b2dfbdb35 has been pushed to the review server.
It is available at http://review.typo3.org/3370

Updated by Mr. Hudson over 2 years ago

Patch set 19 of change I2bf206b7154c20575b0d2ce72150621b2dfbdb35 has been pushed to the review server.
It is available at http://review.typo3.org/3370

Updated by Kay Strobach over 2 years ago

From Topic ML:typo3.v4:[TYPO3-dev] [TYPO3-v4] Change of Module switching behaviour in 4.6 (perhaps backport to 4.6) - Speedup Backend with Cardlayout


Hello guys,

based on 2 discussions started in February i pushed a patch to gerrit
[1] to speed up the switching of the backend a bit. This patch has a
small side effect: it changes the behaviour of the module menu.

You may also want to read the older articles about the cardlayout: [2][3]

First of all i will start with current master aka 4.5. be architecture.

> Currently there is a viewport which is like this one:
>
> +-----+-----+----------------+
> |                            |
> +-----+-----+----------------+
> |     |     |                |
> |  1  |  2  |       3        |
> |     |     |                |
> +-----+-----+----------------+
>
> The area 2 (pagetree, directory tree, ...) is hidden if the
> module doesn't need it - good.
>
> But any module in 3 is loaded as normal html page.
The idea of the patch is to modify field 3 to ensure, that modern extjs
based backend modules are not loaded again and again and again on every
module switch.
This modules can be imagined as: (em, recycler, powermail, sitemgr,
piwikintegration, ...) on

So how could this achieved:
Currently 3 is an so called iframepanel with a single iframe [7].
We change 3 to a normal panel, with layout:card [8], which first child
is the old style iframe panel.

Additionally we add an extra panel for each module (automatically).
These panels are rendered as cards.

So 3 consists of n different card-panel for every BE Module.

If you need to change from one card to another, there is no need to
reload the panel, as long as you do not change the page in the pagetree.

This way all the cards save their state if sensefull.

That means, that switching from listmodule back to pagemodule may show
you the previously edited form and not the overview page of the selected
page.

To keep it simple to reload the module, you may click on the modulemenu
again to force a reload.

Now back to the greatest positive effect:
ExtJS Modules are loaded with the Backend, that means, the may only need
time to reload their stores, but they won't need time to reload the
complete module. As more and more modules are done in extjs this should
be the way to go in my eyes.

You may also take a look in the issue on forge [4] or in gerrit [1].

From the Usability kind of View this patch changes the modulemenu from
beeing dumb buttons to something like intelligent tabs, which allow to
work faster, as useless loading is avoided.

Additionally to that change there is a small change that depends on that
change. A standardized way to style BE modules done with extjs [5], [6].

Regards
Kay

[1] https://review.typo3.org/#change,3370
[2] http://lists.typo3.org/pipermail/typo3-dev/2011-February/042621.html
[3] http://lists.typo3.org/pipermail/typo3-project-v4/2011-May/002236.html
[4] http://forge.typo3.org/issues/12664
[5] https://review.typo3.org/#change,3696
[6] http://forge.typo3.org/issues/28384
[7] -> see typo3/js/extjs/iframepanel.js
[8] http://dev.sencha.com/deploy/ext-3.4.0/docs/?class=Ext.layout.CardLayout
-- http://www.kay-strobach.de - Open Source Rocks TYPO3 .... inspiring people to share! Get involved: http://typo3.org

Updated by Xavier Perseguers over 2 years ago

  • % Done changed from 60 to 80

TYPO3 master: Change has been successfully cherry-picked as 120d38d1015117cc415482e7efec35430a5e3dfd.

Updated by Kay Strobach over 2 years ago

  • Status changed from Under Review to Resolved
  • % Done changed from 80 to 100

Updated by Xavier Perseguers about 2 years ago

  • Status changed from Resolved to Closed

Updated by Ernesto Baschny 11 months ago

  • Target version deleted (4.6.0-beta1)

Also available in: Atom PDF