Event bus in Vue 3

Reda-Hammada — Sun, 30 Apr 2023 11:49:08 +0000

Introduction :

Vue.js provides an efficient seamless way to communicate with sibling components using emit, but sometimes we want to trigger a method and pass data to it from a sibling component, this scenario sounds familiar, right?

No worries a global event bus comes to the rescue, which is what we would usually use to trigger a method from a sibling component, but that got deprecated in Vue 3.

in Vue 2 it would be something like that

export const bus = new Vue();

bus.$on(...)

bus.$emit(...)

In Vue 3 we would need to install an external library called Mitt

npm install --save mitt

Scenario :

now let's picture a scenario, where we have component A and component B, they are both sibling components, component A has a button, which if clicked will invoke a method in component B, let see how this works.

in main.js

We have registered the mitt globally we will inject it in both components to trigger the method by injecting it

import { createApp } from "vue";
import mitt from 'mitt';

const app = createApp(App);

const eventBus = mitt();

// we need to provide it to the app to be used globally
app.provide('eventBus',eventBus);

in Component A:

component A will emit the event when the button is clicked, which will result in passing a param to component B once mounted

<script>

export default {
  name: "AppSideNav",
  // we inject the event bus in the component
  inject: ["eventBus"],
  data() {
    return {

    };
  },
  methods:{
    triggerMethod(param){
        this.eventBus.emit("trigger-method-in-componentB", param);

    }
  }

}
</script>
<template>
  <div> 
    <button @click='triggerMethod(param)' >
       click me !
     </button>
   </div>
</template>

in Component B:

we subscribe to the emitted event that will trigger the method sayMessage() in component B to be invoked.


<script>
export default {
  name: "AppBoard",
    // we inject the eventbus in the component B

  inject: ["eventBus"],

  data(){
    return{
      message:'',
    },

  },
   methods:{
       sayMessage(){
          console.log(this.message)
       }
    },
   mounted() {
    this.eventBus.on("trigger-method-in-componentB", (param) => {
      this.message = param;
      this.sayMessage();

    });

  },
 </script>

Thank you for reading!

Queues in Laravel

Reda-Hammada — Sun, 30 Apr 2023 11:40:06 +0000

Introduction :

When building our application, we may face some tasks that take a long time to perform, such as uploading files and sending emails, etc …, which leads our user to wait for the task to finish, so that he can proceed.

I am sure that is not a good experience we want to give to our users for them to wait for all the tasks inside the request to finish, you are thinking now of running these tasks asynchronously in the background, which can be a complicated task without Laravel framework, so lucky for us Laravel provides us with Queues.

The queue component creates queued jobs to be processed in the background by moving time-consuming tasks to a queue, which leads to a better user experience for your users.

Scenario :

After we defined what queues are, now we going to picture a scenario to see how we can use them practically.

You want to send your user an email, which can be time-consuming and it will make your user wait. As a result, we are going to use a queue to process that task in the background.

before starting with queues, we need to provide a connection in our that can be done through a variety of different queue backends, such as Amazon SQS, Redis, or even a relational database, The connection configuration can be found in config/queue.php

we can configure the connection in the .env file, so no need to edit the config/queue.php file, with that being said we are going to use the database driver for our queues connection.

QUEUE_CONNECTION=database
now we have configured our connection, let's jump to using the database driver.

In order to use the database queue driver, you will need a database table to hold the jobs.

php artisan queue:table

this command will create a migration queue table for our queue jobs to be stored there to run in the background.

after creating the migration we need to run this command to migrate our table

php artisan migrate
now we are ready to create our first queue job that will handle our email logic, keep in mind that this article assumes that you already know how email sending works in Laravel

php artisan make:job SendMail
all of the queueable jobs for your application are stored in the app/Jobs directory. If the app/Jobs directory doesn't exist, it will be created when you run the previous command

<?php

namespace App\Jobs;

use Illuminate\Bus\Queueable; 
use Illuminate\Contracts\Queue\ShouldBeUnique;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;
use Illuminate\Support\Facades\Mail;


class SendMail implements ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

    /**
     * Create a new job instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Execute the job.
     *
     * @return void
     */
    public function handle()
    {
        // 
        Mail::raw('This is  a queued job email', function($message){
            $message->to('queueexample@gmail.com')->subject('queued job ');
        });
    }
}

our queue logic goes inside the handle function, we have put our mail logic inside it, and now we can dispatch it for this task to be queued when called to run in the background without making our user waits.

Route::get('send-mail', function(){

    SendMail::dispatch();

    dd('the mail has been sent');
});

when our user hit the route, he is going to receive the message of the mail has been sent without waiting for the email to be sent, and what really happened when we call called for the SendMail queued job dispatch is that we stored our queued job in the database in the jobs tables pending waiting to be processed, so the user will not receive the email until, we process our jobs we can do that by running the following command.

php artisan queue:work

DEV Community: Reda-Hammada

Event bus in Vue 3

Introduction :

Scenario :

in main.js

in Component A:

in Component B:

Thank you for reading!

Queues in Laravel

Introduction :

Scenario :

Thank your for reading