Speaker doesn't want to block the users experience because they want to do analytics and stuff. Speaker stops screenshare and gets back to work. they send Jabez with some traveling music. Speaker has a lot of work to do. Speaker and Get will see each other soon.

Speaker is going to share they screen with a JavaScript Plugin and share audio just in case. Speaker has created a website for e-commerce company Builder. Speaker explains how they cut 99 % of their JavaScript with quick, Dev and party town. Speaker explains to Speaker what a web worker is and how it works.

Speaker is using Party Town to take some of the third-party scripts embedded within them website and put them on the side road. Speaker's website is currently under beta, but they want to take any app of any size to help with the performance without having to worry about third-party scripts that might hurt the performance. Speaker wants to allow third-party scripts to run exactly how they're encoded without any altar alterations.

Speaker is working on the side project. they are working out the flow that they want. They spoke about it last week. Speaker wants they project to load as fast as possible in the browser. they have been experimenting with things, which tries to ship as few files as possible.

Speaker added Party Town to a list of links. they looked up on mdn web workers. Speaker explains how a web worker works.

Speaker explains how a service worker works. Speaker explains how third-party scripts from Firebase can be run in the background. In order to bootstrapping an application, you need to include both a JavaScript file and a script. Third-party applications can have a lot of files.

Speaker has created a web app that allows offline users to access data from the last time they were online. they have also created a service worker. Speaker has created an application that will send you a message every hour asking what you do.

Speaker is trying to figure out how to create a Party Town for them application. Speaker explains to Astro how to install Builder dot IO Party Town and how to create a party town. Speaker explains to Speaker how it works. Speaker is looking forward to the beta version of the app. Speaker uses a lot of third-party scripts to pull data from the database. they use Firebase mainly for that purpose.

Speaker explains how third party scripts can block them script from running. Speaker has found some interesting articles. They talk about some negative third party stuff. Speaker is trying to leave a lane open for stuff that is important for the application.

• create web components
• web worker
• background thread
• javascript file
• users experience
• party town library files
• party town directory
• fetch request

Since you hung around, but those dreams have remained, and they turned around thought they'd need you.

We always could spot a rare.

Welcome back and a smile way, I think and I know you went to see you again.

Learn to me was their son, never lead.

You died.

He's got it on the spot.

Welcome back.

Welcome back.

Welcome back.

Hey, what's going on?

Welcome Back y'all.

All right, so just been working on the side part.

What, stretch it out real quick though, working on the side project and don't.

All right.

Not too bad.

I am working out the flow that I want because got to pull some data from here and check this thing.

So I am just kind of like stepping through it right now and getting it work the way I want, but the stuff is there just getting in the order that I want now, so, all right, so that's the fun part.

Cool now.

Hopefully, you are also making some Headway in, whatever it is that you are working on.

And I wanted to go over a thing.

I think it was last week.

We spoke about it.

And so there's an Other thing on top of it.

I was like, oh it's pretty cool.

And it kind of aligns with the stuff.

I have been thinking about as far as like web development in these projects, the kind of make them as quick as possible.

You know what I wanted them to load as fast as possible and it seems like we have so much stuff that we're trying to jam into the browser.

So people can check stuff out.

It's just so that's why I have been kind of playing around with things like Astro where tries to like ship as few as possible, so you really as a developer or really thinking like all right.

Do I really need JavaScript for this?

You know, and that's coming from a JavaScript developer Advocate, you know, I mean, so a lot of things are being used for jobs.

Going to be probably don't need to like you can use JavaScript so much bigger great things, you know, I mean, yeah, so, okay.

So the thing so what we spoke about last week.

Well, let me share my screen.

Plugin for sure.

My screen.

I am going to share audio just in case.

I am not sure if we're going to need it.

But just in case, all right, so I think it was last week when we spoke about the quick web dev framework.

And from what I got.

It seemed similar to what Astro was also trying to accomplish.

Whereas you ship as you try to ship as much just like HTML CSS to the browser first and then if need be you add some like JavaScript and it will like rehydrate some stuff while you're doing it and I guess what Astro does.

So the folks behind it was my last one.

So em every actually created.

Angular JS.

Adam Bradley co-creator of the ionic framework and creative stencil GS which I have used to create web components before.

