Mingle JS - Use React or Vue components in Livewire with Patricio

We are joined by  @PatricioOnCode to talk about Mingle JS which allows you to mix React and Vue components in Livewire. 

EPISODE LINKS:

* Mingle JS https://minglejs.unitedbycode.com
* PHP WASM https://www.youtube.com/watch?v=L-MAzsDm5d0
* Play with Laravel, save the code, and share it with others https://github.com/ijpatricio/playwithlaravel
* VoxPopSites: https://voxpopsites.com
* VoxPop Preview: https://www.youtube.com/watch?v=tnJFburXQfU 
* Patricio's links: https://pinkary.com/@PatricioOnCode

Creators & Guests

Host

Eric L. Barnes

Creator of Laravel News

Guest

Patricio

Co-building @VoxPopSitesBlogging, StreamingSharing my passions about Web DevelopmentLaravel, Livewire, Filament, JavaScript, Docker, Self-Hosting

What is Laravel Creator Spotlight?

Interviews with creators making cool things in Laravel

Hey everyone, welcome back

to the Laravel Creator Series.

With me today is Patricio from Portugal,

who is the creator of

Mingel.js, Boxpop sites,

a live streamer, he's

just big into the community.

So Patricio, did I get all that right?

And if I miss anything,

let me know right now.

- Hello Eric, hello everyone.

So you got it all right?

Yeah, so that's me.

And I guess, I guess

not, I can't add anything.

You did just perfect, yeah.

- Excellent, excellent, all right.

So to jump in first, the

thing that you built that sort of,

I heard sort of a lot of

buzz about is Mingel.js.

Can you sort of give me the highlights

of what is Mingel.js?

- Okay, so I'll start

with the short version.

(laughs)

So Mingel.js is the

opportunity that fills the gap

to bring complex JavaScript components

inside Livewire applications.

So I do love Livewire and Alpine.

Also I do love JavaScript.

But in the end of the day, the more,

the nearest I am to the server,

the more productive and

quick and I don't know,

I just feel moving faster, right?

And that's my kind of thing,

the one-man army or two people projects.

So I can speak only for that,

not for 500 people project through

several teams and so on.

So yeah, I love Livewire and Alpine,

but there's a point when it

reaches some kind of complexity

or maybe it didn't click all for me,

but there are some, there

is some scope, some extent

where we can't just live on the server

and having these

small, how do you say them?

The sprinkles of JavaScript, right?

We have to go all in.

So I didn't want to go inertia or SPA

or any other thing I

wanted to keep next to Livewire.

So yeah, coming, I could

come from other scenarios.

This all started with

scoped slots in Vue,

the Adam Wadden's

advanced Vue components course

back in the day, 2018

or something like so.

So I started putting Vue

with runtime compiler on Blade.

So the JavaScript

functions would be in JavaScript

and server side would give the template

for that JavaScript.

But then Livewire

started to make sense to me.

I started using and I said, huh,

let's bring them

together, JavaScript and,

I mean the heavy side of

JavaScript and Livewire.

So there we go.

- That's awesome.

So you can actually use like React or Vue

or sort of anything, any existing code.

Like I'm trying to

think of like an example

off the top of my head,

if I go and find a React component

that does everything I want,

I can just pull that

in and it just works.

- That's it, that's the promise.

- That's awesome.

- And it seems it's delivering, yeah.

- So like I was, I keep coming back to,

cause you mentioned

Adam, they have that project,

I think it's Catalyst maybe,

that's a lot of React components.

So I could basically go and buy that

and then just kind of hook it right in.

Man, yeah, that's pretty sweet.

You, for let's say, okay,

a stack of blocks, like three

sections on the website, right?

And you wanna do Catalyst,

so you just, you can for example,

do three Livewire

components, one for each section.

And there you go, each

one is a React component

and they blend in just fine

and you have Livewire, Event Bus,

React, Events, you

have all that in it, yeah.

That's it.

- That's awesome, yes.

Well, how's the sort of, how's the

community been so far

as far as like

embracing this and trying it out

and all that, are they, is it getting a,

I guess, heavy usage so far or?

- Well, for me, it's heavy

