Skip to content

Less props passed to ABProvider - #4190

Closed
mxdvl wants to merge 4 commits into
mainfrom
mxdvl/islands/ab-test-props
Closed

mxdvl wants to merge 4 commits into
mainfrom
mxdvl/islands/ab-test-props

Conversation

@mxdvl

@mxdvl mxdvl commented Mar 4, 2022

Copy link
Copy Markdown
Contributor

What does this change?

Add a method to filter out unused switches.

Why?

We should only pass required props to Island children.

Before

{"sectionName":"uk-news","palette":{"text":{"headline":"#121212","seriesTitle":"#C70000","sectionTitle":"#C70000","byline":"#C70000","twitterHandle":"#707070","caption":"#707070","captionLink":"#C70000","subMeta":"#C70000","subMetaLabel":"#707070","subMetaLink":"#707070","syndicationButton":"#707070","articleLink":"#C70000","articleLinkHover":"#C70000","cardHeadline":"#121212","cardByline":"#C70000","cardKicker":"#C70000","linkKicker":"#C70000","cardStandfirst":"#121212","cardFooter":"#707070","headlineByline":"#C70000","standfirst":"#121212","standfirstLink":"#C70000","branding":"#C70000","disclaimerLink":"#AB0613","signInLink":"#AB0613","richLink":"#C70000","pullQuote":"#AB0613","pullQuoteAttribution":"#C70000","witnessIcon":"#C70000","witnessAuthor":"#C70000","witnessTitle":"#C70000","carouselTitle":"#C70000","calloutHeading":"#007ABC","dropCap":"#AB0613","blockquote":"#707070","numberedTitle":"#C70000","numberedPosition":"#707070","overlayedCaption":"#FFFFFF","shareCount":"#707070","shareCountUntilDesktop":"#707070"},"background":{"article":"transparent","seriesTitle":"transparent","sectionTitle":"transparent","avatar":"#FF5943","card":"#F6F6F6","headline":"transparent","headlineByline":"transparent","bullet":"#C70000","bulletStandfirst":"#DCDCDC","header":"transparent","standfirst":"transparent","richLink":"#C70000","imageTitle":"#C70000","speechBubble":"#C70000","carouselDot":"#C70000","carouselDotFocus":"#C70000","headlineTag":"#AB0613","mostViewedTab":"#AB0613","matchNav":"#FFE500","analysisUnderline":"rgba(199, 0, 0, 0.5)"},"fill":{"commentCount":"#C70000","commentCountUntilDesktop":"#C70000","shareIcon":"#C70000","shareCountIcon":"#707070","shareCountIconUntilDesktop":"#707070","shareIconGrayBackground":"#AB0613","cameraCaptionIcon":"#707070","richLink":"#C70000","quoteIcon":"#C70000","blockquoteIcon":"#C70000"},"border":{"syndicationButton":"#DCDCDC","subNav":"#C70000","articleLink":"#DCDCDC","articleLinkHover":"#C70000","liveBlock":"#C70000","standfirstLink":"#DCDCDC","headline":"#DCDCDC","standfirst":"#DCDCDC","richLink":"#C70000","navPillar":"#FF5943","article":"#DCDCDC","lines":"#DCDCDC","matchTab":"#DCDCDC","activeMatchTab":"#005689"},"topBar":{"card":"#C70000"},"hover":{"headlineByline":"#AB0613","standfirstLink":"#DCDCDC"}},"ajaxUrl":"https://api.nextgen.guardianapps.co.uk","switches":{"anniversaryHeaderSvg":true,"abSpacefinderOkr3RichLinks":true,"prebidAppnexusUkRow":true,"commercialMetrics":true,"prebidTrustx":true,"scAdFreeBanner":false,"abSpacefinderOkr2ImagesLoaded":false,"prebidPermutiveAudience":true,"compareVariantDecision":false,"enableSentryReporting":true,"lazyLoadContainers":true,"adFreeStrictExpiryEnforcement":false,"liveblogRendering":true,"remarketing":true,"fetchNonRefreshableLineItems":true,"registerWithPhone":false,"targeting":true,"remoteHeader":true,"extendedMostPopularFronts":true,"slotBodyEnd":true,"prebidImproveDigitalSkins":true,"emailInlineInFooter":true,"showNewPrivacyWordingOnEmailSignupEmbeds":true,"facebookTrackingPixel":true,"iasAdTargeting":true,"extendedMostPopular":true,"prebidAnalytics":true,"prebidCriteo":true,"puzzlesBanner":true,"imrWorldwide":true,"acast":true,"twitterUwt":true,"prebidAppnexusInvcode":true,"a9HeaderBidding":true,"prebidAppnexus":true,"enableDiscussionSwitch":true,"standaloneCommercialBundle":true,"prebidXaxis":true,"abSpacefinderOkr1FilterNearby":false,"stickyVideos":true,"interactiveFullHeaderSwitch":true,"discussionAllPageSize":true,"prebidUserSync":true,"audioOnwardJourneySwitch":true,"mobileStickyPrebid":true,"externalVideoEmbeds":true,"simpleReach":true,"carrotTrafficDriver":true,"sentinelLogger":true,"geoMostPopular":true,"weAreHiring":true,"relatedContent":true,"thirdPartyEmbedTracking":true,"prebidOzone":true,"ampAmazon":true,"prebidAdYouLike":true,"mostViewedFronts":true,"abSignInGateMainControl":true,"ampPrebid":true,"googleSearch":true,"brazeSwitch":true,"consentManagement":true,"commercial":true,"redplanetForAus":true,"prebidSonobi":true,"idProfileNavigation":true,"confiantAdVerification":true,"discussionAllowAnonymousRecommendsSwitch":false,"scrollDepth":true,"permutive":true,"comscore":true,"webFonts":true,"prebidImproveDigital":true,"ophan":true,"crosswordSvgThumbnails":true,"prebidTriplelift":true,"weather":true,"commercialOutbrainNewids":true,"abSignInGateMainVariant":true,"abAdblockAsk":true,"prebidPubmatic":true,"serverShareCounts":false,"autoRefresh":true,"enhanceTweets":true,"prebidIndexExchange":true,"prebidOpenx":true,"prebidHeaderBidding":true,"idCookieRefresh":true,"sharingComments":true,"discussionPageSize":true,"smartAppBanner":false,"boostGaUserTimingFidelity":false,"historyTags":true,"mobileStickyLeaderboard":true,"surveys":true,"remoteBanner":true,"emailSignupRecaptcha":true,"prebidSmart":true,"inizio":true},"pageIsSensitive":false,"isDev":false}

