Cover image for Web Components in Action

Web Components in Action

Author Benjamin Farrell
Release Date: 2019/09/01
ISBN: 9781617295775
Topic:
0%
42
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

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.

Table of Contents

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