HTML5 Web Components: Moving from jQuery to Polymer.js

By Craig Shoemaker
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.
Play course overview
Course info
Rating
(12)
Level
Intermediate
Updated
Dec 19, 2017
Duration
1h 16m
Table of contents
Course Overview
Course Overview 2m
Introduction
Introduction 2m Journey from jQuery to Polymer.js 1m Anatomy of a Web Component 3m Environment Setup 3m Summary 0m
Building the Slider Navigation Feature
Introduction 0m HTML and Data 3m Styles 2m jQuery Module Structure 1m Implementing the Module: init 2m Implementing the Module: bindLayer 7m Implementing the Module: parentClick 2m Implementing the Module: addLayer 2m Implementing the Module: hideLayer 1m Remove Last Layer Demo 2m Implementing the Module: removeLastLayer 1m Implementing the Module: itemClick 2m Move to the Native Selection API 5m Summary 0m
Moving to Native Web Components
Introduction 0m Update the Host Page 2m Define the Template 2m Implement the Component: bootstrap 3m Implement the Component: init 2m Implement the Component: bindLayer 2m Implement the Component: hideLayer 1m Implement the Component: itemClick 1m Debugging Demo 3m Summary 0m
Moving to Polymer.js
Introduction 0m Update the Host Page 1m Update the Style Sheet 2m Define the Template 3m Overview of Component Class 1m Implement the Component: init 2m Implement the Component: parentClick 1m Implement the Component: addLayer 1m Implement the Component: removeLayer 1m Implement the Component: itemClick 1m Debugging Demo 3m Summary 1m
Description
Course info
Rating
(12)
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
Craig Shoemaker
About the author

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

More from the author
Building on HTML5: Optimizing for Data, Communication and Offline Apps
Advanced
1h 44m
May 7, 2019
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.

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT