HTML5 Web Components: Moving from jQuery to Polymer.js
Course info
Course info
Description
After the first line of code becomes thousands, finding a way to maintain the complexity and functionality of a web application is essential to maintainability. In this course, HTML5 Web Components: Moving from jQuery to Polymer.js, you'll learn step-by-step how to modularize an existing jQuery application into modern Web Components. First, you'll discover how to remove jQuery. Next, you'll explore how to implement the feature as a native web component. Finally, you'll cover how to refactor the code to use Polymer.js. By the end of this course, you’ll be able to build native Web Components and Polymer.js components to best suit the needs of your application.
About the author
Craig Shoemaker is a developer, instructor, writer, podcaster, and technical evangelist of all things awesome.
More from the author
Section Introduction Transcripts
Course Overview
Well hello, this Craig Shoemaker, and welcome to HTML5 Web Components: Moving from jQuery to Polymer. js. We know the web has changed in so many ways in recent years, but not all of our existing projects have followed suit. In this course you learn to upgrade an existing jQuery site to introduce web components. And fear not, the approach used here doesn't assume that you'll do the whole site at once. In fact, I'll show you how you can take just a single feature and make it a full-fledged web component. Right at the beginning of the course you'll learn how to think of your website in terms of components, and you'll get to experience the transformation of everyday jQuery code in to a Polymer. js component. As with any transformation the change is a journey, and during these lessons you'll follow the process of removing jQuery, implementing the feature as a native web component, and finally, refactoring the code to use Polymer. js. By the end of course you'll have encapsulated all the logic for the navigation feature into a web component. Plus, you'll learn to use the Shadow DOM, take advantage of style isolation, build custom templates, and harness the power of Polymer's templating engine. Now this is a hands-on and very practical course where you can take the principles presented here and use them immediately in your projects. I truly look forward to our time together, and I'll see you inside HTML5 Web Components: Moving from jQuery to Polymer. js.
Building the Slider Navigation Feature
In this module we'll build the basis of the slider navigation upon which the rest of the modules in this course is based. In order to show the journey from jQuery to Polymer we first need to create the feature in jQuery, so let's get started.
Moving to Native Web Components
Now that we have the foundation set of the navigation feature implemented and we've moved off jQuery into using the Native Selection API, we can now move to building native Web Components. So in this module you'll learn about the Web Components API, how to import HTML, create custom elements, set up a template, and manage the Shadow DOM. Alright, let's go ahead and get started.
Moving to Polymer.js
Well, we're gaining some momentum, so now in this modules you'll see how easy it is to take an existing Web Component and refactor it to a full-fledged Polymer component. By using Polymer the boilerplate code fades away and you'll also gain the support of one-way and two-way data binding, computed properties, conditional and repeat templates, gesture events, and a much more structured, object-oriented approach. Okay, let's dive on it.