And in this is the company Builder.

I 0, so, this is kind of like their framework that they use Builder.

I oh, it's like, it's like, A click and drag no-code thing and to where you could just create projects.

Yeah, I think they're specifically going for like e-commerce if I remember correctly.

And so you can see how they cut 99 percent of our JavaScript with quick, Dev and party town.

Now party towns where we're going to talk about.

So real quick.

Let me just add these links.

Through the list.

So it will be next to the recorded video.

And yeah, so quick Dev, they had some stuff here.

So they're using like Shopify with those one where.

So yeah, so you got to see.

How quick it is to load your page, then if you just have like a bunch of stuff with JavaScript.

See, on the left is using their thing on the right is, I guess the next JS.

All right.

You know it.

Angie the same thing.

Alright, cool.

So, like I mentioned Party Town here, right?

So I let go party town.

So great name is hilarious.

Tells me nothing really about what it does, but it's a great name and So you can run third-party scripts from a web worker.

Right?

And the thing is a lot of times what kind of slows down like loading for pages is that everything is being done on the main thread?

Like this is just one pathway like you think about like a highway and you have all these cars trying to get on the highway.

It causes backups, right?

Same thing as far as Stripping information to the browser.

So what web workers are kind of like a side street, so you can send stuff off on that and it will help ease.

The congestion of what's happening on the main highway kind of thing.

These, that's how I kind of understand it.

And I actually looked oh, by the way, did I add this on thing?

I added.

So it's Party Town.

Dot Builder, got IO.

Yeah, I didn't add that.

Let me add that to a list of links and cool now.

So I looked up on mdn web workers, right?

So that would be able to explain it a lot better than I just did hopefully and so web workers makes it possible to run a script operation in a background thread.

So not on the main thread but on a background thread it's almost like a side street right separate from the main execution.

Of a web application.

So not the main highway but like a side street.

I mean the advantage of this is that laborious whatever you want to see it processing can be performed in a separate thread along the main usually the UI.

So a lot of times the main stuff is set for like the UI so the things you're going to see.

So that's why you want to get the UI stuff.

So what people can see as quick as possible, you know, I mean, like I said, usually the UI thread to run without being blocked.

Locked / slowed down.

All right, so I added that now, there're all types of different web workers.

So what do you may be familiar with is the service worker?

And a service worker essentially act as proxy servers that sit between web applications the browser, and the network when available.

So things like pwas, use service workers.

And so that like when you pull down information from a website the service worker can be used to cash that information.

So that the next time you try to load that site, if the data isn't different it will load it from the cache and load a lot quicker.

And even it will help with like offline to.

So if you're offline, you can still show data from the last time you were online, right?

So I guess things that don't change a lot.

So it may be like, like documentation to things or what have you may want to have it to where I can cache it locally.

And so the next time somebody needs to use it, if the even is they're not online, they can still pull up the information.

So yeah, so that's what the and also you can like change network calls and things.

You can do a bunch of cool stuff.

With service workers and one of them being now I created.

Oh, I also so, yeah.

So bunch of progressive, web app stuff, and he says, how they use service workers and things.

So let me put that in there as well.

It's just kind of like laying the foundation for party work party town party, work party town.

So I am just kind of giving like different aspects of things and then I created what you do.

What you do dot i n and is all of you could tell from that but it's a thing where a lot of people like myself included, say, I am so busy, but then you think like, well what have I been busy doing?

You know, I mean and so this is an application that will send you a message every hour on top of the hour asking.

Hey, what you do?

And then you just type in what it is that you're doing.

And so I am using a service worker.

And like a messaging service through Firebase and what's happening is that I am sending out a message on the Firebase.

And so if you subscribe, you get added to the list of people to receive that notification or whatever, right?

You just like a signal to say, hey, send a notification and the way you subscribe is through a service worker.

And so you like you're listening in on the Firebase services.

So if you go to In service workers move this over and then so you can see there's a Firebase messaging service worker.

And so, it's basically listening for any push requests coming from Firebase and it will just pop up saying, hey, what you do any respond with what you do?

And yeah, so all that to say that it's cool because it's things that can kind of like run.

The background.

And so you don't even have to have the browser open for it to work.

