Polymer in Practice @ Comcast (Polymer Summit 2016)

Key Takeaways

[Music] good morning London hello okay I I I told the people in the front to like good morning London I'm uh Chris Lorenzo I'm John ravo 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 going to go eat or what I'm going to go see I usually leave that up to my wife but unfortunately due to some poor planning on our part she's currently 8 and 1/2 months pregnant and and we're here yeah we're here apparently it's really hard to travel when you're pretty pregnant um so she's at home watching right now hi love and we set this goal because my wife is a foodie we watched Master Chef together with Gordon Ramsey I'm sure some people might have heard of Gordon Ramsey he's apparently from the UK and um 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 um 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 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 um so we decided to put that on there and 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 uh you can get a beef wellington there or Bloody Mary they're famous for both of those so yes let's talk a little about uh Comcast that's company we worked for back in the US we 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 cooler job than I I think um 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 of Comcast to give you an overview of some of that stuff this here is the my exfinity 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 with3 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 their thermostat um we also have the X1 platform and this is Comcast 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 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 um 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 watch 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 got to 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 says it he says web 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 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 it's future oriented right web component spec is going to be built into browsers So eventually all the polyfills go away and we get great speed from that 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 [Applause] writers that's going to be our best Applause the day that's great um and developers always like doing something new but some of the cons at the time was like this wasn't even beta we were looking at Point three and it wasn't even Alpha apparently Tor was like oh this was experimental and I'm like I didn't get the memo for that um and at the time polymer Five and Below used 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 SL 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 um and there there was limited browser support it was IE 10 and above but for xinity home we had to use websockets 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 switched to angular react but as we were developing and we were like discovering and 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 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 he's like hey can we put that light on the overview page and we're like yeah sure it's just a tag like it's no problem um but we started the site with polymer 3 we eventually released with the polymer 56 and as we were releasing polymer is like okay we got a08 version and we're checking out the 08 version and then they're like okay here's the 1.0 and now you got to upgrade and we're like oh great we'll upgrade and I'm telling about Phil like oh this should only take a couple weeks right it's no problem he's like no this is going to 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 uh 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 um 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 um but I promise you can get through it without any screaming or crying so it's this potential to reuse components that got people really excited about polymer Comcast because before polymer was even a term in the vocabulary Comcast we're 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 where basically a Syle a single component could appear different based on the context so here's an example here of the Xfinity homes arm disarm widget um in the usual context on the right hand side and and on the left you can see the way it could appear or behave in a different context so we're no longer designing and developing websites but 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 extend home team started talking about the potential of 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 in 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 and he says so John the Xfinity home team they've been building with polymer a lot they 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 xinity home arm to arm widget and put it on the my exfinity website for a demo in two weeks whoa whoa whoa whoa and I'm like H all right that sounds cool you know I've never used before but I'm excited for the opportunity and so I go ahead and I look at it I'm like okay look at the documentation documentations went pretty well I go and look at the xinity home codebase I'm like okay there is a bunch of components here I figure out which one is the arm disarm widget I'm like all right How am I'm actually going to take this component and put it on the my Xfinity website not 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 this on that's how we got the company to use it and then in talking to them it became obvious I mean they as Chris said they started building with 0.3 they upgraded to 0.5 they upgraded to 1.0 so they were learning polymer as the polymer team was learning Palmer and they didn't have time to focus on making a sharable component they were learning on you know how do I make a ship this app ship this website um but that didn't change my demo date I still had two weeks so Chris and I we worked together looked at the mikity website like okay where we going 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 mity website and this is a defining moment for Palmar Comcast because this proved that yes we can actually create sharable reusable components and use this across the board of the company and this opened up the door for more projects to actually be using polymer so right now chrst I've 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 sharable reusable components this was a a key aspect of what we're going to build so we set out to build these components that were actually going 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 sharable 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 an 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 is a key piece of what we had to do for the Xfinity home armed disarm widget because that was built for Xfinity home so when I dropped it on the my exfinity website it was expecting a relative path to the API which didn't exist I then hardcoded it to go to the extend home website and the browser just said uhuh not going to 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 your UI component 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 it had some issues Chris will touch on those in a little bit we've also tried Redux that in early indication 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 test driven development or tdd we don't enforce that some developers choose to but what we do enforce is code coverage so we use the istable plugin 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 100% test coverage and for our shared components in each one of those repos we actually require 100% test coverage across the board and this if you don't have 100% test coverage and you try to submit a pull request it'll actually fail the CL I or failed the CI for condu integration so we enforce this and this helps make developers feel more confident about using these share components because they know 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 in uses polymer and that is demod 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 exfinity sorry the xinity home arm disarm Widget the two different ways that it could appear and the code required to do it and our teams have agreed this definitely has helped focus them better on making sharable 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 polymer and since we're using Shady d 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 cuz we're just poly filling shadow 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 sharable 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 footer 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 a 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 would put on the page which would then load two iframes an if frame for the header an if frame for the footer and everybody's already like yes it was an if frame um it was pretty pretty disgusting then we started using Ruby ombr a little bit and we started doing it server side so you can make a server side call and get it included in the page and serve it before before the user you know needed it um 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 imported into our project and now we have an XC header and an XC footer tag that we can use just like normal Dom elements we got rid of the if frame because you know doing the if frame it's really hard to do a responsive site and try to like change the size of an eye frame 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 it information we can change its styling we can change its zindex a lot easier if we have popups 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 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 that came later every time polymer team like released a new tool we're like yes it's Christmas around here um but you then put in one polymer component or one 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 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 AP API call which then goes all the way into the user's home makes zigg 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 um 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 definition 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 users was authenticated before we load up the app and we start making the API calls as soon as they come the 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 team's like here's the recommendation after we built this stuff and we're like cool appell 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 CU 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 architecture is doing so here for instance is how we normally create a definition for xhf and by using IMD you 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 um 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 at Comcast either externally or internally probably only 20% had any experience with 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 Mission which is to 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 prer is great you can go and look at the elements I've created 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 basic what we 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 an obvious red flag to when this is not being respected is something like this so we've seen this from a number of developers just getting started they maybe come from building large scale web applications and they're used to putting just a lot of code in a file so they 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 we're just like 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 need 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 perations 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 a 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 too taking the Xfinity home arm disarm module and dropping on another site it like blows product 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 rello and we're from Comcast thank you for your time than for having us thank you Palmer team [Music]