Symfony UX: Stimulus

Hey Krzysztof,

Unfortunately, there's no a course about Stimulus and Symfony yet. But if you follow this course till the end - you should know Stimulus features and I believe could implement this. In theory, you just need to send an AJAX request to the server requesting a special page, and then render the records including a pagination buttons below of it back to the client where you just replace the current page content (including pagination buttons) with the new one - it should be that easy.

I hope this helps!

Cheers!

Hey yoelkj

Have you seen SonataSeoBundle? I haven't used it but it looks mature enough
https://github.com/sonata-p...

Cheers!

Hey Spomky!

This is a really good question - and I thought about including it in this tutorial... but it was already so long... so (right or wrong) I left it for later. I can say 2 things:

A) exactly like any other basic JS code 😉. For example, you could use Panther with Symfony's functional testing tool. That is, on its own, a whole other tutorial we need to do.

B) The Symfony UX libraries have some testing tools & examples and they leverage a cool library called "@testing-library/dom" which allows you to do JavaScript testing with a "mock" DOM. Here's an example: https://github.com/symfony/... - I think this is a SUPER cool way to test.

Let me know what you think!

Cheers!

Many thanks for your answer!

A) OK I will go with Panther. While waiting for your dedicated course, I will read some papers and video about it.
B) I found this package: @symfony/stimulus-testing (https://github.com/symfony/.... Looks perfect with a neat documentation.
Thank you for the advice, all you do really help A LOT. All the best to you.

Hey Spomky!

Nice job finding https://github.com/symfony/... - I know that Titouan (its author and original author of the UX stuff) is particularly excited about it :).

Cheers!

Hey @Anthony-E!

It's a good question! First, I admit that I don't know the current status of SEO and client-side-rendering single page apps like React, etc. Crawlers have come a LONG way, so I'm really not sure how much of a problem this is anymore in practice.

However, yes, using this stimulus/turbo setup would avoid any potential SEO problems because... the page is loading as normal JavaScript. Even if a crawler didn't support JavaScript at all (which I don't think is the case anymore), the link clicks would result in normal, full page reloads. So, while I'm not sure how much of a problem SEO is anymore with client-side apps, this setup absolutely avoids those problems.

Cheers!

Hey Nicolas,

We don't have specific plans to cover Stimulus controllers specifically. Well, we do have a few tutorials about testing, and in this case you can take a look at Behat testing that helps you to do a functional test including JS behavior, e.g. starting from this specific video: https://symfonycasts.com/screencast/behat/javascript-waiting - so you can test that your Stimulus JS code works properly for your clients this way. But if you're talking about unit testing Stimulus controllers - I suppose you just need to find any JS unit testing framework, but nothing available on SymfonyCasts about it yet.

Cheers!

Hey Krzysztof K.

I think this is a good case for using events. You could dispatch an event when reloading the first list so the second list can listen it and act accordingly

Cheers!

It works! Few changes in modal-form controller to dispatch correct thing and it works like a charm :) Thanks!

Hi Markus L.!

Sorry for the very slow reply!!! And thanks for the nice words :).

> I found a pretty large footprint of 1.1 sec (dev) or still 0.9 sec (prod) until DOMContentLoaded

To make sure I'm checking the right spot, are you referring to this app? https://github.com/symfony/...

If so, then we can easily check it out on https://ux.symfony.com/ - when I look there, I also see a DOMContentLoaded of around 600-700ms. To be honest, that's not a metric that I've really ever thought much of before. But checking some of my favorite sites - e.g. Stackoverflow, GH, those all seem to be slower than that (which makes sense, those are heavier sites).

Anyways, the DOMContentLoaded in this case shouldn't have anything to do with Stimulus - I believe that would more be about how much HTML you have on the page and whether or not you having "blocking" assets, like scripts. Stimulus itself doesn't block anything, and the content (since it's just normal, boring HTML) is rendered by your browser, even before Stimulus fully initializes (i.e. we're not waiting on Stimulus to make the page render correctly).

Cheers!

I meant this one: https://github.com/weaverry... :) At first sight it did not look to me like it was the HTML, because there's hardly anything on the page.

Ahhh! Hmm, I'm not sure then - that's a *dead* simple (and small) HTML site, so I'd imagine that most of the time waiting would be... from the server? (I'm assuming that DOMContentLoaded time starts when you originally request the page... so a slower server response would increase this - but I'm guessing). Anyways, my guess is that this is not something to worry about - Stimulus and Symfony UX operate after the HTML is loaded... so if you're optimizing DOMContentLoaded, you're really trying to optimize, I believe, server response time and (possibly) the amount of HTML that needs to be parsed (and also not having blocking script tags, etc - but the standard setup in Symfony uses "async" to avoid blocking).

Let me know if this makes sense - or if some parts of the loading still look weird to you :).

Cheers!

Coolthnx :)

A little bit off-topic, but... i swear that i watched a part of the video: Ryan's marvelous talk on "Symfony UX" at "SymfonyWorld Online 2022 Summer Edition") but... i didn't finished it and i want to watch it.. where can i find the vid?

Hey Kaizoku!

