 Good afternoon, everybody. My name is Dan Friedman, and I'm here to talk about Polymer's gesture system in 10 minutes or less. So let me start with a question. Why are gestures important? Well, gestures are important because you want your app to respond fluidly to user input. We use gestures to make UI hints that show users what they're interacting with and provide intuitive motions that let users feel empowered and delighted. If you get this right, your app looks great, your users love it, and everybody's happy. And because you're making your app using elements, you can be sure to be used on phones, tablets, desktops, TVs, and maybe even a watch. And that means you need to be very familiar with all the tools the browser has for dealing with user input on all of these form factors. Unfortunately, the browser only comes with some basic tools, mouse events and touch events. They behave very differently, and some features are not available on all the platforms. Now, you're not worried because you're all great engineers, and you know exactly how to make your elements function well on all these form factors by yourself. But when you write that input handling code in your elements one at a time, you end up writing a lot of it. And most of that code won't be reusable because it has all the little hacks and shortcuts you needed for that specific element and that specific interaction. And if you're like me, you're working on a bunch of stuff at the same time. And two weeks later, you forget what half that code does anymore. And that's really bad when it comes to the future maintenance of your apps and elements. Well, I don't want you to worry about that anymore. Since input handling is such a global concern, the Polymer team did a lot of research and crafted a simple and effective gesture system. Now, it doesn't do everything. And I'm sure there's bugs and quirks we haven't fixed yet. But if you use these gestures we've built in your elements, those elements can be mouse and touch friendly without all the hard work. Thank you. Well, since I've been hyping up those gestures so much, I should probably tell you what they are. The gestures Polymer provides are down, up, tap, and track. With these four gestures, we've built all of your amazing material design elements and if you use them, too, your elements can be just as awesome. Well, first is the down and up gestures. I want to talk about these together because they're really two halves of the same whole. These are the simplest gestures we have, but they're a pretty great convenience for a number of use cases. So let's say you want to add these awesome material design ripples to your photo album viewer and show your user which photo they're interacting with. On your own, you'd have to add at least four listeners, touch start, touch end, mouse up, mouse down, like this code does. And I want to make a note here, this is a real sample from how we had to do it for Polymer's gestures. You'd also have to deal with the fact that touch events target the first element you touched while mouse events change target as you move. This means you're listening to the whole document for mouse up. But with Polymer, you just need two listeners. Let's take a look at what those do. You can listen with the down event to start the ripple and we'll use the convenient x and y properties on the event's detail object to tell the ripple element the screen position of where it should start, which is right into the finger. And then we use the up event to tell the ripple element to stop. And that's it. Now you have a nice way to tell the user which photo they've touched. Now on to tap. Tap is really a motivating factor for creating the gesture system because it allows us to have one event for selecting and pressing that works well on desktop, mobile, and all the other form factors. A good example of this is in dropdown menus. Making the right event listener with raw and mouse touch events can be a real headache. In fact, it could be this much of a headache. Again, this is all real code from gestures. Due to the rather infamous click delay on mobile platforms, we had to do quite a bit of work to make a tap that worked well on all of our form factors. And because we did all that hard work for you, here's how simple the dropdown menu can be with the tap event. It behaves just the same with mouse and touch while the gesture layer takes care of all the little platform differences. Taking a closer look, you can listen on each individual menu item with the on tap attribute. Because we don't want to know which deep down part of the menu item was pressed, you can use Polymer.dom to tell us the local target, which would be one of the menu items in our scope. We set this element selected item to be that local menu item. And then we check if the menu item is itself a submenu and open it. Pretty simple. Probably you'll use the tap gesture most in your elements because most user interactions revolve around tapping. Well, the last gesture in Polymer's toolbox is track. Track is meant to be used for any action that requires dragging. Here's an element that can make use of track, a slider. We want to be able to drag the slider handle to the desired value because it's a very intuitive motion. When we release the handle, the slider should have the value we selected. With native events, you have a lot of choices in how to accomplish this. Mouse has HTML5 drag and drop events. Some platforms have gesture events with touch. But those systems don't work everywhere, and they can get really complicated. Here's the way we did in Polymer's gestures to make the track event. As you can see, this did get complicated to do the right way. And there's a lot of code dealing with just how different mouse events and touch events are. And I would personally feel really bad if anybody had to write that code again. It took a lot of work to get this right, and there are so many heuristics that need obsessive tweaking to make it feel correct when you drag. Trust me, you don't want to be up all night before a big developer conference playing with all the demos to make sure the sliders work. That's why I'm very proud to say that this is how easy it is to make a track gesture with the slider. So this part here needs a little bit of explanation. The setScrollDirection function will set up some scroll locking behavior for us, and this means that by setting the scroll direction to Y, we can allow scrolling in the vertical axis while controlling the slider value in the horizontal axis. The scroll direction behavior is locked in on the first move to prevent both the scrolling and slider dragging from happening at the same time. Now let's take a look at the track handler itself. In the first line here, we check that the lifecycle of the track gesture, which can be start, track, or end. We want to know if we'll get more track events after this one, so we check that the state is not end. And then we use that to open the value pop up while the user is still dragging. We also set a dragging class on our element for any styling needs the user of our element may want. Next, we use the DX property to tell us how far the finger has moved horizontally from the initial position. We bound this value to the size of the slider with clamp and use a 3D transform to move the slider handle to the position under the finger. When you pull all that together, you have a really easy way to drag the slider with mouse and touch. Okay, so that was a really brief look at all of Polymer's gestures and probably not nearly enough information for everybody to be satisfied. But there's one thing I'd like you to take away from this talk. It's that Polymer can do all the heavy lifting for you and your elements only need down, up, tap, and track. All right, that's it for me. If you want to learn more about gestures, you can start by reading the docs on our Polymer project site. If you find any bugs or have any more questions, feel free to file an issue on the Polymer repo and we'll take a look. Finally, feel free to ask me questions in the Slack channel, reference me on GitHub issues or bug me on Twitter. All right, thanks everybody and have a wonderful time at the Polymer Summit.