Jump to content

RockFrontend πŸš€πŸš€ Take your ProcessWire Frontend Development to the Next Level


bernhard
 Share

Recommended Posts

BOOOOOOM πŸ’₯πŸ’₯πŸ’₯πŸ’₯ Bernhard dropped the bomb.

I'm halfway through the video and so far love everything about it. Nice video setup and editing there too. Going back to the video now πŸ˜€

-------------------

Edit: Okay, I'm through and this is definitely super cool. Looking forward to trying it out. There are two things though that I'm not sure about and wanted to mention:

1. The name Alfred. While you've found a sweet acronym it (in my opinion) has the huge drawback that new developers looking at the code and seeing

alfred($page, ['fields' => 'gallery'])

will have absolutely zero clue what's going on. Most of us love ProcessWire because it's intuitive. With this name you have to first learn that alfred is an inline editor to understand what the code is supposed to be doing.

Β 

2. I'm not sure about this one, but adding assets to the header through hooks reminds me of dark Wordpress times. I like that with ProcessWire you are able to to see where things are coming from and you have total control over what's happening.

Edited by MrSnoozles
Removed the comment about simplifying the alfred() function. That was nonsense. Should have gone to sleep already :)
  • Like 3
Link to comment
Share on other sites

Hey @MrSnoozlesΒ thx for the input!! πŸ™‚Β 

15 hours ago, MrSnoozles said:

1. The name Alfred. While you've found a sweet acronym it (in my opinion) has the huge drawback that new developers looking at the code and seeing

alfred($page, ['fields' => 'gallery'])

will have absolutely zero clue what's going on. Most of us love ProcessWire because it's intuitive. With this name you have to first learn that alfred is an inline editor to understand what the code is supposed to be doing.

Puh... I'm not sure πŸ™‚Β I agree with you that it's nice to understand code without having to look anything up. On the other hand I'm not sure what would be a better naming? In code and in the docs it is a huge benefit to just refer to it as ALFRED because it's short and crystal clear what is meant. In code for someone not knowing alfred that's surely not the case, but it would be just as simple to look it up and quickly find and understand what it is doing. Don't you think?

I could easily add an alias though. But I'm not sure if that is a good idea because it could cause name collisions with the core frontend editing?! What would be a good name in your opinion? What do others think about that?

15 hours ago, MrSnoozles said:

Edited 2 hours ago by MrSnoozles
Removed the comment about simplifying the alfred() function. That was nonsense. Should have gone to sleep already πŸ™‚

I was looking for that statement as I think it was really a good hint! Thought I have been dreaming πŸ˜„ I have played around with my code a little and think that that we could really simplify alfred syntax even further!Β 

// edit current page
<div alfred>

// edit given page+fields (latte)
<div alfred="{$page}:title,gallery">
  
// php
<div alfred="<?= $page ?>:title,gallery">

That could work using the page::render hook for replacing the tags, so one wouldn't even have to think of using the |noescape filter any more!!

15 hours ago, MrSnoozles said:

2. I'm not sure about this one, but adding assets to the header through hooks reminds me of dark Wordpress times. I like that with ProcessWire you are able to to see where things are coming from and you have total control over what's happening.

Thx! I have removed that part from the video as it already got so long...

See this post that is using the old (alternative) syntax:Β https://processwire.com/talk/topic/27187-domid-labs-– microsite-for-a-museum-related-project/?do=findComment&comment=224750

This approach has major drawbacks IMHO:

  1. You need to add the scripts and styles tag manually to your markup, which is not what I call "zero-setup". I've had it working like this before I did the video, but then I realised that there's actually some steps to do to get everything working as it should. So I came up with the hook-based approach. And I really like that approach even if that means that it hides some parts away, which is a valid point...
  2. When injecting scripts or styles from your sections (or components, or modules) you need to make sure that those scripts are loaded BEFORE the scripts are rendered in the head. That's similar to the delayed output pattern of processwire. The markup would look like this:
<?php
// render layout first, so any of your sections can inject scripts or styles
$body = $rockfrontend->renderLayout($page);
?>
<html>
  <head>
  <?= $rockfrontend->styles()->add(...)->render() ?>
  <?= $rockfrontend->scripts()->add(...)->render() ?>
  </head>
  <body>
    <?= $body ?>
  </body>
</html>

The thing is that I really want ALFRED and livereloading work out of the box. Zero-Setup.

If you want to use the alternate syntax you can do so. RockFrontend is smart enough to see that you are rendering scripts/styles manually and will not inject them twice πŸ™‚Β 

What do you think?

Link to comment
Share on other sites

Wow! In general I think it's a huge benefit for the community to have a more opinionated way of doing frontend, so congrats on this is amazing module! I have no further comments until I try it fully but from what I see in the video it looks fantastic.Β 

  • Thanks 1
Link to comment
Share on other sites

3 hours ago, bernhard said:

Puh... I'm not sure

Neither am I.Β πŸ™‚ It was just a thought that came while watching your video. rockFrontendEditing for example wouldn't sound as catchy, but would be clearer for newcomers.

Β 

3 hours ago, bernhard said:

I have played around with my code a little and think that that we could really simplify alfred syntax even further!Β 

I really like the new syntax. I wanted to suggest a Latte attribute first, but then decided to keep it simpler. Your approach looks nice. Imo it would b good to explain why and when this is needed instead of just using $page->edit('myfield')

Β 

3 hours ago, bernhard said:

f you want to use the alternate syntax you can do so. RockFrontend is smart enough to see that you are rendering scripts/styles manually and will not inject them twice πŸ™‚

Perfect! So you get the best of both worlds.

Β 

I'm sick at home this weekend, hopefully I will find time to give it a try already.

  • Like 1
Link to comment
Share on other sites

Hey @MrSnoozlesΒ I've played around a little with the new alfred syntax. I've used WireMarkupRegions to modify the markup when an alfred attribute was found, which was great. But then I realised that this breaks the code icon with quicklinks to the latte file. Which is not great! I don't think that I can do anything about that, so I think it's best to stick with the function based solution (either via latte or via php).

Though I've just pushed an update that adds a short syntax for this:

<div {alfred($page, ['fields' => 'title,images'])|noescape}>

to also support that:

<div {alfred($page, 'title, images')|noescape}>

The old syntax is still supported for backwards compatibility and to support providing fields as array instead of a string.

RockFrontend will even check if the field exists, so that editing will not break when requesting non-existing fields like "title, images, doesnotexist"

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
Γ—
Γ—
  • Create New...