starred/koel-koel

Fork 0

mirror of https://github.com/koel/koel.git synced 2026-04-26 01:06:00 +03:00

[GH-ISSUE #543] Question: Why the Event bus on top of the Vue instance? #383

New issue

Closed

opened 2026-02-26 02:33:02 +03:00 by kerem · 3 comments

kerem commented

2026-02-26 02:33:02 +03:00

Owner

Originally created by @etiennemarais on GitHub (Feb 21, 2017).
Original GitHub issue: https://github.com/koel/koel/issues/543

TL;DR

Why are you adding an event bus on top of the Vue instance in app.js?

This is the event bus for readers that don't know.

More...

I was curious as to why you are adding an event bus on top of the vuejs instance that you render in app.js? Are you doing something specific with the events later like publishing them to a pub/sub stream? or is it a way to separate the concerns of your application?

If you would be so kind as to help me understand why the different types of events? one is a string and the other is a function?

We are looking to use Koel as a use case to build out a service and the structure is so slick and simple. Well done for this amazing work btw :kudos:

I'd like to be able to explain this to my team better mainly because I'd like to hear your architecture decision about that. In the same question I suppose I can ask about rolling your own router and why that was the case, cuz I know they going to ask me about it :)

Originally created by @etiennemarais on GitHub (Feb 21, 2017). Original GitHub issue: https://github.com/koel/koel/issues/543 ### TL;DR Why are you adding an event bus on top of the Vue instance in app.js? This is the [event bus](https://github.com/phanan/koel/blob/d905063fb64765f7c3ab27672bb7b01e8d397b5b/resources/assets/js/utils/supports.js#L49-L76) for readers that don't know. ### More... I was curious as to why you are adding an event bus on top of the vuejs instance that you render in `app.js`? Are you doing something specific with the events later like publishing them to a pub/sub stream? or is it a way to separate the concerns of your application? If you would be so kind as to help me understand why the different types of events? one is a string and the other is a function? We are looking to use Koel as a use case to build out a service and the structure is so slick and simple. Well done for this amazing work btw :kudos: I'd like to be able to explain this to my team better mainly because I'd like to hear your architecture decision about that. In the same question I suppose I can ask about rolling your own router and why that was the case, cuz I know they going to ask me about it :)

kerem closed this issue

2026-02-26 02:33:02 +03:00

kerem commented

2026-02-26 02:33:02 +03:00

Author

Owner

@phanan commented on GitHub (Feb 22, 2017):

The event bus is used to communicate between distant (i.e. non parent-child) components. You'll find it used everywhere in the app.

If you would be so kind as to help me understand why the different types of events? one is a string and the other is a function?

I don't get this question. What different types of events are we looking at?

rolling your own router and why that was the case

Simple :) I didn't know about vue-router (I'm not sure if it was there when I started the project, either), and since my use-case is simple enough, I decided to roll my own.

@phanan commented on GitHub (Feb 22, 2017): The event bus is used to communicate between distant (i.e. non parent-child) components. You'll find it used everywhere in the app. > If you would be so kind as to help me understand why the different types of events? one is a string and the other is a function? I don't get this question. What different types of events are we looking at? > rolling your own router and why that was the case Simple :) I didn't know about vue-router (I'm not sure if it was there when I started the project, either), and since my use-case is simple enough, I decided to roll my own.

kerem commented

2026-02-26 02:33:02 +03:00

Author

Owner

@etiennemarais commented on GitHub (Feb 22, 2017):

Thank you so much for clearing that up. I learnt a lot about event busses yesterday and why it gets used and this validates that thank you :)

As for the different types of events question. I meant the if statement in the event.on method.

'user:loggedin': () => {
        this.authenticated = true
        this.init()
      },

logout () {
        userStore.logout().then((r) => {
          ls.remove('jwt-token')
          forceReloadWindow()
        })
      },

I was just curious about the standards you decided to follow. because our team are moving into something like this soon with VueJS. Like why wouldn't it be user:logout rather? Not that there is a right or wrong, just curious ;)

Ah thanks for the router answer also. That makes sense, I also had to roll my own things in the past so I understand your need vs the pain tradeoff 👍 Thanks again for a great project and taking the time to answer my noobish questions.

@etiennemarais commented on GitHub (Feb 22, 2017): Thank you so much for clearing that up. I learnt a lot about event busses yesterday and why it gets used and this validates that thank you :) As for the different types of events question. I meant the if statement in the event.on method. ``` 'user:loggedin': () => { this.authenticated = true this.init() }, ``` _vs_ ``` logout () { userStore.logout().then((r) => { ls.remove('jwt-token') forceReloadWindow() }) }, ``` I was just curious about the standards you decided to follow. because our team are moving into something like this soon with VueJS. Like why wouldn't it be `user:logout` rather? Not that there is a right or wrong, just curious ;) --- Ah thanks for the router answer also. That makes sense, I also had to roll my own things in the past so I understand your need vs the pain tradeoff 👍 Thanks again for a great project and taking the time to answer my noobish questions.

kerem commented

2026-02-26 02:33:02 +03:00

Author

Owner

@phanan commented on GitHub (Feb 22, 2017):

Oh, I get it now. Well, it's clearly an inconsistency on my end, simple as that :) Thanks for the catch.

@phanan commented on GitHub (Feb 22, 2017): Oh, I get it now. Well, it's clearly an inconsistency on my end, simple as that :) Thanks for the catch.

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/koel-koel#383

No description provided.

Rows
Columns