DEV Community

Max Lynch for Ionic

Posted on

Apple Just Shipped Web Components to Production and You Probably Missed It

Yesterday Apple announced the release of the new beta Apple Music Web Client, giving Apple Music customers the ability to listen to their favorite music from the web instead of only through an installed native app.

I was following the conversation on Hacker News, and many were excited to see Apple embracing the web and bringing parity to other music apps like Spotify that have had rich web experiences since the early days. That Apple still cares deeply about the web was encouraging and exciting for many to see.

Predictably, HN readers were curious about the tech stack behind such a huge release from such a huge and influential company. Curious readers quickly figured out a huge portion of the app was built on Ember, and most of the technology conversation focused on this:

Alt Text

However, a few careful readers noticed something interesting: Apple also shipped over 45 Web Components to power many corners of the Apple Music web experience (which they built using StencilJS, a detail no one else noticed but can be seen by inspecting the component bundles being loaded). These components are focused around the new Video player for music videos, podcast playback control, notifications, and more. My read on the situation is that Apple will deploy a lot more features with Web Components over time, and the ones we see today are for the burgeoning features they are being tested on.

I found the fact that the Web Component usage went over nearly everyone's heads on HN hilarious, given that the conversation around Web Components on HN so often devolves into passionate exasperation that Web Components aren't solving unique problems teams actually have, and that real-world usage at scale has been scant. At this point you can expect to see a comment that Web Components are just a poor replacement for popular 3rd party component models like React and that web standards folks should just give up, in nearly every HN post on the topic.

Given that Apple has huge sway over whether modern web standards like Custom Elements and Shadow DOM get implemented (and correctly!), the fact that they have embraced these new APIs and deployed major implementations with them to a massive consumer app, should be the biggest news of the day.

Let that sink in: Apple just deployed into production nearly 50 web components powering a major app they have a significant amount of revenue and strategic value riding on. You can't say that "no one uses Web Components" or they are "solving problems that don't exist or have been solved better in user land" with a straight face anymore.

And the fact that they are mixing in Web Components with a framework like Ember is huge validation for Web Components. They co-exist with popular frameworks and often solve different technology and team culture problems (such as a diversity of frontend stacks in active use across teams), but can bring some really unique benefits especially around performance. It's not an either-or and they can be easily incrementally adopted!

Oh, and if you're curious how the Apple team built these Web Components, turns out they used our open source project Stencil JS. Stencil was built to power the popular cross-platform UI framework Ionic Framework, and provides a View layer similar to React and Angular, but focused on generating Web Components with features like automatic polyfill delivery, highly optimized lazy loading, native binding generation for popular frameworks, and a toolchain built around TypeScript. If you're curious, we go into detail about Stencil and how it's leading the frontend view/framework market in terms of performance for modern web apps on our v1 announcement blog.

We're absolutely thrilled Apple is shipping Web Components to production and even more that they are using our project Stencil to do it. We can't wait to see what else they build in the future!

Top comments (23)

Collapse
 
daviddalbusco profile image
David Dal Busco

It is just awesome πŸ˜ƒ

Congrats Ionic and Stencil team! Always bet on the web πŸš€

Collapse
 
jonathanabrams profile image
Jon Abrams

If you think that Apple using Web Components is a big endorsement (it is!), just wait until you find out that YouTube has been using them for years!

Collapse
 
baukereg profile image
Bauke Regnerus

I love this! I'm an Ember developer for years, yet all hipsters tell me Ember is a thing of the past and I should move on. I'm also advocating for Web Components, yet recently there seems to be this hype of calling Web Components dead. Apple just made my day!

Collapse
 
joelvarty profile image
Joel Varty

Looks awesome and works great!
Web Components are really cool - can't wait to see them proliferate even more.

Collapse
 
ryansmith profile image
Ryan Smith

Stencil seems to check all of the boxes by providing a way to use Web Components and filling in any gaps or barriers to entry. I like that you can start with a component library or a full app setup with routing, making it easy to get started. The API seems so simple as well. I'll definitely be giving it a shot.

Collapse
 
seanmclem profile image
Seanmclem • Edited

I've been using Stencil JS in a lot of projects lately. I'm glad to see Apple embracing the web a bit more recently.

Edit: Since Safari 12 they've been supporting a lot of newer specs more quickly than usual. Their AR push has also included some new web spec proposals. Now all these Stenciljs components? This is certainly one of the bigger names to embrace Stencil. In recent years Apple has favored native Apps over web tech. Maybe they've had a change of heart. .

Collapse
 
larsdenbakker profile image
Lars den Bakker

This is great, thanks for sharing and congratulations to the Stencil team :)

Collapse
 
vancuren profile image
Russell Van Curen • Edited

Congrats! Great news for the Ionic/Stencil team. Glad to see even more companies utilizing the Ionic ecosystem!

Collapse
 
mickdelaney profile image
mick delaney

That’s huge news, congrats on stencil getting the nod on such a huge product !

Collapse
 
anthonylebrun profile image
Pierre Lebrun

THIS IS AWESOME

SORRY NOT SORRY CAPS.

This made my day.

Go Stencil!

Collapse
 
boyoz profile image
boyoz

This is exciting; Web Components are still not getting the attention they deserve despite the fantastic advantages they bring.

I just published a Web Component for integrating domain-independent smart assistants into any website with voice input. Feel free to check out and let me know what you think: (github.com/uihilab/instant-expert)

Collapse
 
timonweb profile image
Tim Kamanin πŸš€ • Edited

Yeah, and the bundle size is around 3MB 😭 (non-gzipped)

Collapse
 
adamdbradley profile image
Adam Bradley

Luckily the web components are not apart of that bundle. In total, all of the stencil components appear to take up around 60kb, which means their components have about 57kb of their own logic, and the remaining 3kb is stencil.

Collapse
 
tdumitrescu profile image
teddddd

Awesome. Not as huge as some of the other players, but at Mixpanel we've been using Web Components in production for our primary UIs for over 3.5 years now. I did a writeup about it last year: engineering.mixpanel.com/2018/06/1...

Collapse
 
newtonmunene_yg profile image
Newton Munene

Way to go

Collapse
 
dabit3 profile image
Nader Dabit

Very cool and interesting to see major players adopting web components, and especially StencilJS. Nice work Max & Ionic team πŸ‘