Episode 126 / 2022.02.14
Andrew Welch, Ryan Irelan
On this episode, we talk with Adam Bradley from Builder.io about using Partytown to improve website performance while still allowing marketing to use a plethora of tracking scripts.
Partytown is a way to run all of your third-party tracking scripts (or “tags”) in a separate web worker thread, so the main thread is free to render the page without jank or white screen loading delays.
It is super simple to set up & get running, and all of your tracking scripts work as before… they are just sequestered in a separate thread so they don’t impact frontend performance.
Special co-host John Morton joins us to talk about his experience setting up and using Partytown, and also implementing a similar service from Cloudflare called Zaraz.
Join us for the party! 🎉
- Partytown Github
- Partytown Documentation
- Partytown Integrations
- Tags Gone Wild! Managing Tag Manaders
- Using Web Workers
- CanIUse Web Workers
- Google Tag Manager
- Comlink
- Worker-DOM
- Service Worker API
- SEOmatic Partytown Update
- Creating a Reverse Proxy for Partytown with AWS Cloudfront
- Module / Nomodule pattern
- "Serving Resources Locally" PR
- devMode.fm changes to add Partytown
- Atomics in Partytown
- Atomics Documentation
- Why Cloudflare Bought Zaraz
- Zaraz use Workers to make third-party tools secure and fast
Andrew: And here we go.
Andrew: Welcome to devmo fm a podcast dedicated to the tools techniques and technologies used in modern web development I'm Andrew Welch from and ny studio one zero seven
Ryan Irelan: I and I'm Ryan Ireland from http://ryanireland.com
John Morton: And I'm John Morton from jmx http://two.com well I'm from many places so you know from Connecticut I don't know.
Andrew: John's not sure where he's from and ah and today we have on and today we have on Adam Bradley the director of technology at builder io how you doing Adam.
Adam Bradley: And.
Adam Bradley: Pretty good and how are you guys.
Andrew: Doing fantastic. And in fact, we want to talk to you about this thing called party town. So first of all I love the name party town is a fantastic name. But if you were at the airport in Cusco in Peru and you had a bag.
Adam Bradley: Yes.
Andrew: Of these coca leaves that you saw the natives were chewing on them and were enjoying them and you had them packed in your luggage and you're trying to go through security and the security woman looks up at you and says I won't go through your bag if you explain to me what party town is what would you tell her.
Adam Bradley: Partytown is a way to make your websites faster so that if you have like an ecommerce site. You could sell more products.
Andrew: All right? So it makes it faster So is it What tell me exactly what the sync is and and what it does and why would it make it faster.
Adam Bradley: Sure. Yeah, so I do like to I probably should start out I like to start out with like this is still entirely experimental right? It's not 100% proven I'm not saying you need to deploy this to http://amazon.com today. So I do yeah.
Andrew: Well well a lot hold that all lot you're looking. You're right now you're on a podcast with 3 people that have party town running in production right now and you just told us we shouldn't be doing it. Okay, all right continue go ahead.
Ryan Irelan: And.
Adam Bradley: Yes.
Adam Bradley: Yeah, so so what partythtime is so um, basically we're able to take third party scripts and run them inside of a web worker rather than the main thread and so the big idea is is that this frees up the main thread to run your application all of your react code and your code whatever it is whatever your code's running. It can do its job as fast as possible with all the resources that has available and then the stuff that kind of can run in the background. The stuff that can slowly you know post to Google tag manager things like that we can offloadud that into the web worker and let us take its time and do its own thing somewhere else in the other side of the world that that we kind of just don't really care about his performance as much. Um, and so because of that separation the the whole idea the whole theory is is that that's going to allow your main application to run much much faster and with that the benefits would be something like especially like ecommerce site where like time to interactive you know how long did it take the page load how long to take images load. That matters a lot for someone making a lot of sales and if it makes just a bump in 1 % sales things like that it makes ah you know it's definitely worth it. So that's the whole idea behind this is that we needed a way to pretty much I think you know any web developer can is familiar with the story of they spend. Weeks months. Whatever trying to make their website a lot faster and they've achieved it achieved. It. They get a hundred scores. Everything works perfect. They're very proud of their 100% lighthouse score and then I'll send somebody more than likely the marketed team adds about 20 analytics to their site and I'll send their score in like a 40 you know? So it's very and I've been through this numerous times in my career and it's very like yeah exactly and so like you're like what I did everything I could possibly know to make this fast series and now I'm being told that there's a lot of unused Javascript from Google tag manager by Google telling you that you need to you know, improve it.
Andrew: Oh yeah, everything is wonderful until the client gets involved right.
Andrew: And to be fair, they don't know a lot of times I work with marketers and they don't know the impact of what they're doing. They just know this needs to be tracked right? So to to be fair I feel like they may not even be aware of this even though I agree it is the bane of my existence.
Adam Bradley: He's like like.
Adam Bradley: Um, yeah. Yeah, and and I totally totally like to be absolutely fair is like I think it's a necessary evil like especially for a business I mean like there's a lot of data that goes into making decisions like we can't just say like well it's going to slow it down by 1%. Let's not.
Andrew: Ah, oh.
Adam Bradley: Let's lose all this data but like ah how would you make a business decision. So like's I think an analytics are absolutely necessary. Not even necessary Evil theyre they're necessary. It's just that there's a lot of things that they do also that slows on your website. So um, so any any large scale site. That's not like a personal blog like absolutely. I Don't think it's fair to say well just remove all through by Scripts That's that's what you should do.
Andrew: Well, there is a tipping point right? So let's say that marketing is trying to track exactly what happens in their purchasing funnel. There is a tipping point in terms of conversions that if you make the performance. So bad, you're going to impact.
Adam Bradley: Get.
Andrew: The conversions that you get sort of a schrodinger's cat kind of situation where just the fact that you're observing them going through the flow if you make the performance so terrible that can affect the very thing that you were trying to track right.
Adam Bradley: Yeah, yeah, and then then it compounds like the the more you add like if it's just Google tag manager you're like oh this isn't so bad. It knocks down 2 points. But then when you've got 15 added you know each 1 kind of makes the other one worse.
Andrew: Oh yeah, ah.
Adam Bradley: Um, because they're all doing their own things and and the other thing I've really noticed in you know, scanning through the the internals of how these these analytics are working there. There's a lot of them that have set intervals of like every hundred milliseconds you know scan the dom for something right? and so like 1 of them doing that and that's very good. You know 15 of them doing that in many different locations. That's that's kind of why our. Our sites are being hit so hard is because there's so much that they're doing to your dom and that's like the kind of the whole point behind python it's like well let's like sold them down a little bit. Let's kind of batch those operations. Let's do it when we're when we've got time. Let's do it when we're not you know, affecting performance and and that's kind of the the idea is like um. Yes, they're going to run a little bit slower but that's also kind of a feature in my eyes. So.
Andrew: Well let's talk about this for a second because we're not talking about running the scripts somewhere else or not running them at all. We're talking about running them in a different thread. So let's talk about what that means and what even a thread is right? So if you load your your browser.
Adam Bradley: Sure.
Andrew: And I understand there's a concept of something called the main thread that stuff runs on what does that mean and what does it mean to then run something else in an additional thread tell me what that means.
Adam Bradley: Sure so the main thread is basically everything that you can see it's it's the it's the main browser. It's the buttons that you click and it's how everything gets updated and so that's traditionally basically everything we know about the web is is on the main thread and that's just how javascript has kind of always worked as everything is. Is together and the images to together htmls together all ah happily working together on the main thread. Um, and for quite all I mean like almost it's been practical for over a decade now is there is also technology called web workers which have been available to all the browsers think even ah I e 9 or 8 has web workers. Um. Don't quote me on that I don't know but it has been available for quite a while and what web workers do is. It's able to use the other you know process the other cores that your computers have and runs this longrunning task into a different thread which doesn't affect. The main thread. So if you have something that's that's blocking and it's let's say you have a while loop that just takes a second to to do something normally that wild loop would completely lock down your browser and you won't be able to click anything and it just your site would not be responsive at all. But if you ran into the web worker. Um, it add would have no effect onto the main thread and the web worker could be blocked for one second for all, we care, but it really doesn't matter because it's not affecting your website and it's it's actually preferred to have long-re tests and things like that inside the web worker. So um, it's basically allowing multi-threaded. You know Javascript applications to be possible on the web and then I'm assuming the very next question is like well how can we don't just always use them everywhere right? They sound great like they solve all problems right? sure.
Andrew: No, actually that wasn't my next question my my next but that will be the the question after this. So actually the next thing I was going to say was a stupid analogy that I was going to make is you go to? Mcdonald's you go up to the the window and you order a big mac a fries and a coke. The traditional way where everything is running off of the main thread is 1 person takes your order. They go back. They make your burger they wrap it up. They go to the drink counter. They fill up the drink they go to the fries. They throw them in the basket they put it all in the bag. And then they charge you for it and then they they hand it to you right? that that is single threaded that is 1 person doing all of the work here in a multithreaded environment where you've got extra workers right? They're even called workers. What a fantastic thing. What would happen is you 1 person takes your order and then.
Adam Bradley: Yes.
Andrew: Person making the burgers sees the order come up starts making the burger same thing with the fries. Another person is making the soda as soon as they're ready. They all just deliver them to you and deliver them to that one person they put it in the bag and they hand it to you right? So It's the same work is being done but it's being done in parallel. By other workers is that What do you think is that all right.
Adam Bradley: I think that that is ah that is a great analogy to explain how like more than 1 thing can happen at the exact same time because basically've got 2 workers doing it and then there's the added effect of like oh with the browser. You know when you've got 1 person doing it that can also make the browser kind of jenky. Because they're they're thinking about 1 thing like if if ah say someone's making the burger and they're being asked a thousand questions. It's very hard for them to yeah yep, yep, exactly? So yeah, that's a great analogy.
Andrew: Yeah, whole lot of minutes sir whole lot of minutes sir I'll be right back hold on? Yeah yeah, exactly? Yeah, so and because we're we're on modern machines that have tons of cores tons of places where these things can run. We're under utiliziling our machines when we load most web pages because it's single-threaded. It's just you know it's a little bit more involved than that. But let's just simplify it and think about it from that perspective. But now my my question to you Adam is why aren't we just doing this all the time then.
Adam Bradley: Yes, especially since it's been available for a long long time. Um, so there are a couple good projects out there like I think comlink exists worker dom exists where there is ways to easily run long-running tasks. So like if you had to do a huge calculation that Norman takes a second. Um.
Andrew: Yeah.
Adam Bradley: It would be best to do that calculation in the web worker and you can send back the value over the over the wire basically using post message and that's that's been possible for a long time. Absolutely preferred. Um, but what the web worker cannot do is access the dom or the window. So it's not able to.
Andrew: M.
Adam Bradley: You know do query selector. It can't find the body You can't change css and things like that and so that's kind of where is like well that's the majority of what webs do is that it's entirely changing elements setting attributes reading properties and so like unless you're just yeah.
Andrew: So it can make it can make the burger but it can't hand it to the customers. What you're telling me.
Adam Bradley: Well yeah, it can't even get access to the buns it just you know right? it like um, it's It's a great. It's a funny way to put it. Um.
Andrew: Oh my god.
Adam Bradley: It basically yeah, it's not able to access the dom that to do everything that our web apps are asking them to do you know? So like you're writing a vue app or're something like that. It's it's updating the title and and all that so like um without being out. Update the dom it's very very limiting to like it only can be given data. And like here's some Json data do some calculation and return some Json data and that's really what's been used for from the beginning. But so that's where python comes in is that it basically allows access to the dom and again this has even always been possible in the past where you can you know between the 2 worlds you can. Asynchronously posts I want I want to read what the document title is and then the main thread is like well this is a document title I'll respond to it asynchronously in the post message response. The problem is that with ah everyone else's traditional code. Basically the Google tag manager and the billions of other scripts out there. They're all. Ah, running synchronously so when Google tag manager asked for document that title is expecting to have ah a blocking value immediately. You know on the as ah, the value of that. It's not waiting on a promise or a callback like none of that code exists. It's just like document dot title. The value equals this. And so there is no polyfills really to allow that to work because just at the lowest level communicating between threads has to be asynchronous so there is no way to kind of like trick it other than always just batching up the entire document and sending it over. And that's ah, that's a lot of what worker dom does but that also you know just doesn't scale for other people's code. So and what I mean by this is like I can't call up Google Analytics tomorrow and say like you know you guys are doing it this way. Um I would wretch rather you have you use ah a callback to read the document title. You know they're not gonna be like oh I'm sorry I don't yeah, we'll we'll get that done. You know and's even if they did do that and they changed their responses for the billions and billions of responses that happened just the time I was talking. We've got millions of other companies that have scripts written a certain way too and they're not going to change the way. It's written. So it's like we just can't ask everyone to rewrite their code to. Handle dom asynchronously because there's also there's no apis to do that so that.
Andrew: So to get back to my dumb analogy because I'm getting confused my head is starting to spin this hotel Coffee is just not doing its Job. It's almost like we we've got all these workers that can help us out but they can't really talk to each other and they don't have access to the most important thing which is the the order. Coming from the customer right? So We need some way for these dom processes to be able to ah sorry for the we need some way for these worker processes to be able to talk to the the main process and be able to get information from the dom and you're you're also saying essentially that. All of the scripts that you want to run in these other workers. We can't expect that the authors are going to rewrite it so that it can work in a way that will work in in with asynchronous Results. We got to figure out some way that we can shim it So it's.
Adam Bradley: Yeah, yeah, it really is that because it's just not realistic to say to tell the entire world like rewrite everything to be asynchronous because it's not gonna happen. Um, and so what part? Yeah, it's.
Andrew: Just going to work and that is that what party town kind of the magic that it implements for us.
Andrew: Yep, and it's confusing like and it's really confusing so one of the reasons why there is 1 thread is that it just simplifies the model of what you have to be able to do to compose a page because this is a super complicated thing and anyone who's ever done.
Adam Bradley: Okay.
Andrew: Done threaded programming. It actually can be really complicated to do well and to do right? especially when you have multiple threads running that kind of depend on each other and all that kind of good stuff. So how did you solve it.
Adam Bradley: Yeah, so so there's 2 big tricks. There's 2 different ways to solve it with at least that I'm aware of 1 is with ah what I pretty much call it trick is using service workers and synchronous xha requests that the service worker intercepts. Um. And so the the big idea is that we create a service worker on the main thread where we create a service worker and we say if you ever happen to see this url. Let's intercept it and then I will respond with some data for it. Um, and so that is kind of our link to allow things to happen to kind of jump between synchronous.
Andrew: Um.
Andrew: That's your Api.
Adam Bradley: Yeah, between synchronous. Did we convert it into an asynchronous code. So according to the web worker. We pretty much build up like hey I need to know document that title. So here's my little format of the json object that I want to send. Let's do a synchronous request to this yeah url and synchronously I'm going to get a response. Of what the data was and so my little proxy of document that title when it gets called according to that code. It was immediate like it doesn't it doesn't actually realize that it took four milliseconds to to happen according that code it got it immediately. It was blocking call. It was an asynchronous code. Um.
Andrew: That's pretty Interesting. So for anyone who doesn't know service workers they allow you to intercept any request coming in or out of the browser. So they're They're incredibly powerful but they can sit there kind of like a traffic cop and they can look at every request that is coming in or out. And they can decide whether they want to do something or pass it on to the browser or whatever and it sounds like what you've done in a very clever manner. Is. You've implemented a service worker and I don't know we'll call it a rest api I mean I know it's not probably rest but something like that where.
Adam Bradley: Yeah.
Andrew: You've got url segments maybe or some other way of just describing your api and and the service worker is what looks for those api requests and then sends them off and and handles the communication. That's really clever. That's a really clever way to do it.
John Morton: Um, so is it kind of like a proxy or something like a javascript proxy.
Adam Bradley: Um, yeah, and. Yeah, so so basically we we build up. Um, you know the dom really and that's another things like so the dom doesn't exist whatsoever inside of webworker so we have to provide something called document. Um, so then you're going to like well you have to add you know you know, get attribute and. Class lists and things like that and so like that could easily become a you know one megabyte file to implement the dom just like something like Js Dom providing for node and so had we re-implemented the entire dom um one that would have been a huge file and 2.
Andrew: Yep.
Adam Bradley: We would have defeated the entire purpose because now we've we're telling everyone to download this huge object to speed up your website so it would have been counterintuitive to and probably would have been worse to do that So instead. Ah a big part of party town is pretty much just um. Making a bunch of proxies that look like the dom and and it even doesn't even copy like I don't know the word get attribute or set attribute I Just said on the main thread of like hey give me this whole dom implementation of like what's a function. What's a property just kind of it kind of scans through everything. Like oh this, there's ah on a window. There's a thing called document on Document. There's this thing called good attribute you know and and things like that and so we build up this quickly on the main thread we build up of like basically what is the dom made up of and we throw all that information over to the web worker and then the web worker creates basically that recreates the dom from this information making proxies.
Andrew: Ah.
Adam Bradley: And so we didn't have to rewrite the dim. We don't have to worry about differences between you know, if Chrome ships something new tomorrow. But so Safari doesn't have it and that's all part of it is where it's like what's not supported in this browser so it doesn't know about it and so um, so a lot of that happened. So basically I didn't have to re-implement the dom I just have a bunch of proxies that. Know how to say like well' document that title is called so. Let's just forward that command over here that knows how to do what to do? Whatever right? and it responds to some information. So like the actual implementation on the web worker side is oblivious to how any of that stuff work. It just like oh I'm a proxy I'm going to call it.
Andrew: M.
Adam Bradley: Property and I return this value.
Andrew: That is really cool and the long and the short of it is that what we're now able to do thanks to the magic that you have implemented that you just described is we can take our scripts and I guess it could be absolutely anything. But the way I first approached this was from an analytics tracking point of view because like you said 1 of the most frustrating things and I'm sure Ryan has experienced this and John has experienced. This is you create a site and you put Google tag manager on it and you might even do you might even go the extra mile. Where you're you'll self-host that script to make sure that you you've got the right headers on it and all that kind of good stuff but inevitably what that essentially is doing is it's it's leaving the teenage kids at home alone when you're going out, you're going on vacation right? They're going to throw a party there's going to be stuff everywhere it's not going to be party town it's going to be worse than that. The cops are going to be called illegal drugs like all sorts of stuff is going to be going on I've seen that so many times that marketers and you know again I'm not blaming them. They don't know necessarily that it is causing these problems and they want to track stuff on their site. But they're not aware of the impact in performance. So they just load it up with every tracking thing under the sun I mean I've seen analytics implementations that have just literally twenty megabytes of Javascript that ends up getting long tail downloaded to the site. It's incredible it's incredible and all of that work.
Adam Bradley: Yes, yeah, yeah.
Andrew: All of that Javascript is stuff that has to go to the client and it has to be um, there's ah, there's a stage where it has to be of I'm forgetting what it's called. It's it's got to be executed on the client side and. That all uses up time and space on this device which a lot of times is going to be a mobile phone and it can be pretty horrendous in terms of the performance and so that's why I've been approaching using party town for that and ah, my understanding John is that you kind of did the same thing is that right.
John Morton: Yeah, just as a test I did a test on my own site in anticipation of maybe doing it on a client site who the client shall remain remain nameless because you know Nda's and stuff like that. But they love google tag manager and inserting.
Adam Bradley: Yes, yep.
John Morton: Loads and loads of tracking scripts for the very reasons you you guys have already talked about it's a business decision like what to do down the line based on analytics. So there's a lot of analytics. Yeah yeah.
Andrew: Yeah, tracking scripts are the tracking scripts are the cocaine of the web marketing industry and you're telling people go to studio 54 but you're not going to have any of this. It's not going to happen. They're going to put tracking stuff on there. Yeah.
John Morton: Just look Yes, just look.
Adam Bradley: Yeah, another thing I've I've noticed a lot is you know people changing their roles developers change marketers change and so like someone will like well this service is the best service. Let's install this one. You know time changes like actually this is the best service. Let's install this one but they left the first one in you know so there's a lot of like oh we're not even using these 5 but they're still making a big damage on the and the website so that's something that's like if you're not using it remove it right away.
Andrew: I've had the same thing where I've been called in to do consulting and the first thing that I do is I I talk with the marketing person there and say well what are you using and they're like I I don't know and so the first thing that we did is audit everything because it's exactly what you're saying. Where roles have have turned over and new people have come on and they'll end up with you know, 5 different scripts that are essentially doing the same thing and you got to audit it. But but John what was your motivation for trying to get this on. You're interested in getting it on a client site. Why what is your motivation.
Adam Bradley: Yeah, yep, exactly.
John Morton: Ah, so my client uses Google tag manager to manage all tags so which is kind of great at least there is like a single single entry point in the page. They're not like randomly inserting you know, like code for some like Linkedin Pixel or just. They're they're not messing with the code. They're just dealing with Google Analytic or sorry Google tag manager to add all of their well they are but they're not messing with my code. So if I can put the Google tag manager into a party town worker then.
Andrew: But they are but they are. John.
Andrew: M.
John Morton: And I don't haven't implemented this part of it yet. But like in um, in my mind everything they stick into Google tag manager will have their execution realm be party town.
Andrew: Is that correct is that how it works Adam.
Adam Bradley: That's largely how it works um with some caveats that like ah things that are more Ui based so like like something like intercom where it's got a bubble that pops up that also works too. But it's not as fast as if it was just.
John Morton: Yeah.
Adam Bradley: From the go and so there's so it's kind of ah we're discovering like pick and choose which ones you think are the the best ones for party town and so that's where really you know Facebook pixel Google tag manager for sure Google a analytics those are like the easy ones because they don't they don't really affect the ui.
John Morton: Okay.
John Morton: Um, yeah.
Adam Bradley: But like wistia you know, even wisty. You know the video service we have that working but there's a little things that like aren't working yet like little bugs that show up of like or is it the media source and media list. Objects aren't there and so there's a lot of little quirky things. So it's hard to say that like everything's just going to magically work in theory. Yes, it is going to magic work.
John Morton: Yeah.
Adam Bradley: But there's there's a couple odd apis that like canvas I got working recently? um I just I just can't say that everything's gonna just work magically.
John Morton: Yeah, yeah, well, that's why it's on my you know personal sites instead of my clients sites at the moment.
Andrew: Well and it may seem I want to reiterate this that all of the code is still running where it would have run before it's running in their client browser. But it's running in as separate thread. And it may sound like this is kind of rearranging the deck chairs on the titanic like you're still running all this Stuff. You know what's the difference. Well the difference is that the main thread isn't blocking So you're not going to see all that Jank you're not going to have that white screen while it waits for all of this garbage to load that Honestly, the client doesn't. Care about right right? I mean when you're looking at potentially implementing this I Assume that you are looking at doing it for performance reasons too a way to kind of allow the Marketers marketers to have their cake and eat it too so they can have their tag manager. But still have decent performance when someone loads the site.
Ryan Irelan: So yeah, in fact, I'm I'm trying to implement it right now as we're talking.
Andrew: Oh no wonder he had that look on his face so literally on air on the podcast. He's trying to make it work. Yeah.
Ryan Irelan: And so so I run a Adam ah a training site and I like you know I have video and there's a certain overhead there but also with um I like to know.
Adam Bradley: We're doing it live. Yeah.
Ryan Irelan: Communicate back to the email tool I use I Use So I know um like the type of account someone has and things like that you know so I can send them the right emails. So Some of these tools aren't like I've used intercom as well. Um, they're not great in terms of the impact they have on the performance. But yeah so I feel like I can have um, that's the goal is to have some of these nice tools but not have it slow down because I've done exactly what you said in the beginning of the podcast I put it Up. You know, did a test on white house I was like Wow like everything that I need is completely decimating my my score right.
Adam Bradley: Yeah, yeah, and it's like something that we don't talk about and we're all just kind of okay with.
Ryan Irelan: Um, I Yeah and and I yeah I'm just I'm just configuring my my ve config that's I'm just sort of yeah no, no, no, no, no yeah.
Andrew: So what is our status Ryan currently, you're trying to implement it right now live on the air I don't want no no text. Okay, no no tech support questions. Okay, while on air because I don't want I want to I don't want to bore people or at them or anything like that.
Ryan Irelan: So I I don't know I don't know how many percent this is for me this is more of an indeterminate progress bar than a determinate progress bar. But um, so what's interesting for me like John I'm doing it on my own project. But this is also it impacts customers for me. But so I can.
Andrew: But you're probably what 10% of the way there would you say.
Andrew: I see.
Ryan Irelan: You know measure as well when you talked about like tools like intercom. There's no, it's not that the the scripts will stop will not work. It's just as it's a delay until like the the little chat bubble pops up is that.
Adam Bradley: Yeah I would and that's kind of why I've still labeled it as beta. It's like I'd be fearful to say you know like use it right now because I know it's going to work 100% because I don't think that's the case like so with intercom I know it has we are able to speed it up more. So like ah every dom operation normally takes about 3 to four milliseconds you know, depending on the machine and so that doesn't sound so bad but when you've got thousands of them happening. That's when you can see things slowly pop in and so we've done a lot of optimizations where like all of the setters and then 1 gettter can actually turn into one message.
Andrew: O.
Adam Bradley: And that has made some huge improvements in in the performance and so with intercom we have a working version. It actually does work pretty well but there's still like some areas I would like to improve further yet and so that's why you know I just want and say like it's it's going to Absolutely you know, be magic right now. But.
Ryan Irelan: So yeah I can't imagine you get hate mail if the intercom chat Bubble took a little bit longer to appear.
Adam Bradley: Yeah, well and that's that sounds kind of nice thing about I will say you know don't put your web app inside of party town. You know a lot of people have kind of said like you know I've tried getting view to work inside of it things like that. It's like well it's not really intent. It's not going to make anything better. Yeah, and um.
Ryan Irelan: Wow.
Adam Bradley: And try to be clear like this is for stuff that is not critical. This is stuff that can take a second later you know and really and if you look at the design of all of these analytics they do work Asynchronously, you know Google tag manager has an async tag. It gets appended to the head after things have been loaded so like they're all designed to be kind of like a little bit later.
Ryan Irelan: Right? so.
Andrew: Um, right.
Adam Bradley: Um, and so that's the stuff. What's for even intercom doesn't start up that bubble until after the dom is ready and so like that's kind of the stuff. Party time is better suited for is like the stuff that can take a moment later. Let's put that over there. The problem is that they're also restricted to like they're going to fight for resources the second that they start to load and that's when you. You know it's going to be fighting that your click handler is not going to work now because Google tag manager is trying to install. So it's things like that.
Andrew: So Adam because I was having you on the show I created a little bit of work for myself. So I maintain a plugin called seomatic for Kraft Cms and it's what it sounds like it's an Seo plugin one of the things that it does allow you to do is it allows you to activate a number of very common tracking scripts from gtag to Google Analytics 4 to ah, Google tag manager matomo all the things right? just to make it easier for people to turn them on and I added a feature in there. It was already built into it from a programmatic point of view but I added it to the gui that you could add additional attributes to the script tags that it's going to create because. Because I want to be able to create type equals text slash party town right? So I did that I pushed out that update and then I I updated the devmo fm website to use Partytown. So it's using it now.
Adam Bradley: Right.
Andrew: It's using partytown 100% to do the tracking via Google analytics and it it literally just worked so all I had to do was I inlined a little bit of the the partytown js script I inlined that in the head right. And then all I had to do was in in this case I was actually using seomatic to generate that little stub that is needed for Google Analytics I just added the type equals text partytown attribute to that script and I was done. There's nothing else to do because apparently what happens is that little. Shim loads and then it will look for any scripts of the type text party town and I didn't change anything in the script I just added that type to it and then it will automatically do what work its magic to run those via the the web worker. Right is that kind of how it works.
Adam Bradley: Yep yep, exactly basically and so that's the other you know, big trick behind this is that the type attribute of a script tag. You know you can have it type equals text javascript that's kind of the older way to tell it that like I need to execute this. If. You don't include the type attribute at all. It's also basically oh I need to execute this. But if you give it a type attribute that the browser doesn't recognize such as text pyton it's like I have no idea what you're talking about. Let's just treat this as a data block and let's pass right right through it like it does nothing. Basically. You know that's also like an older way of doing templates. You know, like old Ang Js would have script tags and you have a data attribute to or type attribute to make it not execute and that's how you can put some Json data. So anyways, it's ah it's so a trick of for the browser to it's not even trick. It's it's well documented. This is how you you use a type attribute.
Andrew: Well yeah, that's how you use the the module no module pattern too right? where you can make it so that modern stuff will load if the browser knows what a script type equals Module is and if it doesn't it just won't even try to load it So you're taking advantage of that same mechanism.
Adam Bradley: So um, yep, exactly yep.
Adam Bradley: Yeahp exactly I did have it labeled as just ah type equals party town and some of my Google friends said well you should probably have a text slash partytown because that's more like in line of like the mind type stuff and so that was one change I did um. But yeah, that's the whole idea is like it basically tells the browser. Okay, you're a element but I have no idea what's inside here. So I'm not going to execute the Javascript. But then at the same time It's now a attribute on this element that I can query select for later. So after the page is done finished loading none of that Javascript executed.
Andrew: Oh.
Adam Bradley: Party town starts up. It's worker party town. It's like all right I'm all ready to go. Everything's lazily loaded. Yep, it's time to party. Let's go find all of these scripts that they they want to run and it goes 1 by one you know asynchous. It just goes all right? Who's the next guy who's the next guy it just kind of slowly goes down. You know this happens as fast as possible but slowly goes down 1 by one and executes them all.
Andrew: Time to party.
Adam Bradley: In the same order that they're in the dump.
John Morton: So type of question I but I I installed mine probably i' know two or three weeks ago I think was version zero point two point three and I tried to do that and my and I was using universal google analytics and it looks like I had had to you run that through a proxy.
Adam Bradley: All right.
John Morton: And I set that up and it's working is is that something that you're able to solve for down the line not needing a proxy or is that going to be something I always have to do.
Adam Bradley: So so specifically Google Analytics I you know how I joked about like calling up Google and seeing if they could change how they do skip I I tried that with Google and analytics. Yeah, basically um, the the.
Andrew: M.
Ryan Irelan: He.
John Morton: They'll get back to you.
Adam Bradley: The problem with some of the scripts is that they've always traditionally been added to the document used as a script tag and so as a script tag cores doesn't actually come into play so like the cross-origin resource sharing actually isn't a problem if it's added as a script tag and these have been script tags since day 1 and so Google Analytics um Google the universe analytic has never needed that core header. So they've never put it on. Um, they tried to enable it apparently and they saw some some stuff drop off and so they quickly reverted that and so they've never going to try that again. That said. Um, g a 4 which is the newer version of Google legs. Everyone should be using that one does have the cores header. So their recommendation to me and I I just recently documented is like basically Google already wants you to upgrade to j four Siri just turned on. Um. Google wants you to update a j four to begin with and it has the correct headers and so that's really the the best route is like ah and yeah and I probably can talk a little bit more about like this restriction and the and the gotcha behind it I wish I could get around but I'm not sure if I can.
John Morton: Yeah, yeah.
Andrew: Well, let me 1 of the things that I did as a solution to that John and I actually was already doing this as part of my build process I was having it download the Google Analytics script so that I could serve it locally so as part of my it was webpack now. It's a vet build process. It pulls down the Google Analytics script and I serve it up locally and I was already doing that for performance reasons because then I can set the x-pery and other headers on this Javascript resource. It doesn't have to go out to you know? whatever third party ah server that Google wants to run it off of if you're doing that.
Adam Bradley: Nice.
Andrew: You don't have to worry about it because now you control the headers for the file that's being served. So if you did need a quick fix. You could always just download that script and serve it up locally and it would just work.
John Morton: Yeah.
John Morton: Yeah, yeah, yeah I realize I could do that I'm just trying to recreate this. You know like what would my client do in their scenario kind of situation so that.
Andrew: Oh Adam had a very disapproving look on his face when after I said that? ah.
Adam Bradley: no no no ill just no that that honestly that was the first time that's ever occurred to me and it just made me think like I was going to beg you to submit a Pr to document that of like this is one way to run it because I do explain because this is this is like one of the I have it in the tradeoffs of the downside of this is that. Certain services. Don't put that course header on there and because we're requesting these files with Javascript and the web worker then you need to have a proxy and that's just not easy to explain. Um and it's it's also like sporadically and I think Facebook pixel doesn't have it. But then many of them do hubspot intercom. All of them have don't have this issue so it's it's a tough 1.
Andrew: Yeah I would be I would be more than happy to to do a pull request adding that in there. It's something that as I mentioned the seomatic plugin I have provided the facility to give yeah for you to put in your own. Yeah url to this script it defaults to. What it should be. You know the script out in the cloud but you can just put in whatever url you want and self- self hosting resources like this whether they are Javascript files or fonts that maybe you would get them from Google fonts. But you don't want to deal with the the tracking or the.
Adam Bradley: Yeah.
Andrew: Additional latency you can self-host them and in the same way you can self-host these tracking javascripts so that you're not going to get dinged for them not having proper expires, headers headers and all that kind of stuff. Yeah I'd be happy to do a Pr just mentioning hey self-host. That's another option. Yeah.
Adam Bradley: Yeah I yeah I love that I love that we add that as an option to to the Docs I think it's a great solution and especially you don't get another Dns lookup and all add. There's a lot of good benefits there.
Andrew: Yeah, there. There are many benefits to self-hosting this type of stuff for performance reasons without ah party town being in the mix at all which is one of the reasons why I had support for it and was doing it kind of already I feel like this is we've got we should check in on our. Our students over there Ryan how how are we doing are we doing good.
Ryan Irelan: So ah yeah, ah, we're good I had to spin up my ah, my docker containers for the project here locally so I was just waiting for that to it'll be a while. Um, but Adam Adam I wanted to ask.
Andrew: Okay, he's spinning up his docker container so he won't be finished by the time we're done with this show. So.
Adam Bradley: Okay, yeah.
Ryan Irelan: In terms of since I'm just now getting this set up like is there like a like base like entry level to get party town working that isn't doesn't require somebody configuring webpack vet and all that like what like is there an easy road in for people.
Adam Bradley: Yeah, um, that was kind of like key to the to the original design is that we wanted to make sure this wasn't ah you needed to use webpack or Rollup or whatever to to get this to work because and also that it needs to work on Wordpress and shopify like it needs to work on the web and so at the very very lowest. Yeah.
Ryan Irelan: So wordpress. Yeah.
Adam Bradley: And at the very very low level. It. It just needs to work on an an Hml document. Um, and so even our our react wrapper and you know we've got remix documentation things like that. Really those are just react wrappers to just a very vanilla. This is ah a text that gets put inside of a script. And so on the site there is an html section that kind of talks about that under the integrations.
Andrew: Yep, yeah, you do not need to be using a build system at all Ryan for any of this once you have the thing installed you can actually just use party town and they've but got a built-in command called copylib. That it will copy the libraries to whatever destination you need wherever it needs to be and then all you have to do is link to it in your dot in your document and you're done. You don't have to do anything else. It does not have to be part of the build process at all.
Ryan Irelan: Yeah, ah, that's cool.
Adam Bradley: Yep, and like the the copy lib Cli is purely for convenience. You don't have to use it. There is There's many ways to copy files. However, you want to do it is fine I Just found it easier to add to projects inside your mpm scripts or something like that. Um.
Andrew: Yes, yep.
Andrew: Yeah, it is.
Adam Bradley: And also that kind of hits on like the other thing the caveat that that I wish I could solve but don't think it's solvable is to not have to is that because it's a service worker these files need to be hosted from your same site so they can't come from a Cdn like if they're from Cdn this would be a lot easier to implement. But um.
Andrew: Right? right.
Adam Bradley: That's kind of the big gotcha is like why these files need to be copied to your location.
Andrew: And more importantly, they have to be at a specific place right? My understanding is wherever the service worker is it can only handle anything that is then below that anything that is above that in the sort of the hierarchy. It will not be able to serve so you got to make sure it's kind of at the.
Adam Bradley: Right.
Adam Bradley: Correct.
Andrew: The root level where all your stuff is going to be right.
Adam Bradley: Yep, and that's why there's That's why it's in the directory of Tilde party town. So I will say for anyone that already has a directory called Tilde Party Town I apologize that I that that won't work for you. You'll have to rename it. But for everyone else.
Andrew: Yep.
Adam Bradley: That doesn't have that directory. That's that's the one that's it's scoped under there so that you can still have your own service worker. You know we don't want to touch that you do whatever you want with a service worker. We don't you know any other scope ones you have, but this is the partytown scopeped one is under that directory.
Andrew: Yeahp, but so we went about it 2 different ways I implemented the way you're talking about it I just added I basically copied and pasted from the Docs the party town npm script which basically just says party town copy lib and then path. Where you want the libraries copied to and then in my ah build script in npm I just did ampersand ampersand npm run party town right? So it will do its build that it was doing before and at the end of that it will just copy them into place John did it the other way that was in the documentation.
Adam Bradley: Yep.
Andrew: Ah, you want to describe how you did it? John.
John Morton: Well, it's in the documentation because ah I'm just added my little vet config in there but I use a rollup plugin in my ve config to copy the party town stuff to the appropriate directory for my project.
Adam Bradley: Yep.
Andrew: And as you said Adam Lots of different ways to copy files all we're trying to do is copy files from 1 directory to another directory as part of the build process. So if you're already using I guess ah the metric I would use is if your build process if you're already using.
Adam Bradley: Um, yeah.
Andrew: Ah, plug in that copies Files then do it that way and if you're not just do it The the party town copy lib way because then you're not adding another dependency just to do it. You know, but it doesn't really matter right? Doesn't matter.
John Morton: Yeah, yeah.
Adam Bradley: Yep, exact. Yeah, it's it's because I would imagine a lot of people already have you know webpack and a copy task and an array of things copy of this to here you know so like just add it there and so that's what this documentation is trying to say is like there's many ways to do it Here's a few ways it might work for you.
Andrew: Yep.
John Morton: Oh you know I have a question for you that may just be very specific to me all right? So when I first installed it as I told you I was on zero point two point three when I update it and this is just my ignorance about service workers does that service worker get updated automatically or is does that get stuck in.
Adam Bradley: That will get stuck for up to a day. Um in someone's cache so continue to use like the old one for up to day. Um, as far as I'm aware and have tested you know so like that's what I've seen is happening. Um.
John Morton: Someone's cash for a while. Okay.
John Morton: Okay.
Adam Bradley: And but that's also why like those files aren't hashed like I don't like I purposely you know the service worker recommendation is always you don't hash that that s w js file um and then the ones underneath that I'm also not hashing for fear that they could get out of sync like this one's using version 2 this one is using version 3 so I want to make sure that they.
John Morton: All right night. Yeah because I had I had seen after my update that oh my live site didn't report to update. But then I you know wiped everything out of my like storage and it was what I expected to see.
Adam Bradley: They're not being hashed either because it could request the wrong one.
Adam Bradley: Yeah, yeah, and and again like service workers I still see as as the trick and haven talked about yet like atomics like atomics is where I really would rather ah have party town working natively all the time for everyone. Um, and I think we can get there but it might be a little while yet we have all the tools in place. But.
John Morton: Yeah, yeah I saw atomics in your documentation I'm like holy I have no idea what that is so I but I was I was surprised and ah confused at the same time.
Adam Bradley: Um, yeah, it's.
Andrew: So Adam if you were at the north korean border and you accidentally stepped your foot over the line and a gun was held to your head saying we are going to shoot you unless you tell us exactly what atomics is in a way we can understand it. What would you say.
Adam Bradley: God oh man so up. Yeah, so atomics is a way to communicate between 2 threads and have it blocking synchronously.
Andrew: You got a twofer. Ah.
Andrew: Got it? yeah.
John Morton: You got it I didn't get it. Okay.
Adam Bradley: Okay, did I make it Okay, ah and also the other thing about atomics is like I'm far from an expert here. So like you know other people have asked me like how did they work I know I've just read that.
Andrew: It's similar to the threading system that is used on linux and macos and a number of other um, operating systems is like think of it like almost like a port. Um, when you think about networking. And it's a port that they can then communicate over so you've got these threads. They're all running and they're all doing their own crazy stuff and you need some way for 1 to talk to the other and that is a way that threads can communicate at ah at a low level in these operating systems I don't know anything about atomics but it sounds.
Adam Bradley: Yeah, yeah, yeah, sorry yeah, it's totally um, very slimmer into that where you know normally to communicate between messages or between threads use post message and so it's still it's still using that same thing and you have a shared array buffer.
Andrew: Kind of similar to that.
Adam Bradley: And this shared array can go between the 2 different threading p read but you can also tell it to wait and so um, so so we pretty much have 2 different communication layers and 2 different builds. But they all use the same guts of how everything works but there's just one low different way of how they communicate. And the atomics way is like when it does a post message it basic says post message and then does atomics wait and then we fill up that shared array buffer with information and then we say okay we got all the information and then it continues. That's like the short way of of basically how it's working so we're able to communicate you know. At least 10 times faster than the service worker and Xhr trick. Um, the build is actually you know smaller than the service worker way it does work in safari Firefox and Chrome as of today. Um, the gotcha is that once you enable it. There's a good chance that all your images and Javascript.
Andrew: Oh ah.
Adam Bradley: Stop working because yeah, yeah, so there's one downside there and so actually the Parton site has got atomics enabled and it it works great but also Parton site isn't using a lot of Cdn images and Cdn scripts.
Ryan Irelan: That that's it. Okay.
John Morton: So there's a downside.
Adam Bradley: Somewhere from us some other origin that they would then be blocked because I've now enabled atomics and so that's why it's able to get away with it whereas like an an actual I say actual like a traditional site an ecommerce site. They're going to have a lot of resources from different origins. Have just always worked and so once you enable atomics it says like well we're only going to allow things that work from this origin and so then all of those other things stop working and so that's the big gotcha right now and I've had many great conversation with Chrome team. They totally see the issue. There is a new header called credential list that helps out a lot there. But that one doesn't work in Safari and Firefox. So. There's certainly they see the issue. They certainly see how atomics help out part town quite a bit but it's sadly not something that a traditional site can just enable probably something you can enable on your blog but it'd be hard to do on a larger organization.
Andrew: Yeah, that's what I wanted to get to I don't want to scare anyone away. So this atomics thing is something that in the future could be the way forward, but right now it's probably not quite ready for prime time and you have to go out of your way to enable it right by default.
Adam Bradley: Yeah.
Andrew: You're not going to be using that in party town. So you're not going to have to worry about any of these caveats is that right? Adam.
Adam Bradley: Yeah, that's right because the way it's designed now is like it checks. Do you have atomics enabled. No, you don't so let's use a service worker way and then the only way to enable atomics is in your the header response of your document needs to have.
Andrew: M.
Adam Bradley: Cross-orig open policy cross-orig and better policy and I tried to document best I could of like how this what this means and what you have to do and even just that that requirement alone of like changing the response headers of your entire site. Um. That's kind of a big ask like if I were to go to you know Pepsi and say hey that's you know http://pepsi.com we want you to now respond with these. You know that's ah that's a pretty big ask and we probably break a lot of things in their site and so um, it's certainly something like so if you inspect the headers, the response of like the pyton site. And look at the response headers of the document. You'll see these these different same origin and credential list response headers and because those are enabled the browser is like hey this is possible and then because that has the cross-or true boolean set on window. Then py town knows to use that instead up to service work or build.
Andrew: So Adam I got to know if there was a microphone in your office when you figured out that you could make worker threads be able to communicate via a service worker by creating or essentially a rest api that is a synchronous way of communicating.
Adam Bradley: But yeah.
Andrew: Like what what kind of stuff would that microphone have picked up. Would it be fist pumps or oh yeah, or would it be this sounds terrible but it could be awesome or how did that happen.
Adam Bradley: I think I think a lot of that you know there's a lot of my coworkers and friends. They they quickly got the heard of what was going on what what I just figured out because it's it. Well even I was going to say on the surface but just in general It's a crazy hack I mean like um. Xhr On. The main thread is already being deprecated to be removed from the standards but it's not in the web work because as a lot of people brought up. It's like isn't that being deprecated removed like well not the web worker because web workers are you know Import Scripts So like a lot of how everything works in the web workers are synchronous and that's fine.
Andrew: Yep.
Andrew: And even though that these are requests and and as developers we get locked into the idea of don't make too many requests. You don't want it to be slow even though these are requests understand that the service worker is running in the browser. So it's going to immediately intercept these requests. It's never going to hit.
Adam Bradley: Yes.
Adam Bradley: Yeah, yes, yeah, yeah, and that's the 1 thing that I've also wished there is a way around and I have I've documented in the in the tradeoffs is that you do see in the network tab all of these hundreds of requests to proxy town which is like oh this is going to slow everything down like well actually it's not.
Andrew: The wire right? So it's more like an interprocess communication kind of thing going on.
Adam Bradley: Because they're all being handleed locally but they do show up in your network tab and so that's kind of it's more of an annoyance than anything else. Yeah, and so like there's there's 2 builds or the deb but the debug build and it's got a bunch of console logs and there that that spits out a lot a lot of logs.
Andrew: Probably the logging is slower than the actual execution.
Adam Bradley: And so that's really only you know debug and they try to step through things. But for the most part um, especially with atomics. This is all silent happening in the background with the service worker build. You can see the request and the response happening.
Andrew: Well for anyone who's interested in this I want to just reiterate what it took for me to give this up and working on the Dev Mode Site so I just added builder io slash partytown to my package Json and I did an npm install and. Then I added to my build script to tell it to do the run the party town copy libs at the end of the build script to copy all of the libraries to the correct place I have them in a ah subfolder so I had to specify that in my party town config and then I just inlined the party town script. On the page and I changed the type of the tracking script that was already on dev mode to type equals text partytown and then I shipped it to production and I was done so I don't know what Ryan's problem is like I did it in in under a half hour to get this thing up and working.
Adam Bradley: Docker.
Andrew: And if you go to the devmo dot fm site right now and you choose view source and you search on party town. You'll see it referenced a couple of times in there and you'll find a script type equals text party town and it might be partytown Dash X which I think.
Adam Bradley: Um, yeah.
Andrew: Party town ads after it's executed it I'm not sure but you should see it in there if you're listening and you want to see but that's all I had to do to implement it Ryan what's going on. What's the problem.
Ryan Irelan: Hi. There's no, there's no problem I'm trying to listen and record a podcast at the same times as yeah, that's the only thing.
Adam Bradley: No, and I see the the key thing so I see their proxy town requests and the biggest awesomeness is the last request is to collect question mark to the collect response of Google analytics. So you know it's working.
Andrew: Yeah, yeah, and I I checked the pagespeed insights. Ah score before and after and it it got better. So that's fantastic and that is my goal now my my own site like the Dev mode site.
Adam Bradley: So like it it sent to Google Analytics the information that it collected in the web worker.
Andrew: It's already pretty optimized but I do the same thing that Ryan does and that John does where I will use some of these personal sites that I have as sort of a lab to try out these things and see what I can then promote up to clients I know so many client sites that if I can get this working effectively partytown is going to be a game changer. For them because their marketing departments require a lot of these tracking things to be on there but there are also our tickets in Jura that say make this faster optimize this you know, make sure that the page speed is such and such a thing and they may or may not know that these are kind of conflicting goals in a way and party town is a way that is I think. Is going to allow me to have my cake and eat it too. Is it ah appealing to you. You 2 for that reason.
John Morton: Oh my god well you you know, just because of like the text I've sent you when I first stumbled on party town I was like holy expletive deleted but you know I loved it. I was just in love with this project. So. Adam thank you so much for this work. It's been. It was I've really enjoyed like reading about it and playing with it. So.
Ryan Irelan: It and um I'm still very new to this but it it probably will lower blood pressure The next time you get like a hot jar ticket from somebody.
Adam Bradley: No I appreciate it and certainly ah, not done. You know that's like again, why it's still in Beta because ah because we're adding more services so I like actually just see that you've got analytics Js in there. So that's a big one that I want to make sure that runs well.
Andrew: Yeah, it works great. It's self- hosted. Yeah, it's self hosted because I didn't want to so I I didn't care like I didn't want to upgrade the site to to Google Analytics for because I just don't care I mean at some point I probably will but I just don't care I already was downloading.
Adam Bradley: Actually is this one being ran by oh it is perfect done. Um.
Andrew: The script and you and serving it up locally anyway. So I'm like you know what? I'm just going to use this and it it works perfectly I I made sure like I had the Google ah analytics up with on the real time thing and then I pinged a bunch of people I know and I said please go load this site and I watch their little pings appearing everywhere and everything everything just worked.
Adam Bradley: Nice. That's that's great and yeah, like the other thing that you know has been a big focus is to make sure that we don't make sure ah this whatever that Google Analytic analytics needs this thing. So let's make sure this little trick works. It's more of like Google analytics and work because this.
Andrew: Yeah.
Adam Bradley: Dom Operation Network work so let's fix the dom operation. So like it's been more about making sure that the platform works exactly how it should so the more things we fix there the more than all analytic analytics will work and so that's where we've got I know if you've seen in the all the tests that we have in the in the site. So so the parttime website tess.
Andrew: Yep, right.
Adam Bradley: Basically, all of the stuff that I'm any single Api that you're using inside of the the dom it's recreating that so I run it as a javascript and then I run it with Parton make sure that they're identical. So there's a lot of that so when I add new things to it. Sorry all right? Why didn't this work you know and try to debug wide. Was the thing it tripped up on and then try to fix that 1 little dom api of why it didn't work and create a test for that.
Andrew: Yeah, very cool.
Ryan Irelan: So Adam before we release you from the border of North Korea um you have the the tagline and I found it on on github ah is a fun location for your third party scripts to hang out.
Adam Bradley: Right.
Adam Bradley: Yeah, yeah I know I've been so torn on the name of like it's so dumb.
Ryan Irelan: So where did the name we're talking about party town if someone just tuned into this podcast. They're probably thinking like what are these crazy people talking about where a to me. It's a great name because it brings it brings levity and joy to like I said hot jar right? like.
Andrew: It's fantastic.
Ryan Irelan: Like it brings loveity and joy to things that stress people out there care about performance. Um.
Adam Bradley: Yeah, it. It really came down to ah when we were talking about this idea originally with Steve you know the Ceo of builder io um, you know we were talking about this idea about like we want to put you know these these third -party scripts into a different location. You know we want to put these. These parties into a different town and like into this party town. Basically and that's like we actually have a thread of is how he turned into party town and he's like oh that's great. We should use as a name like na. It's done. It's like no really in the market I think we're like all right? Maybe maybe we should just use it. Why not? yeah.
Andrew: It sounds like the the methodology I used to pick where I was going to college. So I mean I I get it? yeah.
Adam Bradley: So there wasn't too much thought. Let's just say that it just play on words with you know party town and party scripts. Great.
Andrew: Don't let anybody mess with you. It's a fantastic name stick to it I realize that you're kind of like oh you know? Maybe we should be a little more button down about it. It's great because I get this vision of all of these you know, terribly behaving scripts.
Ryan Irelan: I agreed.
Andrew: Are all in their own little place and they're just partying their little face off and we don't have to worry about it there. There's no noise complaints. There's no banging on the walls like it's fantastic. It's fantastic.
Adam Bradley: Ah, well, it's the truth.
Adam Bradley: Yeah, well then then you've you've understood the analogy. That's totally what it is. It's so they're all misbehaving somewhere else in their own town.
Andrew: But I did want it now I mentioned something to you when we were starting this podcast I said I wanted to see if it was okay if we talked about cloudflare zurraz and you looked at me like I had 2 heads you were just like what what? So when I was talking to.
Adam Bradley: Yes, yeah, the first I heard of it.
Andrew: John about party town I said oh you can also check out this ziraz thing and it's basically a place to run tracking scripts but in an edge worker so cloudflare actually runs them at the edge somehow I don't know how this magic works. It's a company that was acquired by cloudflare and the idea is that same idea as party town in that you're going to sequester these ah these scripts into something else. You know they're going to run somewhere other than the main thread. But in this case instead of in a web worker. They're going to run as an edge worker. So the only way that this will actually work is if you use cloudflare and you have handed over the keys to your dns to them I don't know all of the technical ways that it works but I would imagine it works because they own your Dns. So therefore they can run these things in it in an edge worker under your subdomain somewhere somehow and it seems a little more specific than party town in that they have integrations with some of these specific tracking scripts. It doesn't look like it's just for arbitrary stuff. But I I don't. And don't really know but I wanted to see if you had any any thoughts on this zaraz thing.
Adam Bradley: Yeah, it' it's certainly new to me and really interesting. Um, the questions I'd have is it's like Google analytics. It's you know two hundred kilobytes of Javascript and in it. It's you know it's it's doing ah intersection observer document that title getting the cookies local storage. It says all these things to the dom.
Andrew: Yep yep.
Adam Bradley: And it needs to and then like every time you click a button from that click it. It reads all the events of every single element all the way up to window So There's a lot of things that that javascript needs to do and so my question would be like obviously they figured this out of how to how to do all those things but all those things. Happen on the Browser. So How are they able to translate that information that like that this button click happened at this location. Yeah.
John Morton: Well so because when in my exploration doing party town I also did Zoraz on another site on my like company site just because you know why not?? Um, and you can also set triggers in the control panel for like. Different events like click events but within the Zaras control Panel. So Somehow it's monitoring Click events or I don't I don't know how it's doing it but like you know I've I have categorized clicks.
Adam Bradley: Okay, because like.
John Morton: And then I have like subcategozizations of like if it's in the header or in the body or in the footer and it's all happening. Um somehow through magic atomics I think it's atomics that's doing it.
Adam Bradley: Yeah I mean cause like yeah because yeah, that's what I mean like the the Google Analytic analytics script has got a lot of logic to do special things and send special events automagically and that's why the files so big. So then.
Ryan Irelan: See.
Adam Bradley: If you still want to do those same things but you don't do them in the main thread. How how does that information get passed. So like yeah there must be some config that that yeah I'd love that.
Andrew: So we're going to link to their technical blog which has a long discussion of how it works in the show notes and I've also put it in the chat for you to check out. But I don't know exactly how it works but it sounds like they're trying to solve.
Adam Bradley: Oh.
Andrew: Ah, similar problem but they're trying to solve it at the edge. So. It's a similar idea in terms of running it in a worker but you're going to run the worker somewhere else and in the case of Party Town. We're going to run this script somewhere else. But it's going to be inside of the same client just in a separate lower priority thread to do it. Um, and it just seemed like they they're kind of trying to solve similar problems even though it looks like party town is a little bit more general in that you can just make anything a text slash party town script and it and it should just work. They have specific integrations that who knows how much work.
Adam Bradley: Um, yeah.
Andrew: They've had to do as you mentioned contacting Google to get them to rewrite how they did it. Maybe they had to rewrite some of how it worked in order to get that functionality in there I I don't know.
Adam Bradley: Yeah, it's certainly cool I Really want to learn more about it then maybe there's like sick. Maybe there's maybe they compliment each other too of like certain things that it can't do are that party town can't do like especially with the cores headers and stuff like that. That's pretty awesome.
Andrew: Well I don't know. But since this was a third party company that cloudflare acquired and since they seem to have all the money in the world who knows maybe we'll be hearing about a real party town at party town after you get acquired by cloudflare oh man. Ah.
Adam Bradley: Yeah, right? Well, it's all open source. So copy paste is too late. Yeah.
John Morton: Darn it.
Andrew: Ah, on that down note that about wraps it up for another episode of the demo dot fn podcast if you enjoy the show make sure to subscribe tell a friend drop us a review. We really appreciate it for the demo dot fm podcast I'm Andrew Welch
Ryan Irelan: I I'm Rhine Ireland.
John Morton: And I'm John Morton
Andrew: And thank you so much Adam Bradley from builder io for coming on to talk.
Adam Bradley: Yeah, thanks for having me. It's fun.
Andrew: All right? That was great. Yeah I wanted to I know I reiterated it a couple of times but I wanted to bring it back to just how easy it was to get this thing up and running because I I personally I love talking with you about all the nerdy implementation details. But I don't want to scare anyone off from trying party town.
Adam Bradley: Yeah.
John Morton: Yeah.
Andrew: Seriously because it is really cool and even though Ryan I don't know what Ryan's doing Ryan's been sitting there doing npm install for the last hour but it's it's really not that hard to get it up and running I I was amazed. Yeah there you go John got it running what's your problem Ryan ah.
John Morton: I mean I got it running.
Adam Bradley: Um, validation.
Ryan Irelan: And I don't why you I don't have a problem I mean I have lots of problems. Not this one. This isn't it. This isn't one of my problems.
John Morton: Ah.
Andrew: Ah, all right I'm gonna stop I'm gonna stop the recording.