Symfony UX

I was rewatching that course as a refresher, and halfway into it, I had the great idea of searching for a Stimulus plugin for PhpStorm. And guess what... There is one.

I strongly recommend anyone doing this course to install it. It makes it so much easier to use Stimulus. I would also recommend Ryan or the SymfonyCast team to tell us about things like that when recording a course.

Cheers

Hey Julien,

Could you share the exact plugin name for PhpStrom? It would help people to search it easier. :) But I agree, it's worth to be mentioned in the tutorial. And we usually do suggest some useful plugins or any. We will keep it in mind for further Stimulus-related tutorials.

Cheers!

Hey Victor,

The plugin name is "Stimulus" by anstarovoyt. It works pretty well.

My guess is that the plugin might not I've been available at the time of recording this course.

Cheers!

Hey @julien_bonnier!

Wow, yea - you're right, I had never heard of it! I've just installed it - but it doesn't look like there's any info about what it DOES. What does it do that you've noticed and like?

Thanks!

Hey Ryan,

Well first off, it allows PhpStorm to understand Stimulus code. So it will not complain about this.someValue if you have static values = { some: String };. It also offers code completion for these values, targets, etc. Maybe it does more, but that's enough for me to use it. I hate when my code is full of false-positive warnings.

Ju

That alone is plenty - I love that - thanks again for sharing!

Just when I was getting into Vue NOW you tell me that I probably won't need it using this methodology LOL

Just listening to the video this sounds like what I would prefer since I had the distinct feeling going Vue heavy was leaving behind much of what I had already learned with the Symfony world.

Hey @Aaron!

Yea... sorry about that! They really are both *wonderful* technologies. But you're 100% correct: Stimulus allow you to take what you already know - the "build your HTML inside Symfony" paradigm - and then add professional, fun-to-write, highly functional JavaScript on top of that, instead of doing something "totally" different. That being said, you absolutely CAN still use Vue to write "widgets" that might be *highly* responsive... where it just feels easier to do that in Vue. You can render Vue components from Stimulus super easily (and we talk about how later in the tutorial).

Cheers!

Oh my. I'm only on the 8th video and I'm already loving this. My goodness this is exactly how simplified I've been wishing front-end js dev worked.

Is there a tutorial before this one I should have done to get setup? I downloaded the code package and it doesn't appear to be all of the files necessary to start with. What are the steps to add the missing components? I'm using Symfony 6.

Hey Joel R.

Could you tell me what components are missing? Also, could you double-check that you didn't miss any setup step specified in the README file?

Cheers!

Hi Ryan

I did the docker-compose up -d and started the symfony webserver symfony serve -d. When I go to localhost:8000 i am getting

Doctrine\DBAL\Driver\PDO\Exception
SQLSTATE[HY000] [1049] Unknown database 'root'

My bad.. Misread the instructions.

Woo! I'm glad you got it sorted :).

Cheers!

Hi Ryan, divine course as always :) but I missed one thing. How i should use translation in super proper way. In PHPStorm when i use twig and trans i can add phrase to translation file. There is a similar way in stimulus controller?

Hey Hesus,

Good question! Unfortunately, no... you need to translate everything you need in Twig template and pass the translated strings to the Stimulus controller somehow. The easiest way probably is to put translated strings on data attributes so you could read them later from the Stimulus controller. Or, if you have a lot of translations, you may want to open a script tag in the template and put an object of translated strings on "window" global variable that you will be able to read later from your Stimulus controller.

Cheers!

Hi there, thanks a lot for this tutorial and the Stimulus bridge! I really like this approach. On the github page it is noted, that "Symfony UX Stimulus bridge is currently considered experimental". I'm working on a project that ends by the end of 2022. Do you think by then will be a version of Stimulus bridge around that can be considered stable? Thanks again.

.

Hey Georg,

Thank you for your kind words about this tutorial, you made our day! :) Yes, it's still "experimental" thing, but it mostly mean that some BC breaks might be introduced during the way, and upgrade to the minor version of it may require some extra work, i.e. it may need a bit more work than you do usually when upgrade other Symfony components to their minor versions. So, you can totally use this in your project, but keep in mind some possible BC breaks on upgrades. Bbut if you test your project well with functional testing - tests mostly should cover your back on ugprades and point to problematic spots.

Fairly speaking, it's difficult to say how long it might be considered as "experimental", but it's been actively developed, and has a huge interest in the Symfony community lately, so I think it might become as not experimental at the end of 2022, but that's just mywild prediction, I can't be sure 100%... it just has good chances for this looking at it currently :)

I hope this helps!

Cheers!

Hey Victor,
yes, your comments are helpful and give me a broader picture. I am excited to see what we will achieve with Symfony UX in our project. Thanks, greetings!

