HTML5 Web Components: Moving from jQuery to Polymer.js

As your applications grow the need to break parts of the page up, maintainable components become more and more important. This course demonstrates how to take existing jQuery code and refactor it into stand-alone Web Components using Polymer.js.
Course info
Level
Intermediate
Updated
Dec 19, 2017
Duration
1h 16m
Table of contents
Description
Course info
Level
Intermediate
Updated
Dec 19, 2017
Duration
1h 16m
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
About the author

Craig Shoemaker is a developer, instructor, writer, podcaster, and technical evangelist of all things awesome.

More from the author
HTML5 Fundamentals
Beginner
3h 48m
Mar 3, 2017
More courses by Craig Shoemaker
Section Introduction Transcripts
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.