because it's my first package I'm

actively maintaining

and out there in the world.

I'm going to the sheet sheet

and going to say how many issues I've got

because I don't know how much is heavy,

but we have 13 issues and all fixed

in a matter of, I don't know, few months.

And yeah, people are using, they are

finding some issues,

we're solving them,

people are solving them.

So yeah, I'm feeling the

other end of the community.

I've been all, I don't know,

over 10 years on the other end,

like just consuming

and producing, it's nice,

it's very nice,

creating is awesome, yeah.

- That is awesome, yes.

So I guess what sort of, I

guess what gave you the idea

to even start this or be like,

hey, this is something that people need?

- Right.

So I have like four main things I

consider to communicate it,

but my first, my favorite two are that

when the UI gets to be so much complex,

I could show you an example

that I'll try to articulate by words,

but let's say a very complex data table

with which goes to three tables,

it's an example I can remind.

So each row gets data

from three rows, right?

To assemble, to assemble, three rows, right, to

assemble data in this table,

in this HTML table, right?

So I've done that in LiveWire

and I've done that in JavaScript

and my wiring, maybe my brain feels,

it should go to JavaScript

because it's so much intensive,

but also I'm learning

LiveWire still today.

So maybe I didn't do it the best way,

but I find that when

the things get so complex,

I don't know, I'll try to

think of a better example,

maybe a text editor like Notion

or something like very dense, right?

I think there's not one

tool for all jobs, right?

And I think here

JavaScript is better suited

in very, very complex cases,

but maybe it's only me.

So this was my main motivation.

There's a point in time

where from this DOM element down,

I wanna just work it in different files,

I love view with options

API, that's my favorite.

So I can just make separate

files with template all in,

not in, it just doesn't

click for me the same way,

doing Alpine in a bundle, right?

It's in the template is in blade, right?

But then you wanna make complex stuff.

I don't feel it belongs in blade file.

So I bring it to a

JavaScript file and that's,

I would say that's what I draw the limit

and I would want to go JavaScript more.

So this is first and second one

is the third party

plugins out there, right?

I have one just sitting and waiting.

I have some tweets about it.

Do you like whiteboards?

- Whiteboards, is that

like physical whiteboards

that you write on or?

- Okay, so a virtual one.

- Virtual whiteboard

that you write on or?

- So yeah, so for example, ExcaliDraw,

do you know this app or middle or?

- I do not.

- You do not, okay.

So it's basically where you sketch you,

you get a rectangle and

you type a word in there

and you make a narrow

and you draw some diagrams

or some kind of stuff, but

in a sense of a free hand.

So not like a specific app for diagrams,

but just whiteboarding like you would

on the physical one, right?

So thanks to this, I can

have this kind of component

because I'm very visual and

I wanted to make something

like this, but I just

don't want to tie it together

and launch a package because

it doesn't make sense for me.

I want to make some special functions.

So we could have like

libraries and whiteboarding

with pieces, what can I say?

So like small components, pieces of an,

so think Figma, but lightweight, a

lightweight Figma, right?

So we could have community plugins.

We would bring them all together.

And because

everything is on the database,

a lot of our end point

could stitch together

a collection of components.

And then you could do

it in this whiteboard

on your application, not somewhere else.

- Oh, that's pretty sweet.

Yes.

Well, so when you were

building this Mingle JS,

what was the hardest

part for you to figure out

before you could publish it?

- Okay, so I guess it was hard,

but then the solution

was very, very easy,

which was to keep it

working with wire navigate.

So the SPA mode in LiveWire,

there was someone

complaining about it and,

huh, how am I going to fix this?

Because joining JavaScript in Blade,

I was doing that for a long time,

just not in the Mingle way, right?

Not inside the LiveWire component,

getting all that stuff.

So it actually ended

up being really easy,

but I didn't have the

minimal clue on how to do that.

But in the end, it

clicked that I could PR

something into LiveWire, so I could

listen to some event,

but then I thought something.

And it may seem like a Frankenstein

if you go to the source code,

because I'm booting up Alpine

to then start the JavaScript component.

And that's because if I

adhere to the Alpine protocol,

then I am good to go

