Anthony Frehner 🐽

Human, React dev, JS tooling fan, occasional speaker, probably an imposter. He/Him. Working at @shopify

[Anthony Frehner 🐽 @frehner_a]

Shopify Polaris is now built on web components. My team and I have been working on this for a while and it's been a lot of fun to "embrace the platform"!

https://t.co/XwVlEwD4LE

Lots of things learned, lots of fun edge cases discovered

[Anthony Frehner 🐽 @frehner_a]

Web components, unified API across the ecosystem, joy? Sure, why not :)

Lots of work on this, lots of fun too

[Shopify Developers @ShopifyDevs]

Polaris is now stable with one unified toolkit for apps and extensions

[Anthony Frehner 🐽 @frehner_a]

@kirplatonov @ShopifyDevs 8 minutes! Impressive haha.

Much appreciated.

[David Cameron @dave_cameron]

🚀 New Polaris web components are here!

ColorField, ColorPicker, Popover, Tooltip, Menu, Chip, ClickableChip & DropZone

https://t.co/CJHGwJA03L

[Shopify Engineering @ShopifyEng]

Import maps and JavaScript modules are important web platform primitives for performance benefits 🐎 but not reliable at scale. So we fixed it! 🎉

Learn how in this post by @yoavweiss
https://t.co/ouz812EoTT

[Anthony Frehner 🐽 @frehner_a]

@jenseng MF is a love letter to webpack; if you love webpack, it’s an excuse to add even more of it all over every repo! Haha.

[Anthony Frehner 🐽 @frehner_a]

@nunofx3 @kirplatonov Thanks for testing them out! Very unlikely that what we have in there at this moment changes besides bug fixes or additions; the experimental name is a safe-guard to allow us to make changes if necessary, but so far nothing has come up yet. We're just being cautious for v1

[Anthony Frehner 🐽 @frehner_a]

@kinngh We've also tried to ensure that React <=18 is natively supported without a "react wrapper" as well, thanks largely in part to some hackery from @_developit

[Anthony Frehner 🐽 @frehner_a]

@ryanleichty @jaffathecake We've (and by "we" I mostly mean "Jake") had to build some utilities to help with certain situations such as "s-table only accepts s-table-body components" and "s-choicelist needs to rerender when an s-choice attribute changes". Generally using MutationObservers and stuff

[Anthony Frehner 🐽 @frehner_a]

Shopify Polaris is now built on web components. My team and I have been working on this for a while and it's been a lot of fun to "embrace the platform"!

https://t.co/XwVlEwD4LE

Lots of things learned, lots of fun edge cases discovered

[Anthony Frehner 🐽 @frehner_a]

@ryanleichty multiple instances of a component on a page, the browser engine only sees one stylesheet.

[Anthony Frehner 🐽 @frehner_a]

@ryanleichty Oh yeah sorry for the confusion!

Yeah they have worked great for us; we apply a minimal amount of styles to all components globally, and every component adopts that stylesheet. Then additionally the styles for each component are (mostly) adopted as well, so even if there are

[Anthony Frehner 🐽 @frehner_a]

@ryanleichty Yeah Container Style Queries are new... too new for us to use, unfortunately. But I'm very excited about the possibilities there. That codepen you linked to goes hand-in-hand with this blogpost I wrote https://t.co/t2apre94Zi

[Alex Page @alexpage_]

Headline: "Polaris—unified and for the web"

The work:
- Align components across multiple teams w focus on web
- Extremely light "in-house" framework
- Automatic updates for Apps
- Maintain or exceed UX quality
- Docs, templates, CLI
- AI, MCP
- "Polaris"

So much more to come

[Anthony Frehner 🐽 @frehner_a]

@devwithalex Reach out with suggestions or problems you run into! We're monitoring here as well! https://t.co/5sTaK10r5m

[Anthony Frehner 🐽 @frehner_a]

@ryanleichty Ha, maybe! @jaffathecake would probably end up being the one to do that if we did.

There are some annoyances we've found in certain areas, but we hope to improve the web platform itself to make it better for everyone, while working around it.

But feel free to ask anything here

[Anthony Frehner 🐽 @frehner_a]

@ryanleichty is both custom to that instance of the component and also is defined by the dev. For example:

`container (inline-size > 500px) large, small`

will translate into a container query internally

[Anthony Frehner 🐽 @frehner_a]

@ryanleichty We control all the styles, so we use Adopted Style Sheets for the majority of the CSS styles.

In some cases we inline a <style> tag in the shadow dom when necessary; for example, we have a custom syntax that allows for different values depending on a container query, and that

[Anthony Frehner 🐽 @frehner_a]

@ryanleichty I really like @little_bret 's approach to solving that problem though. https://t.co/rx9xAhI1R5

[Shopify Developers @ShopifyDevs]

Now in your stack: Storefront Web Components 🧩

Add commerce blocks to any website:
• Integrate with embeddable building blocks
• Customize using CSS

[Anthony Frehner 🐽 @frehner_a]

@ryanleichty but can't crazily customize the styling themselves, which was another limitation that non-WCs have.

Ultimately, it just worked out great for us for this use-case. But it's understandable that WCs that want to allow greater amounts of customization could feel restricted here