Developing Web Components - Jarrod Overson.pdf

(2710 KB) Pobierz
Developing
Web
Components
UI FROM JQUERY TO POLYMER
Jarrod Overson &
Jason Strimpel
Developing Web Components
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.
■
this
“
WithJasonbook, Jarrod
and
make web
components accessible
to a large number of
developers. The sections
on custom elements
and shadow DOM
will help solidify your
understanding of new
web platform features
for composition and
encapsulation, helping
you build more robust
components and apps.
engineer focusing on Chrome
and Polymer at Google
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
■
—Addy Osmani
”
■
■
“
I'm really excited that put
Jarrod and Jason have
together this book to help
guide new developers and
get them started down the
path of componentizing
the Web!
Jarrod Overson
has been developing on the Web for over 15 years for startups
and global companies alike. Currently at Shape Security, Jarrod is an active pro-
ponent and contributor to open source and JavaScript language tooling; he’s cre-
ated Plato and many other tools and libraries.
Jason Strimpel
is a software engineer with over 15 years experience developing
web applications. He’s currently employed at WalmartLabs where he writes soft-
ware to support UI application development. Jason is also an active member of
the open source community managing projects such as LazoJS.
”
Developer Advocate at Google
—Rob Dodson
WEB PROGR AMMING
Twitter: @oreillymedia
facebook.com/oreilly
CAN $34.99
US $29.99
ISBN: 978-1-491-94902-3
Developing Web Components
Jarrod Overson and Jason Strimpel
Developing Web Components
by Jarrod Overson and Jason Strimpel
Copyright © 2015 Jarrod Overson and Jason Strimpel. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are
also available for most titles (http://safaribooksonline.com). For more information, contact our corporate/
institutional sales department: 800-998-9938 or corporate@oreilly.com.
Editors:
Simon St.Laurent and Brian Anderson
Production Editor:
Colleen Lobner
Copyeditor:
Rachel Head
Proofreader:
Charles Roumeliotis
February 2015:
First Edition
Indexer:
Wendy Catalano
Interior Designer:
David Futato
Cover Designer:
Ellie Volckhausen
Illustrator:
Rebecca Demarest
Revision History for the First Edition
2015-02-06:
First Release
See
http://oreilly.com/catalog/errata.csp?isbn=9781491949023
for release details.
The O’Reilly logo is a registered trademark of O’Reilly Media, Inc.
Developing Web Components,
the cover
image, and related trade dress are trademarks of O’Reilly Media, Inc.
While the publisher and the authors have used good faith efforts to ensure that the information and
instructions contained in this work are accurate, the publisher and the authors disclaim all responsibility
for errors or omissions, including without limitation responsibility for damages resulting from the use of
or reliance on this work. Use of the information and instructions contained in this work is at your own
risk. If any code samples or other technology this work contains or describes is subject to open source
licenses or the intellectual property rights of others, it is your responsibility to ensure that your use
thereof complies with such licenses and/or rights.
978-1-491-94902-3
[LSI]
Table of Contents
Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
1. Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
What Are Web Components?
HTML Templates
HTML Imports
Custom Elements
The Shadow DOM
Why Web Components?
2
3
3
4
4
4
Part I. UI Core Concepts
2. Creating a Solid Foundation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
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
Normal Flow
11
12
14
15
16
17
18
18
20
21
22
3. Normal Flow and Positioning. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
23
iii

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin