VueJS

Using PartyTown to Improve the Performance of VueJS Applications

Published Jul 14, 2022

Updated Feb 17, 2023

4 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

What is PartyTown?

PartyTown is a JavaScript library that helps relocate resource intensive scripts (often third-party scripts) into a web worker and off the main thread. This speeds up our site by freeing up the main thread to run our code.

Note: PartyTown does not get bundled with the rest of your site's JavaScript. Instead, it intentionally stays separate from your code so that it can run within a webworker.

Using PartyTown with VueJS

To use PartyTown with VueJS, you need to find where your third-party scripts are inserted into your page. Typically, this would mean in the index.html page of your Vue application.

Create the VueJS Application

If you already have an existing VueJS application, you can skip this step. If you are simply looking to test out PartyTown, you can do so by creating a new VueJS project.

Create a new Vue project by running:

npm init vue@latest

You should have an index.html in the generated project. In a new VueJS project, this is generally where we would add global third-party scripts. This file is also going to be where we add PartyTown.

Add third-party scripts

If you already have third-party scripts such as Google Analytics or any other tracking/measurement scripts in your project, you can skip this step. Otherwise, you can set up third-party scripts.

Install PartyTown

To install partytyown into your application, all you need is to use npm or yarn where your package.json is of your project.

npm install @builder.io/partytown

or (if using yarn)

yarn add @builder.io/partytown

Setup PartyTown

Setup PartyTown (Vite)

Available as of Partytown 0.3.6

Import the partytownVite plugin from @builder.io/partytown/utils into your vite.config.js config file. Next, add partytownVite(opts) to the plugins option.

The Vite plugin will copy PartyTown lib directory to the given destination, which must be an absolute file path. The copying will happen at the time of the writeBundle() hook. When in dev mode, the Partytown lib files will be served using the Vite Dev Server.

Below is an example of using a Vite config to copy the PartyTown lib to a dist build directory:

// vite.config.js
import path from "path";
import { partytownVite } from "@builder.io/partytown/utils";

export default ({ command }) => ({
  build: {
    plugins: [
      partytownVite({
        dest: path.join(__dirname, "dist", "~partytown"),
      }),
    ],
  },
});

Setup PartyTown (the long version)

After installing PartyTown, you need to modify your package.json to setup PartyTown. You do this by copying the partytown lib files into a directory we can reference from within our VueJS application.

Add the PartyTown script and change the relevant build/preview scripts to run the PartyTown script before your actual build/preview script.

// In package.json
"scripts": {
  // ...
  "dev": "partytown && vite",
  "build": "partytown && vite build",
  "preview": "partytown && vite preview --port 4173",
  "partytown": "partytown copylib public/~partytown"
}

You should see a public/~partytown directory in your project now. Inside this directory, we have a partytown.js file. This is the file we will be referencing in our html page.

It is also worth noting that, as of the time of writing this article, there is no official integration for PartyTown with native VueJS applications. There are, however, other Vue tool integrations such as the Nuxt PartyTown integration that make this process a lot faster. There are also approaches to setting up for different build tools such as Vite and Webpack

Using PartyTown with third-party scripts

Before we can use partytown with our third-party scripts, we need to include it into our page.

Open the index.html page, and add your PartyTown script.

<!-- ./index.html -->
<head>
  <script src="public/~partytown/partytown"></script>
</head>

In order to use PartyTown to move the execution of your third-party scripts from the main thread to a web worker (and improve the performance of your VueJS application), all you need to do is mark the script with the type of text/partytown. Add the type="text/partytown" attribute for each script that should run from a web worker.

For example:

<script src="./third-party-script.js"></script>

would turn into

<script src="./third-party-script.js" type="text/partytown"></script>

By adding the text/partytown, you are telling PartyTown that this script should not be executed on the main JavaScript thread. PartyTown also makes sure that the script runs in a web worker for you. No additional setup is required.