After

{"sectionName":"uk-news","palette":{"text":{"headline":"#121212","seriesTitle":"#C70000","sectionTitle":"#C70000","byline":"#C70000","twitterHandle":"#707070","caption":"#707070","captionLink":"#C70000","subMeta":"#C70000","subMetaLabel":"#707070","subMetaLink":"#707070","syndicationButton":"#707070","articleLink":"#C70000","articleLinkHover":"#C70000","cardHeadline":"#121212","cardByline":"#C70000","cardKicker":"#C70000","linkKicker":"#C70000","cardStandfirst":"#121212","cardFooter":"#707070","headlineByline":"#C70000","standfirst":"#121212","standfirstLink":"#C70000","branding":"#C70000","disclaimerLink":"#AB0613","signInLink":"#AB0613","richLink":"#C70000","pullQuote":"#AB0613","pullQuoteAttribution":"#C70000","witnessIcon":"#C70000","witnessAuthor":"#C70000","witnessTitle":"#C70000","carouselTitle":"#C70000","calloutHeading":"#007ABC","dropCap":"#AB0613","blockquote":"#707070","numberedTitle":"#C70000","numberedPosition":"#707070","overlayedCaption":"#FFFFFF","shareCount":"#707070","shareCountUntilDesktop":"#707070"},"background":{"article":"transparent","seriesTitle":"transparent","sectionTitle":"transparent","avatar":"#FF5943","card":"#F6F6F6","headline":"transparent","headlineByline":"transparent","bullet":"#C70000","bulletStandfirst":"#DCDCDC","header":"transparent","standfirst":"transparent","richLink":"#C70000","imageTitle":"#C70000","speechBubble":"#C70000","carouselDot":"#C70000","carouselDotFocus":"#C70000","headlineTag":"#AB0613","mostViewedTab":"#AB0613","matchNav":"#FFE500","analysisUnderline":"rgba(199, 0, 0, 0.5)"},"fill":{"commentCount":"#C70000","commentCountUntilDesktop":"#C70000","shareIcon":"#C70000","shareCountIcon":"#707070","shareCountIconUntilDesktop":"#707070","shareIconGrayBackground":"#AB0613","cameraCaptionIcon":"#707070","richLink":"#C70000","quoteIcon":"#C70000","blockquoteIcon":"#C70000"},"border":{"syndicationButton":"#DCDCDC","subNav":"#C70000","articleLink":"#DCDCDC","articleLinkHover":"#C70000","liveBlock":"#C70000","standfirstLink":"#DCDCDC","headline":"#DCDCDC","standfirst":"#DCDCDC","richLink":"#C70000","navPillar":"#FF5943","article":"#DCDCDC","lines":"#DCDCDC","matchTab":"#DCDCDC","activeMatchTab":"#005689"},"topBar":{"card":"#C70000"},"hover":{"headlineByline":"#AB0613","standfirstLink":"#DCDCDC"}},"ajaxUrl":"https://api.nextgen.guardianapps.co.uk","abTestSwitches":{"abSpacefinderOkr3RichLinks":true,"abSpacefinderOkrMegaTest":false,"abSignInGateMainControl":true,"abSignInGateMainVariant":true,"abAdblockAsk":true},"pageIsSensitive":false,"isDev":false}

