HUGE_DICK_10_INCHES's avatar

Whats the best way to use things in laravel app

Hello there!!

I am wondering what is the best way to use things in laravel apps?

By things I mean:

  • On fresh installation we get vue, bootstrap with styles, popup, jquery and its own js. Axios etc..
  • On many tutorials from laracasts we use vue with bulma and axios. So there is no jquery, no additional scripts.

Is it better to use all those that you already get by fresh install or is it better to cut them down and use just vue and axios if its needed and lodash which I don't really get what it is for.

In my case I do my own css because there are not that much lines of styles as on bluma or bootstrap and some of scripts like dropdown menus etc.

From watching laracasts vue tutorials on youtube I can see that all my scripts can be done in vue without jquery, so I get that jquery is added because of bootstrap but since it is - is it better to use that or to size it down as I already mentioned to vue and axios?

Thanks for your time

0 likes
3 replies
bobbybouwmann's avatar
Level 88

Yeah, you really don't need the bootstrap and lodash in most cases! Especially not when you do all your css work yourself and use VueJS components for your frontend. Of course you can strip them all out. That's what I do most of the time as well ;)

jQuery is nice to have when you use everything regarding the bootstrap framework like alerts, modals, menu, tabs etc. This way you don't have to figure out yourself how to include everything.

Regarding lodash. It's just like collections that awesome helpers for arrays. Lodash make it easier for you to sort arrays, group things, loop over them etc. It has a lot of helpers methods like the collections in laravel but then for javascript. If you don't use it I would recommend you to remove it in general, because it's pretty big and can make things slower on the long term.

Let me know you have more questions ;)

HUGE_DICK_10_INCHES's avatar

@bobbybouwmann I do have one more question about vue:

I went through it few times and I am wondering about this:

When I load data from db I can make my component and use it like:

@foreach($statuses as $status)
    <status title="{{$status->title}}" body="{{$status->body}}"></status>
@endforeach 

Or

@foreach($statuses as $status)
    <script>
        data.push({ title: {{$status->title}}, body: {{$status->body}} });
    </script>
@endforeach 

Now when I load more statuses on second example I push on existing array of data.

When I load more statuses on first example I make new array of data and append it to page.

What is more preferable and better way of doing this?

Note I didn't test this I just assume it would work like this

bobbybouwmann's avatar

Well normally when building web component or Vue components you don't want to interfere with the status of the component from your PHP. So the best way to handle these components is to let them handle their own data. So they will do an API request on initial mount and get the data that the components need. If you have multiple statuses for example you would want a <status-list> component that fetches all the data and shows multiple <status> component within that component. So this is best practice right!

In your case I'm not sure if the second example will work at all! However this is loaded with PHP so it's dynamically build up on every request. So the first example would always work out of the box right? There is no way you will get extra items from the PHP side. Unless you perform some ajax request to fetch more. But then again, you should let your component handle the fetching and showing of the data ;)

Please or to participate in this conversation.