O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning Web Component Development

Book Description

Discover the potential of web components using PolymerJS, Mozilla Brick, Bosonic, and ReactJS

In Detail

Web components are an exciting new set of web standards used to provide reusable and powerful widgets by encapsulating and extending HTML and CSS. Web components are rapidly coming of age and are ready to make their debut in your browser.

Starting with an introduction to all the core concepts of web component specifications, you will be taken through building your own custom clock component. You will then get to grips with Shadow DOM, HTML Import, and templating as you create a component using pure JavaScript. Following this, you'll explore the core tools and libraries for web component development, including Polymer, Bosonic, Mozilla Brick, and ReactJS, and learn how to put them to work for practical development. This book will provide you with a detailed understanding of architecture, configuration, and selecting the right tool for you and your needs.

What You Will Learn

  • Get hands-on experience with native JavaScript for web component creation
  • Discover the core of Polymer and use it to craft your web components
  • Use Mozilla Brick to customize and create web components
  • Debug web components with the power of ReactJS
  • Take a reactive approach to web component creation
  • Master the Bosonic framework for practical web component design

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Learning Web Component Development
    1. Table of Contents
    2. Learning Web Component Development
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Introducing Web Components
      1. What are web components?
      2. Benefits and challenges of web components
      3. The web component architecture
      4. Template element
        1. Template element detail
        2. Template feature detection
        3. Inert template
        4. Activating a template
          1. Cloning a node
          2. Importing a node
      5. HTML Import
        1. HTML Import feature detection
        2. Accessing the HTML Import document
        3. HTML Import events
      6. Shadow DOM
        1. Shadow DOM feature detection
        2. Shadow tree
      7. Custom element
        1. Custom element feature detection
        2. Developing a custom element
          1. Creating a new object
          2. Defining object properties
          3. Defining lifecycle methods
          4. Registering a new element
          5. Extending an element
        3. Example of a custom element
      8. Node distribution
        1. A content insertion point
        2. A shadow insertion point
      9. Styling web components
      10. Building a digital clock component
        1. Clock template
        2. Clock element registration script
      11. Using the clock component
      12. X-Tag
        1. X-Tag element lifecycle
        2. X-Tag custom element development
        3. Polymer
        4. Mozilla Brick
        5. ReactJS
        6. Bosonic
      13. Summary
    9. 2. Introducing Polymer
      1. What is Polymer?
      2. Installing and configuring Polymer
        1. Downloading ZIP file
        2. Using GIT clone
        3. Using Bower
      3. Architecture of PolymerJS
        1. Web components with polyfill
        2. The Polymer library
        3. Elements
          1. Core elements
            1. The core-input element
            2. The core-label element
            3. The core-tooltip element
          2. Paper elements
            1. Material design
            2. The paper-checkbox element
            3. The paper-slider element
            4. The paper-button element
      4. Polymer designer tool
        1. Developing with the designer tool
          1. Getting a GitHub token
            1. Developing an e-mail subscription form
      5. Yeoman Polymer generator
        1. The polymer-generator commands
          1. The Polymer application generator
          2. The Polymer element generator
          3. The Polymer seed generator
          4. The Polymer GitHub page generator
      6. Summary
    10. 3. Developing Web Components Using Polymer
      1. PolymerJS ready event
      2. Polymer expressions
        1. Polymer templating with auto-binding
          1. Polymer template attributes
        2. Filtering expression
        3. Built-in filtering expression
          1. The TokenList filter
          2. The styleObject filter
        4. Custom filtering expression
        5. Global filtering expression
      3. Developing Polymer custom elements
        1. Defining a custom element
        2. Defining element attributes
        3. Defining default attributes
        4. Defining public properties and methods
        5. Publishing properties
        6. Defining a lifecycle method
        7. Registering a custom element
      4. Developing a sample custom element
      5. Extending a custom element
      6. Polymer methods
        1. The Polymer mixin method
        2. The Polymer import method
        3. The Polymer waitingFor method
        4. The Polymer forceReady method
      7. Asynchronous task execution
      8. Developing a digital clock
      9. Working with Yeoman
        1. Yeoman element generator
        2. Yeoman seed generator
        3. Yeoman GitHub page generator
      10. Preparing for production using vulcanize
        1. Vulcanize installation
        2. Running vulcanize process
      11. Summary
    11. 4. Exploring Bosonic Tools for Web Component Development
      1. What is Bosonic?
      2. Browser support
      3. Configuring Bosonic
      4. Bosonic packages
      5. Built-in elements
        1. The b-sortable element
        2. The b-toggle-button element
      6. Developing custom component
        1. Step 1 – creating the red-message element directory
        2. Step 2 – changing the current directory to red-message
        3. Step 3 – generating the skeleton for <red-message>
        4. Step 4 – verifying the directory structure
        5. Step 5 – defining code for the <red-message> element
        6. Step 6 – modifying the index.html demo file
        7. Step 7 – generating distribution files using Grunt
        8. Step 8 – running the index.html file
      7. Bosonic lifecycle
        1. Example of lifecycle
      8. Digital clock development
      9. Summary
    12. 5. Developing Web Components Using Mozilla Brick
      1. What is the Brick library?
      2. Mozilla Brick 1.0
      3. Mozilla Brick 2.0
      4. Installing Mozilla Brick
      5. Configuring Mozilla Brick
      6. Built-in components
        1. The brick-calendar element
        2. The brick-flipbox element
        3. The brick-deck element
        4. The brick-tabbar element
        5. The brick-action element
        6. The brick-menu element
      7. The X-Tag library
      8. Developing a digital clock using X-Tag
      9. Summary
    13. 6. Building Web Components with ReactJS
      1. The reactive approach
      2. The flux architecture
        1. Flux key features
      3. Installing ReactJS
      4. Configuring ReactJS
      5. Using ReactJS
      6. What is JSX
        1. Custom components with JSX
        2. ReactJS inline style
        3. ReactJS event handling
        4. Useful non-DOM attributes
      7. ReactJS component lifecycle
        1. ReactJS initialization phase
        2. ReactJS lifetime phase
        3. ReactJS teardown phase
        4. ReactJS lifecycle example
      8. Stateful custom component
      9. Precompiled JSX for production
        1. JSX file watcher
      10. Developing a digital clock using ReactJS
        1. Step1 – defining the digital clock lifecycle script
        2. Step2 – defining CSS styles for the digital clock
      11. Debugging ReactJS
      12. Summary
    14. A. Web Component References
      1. Chapter 1
      2. Chapter 2
      3. Chapter 3
      4. Chapter 4
      5. Chapter 5
      6. Chapter 6
    15. Index