Developing Web Components. UI from jQuery to Polymer - Helion

ebook

Autor: Jarrod Overson, Jason Strimpel
ISBN: 978-14-919-0569-2
stron: 252, Format: ebook
Data wydania: 2015-02-17
Księgarnia: Helion

Cena książki: 92,65 zł (poprzednio: 107,73 zł)
Oszczędzasz: 14% (-15,08 zł)

Osoby, które kupiły tę książkę, wybierały także »

Tagi: jQuery - Programowanie

Although web components are still on the bleeding edge—barely supported in modern browsers—the technology is also moving extremely fast. This practical guide gets you up to speed on the concepts underlying W3C’s emerging standard and shows you how to build custom, reusable HTML5 Web Components.

Regardless of your experience with libraries such as jQuery and Polymer, this book teaches JavaScript developers the DOM manipulations these libraries perform. You’ll learn how to build a basic widget with vanilla JavaScript and then convert it into a web component that’s semantic, declarative, encapsulated, consumable, and maintainable. With custom components, the Web can finally fulfill its potential as a natively extensible application platform. This book gets you in at the right time.

Understand core concepts (such as normal flow and positioning, and Z-index) for properly positioning, dragging, and resizing elements
Explore UI concepts and patterns typically abstracted away by Dojo, jQuery UI, Kendo UI, and other libraries
Dive into the W3C standard and convert your working widget example into a fully functioning web component
Learn how to encapsulate, package, and deploy your web components with Google’s Polymer framework

Osoby które kupowały "Developing Web Components. UI from jQuery to Polymer", wybierały także:

ASP.NET MVC. Kompletny przewodnik dla programistów interaktywnych aplikacji internetowych w Visual Studio 86,77 zł, (26,90 zł -69%)
jQuery, jQuery UI oraz jQuery Mobile. Receptury 57,74 zł, (17,90 zł -69%)
PHP i jQuery. Techniki zaawansowane. Wydanie II 65,31 zł, (20,90 zł -68%)
jQuery. Kurs video. Poziom drugi. Interaktywne banery i funkcjonalne menu 59,00 zł, (26,55 zł -55%)
Vue.js w akcji 58,98 zł, (29,49 zł -50%)

Spis treści

Developing Web Components. UI from jQuery to Polymer eBook -- spis treści

Preface
- Why We Wrote This Book
- What This Book Is
  - Part I, UI Core Concepts
  - Part II, Building Our UI
  - Part III, Building HTML5 Web Components
  - Part IV, Testing, Building, and Deploying Components with Polymer
- What This Book Isnt
- Conventions Used in This Book
- Using Code Examples
- Safari Books Online
- How to Contact Us
- Acknowledgments
  - Jason Strimpel
  - Jarrod Overson
1. Introduction
- What Are Web Components?
  - HTML Templates
  - HTML Imports
  - Custom Elements
  - The Shadow DOM
- Why Web Components?
I. UI Core Concepts
2. Creating 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
  - The Voltron Widget Base Class
  - Dialog Class
  - Dialog CSS and HTML
- Summary
3. Normal Flow and Positioning
- Normal Flow
- Positioning Elements
  - offsetParent
    - How the browser determines an elements offsetParent
  - Positioning
    - Relative positioning
    - Absolute positioning
    - Fixed positioning
- Calculating an Elements Position
  - Relative to the Viewport
  - Relative to the Document
- Positioning the Dialog Widget
- Summary
4. Understanding and Managing z-index
- What Exactly Is the z-index Property?
- Rendering Layers, Stacking Order, and z-index
  - Default Stacking Orders
  - Overriding the Default Stacking Order
- Stacking Contexts
  - How Is a Stacking Context Created?
  - Increasing Complexity
- Managing z-indexes
  - z-index Manager
    - API stub
    - Utilities
    - Determining if an element creates a stacking context
    - Finding an elements stacking context
    - Modifying an elements z-index
    - Example usages
    - Summary
- Converting to a jQuery Plugin
- Adding z-index Management to the Dialog Widget
- Summary
II. Building Our UI
5. Cloning Nodes
- Using the cloneNode Method
- Using jQuery.clone
- Continuation of the Dialog Widget
- Summary
6. Constructing an Overlay
- Defining an API
- Utilities
  - Detecting Scrollbar Width
  - Accounting for the Scrollbar When Calculating a Containing Elements Width
  - Getting an Elements Dimensions and Coordinates
  - Listening for Resize and Scrolling Events
- Updating Options
- Destroying
- Positioning
  - Positioning an Element Relative to the Viewport or Another Element
    - CSS overlay
    - JavaScript overlay
  - Positioning an Element Relative to Another Element
- Adding the Overlay to the Dialog Widget
- Summary
7. Making Elements Draggable
- Mouse Events
  - $.mousemove
  - $.mousedown
  - $.mouseup
