Advanced

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 15m
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 15m
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
jQuery: Getting Started
Beginner
1h 40m
Mar 22, 2021
Building Websites with HTML, CSS, and JavaScript: Getting Started
Beginner
3h 50m
Jun 2, 2020
Building on HTML5: Optimizing for Data, Communication and Offline Apps
Advanced
1h 43m
May 7, 2019
More courses by Craig Shoemaker

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT