Apostrophe CMS Main Site Forum Home

Lean front-end: is it possible to load assets only on some pages or modules?


#1

I’ve been undisciplined studying apostrophe for a year and a few. So, I’m still a newbie, but I think maybe I could contribute to the lean philosophy.

This decision of remove jQuery or let the users choose not to use it was very good. jQuery was essential a decade ago, but now it’s kind of redundant, because most browsers provides a similar core api. Congratulations.

I understand that load everything onetime and let the browser cache is great, but just imagine… some modules need tons of javascript and css to work, and other modules not. Why load tons of javascript on a page that won’t use it? Imagine a user on a pieces-page index that only list a company team members. Why the javascript and the css related to the company e-commerce system would be loaded on that page?

I look at pages source code generated by apostrophe and I see lots of modules loaded. Everywhere. Why?

Yet… imagine a piece edited only by admins, but accessible to guests. This piece need a heavy javascript to edit action, but none to view. And the pushAssets ‘when’ option only have three options: always, user and now lean. Guests will have to load the script needed to edit by won’t use it.

Wouldn’t it be nice to have another load conditions? For instance:

  • By path, like routes. Example: load xyz.js only on path ‘/products/*’.
  • By user permissions. Example: load xyz.js only if user is allowed to edit ‘products’.

The same thought applies to css. On a project I’m working, admins will use apostrophe bars, menus and uis to edit pieces, but guests don’t. I still haven’t figured out how to remove them easily, when users are not admins. Despite it’s not a big deal, lean would be better.


#2

One way to only load assets when necessary is to use a player to handle JS for the thing it’s related to. The docs cover this for widgets, but it can also be used for pieces pages and other things. That could be used to bring in third party libraries as well as execute code specific to the context. [Here’s another example from the open-museum project](https://github.com/apostrophecms/apostrophe-open-museum/blob/master/lib/modules/locations-widgets/public/js/always.

The same general method of pushing assets in a context can be used for CSS as well. How much of what you’re thinking about could be addressed through that method? What are the problems that it wouldn’t cover?

For the purposes of this I’m really only thinking about the logged-out experience since being logged in does require additional assets to work the editing experience.


#3

As I said, it’s not a big deal. I’m just bringing a conceptual issue that bugs me since I’ve started with apostrophe. And seems like is related to the lean front-end discussion.

Your suggestion about using the play method is ok. Thanks, I didn’t think of that. Yet, this implies having a tiny javascript per module loaded on all pages, always, to load bigger javascripts when needed (if I understood it right). I was imagining… on a far future… write my own methods to load assets by path, or only on some modules routes.

So, the pushAssets method could provide this features. Like a “where” option. The assets loaded on a page would be chosen server side, by modules, avoiding load everything, most of the time, everywhere.

Maybe I’m too concerned about optimization, but that’s because I hate heavy websites and I’m designing an app to be responsive (I think mobile devices have limited resources… Am I wrong?).

About the logged-in users that requires editing experience: on my project will exist a few admins with full permissions and a lot of guest that will edit content only contextually, without using the fantastic apostrophe modals, therefore not needing most of the editor assets provided. Again: it’s not a big problem, but If I have the time to remove they, I will. And if I could have it done just by changing an option (maybe “who”?), wow, would be great.

This is something I wouldn’t be able to write and make a pull request, because I don’t understand what is behind the pushAssets, and that’s why I’m sharing. Maybe you like it and maybe it’s easy to achieve… and someone decides to write it for me hehe :relaxed:

Thanks again.


#4

We’ve thought about this a lot, but for most Apostrophe sites, most of the frontend js is used by most users before they leave and/or just isn’t that big. So it’s worth loading it in a single bundle. The exceptions are things like google maps or ckeditor, and we load both of those on demand.


#5

You all are right. Probably is too expensive to code to save just a few bytes of memory.

After this conversation and a little more research, I’ve changed my mind and decided to take advantage of modals, customizing them, instead of write more code to edit content contextually. It’s already there and works very well, why not use it?

Thanks.