And so yeah.

All right.

So the hope is that you find out where all that time went basically.

All right, so now back to party town.

So what party town does is take some of those third-party scripts.

So I will have you ever seen sometimes, like, to get things working.

You're going to include this script, and you got include this script.

And this thing, and this thing, for example, like, I think bootstrap, I think to do some of those things you need to like a JavaScript file, you know, I mean, it could it all again, and he's bootstrapping a minute, but like, sometimes 30, part, third-party applications, their script files can be huge, and they could block your application from loading properly, right?

So what party town does, what it looks like?

I haven't done anything with it yet, but it looks like, Tom is a lazy say, party.

Town is a lazy.

Loaded library to help relocate, resource-intensive scripts into a web worker, which we spoke about before.

It's kinda like that side street, right and off the main thread.

Again, mostly used for like you.

I and the main Highway its goal is to help speed up sites by dedicating, the main thread to your code and offloading, third-party scripts to a web worker because again, their third party, so you really don't know.

Like how they were kind of created, you know, how you did your code and you try to make your code AS performing as possible.

Somebody else.

Maybe not so much, you know, I mean, so by using Party Town, The hope is that you will be able to take some of those third-party scripts and put them on the side road.

At least from my understand.

So yeah, even with a fast and highly tuned followed.

Oh following all of today's best practices.

It's all too common for your performance, winds to be a race to the moment.

Third-party scripts are added.

So by third-party scripts, we mean code that is embedded within your site, but not directly under your Control, if you example include analytics, Matrix, oh, I haven't seen the movie yet.

Only the new one metrics ads A/B, Testing trackers, Etc, again.

So yeah, so sometimes these scripts, so like even like Facebook like pixel things or whatever, they put in your thing, stuff like that.

So it's under currently under beta cool.

And so what they're looking to do is to take any app of like any size.

And like be able to help with the performance without having to worry about third-party scripts like hurting your site's performance.

And so yeah, free up, the main thread resources to be used only for the primary web application execution because just because you put analytics on there that shouldn't hurt the users experience.

You know, I am saying our tracking stuff or whatever, you know, I mean that the users on your site not for the analytics, you know, I am saying or to be tracked.

They want to get whatever information you need.

So doing this.

I think it'd be cool.

And so, yeah, so yes, so you can allow third-party scripts to run exactly how they're encoded without any altar alterations.

So basically, I just like, hey instead of running on the main thread.

It's going to detour you over to this side street.

So you can keep doing what you're doing, but not block everything and so here's like a graph, which is pretty cool.

So without party town, so you have the main thread again.

We spoke about its kind of like the UI, your application, your what you made.

And but you have all this third party stuff that are like Other stuff that's in the way as well.

And so you only have so much that you can do.

So sometimes the third party, scripts can block your script from running, right?

And so but with Party Town know.

So here is the main like Highway, like I was saying before and then here's like the side street.

And so you're like, hey anybody, that's third-party.

We don't know.

You just go through the side street, I am saying, you will get to where you need to go to, but we're trying to leave this Lane open for stuff that We know about, and that's important for the application, right?

So, that's pretty cool.

And they talk about some negative third party stuff.

So sitting too much JavaScript cpu-intensive script parsing insufficient HTTP caching.

Oh bunch of stuff.

And so it's a good read, the kind of check out.

So they kind of say some of the other stuff.

That's so like I mentioned Facebook pixel.

I am not sure what mixpanel HubSpot, segment amplitude, Google analytics, tag manager, a lot of stuff they have.

Different articles.

Now, what was cool was that I noticed.

Hey, look Integrations.

We got Astro.

So I was looking at that so you can use it with a bunch of other different like libraries and Frameworks.

So if you just want to just regular HTML, Which is always like a good place to start.

So, what you do is, so it looks like You in line party JS.

So somehow you Huh?

Okay, so I guess how do you oh, well, I should probably figure out how to include in the getting started.

So yeah, so you have the script text type Party Town.

Oh, then I guess it just on.

Okay, so with the Integrations, so, maybe they will show you how to, okay, so you can figure it and then you should be added to Windows.

So the configuration should be added to window using the Party Town, global object.

So here, okay.

Then there's a party town script.

