Developing Web Components

Jarrod Overson has been developing on the web for over 15 years in both startups and global companies and currently works at Shape Security. He founded Gossamer to help bootstrap companies into developing for the modern web and has provided free community training on everything from node to backbone. Jarrod is an active proponent and contributor to open source, creator of Plato, and a member of the Grunt, Marionette, and ES-Analysis teams.

Jason Strimpel is a Staff Software Engineer on the platform team at WalmartLabs who specializes in the UI layer. Jason has been building web applications for the past 12 years. Approximately 3 years ago Jason began specializing in the front-end, in particular JavaScript. Since then Jason has worked with several component libraries and frameworks. However, Jason found limitations to these libraries when presented with uniquely challenging UI requirements, so he began developing his own custom components and catalog of helpers. He is an extremely passionate developer with a very bad sense of humor who loves simplifying the complexities that arise when building rich UIs.

Chapter 1Introduction
What Are Web Components?
Why Web Components?
UI Core Concepts
Chapter 2Creating a Solid Foundation
The Importance of a DOM Abstraction Layer
API Design and Widget Life Cycle
The Inheritance Pattern
Dependencies
Optimization
A Web Component Is Not JavaScript Alone
Example Widget
Summary
Chapter 3Normal Flow and Positioning
Normal Flow
Positioning Elements
Calculating an Element’s Position
Positioning the Dialog Widget
Summary
Chapter 4Understanding and Managing z-index
What Exactly Is the z-index Property?
Rendering Layers, Stacking Order, and z-index
Stacking Contexts
Managing z-indexes
Converting to a jQuery Plugin
Adding z-index Management to the Dialog Widget
Summary
Building Our UI
Chapter 5Cloning Nodes
Using the cloneNode Method
Using jQuery.clone
Continuation of the Dialog Widget
Summary
Chapter 6Constructing an Overlay
Defining an API
Utilities
Updating Options
Destroying
Positioning
Adding the Overlay to the Dialog Widget
Summary
Chapter 7Making Elements Draggable
Mouse Events
Mouse Events Best Practices
Defining an API
Creating a Drag Handle
Making Things Move
Destroying a Draggable Instance
Making the Dialog Widget Draggable
Summary
Chapter 8Resizing Elements
Mouse Events and Best Practices (Recap)
Resizing an Element
Making a Resizable API
Defining Drag Handles
Binding Event Handlers
Destroying a Resizable Instance
Completed Resizing Library
Making the Dialog Widget Resizable
Summary
Chapter 9Completing the Dialog Widget
Styling the Widget
Concatenating the JavaScript
Summary
Building HTML5 Web Components
Chapter 10Utilizing Templates
Understanding the Importance of Templates
Creating and Using a Template
Converting the Dialog Component to a Template
Abstracting the Dialog Template Wrapper
Summary
Chapter 11Working with the Shadow DOM
What Is the Shadow DOM?
Shadow DOM Basics
Using a Template with the Shadow DOM
Shadow DOM Styling
Content Projection
Shadow Insertion Points
Events and the Shadow DOM
Updating the Dialog Template to Use the Shadow DOM
Summary
Chapter 12Creating Custom Elements
Introducing Custom Elements
Registering Custom Elements
Extending Elements
Defining Properties and Methods
Resolving Custom Elements
Hooking Into Custom Element Life Cycles
Styling Custom Elements
Utilizing Templates and the Shadow DOM with Custom Elements
Converting the Dialog Component to a Custom Element
Summary
Chapter 13Importing Code
Declaring an Import
Accessing an Import’s Content
Understanding Imports in Relation to the Main Document
Loading Custom Elements
Importing the Dialog
Summary
Testing, Building, and Deploying Components with Polymer
Chapter 14Introducing Polymer
Polymer Elements
Template Syntax
Attributes and Properties—Your Element’s API
Polymer’s JavaScript APIs
Summary
Chapter 15Porting Our Dialog to Polymer
Why Port Anything to Polymer at All?
The Direct Port
That Was Easy—A Little Too Easy!
jQuery in a Polymer World
Summary
Chapter 16Testing Web Components
PhantomJS 1
PhantomJS 2
Selenium WebDriver
Karma
Test Specs
Running Our Tests
Summary
Chapter 17Packaging and Publishing
Vulcanize
Gulp
Grunt
Publishing with Bower
Summary
Chapter 18Final Words
Where Do We Go from Here?
Good Luck!