Nice to chat with you - and I'm super happy to hear that the tutorial was of some use to you! Now, to the questions:

1 - What is the good practice to have a constant file shared between several stimulus controllers?

The solution to this, nicely, has nothing to do with Stimulus. You can just create variables (variables, objects, functions, whatever) in one file, export those, and import them from your Stimulus controller. So, for your example:

// assets/data.js
export const BEST_DINO = 'Spinosaurus'

(I had to change to Spinosaurus, my son's current favorite dino ).
Then, you can use that inside Stimulus or anywhere else:

// assets/controllers/my-controller.js
import { BEST_DINO } from '../data';

You can also export a giant "object" from your file. Heck, if you have a .json file, you can even import that directly. Iirc, it looks like:

😉
import dinoData from '../data.json';

2 - How do I share an object instance between my controllers?

Hmm. There are probably a few ways to solve this. But once again, it's a JavaScript trick. To help manage this Web3Provider, let's create a re-usable JavaScript module (fancy word for "file that exports something"):

// "tools" is not important - just showing you can organize things however you want
// assets/tools/web3_provider.js

let provider;

export function getWeb3Provider() {
    if (!provider) {
        provider = new ethers.providers.Web3Provider(***window***.ethereum)`;
    }

    return provider;
}

Now you can, from anywhere:

import { getWeb3Provider } from '../tools/web3_provider';

getWeb3Provider().someMethod();

This will always return the same one instance. This works thanks to two tricks inside JavaScript:

A) If you import web3_provider.js 5 times, really JavaScript loads that file just ONCE. The next 4 times, it returns the same value from the first.
B) And so, putting that let provider; means that, if you import web3_provider.js 5 times, they are all, sort of, "sharing" that value. The first time we call getWeb3Provider() from one place, it will be set. The next time we call that function - even if it's from a totally different file - the provider variable will already be set.

3 - How to listen on an event that is not attached to HTML via an action ?

Stimulus actions are a great shortcut for making it easy to attach listeners to HTML elements. However, if you don't have that situation (in this case you're listening to an object), then actions won't help you. And that's fine! Just use your normal code. To make it nice in Stimulus, I might write it like this:

connect() {
    const provider = getWeb3Provider();
    // this is just a nice way to have a method called
    // the .bind(this) is weird, but ensures that "this" will refer to this
    // controller object inside that method
    provider.on("network", this.onProviderChange.bind(this));
}

onProviderChange(newNetwork, oldNetwork) {
    if (oldNetwork) {
            window.location.reload();
    }
}

I hope this helps!

Cheers!

Hi Ryan,

Thank you so much for your answers, it really helps clear things up.
I think I had trouble integrating that you can simply combine Stimulus and normal JS.
I followed your advice and it's much better now.

to thank you, you can claim one (or more) free SPINOSAURUS NFT on this showcase website I developed : https://selenite-lab.xyz/er...
You will need a web3 wallet like metamask with the Polygon testnet configured, I explain this on the home page https://selenite-lab.xyz
Use a blank metamask wallet so it's 100% safe, as I said it on tesnet so this is not "real money" involved.

thx again :)

Haha, cool! Cheers!

Hiya @Rik702!

Sorry for the slow reply! I'm really happy you enjoyed the course - I LOVE working with Stimulus :).

Ok, let's see. I think you have 2 options:

1) Exactly what you said: whenever a tree opens/closes, you make an AJAX call back to some endpoint to store this information somewhere (e.g. the session). Then, when you render the page, you would pass this information into your Stimulus controller as a "value".

2) OR, you could use local storage in the browser. Whenever a tree opens/closes, you store that in local storage. Then, in the connect() method (so, when the controller originally loads), you read local storage to see which things should be opened or closed.

It feels like I'm missing something though, and even wondering if Turbo would solve this problem for me?

Turbo CAN solve a lot of problems. But... probably not in this case. Well, technically, if you converted the "hide/show" buttons into real anchor tags with real URLs (and if you go to those URLs, you would see the page rendered with the correct trees open), then you could use Turbo. Basically, it would "reload" (without a full page refresh) the entire tree structure on each click. Maybe a bit overkill for something that can be done fairly easily with Stimulus. But it is a fun thought experiment. And, in case you needed it, this approach would allow you to bookmark / copy a URL, send it to someone, and have them be able to load the page with the same children hidden/shown.

Cheers!

Hey Stiff,

Thank you for worrying about Ryan! Everything is good, Ryan needed to take a rest for a while. We will continue releasing new videos soon. Thank you for your patience and understanding! I hope everything is good at your part as well!

Cheers!

Hey Victor,

Thanks for your reply. It is a relief to hear that you guys are healthy and doing fine. Actually this pandemic situation makes people worry more than usual.

It is nice to have breaks now and then to rejuvenate. I wish you guys all the best...

Hey EinzigTech!

This was a really nice message from you - it actually meant a lot to hear it. I had a loss in my family, so you were very astute to notice my absence. I'm doing ok, and we'll hopefully have our regular schedule back for next week :).

Cheers!

Hi Ryan... I am sorry to hear your loss. My condolences... If you need, take a break... I don't think anyone would mind about it.