So you're saying, so the third party stuff goes within the type of text / Party Town.

Okay, and then There's A Party Town.

Copy lib.

CLI, copy task.

Okay.

So, okay.

So now copy the party town library files to the public directory of your application.

Says, if you're using like, just vanilla HTML stuff.

Yes, like they're saying how the lowest level party time is not tied.

To one specific framework or build tool?

All right.

So, yes, so you need to okay, so there's a copy library files, which is this so npm package so you okay, so it's going to make like a party town directory and then you need to copy the files into it.

All right.

So, yeah, so it kind of steps you through how to do all that, but let us take a look at the Astro stuff.

And so, you just install the Builder dot IO Party Town.

All right, and then in the head of your ASTRO File, you need to add like a snippet to a script and it's using the Party Town, snippet.

Config.

Yes.

Yes, you're importing it.

So once you import do the npm install.

You will have this Builder.

I owe that IO / Party Town, / integration import that, but we imported the party towns snippet.

And then you have the party town, stupid HTML, that you create from Party Town, snippet.

With some things you put into there like some like Flags would have you they put into the arguments?

All right, cool.

And then 0, and then you have this thing where you have the script.

And you're saying the HTML for that.

Alright, and then, I guess you can set the party town, and you put the inline third-party scripts there.

Okay.

I am about to dive into this more but that's basically what it's supposed to do.

And yeah, it looks interesting.

Interesting because here you can see that you have the script type text' party town and then you put the source of that script tag to the third-party analytics or whatever.

It is library.

And because sometimes the type you could be like module or whatever, right?

So but you're sending it as text party town.

So that the party town script knows.

Oh you want this analytics?

JS file to go on.

The web worker or the side street?

Yeah, think that's where it is.

Or you can also put the inline Party Town script there when she gets like, oh, okay, then there's like the third-party script.

Yes.

Again.

I have to, like, go through this and I don't see like an actual like I have to look for an actual example, so I haven't seen that yet.

But again, like I just heard about it.

I thought was an interesting idea.

Tia I haven't done anything with it yet.

But yeah, it's all right, so, All that to say, I think it's pretty cool.

And I am looking forward to is in beta now.

So I am gonna keep an eye on especially since they have that Astro integration.

I don't really use a lot of third-party scripts stuff.

Come on.

Like, I don't do analytics on my sites or like, tracking or anything.

The only really third party thing I use is mostly like Firebase.

A lot of times.

I need that for like to pull from the database and even then, I like reduce my JavaScript stuff because with firestore you can actually hit it as if it's like a rest endpoint.

So, if I don't need to like JavaScript really heavy, like if it's just getting data like a one-time thing.

What I will do is I will just make a call like a fetch request to the end point in my fire store and it's pulled every mission that way because I don't need it to be like real time or anything like that.

You know I am saying?

So I just do that and get the information that I need.

Speaking of that.

I might do that.

On this project.

I am working on.

No.

No, I need to do other stuff too.

Like I need off.

So if it's just getting data from the firestore, I would just use like a rest endpoint to get it, but if I am including other things and I will just use that as well.

But for like, if I, if I ever come across with the need to have like analytics or whatever, this could be a cool idea.

So, because it again, I don't want to block the users experience because I want to do analytics and stuff.

So yeah, but yeah, so It's an interesting idea.

And so if I do anything more that I will probably bring it back up and talk about how it worked out and things.

So, yeah, so let me stop screenshare.

We get you all back to work again.

And thank you all for hanging out, and we will have one more break session.

So again, if you want to come on and talk about a thing, you found.

Cool now is the time.

Otherwise, what is going artist website that we have been playing on the radio show and listen to music watching videos, you know.

Find more information about the artist, but till then I am going to get you back to work.

Send you all off with some traveling music.

This is new Jabez featuring a Pawnee be and the track is called.

Thank you, and thank you all for hanging out till next to the next break session.

I wish you much productivity, and I am hoping to be able to get this thing pulling data that I need from the site.

But, yeah, neither here, nor there.

I got stuff to work on, as I hope you do as well, and I hope you Get, it's worked out.

Alright, so again, thanks for hanging out, and we will see you soon.

I almost forgot to create the highlights video and now here we go.

Thanks to all see you later music piece.