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

Preface

Why We Wrote This Book

Web development has not stopped evolving since I stumbled into the field over 13 years ago. If anything, the rate at which it is evolving is increasing. If you take a look at the investment that Google has made in Polymer and web components, it is probably safe to bet that web components will play a large role in web development in the near future as browsers implement more support for them. There are still some issues that need to be addressed, such as search engine optimization (SEO) concerns, but I do not think web components are going away, and I don’t think this is bad. The introduction of web components (or a similar standard for extending, packaging, encapsulating, and importing discrete UI components) is long overdue in web development. Even if you do not put all your stock in web components—for example, lifting back the curtain and seeing how the Great Oz accomplishes his UI wizardry, making an element draggable—they can be very useful.

Glenn Vanderburg said, “Developers should always understand one layer of abstraction below their everyday work.” I agree with this statement, and I would argue that widget libraries, jQuery plugins, and even jQuery are the levels of abstraction at which most frontend engineers operate on a daily basis. The level just below that consists of the DOM manipulations these libraries perform, and the DOM and its native APIs. Understanding precisely what these libraries are doing will enable you to write more efficient ...