@github-actions

github-actions Bot commented Mar 4, 2022

Copy link
Copy Markdown

Size Change: +518 B (0%)

Total Size: 1.37 MB

Filename Size Change
dotcom-rendering/dist/9078.js 4.32 kB +57 B (+1%)
dotcom-rendering/dist/9078.legacy.js 4.38 kB +52 B (+1%)
dotcom-rendering/dist/9817.js 11.8 kB +58 B (0%)
dotcom-rendering/dist/9817.legacy.js 12 kB +55 B (0%)
dotcom-rendering/dist/frontend.server.js 360 kB +184 B (0%)
dotcom-rendering/dist/react.js 61.4 kB +57 B (0%)
dotcom-rendering/dist/react.legacy.js 68.4 kB +55 B (0%)
ℹ️ View Unchanged
Filename Size
dotcom-rendering/dist/1214.js 2.65 kB
dotcom-rendering/dist/1214.legacy.js 2.71 kB
dotcom-rendering/dist/1230.js 3.62 kB
dotcom-rendering/dist/1376.js 1.9 kB
dotcom-rendering/dist/1376.legacy.js 2.01 kB
dotcom-rendering/dist/1578.js 1.89 kB
dotcom-rendering/dist/1578.legacy.js 1.92 kB
dotcom-rendering/dist/1624.js 2.64 kB
dotcom-rendering/dist/1624.legacy.js 2.71 kB
dotcom-rendering/dist/1924.js 5.05 kB
dotcom-rendering/dist/1924.legacy.js 5.12 kB
dotcom-rendering/dist/2.js 4.36 kB
dotcom-rendering/dist/2.legacy.js 4.47 kB
dotcom-rendering/dist/2058.js 5.79 kB
dotcom-rendering/dist/2058.legacy.js 5.96 kB
dotcom-rendering/dist/23.js 5.83 kB
dotcom-rendering/dist/23.legacy.js 6.14 kB
dotcom-rendering/dist/2737.js 6.01 kB
dotcom-rendering/dist/2737.legacy.js 6.33 kB
dotcom-rendering/dist/2879.js 7 kB
dotcom-rendering/dist/2879.legacy.js 7.26 kB
dotcom-rendering/dist/2947.js 2.58 kB
dotcom-rendering/dist/2947.legacy.js 2.66 kB
dotcom-rendering/dist/2949.js 5.13 kB
dotcom-rendering/dist/2949.legacy.js 5.35 kB
dotcom-rendering/dist/3213.js 14.2 kB
dotcom-rendering/dist/3213.legacy.js 14.5 kB
dotcom-rendering/dist/3215.js 5.6 kB
dotcom-rendering/dist/3215.legacy.js 5.75 kB
dotcom-rendering/dist/3249.js 3.42 kB
dotcom-rendering/dist/3270.js 4.91 kB
dotcom-rendering/dist/3270.legacy.js 5.06 kB
dotcom-rendering/dist/3397.js 238 B
dotcom-rendering/dist/3397.legacy.js 250 B
dotcom-rendering/dist/4025.js 1.52 kB
dotcom-rendering/dist/4025.legacy.js 1.55 kB
dotcom-rendering/dist/4211.js 2 kB
dotcom-rendering/dist/4211.legacy.js 2.11 kB
dotcom-rendering/dist/4279.js 4.33 kB
dotcom-rendering/dist/4576.js 234 B
dotcom-rendering/dist/4576.legacy.js 245 B
dotcom-rendering/dist/4813.js 5.3 kB
dotcom-rendering/dist/4813.legacy.js 5.4 kB
dotcom-rendering/dist/4850.js 233 B
dotcom-rendering/dist/4850.legacy.js 244 B
dotcom-rendering/dist/5096.js 4.67 kB
dotcom-rendering/dist/5096.legacy.js 4.74 kB
dotcom-rendering/dist/5217.js 232 B
dotcom-rendering/dist/5217.legacy.js 243 B
dotcom-rendering/dist/5226.js 5.48 kB
dotcom-rendering/dist/5226.legacy.js 5.88 kB
dotcom-rendering/dist/53.js 4.11 kB
dotcom-rendering/dist/53.legacy.js 4.12 kB
dotcom-rendering/dist/5310.js 4.53 kB
dotcom-rendering/dist/5356.js 5.71 kB
dotcom-rendering/dist/5356.legacy.js 5.88 kB
dotcom-rendering/dist/5431.js 2.7 kB
dotcom-rendering/dist/5431.legacy.js 2.72 kB
dotcom-rendering/dist/5585.js 6.68 kB
dotcom-rendering/dist/5585.legacy.js 6.95 kB
dotcom-rendering/dist/586.js 4.63 kB
dotcom-rendering/dist/586.legacy.js 4.7 kB
dotcom-rendering/dist/5868.legacy.js 5.79 kB
dotcom-rendering/dist/6222.legacy.js 3.47 kB
dotcom-rendering/dist/6348.js 5.34 kB
dotcom-rendering/dist/6348.legacy.js 5.53 kB
dotcom-rendering/dist/6400.js 21.5 kB
dotcom-rendering/dist/6400.legacy.js 21.5 kB
dotcom-rendering/dist/6684.js 239 B
dotcom-rendering/dist/6684.legacy.js 251 B
dotcom-rendering/dist/6965.js 3.2 kB
dotcom-rendering/dist/6965.legacy.js 3.26 kB
dotcom-rendering/dist/6992.js 2.02 kB
dotcom-rendering/dist/6992.legacy.js 2.12 kB
dotcom-rendering/dist/7051.js 7.77 kB
dotcom-rendering/dist/7051.legacy.js 7.96 kB
dotcom-rendering/dist/7262.js 16.8 kB
dotcom-rendering/dist/7262.legacy.js 17.2 kB
dotcom-rendering/dist/7417.legacy.js 5.25 kB
dotcom-rendering/dist/7576.js 3.7 kB
dotcom-rendering/dist/7576.legacy.js 4.07 kB
dotcom-rendering/dist/7583.js 6.03 kB
dotcom-rendering/dist/7583.legacy.js 6.19 kB
dotcom-rendering/dist/7800.js 11 kB
dotcom-rendering/dist/7912.js 33.6 kB
dotcom-rendering/dist/8080.js 1.81 kB
dotcom-rendering/dist/8080.legacy.js 1.9 kB
dotcom-rendering/dist/8129.legacy.js 11.5 kB
dotcom-rendering/dist/8294.js 231 B
dotcom-rendering/dist/8294.legacy.js 242 B
dotcom-rendering/dist/8344.js 6.92 kB
dotcom-rendering/dist/8344.legacy.js 7.28 kB
dotcom-rendering/dist/8748.js 230 B
dotcom-rendering/dist/8748.legacy.js 242 B
dotcom-rendering/dist/8839.js 1.14 kB
dotcom-rendering/dist/8839.legacy.js 1.24 kB
dotcom-rendering/dist/8918.legacy.js 3.77 kB
dotcom-rendering/dist/92.js 529 B
dotcom-rendering/dist/9311.js 18.5 kB
dotcom-rendering/dist/9327.js 1.86 kB
dotcom-rendering/dist/9327.legacy.js 1.95 kB
dotcom-rendering/dist/9540.legacy.js 29.4 kB
dotcom-rendering/dist/9641.js 6.66 kB
dotcom-rendering/dist/9641.legacy.js 6.94 kB
dotcom-rendering/dist/97.legacy.js 20.7 kB
dotcom-rendering/dist/9776.js 6.59 kB
dotcom-rendering/dist/9776.legacy.js 6.88 kB
dotcom-rendering/dist/atomIframe.js 1.88 kB
dotcom-rendering/dist/atomIframe.legacy.js 2.15 kB
dotcom-rendering/dist/bootCmp.js 7.63 kB
dotcom-rendering/dist/bootCmp.legacy.js 11.2 kB
dotcom-rendering/dist/braze-web-sdk-core.js 36.1 kB
dotcom-rendering/dist/braze-web-sdk-core.legacy.js 36.1 kB
dotcom-rendering/dist/coreVitals.js 4.04 kB
dotcom-rendering/dist/coreVitals.legacy.js 4.34 kB
dotcom-rendering/dist/dynamicImport.js 3.01 kB
dotcom-rendering/dist/dynamicImport.legacy.js 3.3 kB
dotcom-rendering/dist/embedIframe.js 1.89 kB
dotcom-rendering/dist/embedIframe.legacy.js 2.15 kB
dotcom-rendering/dist/ga.js 3.89 kB
dotcom-rendering/dist/ga.legacy.js 4.15 kB
dotcom-rendering/dist/guardian-braze-components-banner.js 11.9 kB
dotcom-rendering/dist/guardian-braze-components-banner.legacy.js 12 kB
dotcom-rendering/dist/guardian-braze-components-end-of-article.js 8.28 kB
dotcom-rendering/dist/guardian-braze-components-end-of-article.legacy.js 8.33 kB
dotcom-rendering/dist/initDiscussion.js 8.02 kB
dotcom-rendering/dist/initDiscussion.legacy.js 8.27 kB
dotcom-rendering/dist/InteractiveBlockComponent.js 5.9 kB
dotcom-rendering/dist/InteractiveBlockComponent.legacy.js 6.14 kB
dotcom-rendering/dist/islands.js 8.19 kB
dotcom-rendering/dist/islands.legacy.js 8.91 kB
dotcom-rendering/dist/newsletterEmbedIframe.js 2.04 kB
dotcom-rendering/dist/newsletterEmbedIframe.legacy.js 2.29 kB
dotcom-rendering/dist/ophan.js 7.19 kB
dotcom-rendering/dist/ophan.legacy.js 7.39 kB
dotcom-rendering/dist/readerRevenueDevUtils.js 892 B
dotcom-rendering/dist/readerRevenueDevUtils.legacy.js 952 B
dotcom-rendering/dist/relativeTime.js 2.42 kB
dotcom-rendering/dist/relativeTime.legacy.js 2.69 kB
dotcom-rendering/dist/sentry.js 715 B
dotcom-rendering/dist/sentry.legacy.js 727 B
dotcom-rendering/dist/sentryLoader.js 4.86 kB
dotcom-rendering/dist/sentryLoader.legacy.js 7.82 kB
dotcom-rendering/dist/shimport.js 2.75 kB
dotcom-rendering/dist/shimport.legacy.js 2.76 kB
dotcom-rendering/dist/SignInGateMain.js 3.66 kB
dotcom-rendering/dist/SignInGateMain.legacy.js 3.8 kB