Note: that each script is opt-in, meaning that the updated type attribute should only be added to scripts that should run with PartyTown. PartyTown will not automatically upgrade any scripts unless this attribute is added.

Browser support

PartyTown works to ensure that all browsers can still run third-party scripts, whether they have support for service workers, atomics, or neither. This means that, if you’re supporting legacy browsers such as IE11, the scripts should continue to work as if Partytown wasn’t being used.

For more information on PartyTown's browser support, you can check out the official PartyTown documentation.

Conclusion

By making sure our main thread does only what it needs to do (run our code), we can deliver smoother experiences for our users. PartyTown helps us do this effortlessly. I would recommend that you check it out. To learn more about PartyTown (including how to configure it), check out PartyTown's documentation.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Allan M. Jeremy
Allan Jeremy is a self-proclaimed polymath, entrepreneur and Senior Software Engineer at ThisDot Labs. He is an AI and crypto enthusiast that loves to learn most things tech and business as well as sharing what he learns.
@theallanjeremy @AllanJeremy

Color Theory For Software Engineers + Color Accessibility & Performance with Sarah Shook

In this episode of the Modern Web podcast, Tracy Lee and Rob Ocel sit down with Sarah Shook, a UI/UX engineer at Hunter Industries. They discuss the topic of Sarah’s THAT Conference talk on color theory, exploring the intricacies of RGB, HSL, and hex color models. The discussion also touches on the importance of understanding how color accessibility impacts your page’s performance. Chapters - 00:00 - Introduction and Guest Introduction - 01:30 - Balancing Work and Parenthood - 03:20 - Family-Friendly Conferences and THAT Conference Experience - 05:45 - Overview of Sarah's Presentation on Color Theory - 07:00 - Understanding Additive and Subtractive Color Models - 09:00 - RGB to Hex Conversion Explained - 11:45 - Importance of Color Theory in Web Development - 14:00 - Accessibility and Color Luminescence - 16:00 - Tools and Resources for Color Accessibility - 18:30 - Sarah’s Experience with Vue and Other Frameworks - 21:00 - Discussion on Framework Deployment and Tooling - 23:15 - The Challenges and Benefits of Learning Multiple Frameworks - 25:00 - Tailwind, TypeScript, and Framework Preferences - 27:00 - Vue Community and Tooling Insights - 29:00 - Advanced JavaScript and TypeScript Content with DropJS - 31:00 - Sarah’s Color Utility Project and Where to Find Her - 32:30 - Closing Thoughts and Outro Follow Sarah Shook on Social Media Twitter: https://x.com/shookcodes Linkedin: https://www.linkedin.com/in/sarahshook/ Github: https://github.com/shookcodes Sponsored by Wix Studio...

Aug 27, 2024

1 min

JavaScriptVueReact

Getting started with Vitepress

