Alpine.js vs jQuery vs Vanilla JS: Example + NEW Course!

A free video from my new course "Practical Alpine.js from Scratch".
Get the full course: laraveldaily.teachable.com/p/...
- - - - -
Support the channel by checking out our products:
- Enroll in my Laravel courses: laraveldaily.teachable.com
- Try our Laravel QuickAdminPanel: bit.ly/quickadminpanel
- Buy my ready-made Laravel scripts: laraveldaily.gumroad.com
- Purchase my Livewire Kit: livewirekit.com
- Subscribe to my weekly newsletter: bit.ly/laravel-newsletter

[@KastsEcho]

Actually, there is an official lighter version of Vue called Petite Vue that doesn’t require components and seems more on par with the main framework for directives than Alpine (being relatively new still.)

[@phoenixedge4049]

Been waiting for your alpine class. Can’t wait to go through it!

[@redamakarem3737]

I am going through the course now and I have already learnt a ton although im not even half way done. Highly recommended Great content

[@ZephniStrife]

It's interesting that while ive been in web dev for about 14 years it's always been looked down on to write inline styles... but over time it's becoming more and more normal to do stuff inline like alpine and tailwind (which is bassically inline styles with added features). I do like it though, especially with the lack of a huge framework or filesize, it simplifies the work process and speeds up development hugely! The project i am currently working on is using Livewire / Alpine and Ive had so much fun developing it, because it finally sits right with me, whereas Vue and React never quite did.

[@LaravelDaily]

Exactly, this is exactly the use-cases of Alpine and Tailwind, and exactly the reasons why it resonated with so many developers.

[@borysiatko]

JS is going full circle, next best framework will be the plain js which will allow you to skip all bs code

[@lutfiikbalmajid]

No, i think Typescript that compiled to JavaScript 😃

[@alaaalssadh2362]

Greate, I love it. Thank you

[@fatehlayachi2181]

Hi Povillas, Thank you for sharing your experience with us with simple and rich videos. Please can you make a video about creating a menu that contain in some elements a submenu (using components like , , AlpineJs for show/hide submenus and also show/hide scrollbar automatically when scrolling/stop scrolling. Thnx in advance

[@LaravelDaily]

Well, I wouldn't want to dig THAT deep into front-end, on the channel that is still about Laravel primarily, but will think about it. Thanks for the suggestion!

[@poox95]

Hi Povillas, i have question about Laravel Naming Convention. What do you suggests about functions in Controllers? I have something like: "/shows/letter/$letter". In controller should i name functions like public function byLetter() or public function by_letter() or just byletter()? I haven't find out any example what is best way. Every example is with one word so it's like index() store() etd. Thank you.

[@LaravelDaily]

According to PSR standard, method names should be camelCase

[@jimishukurow2286]

will that @click conflict with vue @click?!

[@ricomarcelo5521]

Thanks for this video comparing Alpine.js with jQuery and vanilla JS. You could have included Petite-vue (not the full framework) since Petite-vue serves the same purpose as Alpine.js. Perhaps you can come up with Alpine.js vs Petite-vue video next?

[@LaravelDaily]

Yeah, I guess I should review Petite-vue some time.

[@100JAD.]

It seems the `open` variable does not do anything in the jQuery code.

[@ZephniStrife]

Yeah infact the whole jQuery part is written quite strangely and could be simplified anyway imo. I think he was trying to highlight just how condensed alpine is by comparing it next to something like jQuery, but didn't really give jQuery a fair chance ha! Either way Alpine does feel really nice for small things like this

[@LaravelDaily]

Yeah, very good catch, both @Amir and @Zephni. Indeed, I was trying to compare "apples to apples" but showed jQuery in a worse way than I should have. Perhaps another example would have been better, will be more creative with examples in the future.

[@ZephniStrife]

@@LaravelDaily To be honest while I loved jQuery for years and years, that's another thing that seems to have been looked down for some time now, so it's good that you are putting these newer idea's like Alpine in the limelight. Infact it would be interesting to see how something like Alpine could scale with a bigger project or within atleast slightly larger use cases than this before it get's out of control or "too messy".

[@LaravelDaily]

But isn't it the point of Alpine - to be used for small things in resonably small projects? For bigger projects with more interactivity, probably it's better to use a proper framework like Vue/React.

[@holacuba2001]

Impressive! What is the scope of the alpine variables? In this example "open". Can I have the "open" variable in the same html page in more then one element or I must use it only once per html document?

[@johnneijzen]

it depends where end tag is?

[@khizer3528]

Alpine is great 🔥

[@ouro-akpokhaled4440]

Hi Povillas. Great are your videos. Please can you make a video for laravel sail with docker desktop ? Thanks in advance

[@LaravelDaily]

I haven't done it myself so can't make a video about it. I use Laravel valet locally and didn't see the benefit of using Sail.

[@zaimcodes]

What's the issue? Maybe there would be someone willing to help in the comment section if you state your problem with Laravel Sail.

[@ouro-akpokhaled4440]

@@LaravelDaily Ok

[@ouro-akpokhaled4440]

@@zaimcodes It was just to get familiar with laravel sail in case you have to deploy the application on a non-shared server where you will have to install all the third-party applications that laravel needs.

[@zaimcodes]

@@ouro-akpokhaled4440 That's good of you to think ahead about production. However, Laravel Sail is best for development. There is a discussion about it on GitHub. You can try to search for general Docker configuration for Laravel. 👌🏽

[@fafaratze]

when using alpinejs, i would still separate the javascript because inline javascript is a bit messy to me.

[@Danibd13]

You're using wrong way the jquery bc the toggle function is defined by jQuery... U can use it this way:

[@LaravelDaily]

Thanks, I do agree that jQuery example is a bit misleading, I should have come up with a more complex example where it would make sense to have separate jQuery function for more than just toggling.

[@nadjinmalade8738]

Yeah this example is simple but for more complex example, you cant do by this way.

[@AIteek]

I really dont see why a well structured alpinejs + laravel setup cant be used in a big project... Some improvements in alpine component reuse and id never have to use these big fat JS libraries again

[@amirhossein1044]

Don't you continue your tasks(tests)?

[@LaravelDaily]

You mean the ones that I did in 2021 every Thursday? No, they took too much time, I focused my time on other things now.

[@LuisFernandoFranco]

Ley me ask a surely dumb question. Can you use Vue and Alpine in the same project, let's say same component?

[@LaravelDaily]

Yes, but potentially there may be conflicts.

[@alihassan-qg7ky]

cooooooooooooooooooooooooolllllllllllllllllllllllllllllllllllllllllllllllllllll

[@aurelianspodarec2629]

Right, Alpine is great for small projects, but not big projects - that's what I understood.

[@LaravelDaily]

Not really. Alpine is for small dynamic behavior, without too much logic. It may be a page in a small or in a big project.

[@saimansari8153]

Create Laravel with react js course

[@LaravelDaily]

I don't actively work with React, maybe in the future.

[@soniablanche5672]

People should stop using jquery. Vanilla JS can do the same thing without dependencies, without learning new libraries and without the performance hit.