Web Components in Action

Name: Web Components in Action
Brand: Manning
Price: 36.58 EUR
Availability: OnlineOnly

Benjamin Farrell(Autor*in)

Manning (Verlag)

1. Auflage

Erschienen am 15. August 2019

432 Seiten

E-Book

ePUB mit Adobe-DRM

Systemvoraussetzungen

978-1-63835-070-5 (ISBN)

36,58 €inkl. 7% MwSt.

Systemvoraussetzungen

für ePUB mit Adobe-DRM

E-Book Einzellizenz

Als Download verfügbar

Beschreibung

Summary

Web Components are a standardized way to build reusable custom elements for web pages and applications using HTML, CSS, and JavaScript. A Web Component is well-encapsulated, keeping its internal structure separate from other page elements so they don't collide with the rest of your code. In Web Components in Action you'll learn to design, build, and deploy reusable Web Components from scratch.

Foreword by Gray Norton.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

About the Technology

The right UI can set your sites and web applications apart from the ordinary. Using the Web Components API, you can build Custom Elements and then add them to your pages with just a simple HTML tag. This standards-based design approach gives you complete control over the style and behavior of your components and makes them radically easier to build, share, and reuse between projects.

About the Book

Web Components in Action teaches you to build and use Web Components from the ground up. You'll start with simple components and component-based applications, using JavaScript, HTML, and CSS. Then, you'll customize them and apply best design practices to maximize reusability. Through hands-on projects, you'll learn to build production-ready Web Components for any project, including color pickers, advanced applications using 3D models, mixed reality, and machine learning.

What's inside

Creating reusable Custom Elements without a framework
Using the Shadow DOM for ultimate component encapsulation
Leveraging newer JS features to organize and reuse code
Fallback strategies for using Web Components on older browsers

About the Reader

Written for web developers experienced with HTML, CSS, and JavaScript.

About the Author

Ben Farrell is a Senior Experience Developer at Adobe working on the Adobe Design Prototyping Team.

Table of Contents

PART 1 - FIRST STEPS

The framework without a framework
Your first Web Component
Making your component reuseable
The component lifecycle
Instrumenting a better web app through modules

PART 2 - WAYS TO IMPROVE YOUR COMPONENT WORKFLOW

Markup Managed
Templating your content with HTML
The Shadow DOM
Shadow CSS
Shadow CSS rough edges

PART 3 - PUTTING YOUR COMPONENTS TOGETHER

A real-world UI component
Building and supporting older browsers
Component testing
Events and application data flow
Hiding your complexities

Weitere Details

Weitere Ausgaben

Person

Inhalt

Intro
Copyright
Brief Table of Contents
Table of Contents
Foreword
Preface
Acknowledgments
About this book
About the cover illustration
Part 1. First steps
Chapter 1. The framework without a framework
1.1. What are Web Components?
1.2. The future of Web Components
1.3. Beyond the single component
1.4. Your project, your choice
Summary
Chapter 2. Your first Web Component
2.1. Intro to HTMLElement
2.2. Rules for naming your element
2.3. Defining your custom element (and handling collisions)
2.4. Extending HTMLElement to create custom component logic
2.5. Using your custom element in practice
2.6. Making a (useful) first component
2.7. Notes on browser support
Summary
Chapter 3. Making your component reusable
3.1. A real-world component
3.2. Making our component configurable
3.3. Using attributes for configuration
3.4. Listening for attribute changes
3.5. Making more things even more customizable
3.6. Updating the slider component
Summary
Chapter 4. The component lifecycle
4.1. The Web Components API
4.2. The connectedCallback handler
4.3. The remaining Web Component lifecycle methods
4.4. Comparing to React's lifecycle
4.5. Comparing to a game engine lifecycle
4.6. Component lifecycle v0
Summary
Chapter 5. Instrumenting a better web app through modules
5.1. Using the &script& tag to load your Web Components
5.2. Using modules to solve dependency problems
5.3. Adding interactivity to our component
5.4. Wrapping third-party libraries as modules
Summary
Part 2. Ways to improve your component workflow
Chapter 6. Markup managed
6.1. String theory
6.2. Using template literals
6.3. Importing templates
6.4. Template logic
6.5. Element caching
6.6. Smart templating
6.7. Updating the slider component
Summary
Chapter 7. Templating your content with HTML
7.1. R.I.P. HTML Imports
7.2. The &template& tag
7.3. Choose your own template adventure
7.4. Dynamically loading templates
7.5. Entering the Shadow DOM with slots
Summary
Chapter 8. The Shadow DOM
8.1. Encapsulation
8.2. Enter the Shadow DOM
8.3. The Shadow DOM today
Summary
Chapter 9. Shadow CSS
9.1. Style creep
9.2. Style creep solved with the Shadow DOM
9.3. Shadow DOM workout plan
9.4. Adaptable components
9.5. Updating the slider component
Summary
Chapter 10. Shadow CSS rough edges
10.1. Contextual CSS
10.2. Component themes
10.3. Using the Shadow DOM in practice (today)
Summary
Part 3. Putting your components together
Chapter 11. A real-world UI component
11.1. Crafting a color picker
11.2. Coordinate picker component
11.3. The color picker
11.4. Adding a common design language
Summary
Chapter 12. Building and supporting older browsers
12.1. Backward compatibility
12.2. Building for the least common denominator
12.3. Build processes
12.4. Building components
12.5. Transpiling for IE
Summary
Chapter 13. Component testing
13.1. Unit testing and TDD
13.2. Web Component tester
13.3. Comparing to a standard test setup with Karma
Summary
Chapter 14. Events and application data flow
14.1. Framework offerings
14.2. Events
14.3. Passing events through Web Components
14.4. Separate your data
14.5. Exercise playback view
14.6. Passing events with an event bus
Summary
Chapter 15. Hiding your complexities
15.1. Looking to the Web Component future
15.2. 3D and mixed reality
15.3. Video effects
15.4. Hand tracking and machine learning
Summary
Appendix. ES2015 for Web Components
A.1. What is ES2015?
A.2. Rethinking variables with ES2015
A.3. Classes
A.4. Modules
A.5. Template literals
A.6. The fat arrow
Index
List of Figures
List of Tables
List of Listings

Systemvoraussetzungen

Als PDF speichern Als Link merken