Getting started with Vitepress to create your blog site Have you heard about Vitepress, but you have not checked it out at it yet? Well, in this article, we are going to cover the basic setup and share what all the fuss about this new fantastic static site generator. If you are looking for something that would allow you to quickly create a static site with Markdown support, search, Light/Dark theme, advertisement, navigation, and much more, then Vitepress is what you are looking for. Suppose you want some proof of Vitepress's power without having to invest any further time, I suggest you head over to the main Vitepress site (vitepress.dev) and experience what Vitepress can do, as the official site is built on Vitepress! What is Vitepress Vitepress is a powerful Static Site Generator powered by Vite mainly used for Documentation and Blogs with the default theme, and open to customization to be used for anything you may need it to with custom themes and theme overrides.. Vitepress power comes from its low learning curve, powerful configuration settings, and the ability to easily customize it. For example, internationalization is built-in, Theme toggling is built-in and even full-site searches require a single line in the config to be set up. What makes Vitepress so powerful is its extensive configuration and the fact that it can be customized by overriding the existing theme, creating your theme, or simply enhancing pages with custom Vue code. Prerequisites To successfully run the following demo, you will need: - Node.js version 18 or higher. - Terminal for accessing VitePress via its command line interface (CLI). - Text Editor with Markdown syntax support. - VSCode is recommended, along with the official Vue extension. Create your project To create the project, we will follow the steps shown in the official Getting Started guide. If you want to set up a Vitepress project quickly, run the following steps: - Create a new folder mkdir vitepress-tutorial - Access the folder cd vitepress-tutorial - Install Vitepress npm add -D vitepress - Run the Wizard npx vitepress init - Answer the questions: - Where should VitePress initialize the config? - Site title - Site Description - Theme - Do you want Typescript support? - run npm run docs:dev - Enjoy your site. After you run the above steps, your Vitepress will be ready and running as shown below What is available out of the box The site comes fully set up with enough to get you started. Let's see what features are available within the software: - Navbar: The site comes with a Navbar that already includes links to our blog pages - Light/Dark theme: Out of the box theming - Home page: Basic Homepage layout - Blogs: Two different blog posts with sidebar navigation All of the above is available with just 4 files! Let's move forward and see how to customize our app. Overriding the homepage It is time to modify our site by accessing its folders. What you will probably notice when opening the site, is that Vitepress follows a very simple file structure, in fact, a new installation just includes 4 extra files on top of the expected package.json and node_modules. Let's update our homepage to make it more unique. Because Vitepress follows a "file-system based router" we can find this file within the root of the project within a file called index.md. This file will be accessible at "/" or "/index.html" of your site. The content of the file is the following: ` As you can see, the file has no code in it, and it is just driven by configuration, or more specifically in this case Markdown frontmatter, that is a set of configurations accepted by markdown files that help you set up your options such as title, description, og:image. We will describe frontmatter in more detail later in the article. Before we jump into modifying the configuration of the file, you should know that Vitepress has a very extensive and well-detailed documentation site where you can find help if you are stuck or would like to learn more. In this case, we are overriding the "home" page, so the documentation can be found here: Home Page Default Theme configuration. If you read the current file within the homepage, you will notice that it defines a "layout" of "home". This layout displays a main header with CTAs and a set of feature blocks. There are three different layouts available in the Default theme: "home", "doc" and "page". The title and description have already been set from the information we provided from the installation wizard. But the rest is just a basic boiler template. Let's see what we can change: 1) Add a hero image. This image can either be externally sourced or saved within the repository. ` 2) Update the action buttons. ` As shown above, Action buttons have two themes "brand" or "alt" and can accept internal or external links. Vitepress is clever enough to set the external links to open in a new tab and set the rel="noreferrer". 3) Change the feature blocks: Features blocks are great for engaging with the user and telling them what makes your site special. This accepts an icon and some text, so let's change ours with the following: ` The homepage is now completed and updated and it should look like this: Please note that what we did on the homepage is just changing the markdown front matter of the "home" layout. What this means is that if you want to, you can easily customise the page further by either adding more blocks to the layout file or actually by writing and styling the rest of the page as normal. Site configuration In this step, we are going learn about the main site configuration and how we can use it to customize our site. The configuration file can be found in the .vitepress folder under the name of "config.mjs". Just like the homepage layout, the configuration used in the preset file is self-explanatory: ` This file is very important and you are probably going to have it open at all times as it is going to be responsible for the layout of the sidebar navigations of your site. In this section, we are going to learn how to use the Vitepress configuration file to achieve the following: - Modify the sidebar navigation - Enable Search - Add Favicon to your site Modify the sidebar navigation The sidebar is the component displayed on the left-hand side of the blog pages. This is not automatically generated, but it is manually set in this file. You can have more than one navigation, so, for example, you could specify sidebar navigation that shows in pages that have "/blog/" within their path and another one for all markdown pages that have "/tutorials/". Let's see how to implement this: ` With the above code, there will be 2 different sidebars. One will just show if the URL includes "/blog" and the other will be displayed if the path includes "tutorials". Clicking on the above items will give a 404 error as we do not have any pages in that specific location. Still, we can easily fix the issue by creating the two folders "blog" and "tutorial" and creating the required files within these folders in our case are "index.md" and "one.md" for the blog and "index.md" and "two.md" for tutorials. The sidebar has further settings like the ability to create a nested tree or create collapsable menus. You can learn more by checking out the the official documentation on default theme sidebar. Enable Search No documentation or blog site is complete until a search is fully implemented on it. Luckily for us, enabling a site-wide search is extremely simple with Vitepress. Vitepress supports two different search types: a full-text search using minisearch and Algolia based search. In this tutorial, we are going to enable the full-text search. This is fully built-in and requires no external accounts. To enable search, we need to add a "Search" parameter within our themeConfig and set the provider to "local". We can add this right below the socialLinks. ` With just a simple config change, our site will now have a full site search working as shown below: The official search documentation has further information about the look and functionality of the search. Add Favicon to your site Even if the site configuration is very extensive, there are times when you will need to add something within the site-wise page that is not available. In this section we are going to learn how to add specific attributes to the of our site, and specifically how to add a favicon. To add custom values to the head, we are going to use the "head" properties available with the Vitepress configuration. The "head" configuration is an array that accepts an array with the element type (eg. link, script, meta), and an object including all the attributes for that specific element. So for example to replicate the following HTML: ` we would define the following head config: ` We can use this technique to set up metadata and even load fonts or Google Analytics. More info in the site-config head Writing your post In the last section of this article, we are going to learn how to actually write a blog post and also learn how to customize the pages with JS and styles. Writing your first page In the previous section, we created a couple of markdown files, but they are currently empty. Let's see how to create beautiful documentation using the built-in feature of Vitepress. In this section, we are going to work on the file stored in /blog/index.md. This file can be accessed in your browser by accessing "http://localhost:5174/blog/index.html". Blog Frontmatter Every file needs to have a frontmatter defined. This is used to define basic information on the page, such as the title, description, and more. For best SEO results, it is best practice to always define a title and description for a new page. We can do this by adding the following code at the top of our file: ` Frontmatter in Markdown files are delimited by the "---". In the above code, we set our title and description. Vitepress frontmatter supports further config like lastUpdates, sidebar, outline, and more. You can find info on the frontmatter-config documentation. Frontmatter has some global configuration, such as title and description, but also "layout specific" settings that are just available on specific layouts. This is clearly explained in the documentation. Blog Markdown Now that our post frontmatter is set, it is time to write the content of it. This is done using a very extensive markdown engine. Let's start with the basics and write a heading with some text and a link as shown below: ` After saving, our development environment will show the following results: Let's add a couple of headings and a table of contents to our document using [[toc]] to the top of our page: ` The above will produce an unordered list with all our links. The last feature that I want to share about the Vitepress markdown engine is the code editors. The markdown engine used in Vitepress offers extensive features when it comes to code rendering. Features available are "code highlight", "code focus", external snippets loading and much more. The full list of features can be found in the markdown docs. Let's implement a simple code snippet with a line of code focused. This can be achieved by adding "// [!code focus]" at the end of our row. Let's give it a try: ` The output of this will be: Customize your blog with Vue In this last section, we will learn how to customize our code by adding js logic, style, and external components. Before we begin, it is important to understand that when you use the default template of Vitepress, your pages are going to be rendered with Vue. This means that we can expand the individual page's functionality by rendering other vue components and/or writing logic and styles directly on the page. To better explain this concept, we are going to create a team page. Create a file called team.md within the root of our repository. This file will be accessible on "http://localhost:5174/team.html" and will be just a simple Markdown file. First, we set up the frontmatter as before. In this case, we have to specify an additional config called "layout". This will ensure the page has no style or components loaded such as sidebar or aside. ` Then we will have to create our team variable, just like a normal Vue component; we can do so by defining a script setup tag and defining the constant there. ` In the above code, we have imported the VPTeamMembers component from the vitepress/theme and defined an array of members. The values used in the members array are hardcoded, but as you may expect, you can load this information directly from an API. We now have to use the "members" variable within our file. We can do so by writing normal JavaScript. The markdown file will evaluate the JavaScript and render it, so in the following example it will render a specific component. ` Before we move forward we need to define some style as the page is unstyled since we have loaded the layout of "page". Just like we did with the tag, we can load a tag and update our styles: ` The completed file will look like this: ` The file above now includes: - A frontmatter that specifies a "page" layout - A script tag that loads an external component and defines a variable - Styles to make the page pretty - Markdown with a custom component The completed team page would render the following: Conclusion Vitepress is an extremely flexible static site generator. Its default theme provides you with everything you need to get started quickly. The ability to load external themes, enhance the current theme, and or write custom code within your page makes this tool extremely powerful. In future articles, we will discover what components are available within the Default Theme and see how you can make the most of your Vitepress site but keep on coding....

