Web Components and the Polymer Project: Polymer 3.0 and beyond (Google I/O '18)

Web Components are powerful, reusable, encapsulated components available natively on the web platform. As web components transition from cutting-edge to table-stakes - directly supported in nearly ever major web browser - the Polymer Project continues to transition as well. In this session, learn about the latest on the web component APIs, the Polymer library's shift to version 3.0, how it's becoming continually smaller and lighter, and the direction the project will be taking in the future.
Slides: docs.google.com/presentation/...
Rate this session by signing-in on the I/O website here → goo.gl/1vsmn1
Watch more Chrome and Web sessions from I/O '18 here → goo.gl/5fgXhX
See all the sessions from Google I/O '18 here → goo.gl/q1Tr8x
Subscribe to the Chrome Developers channel → goo.gl/LLLNvf
#io18 event: Google I/O 2018; re_ty: Publish; product: Chrome - General; fullname: Kevin Schaaf, Steve Orwell; event: Google I/O 2018;

[@sto100]

For the video master: the screen is the interesting part, so show it... ghrr

[@davidmaxwaterman]

yeah, it's incredibly irritating to not be able to see the screen when they're talking about it and pointing to it...

[@MichaelJenkinsJr]

I was legitimately yelling at my screen; so frustrating.

[@arthurpf14]

I was like : "when are they going to show in fullscreen??"

[@nobytes2]

2020 and people still don't know how to screencast, really Google. Smh.

[@meridjal]

That's what happens when you have idiots doing video editing.

[@the_real_vdegenne]

Thanks so much Polymer.. Few years ago I was still not sure where I was going to lead my life and my career, I've always wanted to work for the web but now I can say how much Polymer helped me to take that decision to concrete when I first discovered that project, its strong meaning in improving technologies and the wonderful team that's behind the curtain. All these excitements was like a big revelation, and I just want to say thanks. Polymer 3.0 was more than expected. Now the big dream is to be able to use all that framework without the need to use a middleware server to transpile or to resolve npm modules. But yet now it really feels like coding inside the browser and the joy is real.

[@vernonpadayachee3571]

Wow!! Huge congrats to both Stevins and surely also to all of the Polymer Team!!! Your greatness just comes through somehow. Thanks for 3.0 and all things to come, from all who use "the one platform that reaches every user on the Earth".. Thanks for making (technical) life so much easier and more enjoyable for all... Fantastic presentation!!! You guys just gel and flow very well. Keep up the great work!!!

[@aammssaamm]

Are you impressed with the "3.0" number? Otherwise there is nothing to be really excited about.

[@NicolasSauveur]

Go HTML Modules ! Thank you Justin and all the polymer team for working hard over the years to make the web more awesome with open standards.

[@CodingPhase]

This is the only thing I'm actually excited about from this year's google io

[@neuemage]

Go to 13:00 for presentation

[@boboutdooradventures]

Yay for HTML Module, writing the template in js is really a pain point, let's hope it's going to be shipped soon

[@edino1981]

I think that this is the biggest technical dept maker in history of programming :D

[@SoulMasterX]

3 years passed, Chrome browser is only single browser that truly support shadow DOM v1. - Safari partially supported. But they are fixing the remainig bugs in their implementation. - Firefox is developing it. - Edge still has no plan. Shadow DOM spec still be a W3C draft not recommend standard.

[@pluraltest9242]

edge will eventually, they will be using chromium as a base on their next iteration

[@theoligarchist1503]

they introduced so many new things in this talk itself that no one will dare use this, they forget why Babel is so popular.

[@floverdevel]

Wow finaly 3.0 is out 😀 A lot of cool new stuff 😱😀👍

[@jacquesduplessis6175]

So much good news in one video!!

[@haydenbraxton628]

Such a great talk!

[@Oswee]

Great. Already building large ERP stuff based only on web components.

[@jasmad3]

why to mix the template inside the js code? just because react does it like that...

[@xman0820]

Please tell me if there is any update in I/O '19. Thanks.

[@code4chaosmobile]

Exciting stuff.

[@arturocoronel]

And the slides?

[@joernturner2526]

ok, you said it yourself: encoding templates in JS literals is 'kind of weird'. YES, while i see the need for moving along this consequence is a major step backwards. We urgently need HTML modules!

[@pluraltest9242]

How much polyfill would I need to get it working in IE11?

[@rchrdnsh]

Are the slides online somewhere? The video never shows the slides full screen ☹️

[@igorshubovych]

Dear Google! Why do you keep showing presenters waving their hands for minutes, and then showing slides for seconds? I see their gestures look professional and I appreciate that, but can we read the slides, please?

[@vorname1485]

Google wants you to see the crowd cheer, so you don't notice how bad polymer 3.0 is and how litle they'v learned in terms of design choice. The whole presentation is google-typical hilarious.

[@MehdiRaash]

Polymer's Website needs feel more fresh!

[@FMRubio]

Great news from Polymer. However, the recording of the presentation could be improved. Could you fullscreen the slides whenever Steve or Kevin are pointing out examples on the slides?

[@chhornponleu8191]

I love Polymer and the Polymer Jacket

[@CodingPhase]

Thank you polymer team you guys might have saved the industry with this one for real! I'm loving this!

[@ankitmaheshwari3643]

Web components are not available at webcomponents.org for Polymer 3. From where do we use components to design pages.?

[@khaledali4909]

Did you know how to get them and from where ? please tell me.

[@AmetAlvirde]

They are available via npm now. under de @polymer namespace, if you need, for example, paper-button, then you do npm install @polymer/paper-button. Unfortunately, not all elements are available at the moment, as it is an ongoing transition.

[@AmetAlvirde]

@@khaledali4909 They are available via npm now. under de @polymer namespace, if you need, for example, paper-button, then you do npm install @polymer/paper-button. Unfortunately, not all elements are available at the moment, as it is an ongoing transition.

[@jonathanfeldman7309]

I really liked the presentation. It got me thinking it would be really cool if HTML imports and template instantiation could be declared together with some type of HTML statement. I think the GitHub issue already mentions the idea of a way to import HTML using a HTML tag. But what if you could also set the dynamic placeholders with attributes as well. For instance, some syntax like . I think it would be pretty powerful to be able to do all that without even needing JavaScript. What do yall think? Let me know if it had already been suggested.

[@coolmenscool4436]

Jonathan Feldman this is possible in polymer. You can create custom properties in every custom element.

[@jonathanfeldman7309]

Coolmens Cool haha, I probably should've been more clear. I meant doing it without needing JavaScript. So even if someone had JavaScript turned off, it would work. You could make a server side tool that will do it (I guess it's essentially what polymer SSR would be). But it would be nice if you could do it just on the client. But it's probably too much to ever be considered.

[@ArihantAV]

Why aren't the slides switched when they should be shown?

[@sasikalatholisam4098]

hello!..I want to use data tables in polymer 3.0 ..Is there any way ?

[@alinasrabadi749]

No :|

[@fahmiirfan6923]

What is the difference between Polymer and React/Vue/Angular ?

[@sfincione2000]

Mainly, Polymer's goal is to help in the creation of reusable components. React, Vue and Angular are more about creating applications (for now) and they don't generally work well together. In the future. Polymer expects to disappear into the background when the browsers are fully compliant with the standards. So in the future you will be building web components, not Polymer components. Polymer is here to foster this approach (as far as I see it).

[@jobiej7416]

Polymer uses web components to build apps while other frameworks don't. check the w3c or polymer site to learn more and why it is the future of the web

[@goonholiday656]

React Vue and Angular actually work and have good docs

[@Tytanxz]

Angular does with the release of Angular 6 and it looks like they're going hard after Polymer.

[@GenghisD0ng]

Besides web components Polymer 3 is also more efficient bc it doesn't have to be compiled again to view in browser, building with ES6 means it's future ready, see 21:38 They really need to update whole website and the docs more frequently though. I can't even find the stuff they said in the presentation on there that actually make it better than other JS frameworks. Guess that needs time bc it's only been a week.

[@alinasrabadi749]

Awsome

[@cipheroth]

A lot of problems with IRON components in Polymer 3 PLEASE FIX THAT QUICKLY :D

[@ravikirangajula6051]

Can I use polymer 3.0 with iOS native application development without Cordova

[@AmetAlvirde]

No, you can't make an iOS native app just with polymer. What you can do is a PWA (Progressive Web App) with some native app benefits, but it wouldn't be available at the app store.

[@HemantVandhnani]

@@AmetAlvirde What about creating an app via Polymer and then packaging it with Cordova?

[@ojumle]

Why u are using deprecated Shadow DOM v0 API for KZbin?!

[@Pesthuf]

I really want to wait for the polyfills to become obsolete before working with web components. Working with web components with polyfills feels almost completely different from how it's going to work in browsers with native custom element and shadow dom implementations. You don't need to do all these ridiculous workarounds. Performance is going to be a lot better, too.

[@JustBCWi]

all the useful screen content is not cast to the video. Sadge.

[@LUX_8]

I'm clueless. I gotta catch up.

[@iterativeincremental]

Second breaking release in a shorter time. Same promises as always, I am sure things wont work. Have you documented testing the es6 way now?

[@MikeS]

Polymer 3.0 changes everything... except subproperty changes are still not observable. notifyPath & notifySplices are so cumbersome!

[@RuiLima1981]

Come on! Why are we only seeing the guys??? Why arent the screens shown?

[@florinsimion6466]

wow, Teller can talk.

[@CodingPhase]

YESSSSSS!!! I feel like we are back to 2009 javascript is going to become simple again... no tooling!!!! ahhhh Jquery days.... so easy to just code without 4 hours of setting up webpack and thirty thousand other loaders

[@robertfish]

CodingPhase it's interesting that KZbin uses polymer

[@CodingPhase]

@Raymond its required for older browsers. I don't focus on older browsers I'm looking at the future. jsbin.com/zezilad/edit?html,output go check it out.

[@Bryanerayner]

"JQuery days" were not the good old days...

[@thiagovilla970]

tots

[@antanaskiselis7919]

One might as well go write binary. WebComponents are too low level for common UI development. And requires a lot and a lot of boilerplate. There is hope, as it seems the newest trend is build time compilers, not frameworks which are executed at runtime. However, that means that you still do not write native web components. You write something which compiler recognizes and spits out w3c standards compatible code. That seems to be the only way to have fully native web component based UI's while also having all the great features UI frameworks like React can offer. Check out Stencil.js for example. React-like api, spits out w3c standards compliant webcomponents which require no dependencies and can be used anywhere. Polymer seems interesting, but it looks like framework at this point. Some of this stuff is actually ridiculous. Who on earth though that css "shadow parts" is good idea? I mean, first people insist on keeping syntax separate, disregarding the domain, keeping to their page as document roots, even though paradigm shifted to components (of all things, regarding web component lib). When they invent all kinds of fluff syntax and woo woo to bridge the gap they themselves insisted on having. Just use css in js, m'kay?

[@AmetAlvirde]

EVERYONE: SLIDES LINK IS IN THE DESCRIPTION.

[@SkyriderAX]

Thanks for never showing the slides and code throughout the whole talk !! ... OMG

[@marcellodias2377]

Dart and POlymer were like bread and butter,too bad Google made the stupid decision of abandon Polymer.Dart,and Server sdie Dart.

[@pluraltest9242]

it's because they also have angular (although I would prefer web components over angular/elements)

[@heliobessonirodrigues6632]

It's 2020 and Material Web Components are still in preview. Polymer could be the reference, but it choose not to be.

[@zuzelstein]

what about webcomponents from polymer team? Basically Polymer 3.0 is just plain library without anything in terms of infrastructure.

[@numannebuni]

Why is youtube.com still using Polymer 1?

[@2152311564132542]

numannebuni Because it is too slow in IE/Edge with polyfills

[@numannebuni]

Sorry, I don't understand. Polyfills are needed for Polymer 1 also, isn't that so?

[@TheAceEditor]

Hate the 2 speaker format

[@SubayanSenGupta7]

I think he is slide reading !

[@antanaskiselis7919]

Who on earth though that css "shadow parts" is good idea? I mean, first people insist on keeping syntax separate, disregarding the domain, keeping to their page as document roots, even though paradigm shifted to components (of all things, regarding web component lib). When they invent all kinds of fluff syntax and woo woo to bridge the gap they themselves insisted on having. Just use css in js, m'kay?

[@vorname1485]

bower. forgot about it already. used to package manager, but it was just unnecessary noise to me. It still smell in my opinion though. customElements.define global call in every component. Nameless imports of those files and "magical" availability (through the global define call in the imported component) of a custom html element. With named imports you could use simple methods to (type-)check code, this here requires some special sense in IDE and importing must be done manually I assume. Very productive... And that is just the tip on the iceberg. Btw. webcomponents.org (https) seem to have certificate issues...

[@arturocoronel]

🙂👍👍

[@ELStalky]

Nice, soon the web will be where WPF was 10 years ago.

[@theoligarchist1503]

skip to 19:00 if you came here for Polymer 3.0, and no there is no introduction to Polymer here, they screwed up again.

[@PaulSebastianM]

34:00 - 34:05 LMAO, Jab at React!

[@vorname1485]

That is funny, all the following talk after your link is imperative bs (appending, etc.). Hilarious talking of "Jab at React!".

[@DrRobrez]

[@kalidsherefuddin]

Ok

[@gevikb]

Redux? Really?

[@monx]

sigh.

[@lzantal]

Ok I only watched it until 21min. I just can't anymore. This is absolutely horrid!! Instead of showing the code example for lithtml he zooms in on the speaker. Hey Google remove this video you are causing more harm than good for Polymer with it.

[@TesterAnimal1]

Why so focused on XML? (You say HTML, but it is XML) What is important is DOM structure, not the textual representation that used to have to be sent over the wire to recreate the desire DOM. get rid of the obsession with “