with LiveWire, right?

So it's, in fact,

it's an Alpine component

that boots the JavaScript component.

- Nice.

- So yeah, I would say

that that was the most--

- That was the

hardest, was that one of those

you were just laying in bed

one night and you're like,

"Ah, this is simple.

Now I understand what the problem is."

Or did it just sort of hit you?

- I actually don't remember.

So it wasn't that

Eureka moment, I'm sorry.

- But those weren't the best, right?

When you're fighting

some sort of bug for a week

and you're like, "I just

can't figure this out."

And then all of a

sudden, midnight, you're like,

"Oh, this is all I had to do.

What was I thinking?"

- Right, we have so many of those.

- Well, anything you

wanna tell us about Mingo.js

that maybe I've missed

asking questions about or?

- Well, I kind of built

it, not wanting to make it...

So I wanted to make it as

a small connector, right?

But how could I say?

I would be willing to take it further

if more people was using it as well.

But for example, I'm thinking,

or let me materialize something.

You have this component, right?

Or this DOM node where typically would be

the first live wire element then.

And then inside it's

wire ignored and X ignored.

And inside there's a client side

rendering with it all, right?

So we can see the

component like some folk,

it's called like the flash

of unstyled content and so on.

So you see the page

flickering on an initial render,

it can happen.

So things like having a

skeleton, like a loader,

while it doesn't come the real thing

and change it for the actual content.

So mechanisms like this,

or making like examples on

how to use more fully on...

So instead of sprinkling one component,

how to mix and match several, right?

I would want to go into these things.

I just don't know if I should, maybe it

will come with time.

So I don't know if you can help me,

deciding what should I

just do it and that's it?

Or should I just wait?

Because I don't have a

clue on how to do that.

On how to decide, I'm sorry.

- Yeah, that's sort of the

crux of open source, right?

It's trying to make decisions that the

community will like,

but then also that you

want to put in and...

Sort of do it that way,

I guess is the right...

I'm not articulated by questions very

well in my statement.

But yeah, it's sort of like,

you want to do a certain thing

and you think this is the right way,

but then the community

might have a different opinion.

I guess as far as like you're concerned,

like what's the best

way to give you feedback

and to kind of get in on

these questions you might have

that the community might

want to be involved in.

- Right.

Yeah, I wouldn't know where to start.

I would like to make it bigger

than just dropping off one component.

Like I am all in not

making a tedious job.

So everything that I

could make to help people

not having to do repetitive stuff.

So like assembling some

systematic things for,

I don't know for,

you want to do an application layout

which has a other

sidebar and content, right?

So let's do all these.

How would you do it all in

view or all in JavaScript,

for example, or those sorts of things.

But I also don't want

to shape the package

based on some active one voice, you know,

that, oh, everyone

wants this, but maybe not.

Maybe it's just one person needs.

- Yes, for sure.

- That's the difficult

part, but I guess I'll,

I'm welcoming any input on that.

But for the time being,

I'm just going organic,

going as it, going with the flow.

I'm using it for myself and that's it.

In the end of the day,

other people are also

seeing value in that.

So I'm happy with that as it is.

- For sure, for sure.

So you've been sort of

tweeting about something else

you've been working on that

you're very excited about.

What is that?

- Okay, so you must be

referring to PHP WASM?

- Yes. - I guess.

Okay, other than Boxbot.

- I think that's the one you said.

I'm going to have a secret release.

The last tweet I seen

was you said next Tuesday,

but this might've been

actually two weeks ago.

- Oh, right, right, right, right, yeah.

Okay, so that's, for

me, that's uber exciting.

Maybe it's ahead of time or

maybe it's just not there.

Maybe it's just me seeing

it because it will be very,

I don't know, I don't know how it will,

you tell me how it sounds, okay?

So I'll split it into two parts.

So WebAssembly is

running in the browser, right?

So what, not me, but

Sean Morris has done,

the open source is out there

and I've been in touch with him

because I want to

make something a reality,

which is trademarks

aside, codes and boxes, right?

So we wanna play with PHP, right?

But we always need a

server somewhere, right?

To this day, I'm

pretty happy with solutions

like IDX, Codespaces, but above all,

Gitpod has been one of my favorites.

You can see a video of that.

I've made it for Filament,

so in Filament's YouTube channel,

the demo is running in Gitpod

and you can actually run it there.

But, and you can do

this with more things,

but you do need a

server, you do need an account,

you do need all sorts of things.

To make it work.

And with WebAssembly and a service worker

can have PHP CGI

running on a separate thread

from the browser window instance, right?

So this would allow us

to bring the whole server

to the, not will allow us,

it's already allowing, right?

(laughs) So the whole server gets downloaded,

you can have it on a S, on GitHub pages

or an S3 bucket or

whatever, all static, right?

But then it goes down to

your browser, to your computer

and boots the server right there.

So this would allow, I have

a passion, a touch for this,

which is to communicate,

I wanna give you a

snippet of code, right?

But then either it's just partial,

there's missing

context or something, right?

So JavaScript folks have

these since like forever, right?

With code pens and those sorts of things,

the problem is solved if

it's a front end issue.

But, and also backend

now with the stack pleats,

I would say, right?

The web containers, they have node and on

in running in the browser.

So these would facilitate

everyone to just switch,

not switch, sorry,

sharing snippets or projects

or pieces of

functionality just on a link, right?

So here, look how I've done this.

So like the past been,

but with an entire web

server there, PHP web server.

So that's exciting for me.

- I agree, yes.

And especially, I mentioned in the intro

that you do a lot of live streaming

and I assume it's really good for that.

Like once you've, like

once you're going through

like an explaining stuff

through a video or through whatever

and then you just take that code

and upload it to something like this

and then people can actually go there

and sort of if they're

rewatching the live stream,

they can actually

follow along as you're going,

which that seems really handy.

- Yeah, I think so because I mean,

mechanisms are here, right?

If you just share a GitHub repo,

everyone can go and make it work,

but that's a ton of work

or maybe they don't

have a local environment

or maybe this is only Docker

or maybe this is missing some step

or when you have a

link and everything works,

it just works and it's one link.

Have you increased the

probability of people doing that,

right?

Because one click, no

logins, no setups, no nothing.

So that's very appealing to me.

- Yeah, that is sweet.

So would you be able to, I assume since

it's a whole web server,

you can like, you'll be able to install

like composer packages

and pretty much whatever the,

whatever your sharing

needs or are you thinking

that might not work?

- Actually, yes,

still not today, I think,

because Packages doesn't allow,

I'm not 100% sure, but I think to today,

they don't allow cores,

so we cannot download

them from inside the browser,

meaning we could do that

like server side with a proxy,

like downloading or

all the vendor operations

could happen on the server.

But yeah, it's totally possible

and there are some roadblocks to,

some hurdles to pass.

We need to, sorry, to

address some issues.

- But we'll get there

eventually, I would say.

I'm just, you can go, sorry,

you can go to playwithladeval.com.

- Yeah.

- And there's a Ladeval

new application ready to run.

You can see the video there, so,

and changing stuff, changing the files

and updating in real time, that's

happening right now.

Just the Composer

Packages and NPM compilations

are setting it apart from the typical

local development environment.

- Right, yeah.

I was sort of, this was,

that was a selfish question

because you know, at Ladeval News,

we wanna cover the community

packages and stuff like that.

And it seems like we're always,

having a local,

pulling them down locally,

trying to see how they work.

It would be nice to be able to just like,

hey, go to this thing

and boom, it's there

and we could take

screenshots and do all of our stuff.

But sounds like maybe

one day, you never know.

- It's not far ahead.

I mean, what you need

for that right today

is you just have the vendor

directory inside the git repo

and the .env file as well.

So that's not very traditional,

but that repo is meant to

be public and open and all.

So it's not the

mainstream way of doing things,

but if it's only for that,

you can do that right away.

Or Gitbot may be an

option for you as well.

I can show you in the end, I guess, or.

- Yeah, yeah.

We'll do that off the podcast.

But yeah, that sounds cool.

And then the other thing that you've got

since we mentioned it is VoxPop.

So tell us a little

bit about what that is.

- Sure.

I'll get back to the PHP WASM later.