compressed-size-action

@oliverlloyd oliverlloyd left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we saying here that within switches there is actually a subset of switches used for ab tests and that sometimes in the code these are getting confused with the main switches used as feature flags? Does this perhaps surface a larger problem that we should really have two properties on the model?

If the above is true, then ideally this transformation would happen earlier in the stack, in which case this change could be made into an enhancer. We use enhancers for the types of model changes that we:

  1. want to happen now so that we can write the rendering code the way we think it should be be but
  2. also want to move up to a higher level in the stack

By using enhancers we make any transition up in future easier (because the mutation is contained) and we also make writing rendering code easier as the model fits the right pattern.


export const filterABTestSwitches = (switches: Switches): ABTestSwitches =>
Object.fromEntries(
Object.entries(switches).filter(([key]) => key.startsWith('ab')),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a convention that switches used for ab tests are given the ab prefix and this function is built on top of that pattern?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this is a convention followed in frontend and the ab-testing framework expects it.

Sadly I couldn’t find documentation outside of the actual LoC where this stuff is evaluated. I tried to bring a change to the ab-testing library to use a template string to indicate this fact with ab${string}, but couldn’t get the repo to behave.

@OllysCoding

Copy link
Copy Markdown
Contributor

in which case this change could be made into an enhancer

Worth keeping in mind that we recently refactored enhanceCAPI into enhanceBlocks to support the /Blocks endpoint on DCR.

If we wanted to use an enhance pattern for this solution, we'd need to re-introduce some kind of enhancement protocol which works for the wider CAPI object, while making sure it doesn't prevent support for our new endpoints like /Blocks and /KeyEvents.

@oliverlloyd

Copy link
Copy Markdown
Contributor

We already have enhanceStandfirst which I think follows the pattern we would need here.

Right now we have

		const CAPI = {
			...data,
			blocks: enhanceBlocks(data.blocks, data.format),
			standfirst: enhanceStandfirst(data.standfirst),
		};

So maybe we could

		const CAPI = {
			...data,
			blocks: enhanceBlocks(data.blocks, data.format),
			standfirst: enhanceStandfirst(data.standfirst),
			abThings: addAbThings(data.switches),
			switches: enhanceSwitches(data.switches),
		};

or something like that?

@mxdvl

mxdvl commented Mar 25, 2022

Copy link
Copy Markdown
Contributor Author

In light of #4200, I think #4403 is a better approach.

@mxdvl mxdvl closed this Mar 25, 2022
@mxdvl
mxdvl deleted the mxdvl/islands/ab-test-props branch May 19, 2022 14:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants