Polymer Team Panel (Polymer Summit 2017)

Key Takeaways

[Music] so I'd like to welcome to the stage a bunch of people from polymer engineering team to answer all your questions so first Justin Finney Ani is an engineer on the polymer tools team Monika is an engineering you've met many times today and yesterday on the polymer team Rob Dodson developer advocate extraordinaire expert in all things web and general internet celebrity Wendy kids Berg the product manager on the polymer team itself who gave the keynote yesterday and Steve Orville the mastermind one of the masterminds behind the polymer core library and engineer on the polymer core team as well all right so we have two microphones UH one microphone up here two microphones up here so please come up ask your questions this is an open space this is a safe space we love being here with you there are no such thing as dumb questions please come up ask us anything you can also tweet at us at the hashtag ask polymer and what we're looking through those tweets live and so I'll be I'll be looking through a machine up here to try to get some of those questions delivered to our panel as well all right great so to kick us off I have a question in the barrel which is that lots of exciting stuff coming out yesterday and today with polymer and NPM and es6 modules lots of excitement about how to develop components also a little hesitancy for a lot of folks who really enjoyed being able to author HTML in HTML so is there anything that you're thinking about in terms of how we can kind of better support that use case that has been so special to so many polymer developers of authoring HTML in HTML please yes I mean I first want to say that we hear you we spent a lot of time yesterday today talking to people who were you know kind of lamenting the loss of authoring in HTML and it kind of makes sense because that's something that's been a little bit unique about polymer and you people have chosen to use polymer and that's why you're here because you like it a lot and sir it's definitely got us thinking about ways we can you know help support that kind of style and that kind of workflow even as we move to JavaScript modules it's important to note though that also our philosophy of using the platform kind of means that like when the platform gives us a tool and in this case kind of denies us another than one that we were hoping to use the we our choices in a sense made for us a little bit we have to go to JavaScript modules because that's the native loading solution on the web but we can look at ways to kind of layer the project and provide ways to you know have some tooling or something like that the the important thing is that polymer 3.0 is very very early in preview stage and so there's a lot of time for feedback and a lot of time for experimentation with solutions to give you the you know the ability to write HTML and HTML so yeah I mean the actual string that you write is the same template in fact you could draw a line from every line in a HTML import to a line in a JavaScript file and there would be a one-to-one correspondence between every line in there we're just following cember and that's why you have to bump the major version yeah so we hear you we have some interesting ideas on how we can you know serve the best of both worlds just add quickly that you know again based on feedback the reality is active modules are here today and we want to support them you know but there's some spec work potentially to develop an HTML extension to those modules and that's something that we'll be thinking about and you know valuating and seeing kind of you know if our users are really clamoring for HTML on our own team I will say that there was definitely a bit of like difficulty ripping that band-aid off but we're also excited about some of the new things that modules are going to provide I mean lit is an excellent interesting direction and you can't do that in HTML so you know we're gonna be experimenting and listening for feedback so a closely related question that should hopefully be quick if I'm working on a new project right now should i target 2.0 or 3.2 definitely 3.0 is very very early and the other thing to know is that when we published core and all the elements those were literally converted automatically by a tool minutes before we publish them up it was like one process so if you're on 2.0 and you keep pushing forward and you do that we're gonna take you to 3.0 automatically I'm sacked you can tell that they were published while we were here because we got raped limited by github on the conference IP Wi-Fi so that if anybody was trying to use the github API you couldn't do it cuz Justin did all of it no we used to get hub token that wasn't us just so many people in the code lab I [Laughter] think you know a little bit of straight talk to steal graze term is you know we're really aiming as Justin said to earlier to you know not change the API between 2.0 and 3.0 just as little as we have to absolutely have to you know and actually Kevin's app that he built he transferred the whole thing using the you know the tool that Justin's team is built and you know it had some bugs for a while but you know the latest version works pretty seamlessly and the kinds of you know I think Justin sort of obtusely mentioned we're changing as little as we can arm Evo spread which in G is little you can honestly like it let me give you just one example there's the polymer import ETF what did that do it created an HTML import well there's no more HTML important so you have to do that differently right this is like about what we're gonna change that's the only change yeah and if this this brings up a good point you know if your vending open source elements out there we actually recommend that when you use the converter you do not change the API of your elements at all treat them is having the same major version even if you bump the major version because it's now modules because that one that means when your users run the converter they will automatically be compatible with your element so we look at this transition is is not really an API breaking change it's just a repackaging alright let's go to a live question I have a question regarding to link and improving developer experience is there any opportunity we were developing and to have provided hot module replacement like you are coding and you'll immediately see the changes in browser yeah I mean we we don't have any work planned on that there are several ideas on how you can do that one of the things with hot module reloading is you often get into a problem where if you're replacing some JavaScript it's hard to huh it's hard to replace the state that might have gotten in a certain you know states for through some path of code that you took so I was just talking with some people today about ways we could make templates auto reload in Kevin's been looking at using redux which you know has some facilities for that kind of stuff that can replay your state we don't have any immediate plans but it's an interesting and open question Kevin kind of alluded to in his talk that we're considering ways you know we're not really prepared to say exactly what we're ready to build right now but we'd like to improve the overall developer sort of end-to-end experience and you know Kevin demonstrated using redux as a good way to do that and a tool like that works well with something like hot module reloading and you know there's something that I think we can explore without can really committing to anything I mean you know frankly I think we'd love to be able to build something that community can also contribute to you and and you know it's not some useful feature that's great thanks alright so we have another question about tools which is what are the plans for all the various tools that polymer tools team builds when it comes to polymer three so at polymer CLI what's gonna happen with polymer bundler will it be replaced by web pack plug-in etc yes so there's a little bit to be figured out there but I'm kind of on the mind that we have different paths to explore here probably at the same time one is we have existing customers who are using the CLI and are successful and happy and we want to keep them moving forward into this world without them having to ditch our tool chain so we have been adding support for NPM we don't have an NPM flag on the CLI and Polly serve and WCT and we'll probably try to add support for modules as an incremental choice that you can add into your project as you go but we also want to enable people to like not have to use our tools because we're so different from everyone else to be able to use roll-up and web pack and all these other options that everybody else has out there so we're definitely going to take care of you and keep our tools moving forward it could be where look at opportunities to replace some of our custom stuff with something that the community already has so we have to do less work but we're also going to explore the idea of you know if you have an existing project and you want a sprinkle polymer in you can do that without having to buy into our tool chain make Rob happy with polymer 3 and the transition to NPM what was the kind of reasoning for choosing to go with yarn and a flat dependency tree as opposed to using NPM and pure dependencies getting all the questions here happy to do it though it's really the platform again a lot of people kind of think they've been using javascript modules because there's been support and all the compilers that will turn es6 syntax into a common j/s or something but it turns out that the web compatible modules are a little more restrictive than what people have been using say in the node or like web pack ecosystems and they require that you import by path just like HTML imports and so HTML imports and Bower worked well together because Bower installed flat and then you can import polymer by importing dot dot slash polymer right so we have that same situation on NPM JavaScript modules require importing by paths if you want to import from another package you do import dot dot slash and that package name and that kind of forces us to have packages in the flat layout and yarn does that NPM currently doesn't I hope they consider adding that feature and then will be able to use the NPM client as well you know custom elements have a you know when you define a custom element nope that's used you can't use it again so that doesn't really work well if you'd be careful about that so loading a dependency twice is bad for that the other reason is loading dependency twice is horrible for perform for performance so you know relying on a tool to make your page completely not suck and load the same code over and over and over again is not ideal I think when we install flat we ensure we don't do that actually it is worth pointing this out a little bit so it's also important to understand that your client side dependencies you definitely want those to be flattened as Steve was saying you don't want to ship ten versions of the same thing to the client that sucks right your dev dependencies all your build tools and things like that those can actually still have like the nested node install and so there may be a little like fine-tuning that we need to do here to make sure that like it's very easy and ergonomic for developers to sort of like be like okay cool I I flatten my client side stuff and I one of the things you tried out was different yeah they're so different yeah so like these are my client side dependencies are my like normal nodes or build or whatever dependencies flood and one don't flood on the other and we still have a lot of work to give everyone templates that they can start from they're set up to serve and illed in the proper way so well will be coming out with that in the coming weeks yeah but like just personally like I even though there is a little bit of work and overhead involved sometimes in flattening your client-side dependencies the flip side of that is you know I think with web pack you have what is it like common chunks plugin or something like that so it's like I mean you're you can either D dupe this at install time and handle it yourself that way and at least then you've got like a GUI kind of walking you through it or you've got to like click this whole thing into your build process to do dupe your packages so doing it one way or the other usually and personally it seems like doing it as early as possible in the install process is a good thing let's jump to a question from Twitter which is what about accessibility so how does polymer work with voiceover and screen readers in general yeah okay hi so how does polymer work with accessibility I mean generally like fine I can't think of anything that is like you know painfully broken the biggest issue is going to be around shadow Dom so most of the stuff that we do in accessibility to build relationships so you say for instance you have attributes like Aria labeled by things like that where you you actually say this element is labeled by that other element and you use an ID reference to that other element so literally like CSS ID reference right the challenge there is with shadow Dom right you're creating this little scoping bubble your IDs are scoped to that bubble and so you can easily end up in situations where I've got something in the shadow Dom that you would really like to label or you'd really like to refer to with like Aria controls or something like that and you're unable to do it you just like can't get down there so there are a few things that we're working on to fix this that aren't actually like polymer specific but are just like web platform stuff so probably the most important is the new accessibility object model which you can find that on github.com / WIC G / AO M a.m. and this is basically like adding a programmatic API to accessibility and making it a lot easier for you to imperative Lee likes it you know like set up relationships in JavaScript between elements and say like hey I've got this element here and I have access to its accessible node property and I can actually then give it a actually node reference in JavaScript then I could you know talk through shadow bound trees and things like that that's really the most important thing that I think we're doing to fix this and that that'll that'll help web components obviously but it also just make accessibility more broadly across the platform easier for for developers I think let's go to a live question since when I started using polymer was because I could just serve up date on a flat with just engine X or a static server but most of the examples I've seen now or over the past year have always been through a dynamic note server or something like that so I just want to make sure that you know one of the that that's gonna stay and follow my that you took ingest serve from my static server all of the things that I build are always from a static server that's like a Monica role so they always work the only time I do extra things is to bundle but there's no requirement is just imports and that's one of the reasons why modules require paths is because the browser needs to figure out the exact URL to load and then with yarn flat it'll be able to find it and load it yeah I mean the one thing I would add is because of the way that custom elements version 1 is defined because of the current existing browser support and because of our desire always to ship really optimized sets of code to the browser we do sometimes what's called differential serving to serve just the right bundle you know like for I 11 we can't serve es6 this is why we will provide tools to let you serve the optimized thing hopefully that's gonna go away soon in the next year or two question yeah I'm really happy with all the tooling and documentation you guys have provided to help remove users from polymer 1 been to polymer 2 and now - polymer 3 it's like you know really made it as turnkey as possible for folks like myself but my question is you know there's still obviously a lot of projects in code out there with polymer 1 still and using the 0x web components polyfills what do you guys have in terms of a long-term support strategy or end-of-life plan for polymer 1 and you know obviously eventually polymer 2 and those 0x polyfills as well can you repeat the question for anyone watching on like a video or livestream sorry sure I mean Taylor yes so a question was around end of life support and just general kind of long-term support for polymer one and polyphenols yeah I mean so basically there's the native features that we rely on is one part of the question and you know this is sort of web standard practice right those will not be removed for centuries probably until like that we actually do crazy stuff like you know how many people use these things but so those won't go away really and you know polymer we are supporting hybrid mode so I think I can't say exactly but we intend essentially to kind of adopt a similar policy where as long as there's need we'll continue to support it and unless Taylor tells me differently does that also include the v-0 shadow dom the implementation in chrome that's a good question yeah yeah I mean this is really what I'm speaking to I mean the policy but basically one of the reasons the web is great is because it really doesn't break and you know chrome kind of left ahead of everybody with v-0 shadow root and you know this is gonna be available as long as people are using it thank you features are removed from Chrome is that we keep tracking them we have a percentage of pages that are using it you can see that as well yeah public information is calm yeah and they have to drop below like a very small threshold Eero point zero three Perseus you know 3% oh yeah all pages are using this feature and if it drops below that then you're confident enough that it's basically just like old pages or unused pages or just we're sorry we're gonna break you so I don't think we're nearly close enough and we're not there's no chance we're gonna go there in the next years one thing that is happening soon that's gonna make Monica excited but if anybody was here still on like 0.5 or anything and you're using the deep selector and CSS or the shadow selector yeah for that - those are going away very soon in Chrome and that will change the styling of your so we've been trying to urge people to get up to polymer 1.0 and stop using that for the last couple of years hopefully you have they're basically getting replaced by the descendant selector so like it's not gonna make your style not get applied but deep is just like it becomes a descendant selector so it's not gonna go into shadow roots or anything like that little warning in the console for quite a while but it's very it's weird I had this like innate reaction now I see the warnings I'm just like clear if you're like me like definitely going to break it's definitely getting removed yeah luckily I've seen some sites that hopefully they've moved it doesn't break them that bad in all tweaks alright let's turn to another Twitter one how optimistic are you and what are your feelings about other browsers agreeing to native element extension and what can we as the developer community help my cross to bear [Music] is equals is a great idea where the the idea of extending a custom element or the idea of adding your own set of functions and behaviors and prototypes to a native element this idea I'm very clear here is agreed on by all browsers the implementation of this idea is not agreed on by all browsers so the current is equals implementation in particular is not is very content like consensus and is not agreed on by all browsers and this means that we would like to we will continue fighting for something like is equals it will probably not be his equals in the state that it is hilariously enough as equals is a likely contender one letter off but basically there is a need for extending custom elements there are things that you cannot do unless you are any development for example submit forms so in parallel for with us fighting for this API to actually we're also fighting for browsers to actually no just fix the form element forum elements should look at custom elements there is no reason why the form developed 20 years ago should not look at something developed now so it's a hard question we're working on it we're trying very hard to write specs wit so it's an ongoing battle I'm not I don't know if this is entirely accurate but I'm gonna say it on stage as if it is if you add a shadow root to an element that you've type extended like so let's one of the one of the things is like Oh select right select is amazing and it has all this built-in accessibility and presentation to it and my understanding is if I extend that and then add my own shadow root like all of that goes away and so yeah okay so like yeah so there's like a lot of things that you might like think that you want to do with is equals actually just aren't going to quite work and so then it does become a bit of like a weird API and the browser is not really good at like pinkies Ryan like a pinky swear I'm not gonna do bad things cuz I've read those like these 20 things that I can't add a shadow root to but not these other four or something yeah so I definitely think personally yeah I want just them to sort of like expose the primitives or fix the elements I want like the label element in the form element and all these things just either just work with custom elements or let me sort of imbue my custom element with form Ness and label Ness and label ability and things like that and one day one day this will happen promise I just had personally I'm not personally I'm not very optimistic just speaking for myself only again because I think this concern for example that Rob brought up around shadow roots is a really good idea of the larger problem you know in v-0 custom elements you could extend input but you couldn't add a shadow root to it so what you could actually do it it was kind of limited why because it had this native legacy implementation and this is really the larger concern is that these native elements have this long history of you know super plus plus plus implementation and crazy specs before custom elements was even a thing so the long-term fix is to expose those api's and make available to any custom element has wants them and maybe there's a shorter term fix it probably isn't gonna be is it maybe some crazy thing and you know we know that people really want this and so we're definitely kind of got our fingers on the pulse of that and and we'll be pushing for something because I think you know the exposing and the guts of input so that you could do it all yourself is probably a 25 year project yes so you know we probably need something in the meantime and if is is objectionable you know we'll be pushing and sort of pushing people for some better solution and I'll give a little shout out to Marika stock alert earlier today all of these discussions are not in some secret backroom these are all happening out in the open on public mailing lists so you have good use cases and I get hope bianna github please go and like tell everybody you're very upset that is equals is not a thing github comm w3c slash web components yes there you go it's the only way we get things done by proving that you actually want something like musicals they don't believe me all right let's go to a live question yeah thanks so my question was in fact related to the previous one but first I'd like to thank you for letting us use the bleeding edge of this bag right now before it was you know recommended and given the the is attribute is gone what's the the migration path that you proposed to the currently implemented elements that are using s attribute especially those that are using specific parsing context like templates script table TR and so way that we I think we're getting it from the Big O so think that I did with form for examples of wiring for him was an extension of form you convert into a wrapper and then you put content in it so basically all of the extra is equals things that you were doing you put it on a wrapper element but that for TR is kind of yeah tables are tricky tables are tricky but remember that you can style yeah you can style things as tables with CSS so you could move but you got style think like a template that template type yeah so yeah I mean what what Palmer did I mean yeah it's not super pretty we're not gonna lie but this sort of decoration pattern is essentially this is what polymer did with like we used to in polymer 1.0 we had template is down repeat we first sort of compatibility we did some magic where we sort of made that work in polymer templates in 2.0 but the way that we actually make that work is we have a Dom - repeat element it expects a template inside of it and it works that way this is a general pattern that's gonna basically work again it's not super pretty but it's what you can do great thanks and thank you for this disent it was great yeah actually you need to bring them back on the polymer project website the student mention about an upgrade tooth 2 to 0 from 1x any update on this on the upgrade tool yeah there's a mention about who's from when 0 to 2 yes so you know last year we said we're gonna make this upgrade tool and then this is kind of my bad a little bit and it seemed like most of the feedback was like oh it's really easy to upgrade and the things that were tricky to upgrade we're actually going to be impossible for a tool to automate things like converting a Content tag to a slot tag where the content had actually had a selector there's no way we can just automatically determine what the slot name should be everywhere and apply it so it seemed kind of to us for a while that everybody that we were hearing from was kind of satisfied with how easy it was to upgrade and then it seemed like more recently we heard an uptick in number of people who were asking about about the tool and wanted it so also recently we started converting all the internal elements inside Google from wanted to and at Peter and engineer on the tools team has been working on the tool quite recently it's not very clean code we've just been like hacking at it to do whatever upgrade we could and so we're planning on releasing the version that we have for internal external pretty soon okay then do you have a citizen to lint old element to find you know quickly what has to be changed to 0 right rather you know going to be cherry mountain you know searching for specific things but you know something Tulane so it's highlighted a way to highlight a new code you know what should be changed like yeah we can certainly if there's cases where we we can't determine what it should be we can output a message that says you know this needs to be updated by you okay all right we're running a long time let's do one more live question hello my question is do we have any tutorials or videos for the making something like neon animations because we really load in the now the Uni and actually animations in the polymer one new animations in its future right so is it is is it fit is we have a blog post that Elliot wrote you probably saw him on stage before on the polymer summit site that kind of explains what happened to neon and animations and what's going to happen to neon animation yeah so my question is like is there any some new videos or children's like neon missions because in the version 2 it is duplicated right would there be replacements for neon animation yeah I don't think so the problem with neon animation is that it's fundamentally a flawed concept that we thought was going to work and doesn't like it doesn't actually add anything in the current state that it is amazing to the web animations polyfill a API and we had a team the team that actually works on the web animations API look at making a new and better neon animation and what it ended up being was the web animations API so it turns out just like a declarative wrapper would be amazing but it just doesn't really work well and if you want to me it's just a jar of spiders yeah I'll also plug baldra in another engineer on the team made a codelab performant expand collapse animations and just by going through that you can see you know something pretty typical that anybody would want to build and how he does it and then you can learn yourself and maybe apply that to some other projects thank you alright let's close out with a question that I love which is what would each of you see as your number one request or a hole current hole in the web platform a feature or some change that you would like to see made to the web platform to make it better there's two I'll go on and hope somebody else does the other one I think right now for web components we're looking pretty good with native implementations at least in Chrome and Safari the one piece that seems to be left to make everything much better is the theming support in CSS for shadow Dom so that's the part and theme CSS spec it just got promoted to working draft or editors right let's take the other one out no it's okay so yeah that will just help that would just help everybody theme across their shadow roots that was mine we're better or for worse for some reason I care about inputs and forms despite never actually using a form on anything that I've ever manned so what I would like to see in the web platform is input being less opinionated and forms being less opinionative elements being less opinionated about their tag names so for I'm caring about more than just input and you know input type equals color actually working on all of the browser's cuz it's not yes yeah Foreman input I would like for man input to succeed at their job yeah so mine it's kind of related to that like there's a lot of things that native elements can do there's like a lot of built-in magic I've been working on accessibility a lot the how-to components that we all worked on accessibility was like the primary driver behind that work we were like how do we build tabs and trees as custom elements and make sure they are like really like robust and accessible right fully keyboard accessible doing all the right things with Aria everything we can possibly try and then there's still places where we come up short because there's some stuff that we just can't do in the browser today the label element the things like that click on a label and it focuses your control that's a cool magical behavior that like just there's no easy way to get that you're gonna have to make your own custom element label now and then you end up just reinventing like all of HTML to get all these little features so I'm really excited about am and other you know other stuff like being able to hook into forms I think these are probably some of those common things folks have brought up and we've kind of been pushing it for them for years I actually think people are listening a little bit more right there's only about forms I think forms are actually a good yeah I could hope you're like finally getting through to some folks there so yeah that's really what I want I want I want to make sure the future of HTML is accessible and that's easy for developers to do that to do the right things and it's not like this arcane art to make something accessible I think that the biggest frustration I have is when there's like a really cool feature and not every browser has it of course you know trying to bring down polyfills and I think a way that that could happen is oddly enough through payments and commerce on the web because the more we allow users to buy things and spend money there the more companies pay attention large companies that have tons and tons of sites and have tons and tons of tons of developers and so we can start doing more stuff with payments I know that chrome payments just came to desktop will start attracting a lot more attention and then hopefully companies will start putting a lot more attention into their browsers or paying attention in standards meetings and stuff yeah people on the team know that the thing I care about sort of the most is performance and I think I've said this before but you know I think with custom Ellen's we have an opportunity to add things to the browser that makes it faster makes us able to do things custom in custom ways faster I care about this for a couple reasons obviously I want things me faster so that we can all make stuff that's awesome and better for users but there's another reason and you heard yesterday and Alex Russell's talk he talked a lot about mobile CPUs now he only talked about that for like five minutes but he works in the same offices us and we have to hear him talk about that for like hours and hours and hours and hours and I would like to have things faster so I don't have to hear that venting all right great so Matt's gonna come on in a second with some closing remarks and some very important announcements so please be sure to stick around but thank you so much to the panel [Applause] [Music]