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.
What you'll learn
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.
Table of contents
- 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
- 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
About the author
Craig Shoemaker is a Senior Content Developer for Microsoft on the Azure Container Apps and Azure Static Web Apps teams. On some days he's building internal tools to keep Microsoft employees productive, and others days creating guidance used by hundreds of thousands of developers. Additionally, Craig is a best selling Pluralsight author and co-host of the Web Rush podcast. You can reach Craig on Twitter at @craigshoemaker or join the conversation at Web Rush https://webrush.io.