I forgot something.

- Oh, no, no, we'll step back.

Let's go ahead and finish that.

- Okay, sure.

So this is the first part

of the WASM interest of mine

where I see a huge value.

So this is the first part,

like having the web server.

So all in all, it's a zip file and boom,

you get a web server

running in the browser.

I don't see it.

I don't foresee it using that

for offline first

applications or stuff like that.

I think much needs to be done.

But for the near future,

code sandboxes, I think, yes.

But there's the second part,

which is using only PHP

WASM in the main thread,

meaning you can run,

you know, script type,

equals text JavaScript.

So now there is script

type text slash PHP, you know?

So you run PHP in,

you put PHP in the DOM,

PHP code in the DOM and

you just run it, you know?

And I think this is bonkers.

And I don't know if

people just don't appreciate it

or they don't know about

it, but for me, it's bonkers.

And there's an

interoperability with JavaScript.

So I don't know, you tell me.

- Well, going back way back in history,

like PHP like two and three,

they used to could do that, like the

script type text PHP.

But I thought they

deprecated that at one point,

but I guess that's not true

or is it sort of different now,

what you're thinking

than the old Tommy wife?

- I don't know the first way,

but this one is in web assembly.

So I would bet seriously that it's--

- Yeah, so the old way, you know how,

like if you're in say like an HTML file,

you can do open PHP and

then whatever PHP code you want

and then close the PHP, you

know, with the question mark.

- That would run server

side, no entirely different.

- Yes, but no, but see

back in the old days,

you could actually, there

was two ways you could run PHP,

like it's still server side, right?

So you would open and close

it the normal traditional way,

but then you could also

do script type text PHP

and close the script tag and that would

still run server side

and that was just sort of a

way you could sort of use PHP.

This was, this is way

back like early 2000s,

probably like PHP for maybe like 4.3.

- Oh, maybe for my time then.

- That was way back, so

there's my little PHP history lesson

is you used to could

actually use that in as a normal,

like in your HTML files for,

or in your PHP files basically.

But anyway. - I look into that, yeah.

- Yeah.

- So yeah, this is different.

This is really running

PHP, like you click a button

and this PHP runs on

the click of that button.

That's it locally, so.

- Nice.

That's awesome, yes.

- It's just bonkers to

me and I think many folks,

maybe this number is

reducing, but where I come from

and I think still today,

there are many backend developers

that maybe are scared or

never got into JavaScript

or they don't want to, right?

And I don't know if it will happen,

but it's possible to have

a full stack PHP, you know?

So like you don't write

any JavaScript in a project.

So this is possible, so that's why.

I'm going bonkers

with that idea, but yeah,

let's see what happens, yeah.

- For sure, I'm sort

of that way, you know,

that's why I really came

to Embrace Lavire from,

you know, as soon as it

was announced and launched,

I was like, this just makes sense

and I don't have to

fight with Vue or React

or any of these other

things backbone, you know?

So it's, to me, that was just

life-changing there,

so I can't imagine, you know,

what the future's gonna bring.

I think it's gonna be awesome

seeing all these cool things

that's sort of being worked on.

So yeah, very exciting.

- Let's see what the future brings.

- Yes, all right, so now let's jump in.

So you're building

Voxpop, so tell us what that is.

- Oh, sorry, okay, so

Voxpop is a website builder

for non-tech people, the

audience for the platform.

So everyone can just come in

and like shoot some

pre-made blocks, right?

You change text, you change

pictures, boom, that's it.

And I'm co-building it with Shruti,

you might know from the

content creation on YouTube

and from the community, so in the

sentence, that's it.

- So are you going to, I guess,

like say I have a site already,

I can just like kind of pull this in

and I will automatically

get the sort of a block,

you know, site builder,

block builder type thing,

or is it more like it needs

to like hook into existing

like CMSs and things like that?

- Right, so it's

different, so everything is hosted.

We are thinking, not thinking,

we are going to have a

free tier and a paid tier

or multiple still in,

still a work in progress,

what goes where, but so

everything happens in our end.

So it's a no code,

application, right?

From the user standpoint,

you don't get to make any decisions