- Mouse Events Best Practices
  - 1. Bind $.mousemove on $.mousedown
  - 2. Unbind $.mousemove on $.mouseup
  - 3. Bind $.mouseup to the <body>
  - 4. Namespace All Event Bindings
- Defining an API
- Creating a Drag Handle
- Making Things Move
  - $.mousedown Handler
  - $.mousemove Handler
  - $.mouseup Handler
- Destroying a Draggable Instance
- Making the Dialog Widget Draggable
- Summary
8. Resizing Elements
- Mouse Events and Best Practices (Recap)
  - Events
  - Best Practices
- Resizing an Element
- Making a Resizable API
- Defining Drag Handles
- Binding Event Handlers
  - $.mousedown Handler
  - $.mousemove Handler
  - $.mouseup Handler
- Destroying a Resizable Instance
- Completed Resizing Library
- Making the Dialog Widget Resizable
- Summary
9. Completing the Dialog Widget
- Styling the Widget
  - Adding CSS
- Concatenating the JavaScript
- Summary
III. Building HTML5 Web Components
10. Utilizing Templates
- Understanding the Importance of Templates
  - Deferring the Processing of Resources
  - Deferring the Rendering of Content
  - Hiding the Content from the DOM
- Creating and Using a Template
  - Detecting Browser Support
  - Placing a Template in Markup
  - Adding a Template to the DOM
- Converting the Dialog Component to a Template
  - Creating a Wrapper API for the Dialog Template
  - Instantiating a Dialog Component Instance
- Abstracting the Dialog Template Wrapper
- Summary
11. Working with the Shadow DOM
- What Is the Shadow DOM?
- Shadow DOM Basics
  - Shadow Host
  - Shadow Root
    - Creating a shadow root
- Using a Template with the Shadow DOM
- Shadow DOM Styling
  - Style Encapsulation
  - Styling the Host Element
  - Styling Shadow Root Elements from the Parent Page
- Content Projection
  - Projection via a Content Tag
  - Projection via Content Selectors
  - Getting Distributed Nodes and Insertion Points
- Shadow Insertion Points
- Events and the Shadow DOM
- Updating the Dialog Template to Use the Shadow DOM
  - Dialog Markup
  - Dialog API
  - Updating the Dialog show Method
  - Instantiating a Dialog Component Instance
- Summary
12. Creating Custom Elements
- Introducing Custom Elements
- Registering Custom Elements
- Extending Elements
  - Extending Custom Elements
  - Extending Native Elements
- Defining Properties and Methods
- Resolving Custom Elements
- Hooking Into Custom Element Life Cycles
  - createdCallback
  - attachedCallback
  - detachedCallback
  - attributeChangedCallback
- Styling Custom Elements
- Utilizing Templates and the Shadow DOM with Custom Elements
- Converting the Dialog Component to a Custom Element
  - Creating the Dialog Custom Element
  - Implementing the Dialog Custom Elements Callbacks
  - Implementing the Dialog Custom Element API
  - Showing the Dialog
- Summary
13. Importing Code
- Declaring an Import
- Accessing an Imports Content
  - Referencing Documents
  - Applying Styles
  - Accessing Templates
  - Executing JavaScript
- Understanding Imports in Relation to the Main Document
  - Parsing Imports
  - Cross-Domain Considerations
  - Subimports
- Loading Custom Elements
- Importing the Dialog
- Summary
IV. Testing, Building, and Deploying Components with Polymer
14. Introducing Polymer
- Polymer Elements
  - Adding Style
  - External Resources
  - Filtering Expressions
- Template Syntax
  - Data Binding
  - Block Repetition
  - Bound Scopes
  - Conditional Blocks
  - Multiple Template Directives at Once
- Attributes and PropertiesYour Elements API
  - Naked Attributes
  - Published Properties
  - Instance Methods
- Polymers JavaScript APIs
  - Life Cycle Methods
  - Events
  - Managing Delayed Work
- Summary
15. Porting Our Dialog to Polymer
- Why Port Anything to Polymer at All?
- The Direct Port
  - Managing Dependencies
  - Installing Dependencies with Bower
  - Getting Started
- That Was EasyA Little Too Easy!
- jQuery in a Polymer World
  - What Does jQuery Provide?
  - Removing jQuery
  - The Verdict on jQuery
- Summary
16. Testing Web Components
- PhantomJS 1
- PhantomJS 2
- Selenium WebDriver
- Karma
- Test Specs
- Running Our Tests
- Summary
17. Packaging and Publishing
- Vulcanize
- Gulp
- Grunt
  - Gruntfiles
  - Grunt Tasks
  - Registering Tasks
  - Grunt Configuration
- Publishing with Bower
  - Registering the Component
- Summary
18. Final Words
- Where Do We Go from Here?
  - Polymer
  - Mozilla X-Tag
  - document-register-element
  - WebComponents.org
  - CustomElements.io
- Good Luck!
Index