HTML5 Web Components: Moving from jQuery to Polymer.js

HTML5 Web Components: Moving from jQuery to Polymer.js

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 1h 16m | 212 MB

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.

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

01 – Course Overview
02 – Introduction
03 – Journey from jQuery to Polymer.js
04 – Anatomy of a Web Component
05 – Environment Setup
06 – Summary
07 – Introduction
08 – HTML and Data
09 – Styles
10 – jQuery Module Structure
11 – Implementing the Module – init
12 – Implementing the Module – bindLayer
13 – Implementing the Module – parentClick
14 – Implementing the Module – addLayer
15 – Implementing the Module – hideLayer
16 – Remove Last Layer Demo
17 – Implementing the Module – removeLastLayer
18 – Implementing the Module – itemClick
19 – Move to the Native Selection API
20 – Summary
21 – Introduction
22 – Update the Host Page
23 – Define the Template
24 – Implement the Component – bootstrap
25 – Implement the Component – init
26 – Implement the Component – bindLayer
27 – Implement the Component – hideLayer
28 – Implement the Component – itemClick
29 – Debugging Demo
30 – Summary
31 – Introduction
32 – Update the Host Page
33 – Update the Style Sheet
34 – Define the Template
35 – Overview of Component Class
36 – Implement the Component – init
37 – Implement the Component – parentClick
38 – Implement the Component – addLayer
39 – Implement the Component – removeLayer
40 – Implement the Component – itemClick
41 – Debugging Demo
42 – Summary