Jump to content

Re-thinking ProcessWire Admin system (thought experiment)


Jonathan Lahijani
 Share

Recommended Posts

For fun, I've been working on what you would call AdminThemeBootstrap to get a deeper understanding of ProcessWire's admin framework (maybe I'll release it one day but it's more of a pet project).  As you may know, the current admin system has a deep dependency on jQuery and jQuery UI (which is now deprecated in maintenance mode).  Things like the navbar dropdowns, tabs and accordions are jQuery UI based components, not (for example) UIkit's dropdown or Bootstrap's dropdown.

This has gotten me thinking about if there was (not that it's necessary) a comprehensive re-thinking of the admin, what libraries in today's world would be the ideal fit for a project like ProcessWire?

  • Like 10
Link to comment
Share on other sites

The next major upgrade to admin in general would be to support saving without reloading IMHO. This could be a SPA. But maybe unpoly or htmx would fit PW spirit better. Anyway, this seems like a gigantic task to tackle. And surely Ryan should decide if he is willing to do it now or ever.

  • Like 4
Link to comment
Share on other sites

On 1/18/2024 at 10:09 PM, Jonathan Lahijani said:

For fun, I've been working on what you would call AdminThemeBootstrap

That sounds like a huge task 🙂 

On 1/18/2024 at 10:09 PM, Jonathan Lahijani said:

which is now deprecated

Do you have any reference for that? From what I read it's "maintenance-only", so we'll not see any new features. That's a different story then I guess. But of course I agree that it would be nice to get a more modern looking/working backend. But compared to other CMSs I think it's still really not bad. And it's very well thought out for all the complexity it needs to handle.

https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/

But remembering when AdminThemeUikit was born I guess Ryan will come up with a genius solution once it is necessary 🙂 

  • Like 1
Link to comment
Share on other sites

20 minutes ago, bernhard said:

That sounds like a huge task 🙂 

Actually I just did a find for 'uk-' and replaced it with '', then replaced 'Uikit' with 'Bootstrap' and I was done!

Just kidding, it's a little more involved but I got very far and it's usable now.  I still need to clean up a few things.  Here's a screenshot (I need to style buttons among other things):

image.thumb.png.559f9b6ade185d0bd7f05af6e5bdb7c0.png

To be more clear, while I won't use it immediately, another reason why I personally am making a Bootstrap based admin theme is because it could theoretically take advantage of the many Bootstrap-based admin themes and components (examples), or at least some of the screens and layouts they provide.  That would be very convenient as I do see myself making more web-app type sites where it's purely using PW's backend.

@bernhardYou're right, it's not deprecated, but in maintenance only mode.  I don't know the inner-workings of jQuery UI but I would assume even though it's functional, browser capabilities are now much more robust and perhaps much of its capabilities are not using JavaScript's newer, native features?  Don't quote me on that, but it feels very old.  I see that CraftCMS uses jQuery UI as well.

  • Like 1
Link to comment
Share on other sites

1 hour ago, Jonathan Lahijani said:

browser capabilities are now much more robust and perhaps much of its capabilities are not using JavaScript's newer, native features

.. or even taking advantage of newer html5 developments. For example, <details><summary>. I guess the fundamental issue is that this is always a moving target, so it makes sense to not try and track the latest fashion, but to move when it is clear that the way forward is established and generally accepted.

  • Like 2
Link to comment
Share on other sites

On 1/19/2024 at 4:17 PM, MarkE said:

.. or even taking advantage of newer html5 developments. For example, <details><summary>. I guess the fundamental issue is that this is always a moving target, so it makes sense to not try and track the latest fashion, but to move when it is clear that the way forward is established and generally accepted.

Indeed.  Pico CSS, which is a minimal CSS framework, takes that approach:
https://v2.picocss.com/docs
https://v2.picocss.com/docs/accordion

I wish they supported tabs however.

  • Like 1
Link to comment
Share on other sites

46 minutes ago, Jonathan Lahijani said:

Pico CSS, which is a minimal CSS framework, takes that approach:

Yeah. The only thing is that other items don't automatically close (assuming you want that). Unfortunately 'name' grouping does not seem to be fully implemented yet.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
  • 4 weeks later...
On 1/19/2024 at 5:34 PM, Jonathan Lahijani said:

To be more clear, while I won't use it immediately, another reason why I personally am making a Bootstrap based admin theme is because it could theoretically take advantage of the many Bootstrap-based admin themes and components (examples), or at least some of the screens and layouts they provide.  That would be very convenient as I do see myself making more web-app type sites where it's purely using PW's backend.

I would love to swap out UIKit for Bootstrap. Big time.

Link to comment
Share on other sites

  • 1 month later...

@Mustafa-Online I made nice update today on this module after not having touched it in several weeks.  It's now basically complete but before I release it I still need to clean up some old code that's left over, make it work more nicely with SelectizeAll and provide similar overriding capabilities that the UIkit theme has.

This module includes Bootstrap Icons and it substitutes Font Awesome icons accordingly (I went through each one and found the equivalents!).  It also uses the Bootstrap navbar and dropdowns.  A side-effect of this is ajax-loaded dropdown content won't work in the first release.  I may backtrack on using Bootstrap dropdowns depending on if that becomes difficult.

Anyway, it's looking good overall.  If anyone is wondering why use this as opposed to UIkit, it may be beneficial if you are doing a lot of custom admin stuff and want to use pre-made Bootstrap styled components since the Bootstrap ecosystem is much much larger than UIkit.  Also, it feels a little more fresh, although my actual reason for creating this was to for a way for me to get a deeper understanding of how admin themes work.

  • Like 6
Link to comment
Share on other sites

11 hours ago, Mustafa-Online said:

I wish one day you make a tutorial on how to create an admin theme from scratch

If you truly want to make an admin theme from scratch like I'm doing, it's best to just take AdminThemeUikit, since that is the "official" and most supported theme and rip out UIkit and start replacing it with your own approach and just hack away at it.  Keep in mind that ProcessWire makes heavy use of jQuery UI and a few other libraries so you'll have to play nicely with them unless you want to replace them too, but that takes it to another level.

With Bootstrap, it's straight-forward enough given the similarities with UIkit, although this is turning out to be more work than I anticipated.  But that was the point since I want it to force me into looking at how everything is interconnected.

One idea for an admin theme is to do it with pure, modern CSS and as little JS as possible and as accessible as possible (good reason why here).

  • Like 2
Link to comment
Share on other sites

Just curious, does anyone know the approach @ryan uses to minify module JavaScript files?  For example, how is he minifying this:
https://github.com/processwire/processwire/blob/dev/wire/modules/AdminTheme/AdminThemeUikit/scripts/main.js

to this:
https://github.com/processwire/processwire/blob/dev/wire/modules/AdminTheme/AdminThemeUikit/scripts/main.min.js

Ideally I want to use a CLI-based tool (Linux-based), but I want to avoid using a Node-based solution (such as https://github.com/terser/terser).

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...