A presentation at Nuxt Nation 2021 by Josh Deltener
Josh Deltener Nuxt Ambassador / Instructor / Breaks Stuff deltener.com @JoshDeltener
Enterprise Plugin Patterns
Third Party Code Is Poison Problem 1
Third Party Code It has many names • Re-marketing Tracking Pixels • Widgets (Chat, Reviews, Popups, Payments) • Integrations (Analytics, Tag Containers, A / B Testing) • All want to be the first to load and claim they don’t affect site performance (wink)
index.vue Third Party Poison Starts To Leak In
index.vue Then it gets worse..
• Poisons the purpose of your pages and components • Confusing Object Structure • Error Prone • Not Maintainable at Scale Josh, why is this so bad?
? t i if x e w o d w o H
Plugins
Plugins Are • Injected Javascript functions • Ran per hit (server) and when app starts (client) • Exposed to all components, pages and layouts • Included in the context object
Third Party Javascript in a plugin
This Rocks! Focused One integration per file Natural It’s just Javascript Flexible Easy to extend and optimize
Changing Service Providers Is a Pain Problem 2
Providers Change It’s a matter of when, not if Chat Live Person -> Drift Payments Stripe -> Bolt Tag Containers GTM -> Segment
Ho wd ow ef ix i t?
Abstractions! Using plugins..
• You have external integrations that may change • You have a feature that is fulfilled by different providers • You want a clean line of separation between your code and third party code Are Abstractions Right For You?
Marketing Wants To Track Everything Problem 3
Track All The Things.. Pr o du c d Ct site evi er R Us d e w l i e P c Price RVie Pro k w o e d e y d a i r A s ngetFVi du ego B i d a i t l t c n e a i t r c o n C a t P l i e c C Lis me odu n k r e t r m d a o C C r r t a o F T P V l P d N e i i e c e a d m d w d k g a A n e e e C a d d S r c B d roll
Multiple Third Parties Want To Know Not only do they want to track all the things, but want multiple providers to know about it. Segment Chat Clicked Full Story Optimizely
? t i x fi e w o d w o H
The Event Bus Still using plugins..
How It Works Button Clicked Hey everyone, they clicked ‘Chat’ • Integrations subscribe to events they care about • Your code emits events to the bus • Subscribers send info to their overlords ChatClicked Purchased NavClicked Segment Segment FullStory FullStory Ok Sweet! The Event Bus
How Do I Make One?
Step 1: Create The Bus (Yep, That’s It)
Step 2: Setup Plugins To Listen To Bus Events
Step 3: Emit Events To The Bus From Components
Caution This Is NOT For Component Communication! This is not a replacement for standard emits for cross component communication. That would be horribly bad, this is just for emitting UI events to your third party providers. With great power comes great responsibility, do not take this warning lightly. Not available in all areas. Terms are subject to change without notice. All rights reserved. Only one winner per entry. No animals were harmed creating this presentation. Ok fine there was an incident with a goat, but he’s totally fine and honestly he had it coming.
• Over 95 video lessons • Over 10 hours of content • Exclusive Discord Channel • 25% of Sales Go To Nuxt! • Codebase will be updated to Nuxt 3 (when stable)
The End! Josh Deltener Nuxt Ambassador / Runs With Scissors deltener.com @JoshDeltener
Large applications often have to integrate with a wide variety of external applications. Learn how to handle third party code and setup your application to embrace change in your Nuxt application.
The following resources were mentioned during the presentation or are useful additional information.
I cover all three problems described in more detail on my blog!
for free. You
can too.