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.