 Good morning, London. Hello. Okay. I told the people in the front to like good morning, London Thank you. I'm Chris Lorenzo. I'm John raviolo and now we have to share the beef Wellington story So when I travel, I don't really set goals for myself as far as where I'm gonna go eat or what I'm gonna go see I usually leave that up to my wife, but Unfortunately due to some poor planning on our part. She's currently eight and a half months pregnant and And and we're here. Yeah, we're here. Apparently. It's really hard to travel when you're pretty pregnant so she's at home watching right now, I love and We set this goal because my wife is a foodie. We watch master chef together with Gordon Ramsay I'm sure some people might have heard of Gordon Ramsay. He's apparently from the UK and Every year he makes the contestants make a beef Wellington. I'm like wow a beef Wellington So this is a beef Wellington. It's kind of like a polymer app. It has the app shell and inside you put the meat And it's just delicious. So I asked my wife, where can we get this beef Wellington and she tells us about Granadier pub so John and I venture out we go see the changing the guards at Buckingham Palace and We go to Granadier and we're sitting there and we look up at the ceiling. We're like look at all this American currency Wait a minute. We're Americans. I have a dollar bill John's a graphics designer So I pull out the dollar bill the bartender gives us a marker hand the dollar bill to John And we're talking we're like what should we do and I'm wearing my Liberty JS shirt, which has a Liberty Bell on it We're from Philly. We're from Philadelphia so we're like, okay, we'll put the Liberty Bell on there which Happens to ironically represent, you know, America's exit from the UK So we decided to put that on there and when we put of course the polymer symbol and So we got up on a bar stool glued it to the ceiling and if you go to the pub it's on the left hand side you can look up and You can get a beef Wellington there or a Bloody Mary. They're famous for both of those So yeah, so let's talk a little bit about Comcast That's company work for back in the US or based out of Philadelphia Comcast is the largest cable TV and internet service provider in the US. It's a fortune 50 company We have over 30 million customers and we own NBC Universal So that includes the whole family of TV shows movies and theme parks So my cousin that works at Harry Potter World at Universal Studios in Orlando, Florida Works for the same company that I do which is pretty cool and she's a core job than I I think And we use polymer, of course, and we have over 500 components that we've created So we get to work on a variety of different web technologies at Comcast To give you an overview of some of that stuff. This here is the my Xfinity website This is where a lot of our customers start their days to get the latest news check the weather check their email And this was built with Ruby on rails This is the my account website and this allows customers to go in view their bill pay their bill They're having issues they can troubleshoot their equipment they can manage their account stuff like that and this is actually built with angular So here we have the Xfinity home site. This was our first polymer app, which we started with point three It has half a million customers and it allows our customers to control their security system Change locks or turn turn on off lights change the thermostat We also have the X1 platform and this is Comcast's Premier TV experience. It's actually one of the best ways to watch television. The guide is awesome and We make this guide available on all platforms and if you happen to be using the web one That's also written in polymer and it serves over a million customers a day And so the first question is why polymer? Why did we choose polymer? and so the story starts two and a half years ago when our Product team asked us to build the Xfinity home and of course this is the final product. It didn't look like this when we started But we had this new project and we got to choose whatever framework we wanted so as a lead it was my job to start researching what was available and As everybody knows there are like hundreds of frameworks available But I narrowed it down to angular and react and I was checking them out and I'm like I've been a web developer for 15 years I didn't really feel too comfortable with these frameworks and So I'm talking to my buddy Phil at work one day and just to give you a little background on Phil He's the guy who lives on the cutting edge He reads all the latest news blogs and he watches all the latest Chrome developer tools And he's like service workers and this is two and a half years ago like as soon as it was available in Chrome canary He's like we should be using this in production and fetch and promises And I'm like Phil just calm down. We gotta wait until our customers actually have this So I'm talking to him and he's like we should use polymer. This is my son Theo. I taught him to say progressive web apps and It's so cute when he says it. He says And He understands like the sounds and he can repeat it back to me But he has no idea what it means And that's kind of how I felt when Phil said we should use polymer But unlike my son, I was actually able to use the internet and can Google it and it was like, okay, what's polymer? So I started looking through the documentation on polymer and checking it out and I got the team together And it was time for us to make a decision so of course We asked the whiteboard what we should do And we created a pros and cons column for whether we should use polymer and one of the big things that we really liked about it was that it was backed by Google and Like I am just overwhelmed Impressed by the Google team by the polymer team and how great their engineers are at building stuff The other thing that I really like about polymer is its future oriented, right? Web components spec is going to be built into browsers So eventually all the polyfills go away and we get great speed from them Also the documentation on the polymer website is amazing their technical writers are great and Probably don't get enough applause and we should probably applause for them. So Thank you polymer technical writers That's going to be our best applause of the day. That's great And developers always like doing something new But some of the cons of the time was like this wasn't even beta. We were looking at point three and It wasn't even alpha apparently teller was like, oh, this was experimental and I'm like I didn't get the memo for that and at the time Polymer point five and below use shadow DOM and we were trying to write tests for that and Selenium Had no idea what shadow DOM was so we were trying to like click on a button that was in the shadow DOM and Selenium Was like, I don't know where this button is. I can't find this button So there was no testing there was no tooling web component tester was not out yet And there was limited browser support. It was IE 10 and above but for expending home. We had to use web sockets So we were okay with that and of course we decided to go ahead with polymer and when we first started I was really nervous because we were building a production ready app for half a million customers in an experimental technology and When I first started I was I was really nervous like I was just like I was on the con side, too By the way, I was like we need to abandon ship We should switch to angular react But as we were developing and we were like discovering getting over the hurdles I really enjoyed polymer and I really enjoyed web components To the point where I'm excited to go around talking about web components and telling all the other web developers out there Like you should be using web components. They're great and I'm especially excited where the project's going with polymer 2.0 So Ultimately we did finish the site and you can see here's another page of our devices each one of those pieces that you see on there is A component so we have the XH thermostat We have XH light and it's really great when your UX team comes to you like hey Can we put that light on the overview page? We're like, yeah, sure. It's just a tag like it's no problem But we started the site with polymer point three. We eventually released with the polymer point five six and As we were releasing Polymers like okay, we got a point eight version and we're checking out the point eight version And then they're like, okay, here's the one point. Oh, and now you got to upgrade and we're like, oh great We'll upgrade and I'm telling my fill like oh, this should only take a couple weeks, right? It's no problem He's like no, this is gonna be hard And we spent three months upgrading So I'm really excited about polymer 2.0 and that Google understands the pain of upgrading and I'm excited about hybrid mode And I'm looking forward to a better experience upgrading So let's talk about sharing and if you're playing slide deck bingo, there are Legos on this one So keep paying attention to different slide deck bingo items This is picture of my kids sharing Legos and as I've learned sharing does not come instinctively when you're a child You don't want to naturally share your toys And as you learn to share there's some screaming and some crying involved and This is kind of like learning how to share components with polymer But I promise you can get through it without any screamier crying So it's this potential to reuse components that got people really excited about Palmer Comcast because Before Palmer was even a term in the vocabulary Comcast We were already looking at how can we make a consistent user experience across all of our devices because again We're building for TVs tablets phones laptops watches now, of course So our UX team put together this presentation on what they called modular design systems We're basically a symbol a single component could appear different based on the context So here's an example here of the Xfinity homes arm-to-arm widget in the usual context on the right hand side And on the left you can see the way it could appear behave in a different context So we're no longer designing and developing websites What we're building instead are components that can expose functionality on any website See your camera record a TV show pay your bill really anything So when the Xfinity home team started talking about the potential sharing components with polymer this got everyone really excited UX was excited product business I heard executives that weren't technical saying the word polymer meetings. I'm like what is going on here This is really catching on So a little over a year ago I hadn't had a chance to work with Palmer yet and then that day came when my boss comes to me He says so John The Xfinity home team they've been building with Palmer a lot. I'm talking all about sharing components It's time to actually prove that this is actually a possibility So what I want you to do is take that Xfinity home arm-to-arm widget and put it on the my Xfinity website for a demo in two weeks And I'm like, ah, alright, that sounds cool, you know, I've never used Palmer before but I'm excited for the opportunity and So I go ahead and I look at I'm like, okay, look at the documentation Documentations wouldn't pretty well. I go and look at the Xfinity home code base. I'm like, okay There is a bunch of components here. I figure out which one is the arm-to-arm widget I'm like, alright, how am I actually going to take this component and put it on the my Xfinity website? Not exactly sure So I talked to the Xfinity home developers and the immediate response is like whoa slow down, buddy You know, you can't just take a component and drop it on another website And I'm like, but that's what we sold us on that's how we got the company to use it and then in talk to them It became obvious. I mean they as Chris said they started building with zero point three They upgrade to zero point five they upgrade to one point. Oh, so they were learning polymer as the polymer team is learning Palmer And they end up time to focus on making a shareable component. They were learning on you know How do I make a ship this app ship this website? But that didn't change my demo date. I still had two weeks So Chris and I we worked together. We looked at the my Xfinity website Look, okay, where we get to put this thing we looked at it on the right hand side There was a spot so we put on the right there and then in two weeks I was at the demo and I successfully armed my security system at my house from the my Xfinity website and This is a defining moment for Palmer Comcast because this proved that yes We can actually create shareable reusable components and use this across the board at the company and This opened up the door for more projects to actually be using Palmer So right now Chris and I have been working on a number of projects over the past year and We knew when we were starting these projects that we wanted to build shareable Reusable components. This was a key aspect of what we're going to build So we set out to build these components that were actually to be shared across websites And now that we've been doing this for a number of months this year actively and actually sharing components We can see what it's like to actually do this and we've come up with a set of best practices for building shareable reusable components The first one is to use cores, which if you're not already familiar is cross-origin resource sharing This is what allows you to go ahead and if you're on one domain to make an API call with Ajax or fetch to get data So this allows you to get around the same origin policy by passing some headers and say hey I'd like to make a request here and then if you're on the white list you can get back that data right there And this was a key piece of what we had to do for the Xfinity home arm disarm widget Because that was built for Xfinity homes. So when I dropped it on the my Xfinity website It was expecting a relative path to the API which didn't exist I then hard-coded it to go to the Xfinity home website and the browser just said not gonna happen So we had to add the course headers there and then we could then get that API to pass through to another website Another thing is to separate the data from the UI and what I mean by this is a single component should not be in charge of fetching processing and rendering data The UI components should take in the data it expects as attributes and properties and render it any processing should happen outside of it we've actually tried to create data components and that just strictly dealt with fetching data and processing it and that had It kind of worked to have some issues Chris will touch on those in a little bit We've also tried Redux that in early indications seems to be working well So those are other options, but the key thing is to separate your data from the UI there We also care a lot about testing so you may be wondering do we practice tester of development or TDD? We don't enforce that some developers choose to but what we do enforce is code coverage So we use the Istanbul plug-in for web component tester That's pretty much the industry standard for code coverage in JavaScript And you can see here that one of our polymer projects has nearly a hundred percent test coverage and for our shared components in each One of those reposed we actually require 100% test coverage across the board and This if you don't have a hundred percent test coverage and you try to submit a pull request It'll actually fail the CLI or it's failed the CI for kiddos integration So we enforce this and this helps make developers feel more confident about using these shared components because they knew they know that They've been fully tested So again, we don't enforce TDD, but we do enforce DDD and you're probably wondering what I'm talking about when I say that and actually Ben touched on this yesterday a bit Talking about how ING uses polymer and that is demo driven development And this is one thing that I love about what the Palmer team has done. So they've created these Amazing library of open-source components and in addition to great documentation They have these rich demo pages that show you exactly the code you need to use and how it's going to look when you use that code So we do the exact same thing So here's for example again that my Xfinity or say the Xfinity home arm-to-arm widget the two different ways that could appear and The code required to do it and our teams have agreed that this definitely has helped focus them better on making shareable Reasonable components because when you're constantly looking at the demo page, it's pretty clear what your goals are and what you need to be building This has other advantages as well For one it kind of forces you to think in shadow DOM even if you're using shady DOM And what I mean by that is we've had developers getting started with Palmer and since we're using shady DOM by default They'll have an element that's contained within a couple other elements And then they'll set styles in the outer element that impacts the inner element And that's technically possible because we're just polyfilling shadow DOM But if we were to turn on shadow DOM then that would break and when you're building the different Appearances of each component on the demo page and looking at it It really forces you to think okay if this component needs to look a different way I'm going to go ahead and put that on the demo page Another thing is so we're again using these on multiple websites if we make an update to a shared component We don't want to have to go in and test that update on every individual website If you have every use case on the demo page It's much easier to just go ahead look at the demo page and if the if it works there It's going to work well on the website and then if there's a new use case You need to add you just add it to the demo page and then you're good to go So remember DDD is the answer to creating shareable reusable components Thanks So I couldn't let John be the only one with an acronym, so I came up with SPC and SPC stands for second-party components Or it could mean shared polymer components. It really doesn't matter acronyms are everywhere. This one's not important What I mean by it though is we have this thing called the universal header and it appears on top of every one of our sites and it also comes with a universal flitter and The product team wants to be able to have this header and footer be shared across all the sites and be easily Updatable so that they can change the link and all the sites get it instantly This thing's been around for probably about seven years now And when it originally started it was a script tag that you put on the page Which would then load two iframes an iframe for the header an iframe for the footer And everybody's already like yes, it was an iframe It was pretty pretty disgusting Then we started using Ruby on rails a little bit and we started doing it server side So you could make a server side call and get it included in the page and serve it before Before the user, you know needed it and then You know we started doing these single-page apps and like we don't want a server anymore so we came up with a new way of doing that and What we're doing is we said why don't we make this thing a web component? We're like yeah web component sounds good So what we did was we got the Polymer team or the Polaris team to create this universal header as a web component and What you can do is you can actually import a web component from another domain From another team, so we have another team building this Navigation for us and we import it into our project and now we have an xc header and xc footer tag that we can use Just like normal DOM elements We got rid of the iframe because you know doing the iframe It's really hard to do a responsive site and try to like change the size of an iframe and change the height like Good luck. Good luck trying that but with this we can now also talk to the header We can pass that information we can change its styling we can change its z-index a lot easier if we have pop-ups It's just all around much better Also when we first started with Polymer, we really drank the Kool-Aid and thought like everything should be a component We were so excited. We're like we got to make it all a component and So what happens is with a typical Polymer site for instance Xfinity home Your code looks like this where you load the polyfill you load Polymer You load your vulcanized assets and by the way vulcanization wasn't out when we first started I came later every time Polymer team like released a new tool. We're like, yes, it's Christmas around here But you then put in one Polymer component or one component on the page Which is your XH app and then inside of XH app is all these additional components and you have Authentication you have your API calls that are happening you have a login page You have your overview page and the problem with this is that performance matters We need to get something in front of the users as quickly as possible and for us with the Xfinity home site We actually have to make an API call which then Goes all the way into the user's home Make Zigbee calls for all their devices in their home and then returns the status back up that can take over two seconds We have to remember that the color purple also matters so you can cross that off your bingo card So the really the critical path for us was getting API calls happening as quickly as possible If you look at the developer tools when you have XH app loading The browser has to get the definition for that stamp it into the DOM then it's like oh look at all these other modules I got to get their definitions stamp them into the DOM do all this other work and then it's like Oh now I'll start making the API calls So we were making API calls almost a second into the site loading for the user and this was a big problem So as web developers and again, I've been developing for the web for 15 years now We have to get back to our roots And we need to remember that web components are just another tool in our toolbox And really like this doesn't do us justice anymore because we have so many tools We really need like a big red truck to carry around all our tools Another bingo card use the platform. This is the polymer motto, right? Like the platform hasn't changed the browser is still the same browser that we've been using for 15 years Yes, it's gotten better. It's gotten faster. It's been progressively enhanced, but it's still relatively the same And so we need to remember when we want something to happen sooner in the browser All we have to do is put that piece at the top And so what we did was we pulled out our authentication checking and our API calls and we stopped making them polymer components We just kept them as javascript pure javascript and we're actually checking whether the user was authenticated Before we load up the app And we start making the API calls as soon as they come to the site so we can get it because that's our critical path And then while the calls are being made we load the polyfills. We load the app and we get started so the user gets a much better experience and We've also checked out this app shell architecture It's always great because we build all these apps and then the polymer teams like here's the recommendation after we built this stuff And we're like cool app shell architecture. It's pretty awesome And for those who don't know this is about splitting out your assets and giving a small package to the browser Because it's a lot faster to process things that are small But it takes advantage of this notion of unresolved elements and what that means is when the browser sees a Web component anything with a hyphen in it. It goes great. You're a web component Wait a minute. I don't have your definition yet So i'm just going to keep track of you You're in limbo and as soon as I get your definition. I promise to come back and upgrade you And we can take advantage of this just like the app shell architecture is doing So here for instance is how we normally Create a definition for xh app And by using imd Another acronym import module definition. This is based on the amd specification allows you to define modules And this was written by the polymer team To do modular definition with html imports So now what we're doing is we're defining xh app as a module And we're able to push it down to the browser But actually not load the definition yet And by doing that we can then have additional javascript like this loader module Which can do checking of hey, is the user authenticated if they're not authenticated I'm not going to spend the 500 milliseconds to instantiate xh app I'm just going to show them the login page or send them to the login page Because that's much faster than having to do all this javascript processing So that's it for performance So we've been talking a lot about how to build these polymer components well and effectively Let's talk about building the team of engineers Are actually going to build these polymer components and apps for you So the people we've brought on to work on polymer projects of Comcast either externally or internally Probably only 20% had any experience of polymer before working on these applications And that really hasn't been an issue and I really feel that's due again to polymer's missioning Which is to use the platform So if you have engineers that have a solid understanding of html css and javascript That's all you really need Again, the documentation for polymer is great. You can go and look at The elements I've created to take a look at the documentation there the demo pages You can really get a quick understanding of how polymer works Chris and I also have run hands-on training sessions multiple times and basically do is give a bunch of exercises We'll then factor in we'll bring in some of the videos from the polymer summit So I'm excited to see that that library is now doubled in size And we'll also of course use polycast to bring in those videos as well And that gets the team a nice quick introduction to how to use polymer in production And from leading those training sessions and also reviewing developers code We've realized that one of the hardest things for developers to wrap their head around initially Are these core parts of web components? And that's encapsulation composition and separation of concerns Polymer was designed with these principles in mind And you should be building your components with these principles in mind as well And obviously I'd flagged when this is not being respected It's something like this. So you've seen this from a number of developers just getting started They may become from building large scale web applications And they're used to putting just a lot of code in a file So I start trying to build a component and they put a ton of code in that file Like this one here has over 2,000 lines of code. This is real code too. Yeah, Chris and I saw this Oh no, like what have we done? Polymer was supposed to make things smaller and easier to work with And we're still having developers write code that's looking like this So we knew we needed to refocus the mindsets of our developers a bit So in our training and our code reviews, we're basically driving home That a component should do one thing and one thing well If it starts to get too large then just break it up into smaller components And again focus on those demo pages because no one's going to want to maintain this massive demo page of all the different Permiantations of a component And once your team can internalize those they become a well-oiled machine and you can become a polymer champion for your organization So just to wrap it up We really love polymer polymer has been spreading like wildfire at Comcast Because it's really simple to use like It's much easier to learn than some of the other frameworks out there The ability to reuse components to taking the xfinity home arm disarm module and dropping on another site It like blows products mind when you can do that And it's also Much faster than anything else that's going to be out there once web components are native And running on the metal of the chrome browser or any browser It's so much faster than any framework can do So again, that's why we really love polymer I'm chris lorenzo. I'm john raviolo and we're from comcast. Thank you for your time having us. Thank you polymer team