Hey Georg,

I'm happy to hear this! Good luck with your project and Symfony UX integration ;)

Cheers!

Hi @Ryan, just a quick headsup to maybe give some info for those who is using the new Mac Book with the M1 chips. I am currently not able to install mysql 5.7 it gives me this error "ERROR: no matching manifest for linux/arm64/v8 in the manifest list entries" I am currently looking for a solution but will let you know when I have one. I haven't had an issue like this on the Vue tutorial so interesting that it is having an issue here.

Ok it's working now. I just changed the docker-compose.yaml file

version: '3.7'
services:
     database:
          platform: linux/x86_64
          image: 'mariadb:10.5.10'
          environment:
               MYSQL_ROOT_PASSWORD: password
         ports: 
                - '3306'

Hi,
Have you found a solution for this for mysql. I'm still getting that error

Hey Robert,

What error exactly do you have? Did you change the image to MySQL? Could you share your docker-compose.yaml?

Cheers!

Yo shirleenkneppers!

Thanks for posting about this! So it works if you changed over to the mariadb image with the x86_64 platform. I don't have an M1 chip, so I don't know too much about this yet. What's odd is that, like you said, you didn't have an issue on the vue tutorial... which I think has the same config.

Anyways, if this is a legit issue, I'm sure we'll start to see other people with it :). And if so, we'll see what change we can make to the Docker file so it works for everyone.

Cheers!

If they are the same setup maybe it's due to it having the same name? I didn't try changing it to mysql though. But I know that due to 5.6 Mac might not want to use it anymore as it is reaching end of life. So could be a number of issues. The old file didn't have platform: in it when I tried setting up the database for your information. I added that extra. It could be people just need to add that to make it work. I just decided to change to Mariadb due to I like it more than mysql. :) hope this help someone :)

Does Symfony UX work equally well with Symfony 4.4, or are there any gotchas?

Hey Jeremy,

Yeah, it should work equally well with both Symfony 4.4 / Symfony 5.x versions. At least, nothing I know about that might cause problems.

Cheers!

Even though we can use jQuery with it. What do you recommend? Should we use jQuery with it or not? Technically speaking. Every single jQuery snippet can be converted to a stimulus controller, so that won't be a problem (unless we have a site with jQuery all over the place). Is there any particular best practices when coding using stimulus?

Hey Piter,

In most cases you probably don't need jQuery. If you can avoid using it - great, definitely go with VanillaJS or use native Stimulus features, because jQuery is kinda heavy, and not include it on the page will give you some performance benefits. In other words, it's kind of overkill to use jQuery just to find element by CSS id or class. But if you get used to it - you can still continue using it, there's nothing critical, and it works great. So it's completely up to you whether use it or no.

Cheers!

That's what I thought. I am refactoring my app to fully use stimulus. Waiting for a production release of bootstrap 5 since jQuery is not longer a dependency in that version. Other than that, I think it is time to move away from jQuery all-together.

Hey Piter,

Yes, as you said, libraries are trying to make themselves jQuery-independent so that give you a choice to use it or no - most JS geeks do not like jQuery and I suppose that's why it's going this way. There's nothing wrong with jQuery actually, and it still may be useful in some cases as it has a lot of features out of the box, but using it for simple finding of elements on the page is probably an overkill :) Moreover, with the stimulus finding elements makes even easier thanks to targets ;)

So, if you think you don't need jQuery - great, get rid of it, you will definitely have some benefits. But if you still need it - that's OK too, you can continue using it because its a great tool as well ;)

Cheers!

Gents, why Stimulus? Why not Inertia.js?

Hey Krzysztof K.!

Excellent question! Victor is right - it's mostly just 2 different philosophies. If I understand it correctly, Inertia.js is based around the idea of rendering HTML in JavaScript, and they make that a lot easier. Stimulus is about rendering HTML on the server and then enhancing it with JavaScript. This lets me code where my strength is (Twig, PHP, etc) but get all the benefits of a SPA. One cool thing about Stimulus is also how *easy* it is to render a React app with props that are passed to you from the server (the core of what Inertia.js does). We even have plans to create a special React and Vue controller so that you could basically say (in Twig) "Render the ABC React component and pass it these props", where those props could be anything, even an object that's serialized to JSON. So again, this is very similar to Inertia.js... but it's only one thing that Stimulus (and Turbo) can do :).

Cheers!

Hey Krzysztof,

Good question, and I personally don't know the exact answer behind of it as I know nothing about Inertia.js unfortunately. I found some related thread about it here: https://github.com/symfony/... - you might be interesting to read it. But basically, that's how guys behind the Symfony UX decided to go.

Cheers!