loading...
Ionic

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

maxlynch profile image Max Lynch ・3 min read

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!

Posted on by:

maxlynch profile

Max Lynch

@maxlynch

Co-creator of Ionic Framework. Creator of Capacitor. Programmer turned startup CEO

Ionic

The open source UI toolkit for developing high-quality cross-platform apps for native iOS, Android, and the web β€” all from a single codebase.

Discussion

markdown guide
 

It is just awesome πŸ˜ƒ

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

 

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!

 

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!

 

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

 

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.

 

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

 

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. .

 

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

 

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

 

THIS IS AWESOME

SORRY NOT SORRY CAPS.

This made my day.

Go Stencil!

 
 

Go LitElement!

Yeah, I had to say it πŸ˜„

 

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...

 

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)

 

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

 

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.

 

This is awesome. I'm very excited about Web Components in general and <3 Stencil so it's great to see the tech getting more and more adoption.

 

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

 

bright future for StencilJS

 

This is great! This post will help many developers to convince their managers that Web Components is the next big thing and Stencil leads it these days. 😜

 

Several companies are starting to use WebComponents, from Apple to ING. This is amazing, we have to support standards.

 

Other than the video player, I'm finding it really hard to find any web components on the beta Apple Music site.

 

Great news, wonder why the new app isn't installable but that's not the purpose of the talk...
I find it funny hearing you often mention how the community oppose web components. I don't get it