or you don't make any HTML,

you don't make any queries,

you don't make any code.

We might think to allow to put some CSS

for some advanced use

cases, but that's not the goal.

The goal is for people who are not

technical at all, right?

So if you can make a Instagram

profile or some Facebook page,

then you can make your website,

you can bring your domain, right?

And we will hook that thing up, right?

And your domain

becomes served by the website

that you built in the

hosted builder, yeah.

- Ah, I got you, understand, yes, yes.

So to me, it sort of sounds,

ah, not really, but sort

of kind of like a WordPress

or a Wix or sort of one of those,

sort of like just focus on building nice,

beautiful websites through your sort of,

this really cool UI thing

you built with the blocks

and things like that.

- Right, not, I mean, we want to make it,

we want to move away

all the levers and knobs

and every configuration,

so it's basically just,

just an organized, clean, how can I say,

a sane way of handling

with nowadays web, right?

Because there's all

sorts of customizations

and responsive modes

and all of that stuff

that you can control and decide, right?

And I think there's,

we think there's a gap

that it's not filled,

which is the simple things and sometimes,

and how does that saying go,

we're doing this because we thought it

was going to be easy, not because it is.

There's something like that, right?

It turns out making things simple

is much, much harder than it seems.

But yeah, that's the goal.

That's to make simple things, yeah.

- That's great, yeah,

because from my history

and personal experience,

I'll get people

coming to me all the time,

be like, "Hey, I just, I need a website,

"what do I do?"

And I'm like, "I don't know."

They're like, "Can we hire you?"

I'm like, "I don't

really want to do this.

"This is not for me."

So it would be nice to be like,

"Hey, I have a friend who

has this builder over here.

"You should just go sign up for that

"and buy you a, get the domain, do it,

"and let them handle everything."

And that sounds-- -

Sounds like the place.

- Sounds perfect for that, yes, yes.

- Yeah, right.

You have a friend which has

a shop or a race next month

and they want to put up a website,

some pictures, some forms, and that's it.

So, but then you will eat some

roadblocks, of course.

"Hey, I wanted to add this, I wanted to,

"okay, it's not gonna do that."

So then you need a programmer, right?

Or some kind of other option, yeah.

- Yes, yes.

Which, you know, now there's, you know,

once you get the website,

there's so many sort of,

like you said, no code tools.

Like, you know, you

could even, I don't know,

I'm just thinking like out of the box,

you could even do like some sort of form

to Zapier, to email or something.

You know, it's sort of kind of wild

what all you can build

with no code these days,

which is pretty amazing in itself

is how you can hook all

these things up together

and have sort of a, you know, this,

I guess your wording was

Frankenstein of a website

that's kind of hooked to

14 third-party services.

(laughing) - Yeah, I've seen those as well.

We've actually just put

this morning a video online

with the preview of

how the builder works.

So I can, so it's in our

Twitter or Voxpopcites.com.

You will be able to see how,

how the mechanism of the builder is

because I believe my

words didn't make honesty

to how simple that thing is.

So maybe see it for yourselves and yeah.

- Yeah, yeah, and we'll

be sure to have all these

in the show notes as well.

That way you can

easily find all this stuff.

Basically try to put

everything that we talk about,

you know, sometimes I miss

some things here and there,

but hopefully I'll

get all the big things.

But I'm gonna say, I

think that about does it.

Anything else you wanna

say that I may have missed

anything you're working on

or anything you're

excited about right now?

- Well, I am always about

wanting to do so many things.

But if I can say something

is thank you to the community.

I don't wanna miss anyone.

So I'll just say to Laravel in general.

I think from my early

days in programming,

I was always, I don't know,

switching or changing tools.

But since Laravel 4.0, I

haven't used anything else.

Like it's the backbone of it all.

Maybe there's some things

that come and go around it

depending on the project, right?

But Laravel has been

there since that time

and it made me grow as a developer

and meeting new friends,

knowing how to better

solve problems and that's it.

So I wanna say thank

you to everyone involved

in making Laravel happen.

- Awesome, well, thank

you for joining us today.

We had a lot of fun, Patricio.

- Thank you, Eric, it was fun indeed.