book

Developing Web Components

by Jarrod Overson, Jason Strimpel

February 2015

Intermediate to advanced

252 pages

5h 17m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Why We Wrote This BookWhat This Book IsPart I, UI Core ConceptsPart II, Building Our UIPart III, Building HTML5 Web ComponentsPart IV, Testing, Building, and Deploying Components with PolymerWhat This Book Isn’tConventions Used in This BookUsing Code ExamplesSafari® Books OnlineHow to Contact UsAcknowledgmentsJason StrimpelJarrod Overson
What Are Web Components?HTML TemplatesHTML ImportsCustom ElementsThe Shadow DOMWhy Web Components?
The Importance of a DOM Abstraction LayerAPI Design and Widget Life CycleThe Inheritance PatternDependenciesOptimizationA Web Component Is Not JavaScript AloneExample WidgetThe Voltron Widget Base ClassDialog ClassDialog CSS and HTMLSummary
Normal FlowPositioning ElementsoffsetParentPositioningCalculating an Element’s PositionRelative to the ViewportRelative to the DocumentPositioning the Dialog WidgetSummary
What Exactly Is the z-index Property?Rendering Layers, Stacking Order, and z-indexDefault Stacking OrdersOverriding the Default Stacking OrderStacking ContextsHow Is a Stacking Context Created?Increasing ComplexityManaging z-indexesz-index ManagerConverting to a jQuery PluginAdding z-index Management to the Dialog WidgetSummary
Using the cloneNode MethodUsing jQuery.cloneContinuation of the Dialog WidgetSummary
Defining an APIUtilitiesDetecting Scrollbar WidthAccounting for the Scrollbar When Calculating a Containing Element’s WidthGetting an Element’s Dimensions and CoordinatesListening for Resize and Scrolling EventsUpdating OptionsDestroyingPositioningPositioning an Element Relative to the Viewport or Another ElementPositioning an Element Relative to Another ElementAdding the Overlay to the Dialog WidgetSummary
Mouse Events$.mousemove$.mousedown$.mouseupMouse Events Best Practices1. Bind $.mousemove on $.mousedown2. Unbind $.mousemove on $.mouseup3. Bind $.mouseup to the <body>4. Namespace All Event BindingsDefining an APICreating a Drag HandleMaking Things Move$.mousedown Handler$.mousemove Handler$.mouseup HandlerDestroying a Draggable InstanceMaking the Dialog Widget DraggableSummary

Mouse Events and Best Practices (Recap)EventsBest PracticesResizing an ElementMaking a Resizable APIDefining Drag HandlesBinding Event Handlers$.mousedown Handler$.mousemove Handler$.mouseup HandlerDestroying a Resizable InstanceCompleted Resizing LibraryMaking the Dialog Widget ResizableSummary
Styling the WidgetAdding CSSConcatenating the JavaScriptSummary
Understanding the Importance of TemplatesDeferring the Processing of ResourcesDeferring the Rendering of ContentHiding the Content from the DOMCreating and Using a TemplateDetecting Browser SupportPlacing a Template in MarkupAdding a Template to the DOMConverting the Dialog Component to a TemplateCreating a Wrapper API for the Dialog TemplateInstantiating a Dialog Component InstanceAbstracting the Dialog Template WrapperSummary
What Is the Shadow DOM?Shadow DOM BasicsShadow HostShadow RootUsing a Template with the Shadow DOMShadow DOM StylingStyle EncapsulationStyling the Host ElementStyling Shadow Root Elements from the Parent PageContent ProjectionProjection via a Content TagProjection via Content SelectorsGetting Distributed Nodes and Insertion PointsShadow Insertion PointsEvents and the Shadow DOMUpdating the Dialog Template to Use the Shadow DOMDialog MarkupDialog APIUpdating the Dialog show MethodInstantiating a Dialog Component InstanceSummary
Introducing Custom ElementsRegistering Custom ElementsExtending ElementsExtending Custom ElementsExtending Native ElementsDefining Properties and MethodsResolving Custom ElementsHooking Into Custom Element Life CyclescreatedCallbackattachedCallbackdetachedCallbackattributeChangedCallbackStyling Custom ElementsUtilizing Templates and the Shadow DOM with Custom ElementsConverting the Dialog Component to a Custom ElementCreating the Dialog Custom ElementImplementing the Dialog Custom Element’s CallbacksImplementing the Dialog Custom Element APIShowing the DialogSummary
Declaring an ImportAccessing an Import’s ContentReferencing DocumentsApplying StylesAccessing TemplatesExecuting JavaScriptUnderstanding Imports in Relation to the Main DocumentParsing ImportsCross-Domain ConsiderationsSubimportsLoading Custom ElementsImporting the DialogSummary
Polymer ElementsAdding StyleExternal ResourcesFiltering ExpressionsTemplate SyntaxData BindingBlock RepetitionBound ScopesConditional BlocksMultiple Template Directives at OnceAttributes and Properties—Your Element’s APINaked AttributesPublished PropertiesInstance MethodsPolymer’s JavaScript APIsLife Cycle MethodsEventsManaging Delayed WorkSummary
Why Port Anything to Polymer at All?The Direct PortManaging DependenciesInstalling Dependencies with BowerGetting StartedThat Was Easy—A Little Too Easy!jQuery in a Polymer WorldWhat Does jQuery Provide?Removing jQueryThe Verdict on jQuerySummary
PhantomJS 1PhantomJS 2Selenium WebDriverKarmaTest SpecsRunning Our TestsSummary
VulcanizeGulpGruntGruntfilesGrunt TasksRegistering TasksGrunt ConfigurationPublishing with BowerRegistering the ComponentSummary
Where Do We Go from Here?PolymerMozilla X-Tagdocument-register-elementWebComponents.orgCustomElements.ioGood Luck!

Content preview from Developing Web Components

Chapter 16. Testing Web Components

Jarrod Overson

The biggest problem with any new technology is fitting it into an existing flow with minimal turbulence. The pieces of the flow that are subject to the most friction are:

Development (IDE assistance, documentation): Where do you go for questions? How will you be able to solve problems that come up?
Maintenance: How stable is the technology? Is it undergoing massive changes? Will going back to code written with this tech one year from now be simple or a nightmare?
Testing: How are unit tests written? How testable is code written with this new technology?
Building: Does this new technology affect the build process at all?
Deploying: Do your deployments change? What metrics need to be tracked in order to measure the impact of the new technology?

It’s important to run through at least these checkpoints in order to get a high-level overview of the problems you might face, although it might be tempting to charge forward once you’ve gotten past the first hurdle because that’s usually the primary focus of technology marketing.

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Start your free trial

Getting Started with Web Components

Prateek Jadhwani

Building Native Web Components: Front-End Development with Polymer and Vue.js

Carlos Rojas

Grid Layout in CSS

Eric A. Meyer

Pure JavaScript

Allen R. Wyke, Jason Gilliam, Charlton Ting

Publisher Resources

ISBN: 9781491905685Errata Page Supplemental Content