Interview: Web Components explained by Google’s Eric Bidelman


We had the chance to meet and interview a lot of very interesting Googlers during the last Google I/O. Today, it was Eric Bidelman. We’ll release those interviews (mostly in English) in the upcoming days.

Wassim Chegham: Hi Eric, can you introduce yourself?

Eric Bidelman: Yeah! So, my name is Eric Bidelman, I work on the developer relations team at Google. I work very closely with the Chrome team and the Polymer team, focusing on Web development: Polymer, Web Components, all that stuff.

Talking about Web Components, how can you define them ?

Web Components to me are a set of standard APIs that are implemented in the Web Platform — in the browser, that various browsers are starting to implement — that allow you to create components, in JavaScript using the Web Platform. So you have a lot of frameworks these days that allow you to build components, and this is kind of a standard browser way to build components.

So, what is the status of these APIs?

The status is different for the various API. There are like four or five APIs: Custom Elements, Shadow DOM, HTML Imports and there is the Template tag. And templates are actually really good, the Template tag is available in all modern browsers now. That’s really awesome! So, you can use it right today without a polyfill. Custom Elements are being actively worked on by Apple, Chrome has implemented this already. If you lookup, Mozilla actually has a bug for this. IE, in their status page, is very interested in developing…

By IE, do you mean Edge?

Yes, it will be in Edge. Every browser has a status page that says if they’re going to be implementing something or not. So, Custom Elements should be in two browsers by the end of this year. Shadow DOM is also in Chrome and in Apple’s Safari preview as well. Microsoft and Firefox don’t really know yet but they are interested. And HTML Imports is kind of the weird one right now. It’s in Chrome. But I think lots of browsers are waiting to see how ES6 modules shake out. So, the status is all over the place but the standards themselves are looking good. At this point, everybody is on board with getting things done and implementing them. So, that’s what I’m excited about.

When will it be stable?

Stable? What’s your level of pain [laughs]? I’ve used Web components in a number of production projects. The session I gave here today at IO was about Google IO web app that we launched at google.com. We have a lot of Google new projects being built using Polymer and Web components. And they are just using the polyfills which are pretty good and they work really well in all modern browsers. So you can build an app today that uses components. If you don’t want to use polyfills that a harder challenge, right? If you just care about Chrome for instance, you can run everything without a polyfill. But other browsers don’t have a native APIs.

So, we talked about the browsers. But what about the other frameworks and tools, like Angular or React. Do they implement Web Components?

I don’t know the status of all the different frameworks but the cool thing about Web Component is, since it’s a standard browser APIs, that in theory you can drop a custom element, which is kind of a “supercharged markup”. You can drop that in an Ember app, an Angular app or a React app. Today, it’s a little more of a challenge. The interoperability story isn’t there, because you have polyfills that can do weird things for different browsers. But eventually, you will be able to just drop in a “App Drawer” component inside one of these frameworks and it should just work. Because all the internals are internal to the component. So one thing we actually talk about a lot is you can implement a custom element that inside of it uses Angular to get the job done, or uses React. Not a lot of people are doing that but you could do that…

…but you will need to load the whole framework inside the component…

Yeah! You wouldn’t want to do that and that’s the reason people haven’t done that. But you could… you know, your internals are your internals. You can use jQuery, you can use anything. The implementation details are up the component author.

We should try this [laughs]…

You should! I’ve done it. It’s crazy! I mean the problem is the component itself has to load one of these frameworks. And you don’t really want to do that for performance reasons.

How do you see the future of Web Components?

It’s interesting to see what has happened over the last three or four years. Because I have worked closely with the Blink and Polymer team and Chrome team since the beginning, now we are today. It changed quite a bit, you have the browsers implementing the features now. And it’s kind of interesting to see the new frameworks have come along the way, like Angular 2 and React. Everybody is producing components, they all allow you to build some type of component. So the component model is there. Developers really want to build components. Whether they use the native browser APIs under the hood or they have their own component model. I think that is the key thing is that getting developers excited about building web apps that use web components, It’s good! It’s just a good programming practice. That’s why I got excited about web components originally. Just because it brings good software engineering to the web for the first time.

It’s the building block of the future.

The building blocks of the future man! Yeah! Exactly.

Do you have one last thing to say about web components?

Check them out if you haven’t, try them. The cool thing is literally you can open the devtool and start creating a web component, you don’t need a framework or anything and that’s the amazing part of the standards and why the browser vendors are implementing the standards. There is all the low level stuff and Polymer on top and if you want to create components using it, try that out. If you want to create Web component using Angular 2, try that out.

Cyril Balit: Do you have a favorite component?

I showed this in my presentation: the scrolling component. I mean that gets you a lot for free just with a couple of HTML attributes. You get all these cool scrolling parallax effects. That stuff is not easy to do. Hopefully, that component is doing it well, performance-wise, under the hood. The other one is the “iron-list”, it’s like an infinite scroll list. And that stuff is really hard to do on cross devices and platforms. It works really well on mobile. Infinite scrolls are not easy but this one does really well…

Wassim Chegham: I like the “lazy-pages”…

Yeah! We just rolled that ourselves. That is simple too. That the kind of things you do with components, if you need something, just make a component for it.

Wassim/Cyril: Thanks Eric Bidelman for your time !

It’s great to meet you guys.

Vous aimerez aussi...