Dec 21, 2023

12 mins

VueViteVitepress

Avoiding Burnout for Remote Teams: A Software Engineer's Guide

Pull up a chair, my fellow coders, team leads, and everyone working from a desk in their pajamas. Let's talk about something that's been buzzing around like an annoying fly we've been trying to swat: burnout. Yeah, we all know what I'm talking about. The long hours, the lack of sunlight (my plant is getting a better tan than me - just kidding, I don't have a plant), the never-ending to-do list, and the work-life balance hanging by a thread. If you're nodding along, then you're in the right place. In this piece, we'll navigate the maze of remote work and uncover ways to keep that nasty burnout at bay. And I promise there won't be any code debugging here, just some light-hearted yet meaningful advice coming your way. Ready to dive in? Awesome, let's get started! Setting Clear Boundaries Working from home has its perks. No commute, comfortable attire, and flexible hours. But let's get real. The downside is that work can become a 24/7 gig if you aren't careful. My living room turned office, turned dining room, makes me feel like I'm always on duty. So how do we fight this? We do what we do best. We set some boundaries. Defining a workspace is essential, even if it's just a corner of the room. This physical boundary tells your brain "I'm in work mode now." Trust me; your brain will thank you for it. Next comes the schedule. I'm not talking about planning every minute of your day, but having a structured work schedule is crucial. Have a defined start time, breaks, and, most importantly, a shutdown time. And let me tell you, this shutdown time is non-negotiable. Like the last slice of pizza at a party, you don't touch it, and I've got to admit, I struggle with it, but I am working on it. Asynchronous Communication With a team spread across the globe, synchronicity is a luxury we can't afford. We've got people working from their night to match our day, and that's just not fair. What can we do about this? Embrace asynchronous communication. Let's do away with the pressure of immediate responses. People can respond in their time, respecting their work hours. And let's be honest, most of our communication doesn't need instant answers. Time differences are not villains but part of our remote work reality. Results Over Hours A common misconception about remote work is that "the more hours I work, the more productive I am." Well, that's as far from the truth as I am from my next vacation. The focus should be on results, not hours clocked in. Set realistic goals and trust your team to manage their time effectively. This trust is essential for a remote team. After all, we don't have someone peeping over our shoulder, making sure we're working. Or at least I hope not! Mental Health Support Mental health: the elephant in the room. Why do we tip-toe around it? Stress, anxiety, and burnout are real, and they're here. It's high time we address them. Resources like Employee Assistance Programs, mindfulness apps, and virtual fitness classes are excellent support systems. But they're not magic potions. They need regular utilization, and we need to make our team comfortable with seeking help. Let's make it our strength, not a weakness. Regular Breaks Do you know what's the quickest way to burnout? Working without breaks. I know we've all been guilty of it at some point. But let's change that. Taking breaks is not a luxury; it's a necessity. Short walks, quick exercises, or just stepping away from the screen can do wonders. I even tried the Pomodoro technique, and it's a game-changer. Another thing you could do is schedule lunch breaks in your calendar so your colleagues know when not to try to reach you. You can additionally set your focus times in your calendar so that you can maximize your time in flow state without interruptions. Prioritize Effective Communication Communication. It can make or break a remote team. Without physical cues, messages can be easily misinterpreted. Open, transparent, and empathetic communication is the solution. Regular check-ins and feedback sessions also help keep things running smoothly. After all, we're a team, and teams need to talk! Training and Development Boredom is a silent killer in remote work. And the best defense is learning. Offering training and development opportunities enhances skills and breaks the monotony. Who would want to learn something other than a new language or skill? Plus, it aligns with our long-term career goals. It's a win-win situation. Time Off I can't stress this enough. Time off is essential! We need to recharge, relax, and rejuvenate. Encourage your team to disconnect during their time off fully. Trust me; the world will only end if we check our emails for a few days. I tried it, and I'm still here! Empathy and Flexibility Last but not least, empathy and flexibility. Everyone's situation is different. Let's show understanding for those juggling childcare, living in different time zones, or dealing with personal issues. Let's be leaders who are empathetic and flexible. Conclusion In the world of remote work, prevention is better than cure. And the prevention of burnout comes with boundary setting, asynchronous communication, focus on results, mental health support, regular breaks, effective communication, continuous learning, time off, and empathy. With these in place, we can navigate the remote work culture while keeping our sanity intact. So let's dive in, shall we?...

Jul 31, 2023

4 mins

Software Engineering

AI Leadership: Data-Driven Decision Making & Avoiding "Analysis Paralysis" with Jerry Reghunadh

In this episode of Leadership Exchange, host Rob Ocel chats with Jerry Reghunadh, Senior Director of Enterprise Architecture at Data Nimbus, about leadership, AI adoption, and data-driven decision-making. Jerry shares his career journey, insights on leveraging tools like ChatGPT and Copilot, and strategies for building effective data pipelines. They explore how companies can avoid "analysis paralysis," adopt AI strategically, and evaluate new technologies to solve real-world problems. Tune in for practical advice on aligning innovation with business goals and staying competitive in a rapidly evolving tech landscape. Chapters 00:00 – Introduction 00:31 – Jerry’s Leadership Journey 02:01 – Discussing AI in Leadership 03:59 – Experimenting with AI Tools 06:24 – Overcoming Analysis Paralysis 09:18 – Importance of Early AI Adoption 13:12 – AI’s Impact on Efficiency 14:30 – Sponsor Message 16:26 – Setting Realistic Goals for AI 19:41 – Data Management and AI 23:09 – Is AI Just a Fad? 27:22 – Testing New Technologies 29:56 – Final Thoughts on AI 30:25 – Connect with Jerry 30:44 – Closing Remarks 31:20 – Outro Follow Jerry on Social Media Linkedin: https://www.linkedin.com/in/jerrymannel/ Sponsored by This Dot: thisdot.co...

Nov 18, 2024

1 min

AIEngineering Leadership

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Using PartyTown to Improve the Performance of VueJS Applications

What is PartyTown?

Using PartyTown with VueJS

Create the VueJS Application

Add third-party scripts

Install PartyTown

Setup PartyTown

Setup PartyTown (Vite)

Setup PartyTown (the long version)

Using PartyTown with third-party scripts

Browser support

Conclusion

Allan M. Jeremy

You might also like

Color Theory For Software Engineers + Color Accessibility & Performance with Sarah Shook

Getting started with Vitepress

Avoiding Burnout for Remote Teams: A Software Engineer's Guide

AI Leadership: Data-Driven Decision Making & Avoiding "Analysis Paralysis" with Jerry Reghunadh

Let's innovate together!

You might also like

Color Theory For Software Engineers + Color Accessibility & Performance with Sarah Shook

Getting started with Vitepress

Avoiding Burnout for Remote Teams: A Software Engineer's Guide

AI Leadership: Data-Driven Decision Making & Avoiding "Analysis Paralysis" with Jerry Reghunadh