Learning Web Component Development

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

Learning Web Component Development

This ebook is included in a Mapt subscription
Sandeep Kumar Patel

1 customer reviews
Discover the potential of web components using PolymerJS, Mozilla Brick, Bosonic, and ReactJS
$0.00
$16.00
$39.99
$29.99p/m after trial
RRP $31.99
RRP $39.99
Subscription
eBook
Print + eBook
Start 30 Day Trial
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 
Preview in Mapt

Book Details

ISBN 139781784393649
Paperback256 pages

Book Description

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. The world of HTML5 web components and more is open for you with this guide by your side!

Table of Contents

Chapter 1: Introducing Web Components
What are web components?
Benefits and challenges of web components
The web component architecture
Template element
HTML Import
Shadow DOM
Custom element
Node distribution
Styling web components
Building a digital clock component
Using the clock component
X-Tag
Summary
Chapter 2: Introducing Polymer
What is Polymer?
Installing and configuring Polymer
Architecture of PolymerJS
Polymer designer tool
Yeoman Polymer generator
Summary
Chapter 3: Developing Web Components Using Polymer
PolymerJS ready event
Polymer expressions
Developing Polymer custom elements
Developing a sample custom element
Extending a custom element
Polymer methods
Asynchronous task execution
Developing a digital clock
Working with Yeoman
Preparing for production using vulcanize
Summary
Chapter 4: Exploring Bosonic Tools for Web Component Development
What is Bosonic?
Browser support
Configuring Bosonic
Bosonic packages
Built-in elements
Developing custom component
Bosonic lifecycle
Digital clock development
Summary
Chapter 5: Developing Web Components Using Mozilla Brick
What is the Brick library?
Mozilla Brick 1.0
Mozilla Brick 2.0
Installing Mozilla Brick
Configuring Mozilla Brick
Built-in components
The X-Tag library
Developing a digital clock using X-Tag
Summary
Chapter 6: Building Web Components with ReactJS
The reactive approach
The flux architecture
Installing ReactJS
Configuring ReactJS
Using ReactJS
What is JSX
ReactJS component lifecycle
Stateful custom component
Precompiled JSX for production
Developing a digital clock using ReactJS
Debugging ReactJS
Summary

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

Authors

Table of Contents

Chapter 1: Introducing Web Components
What are web components?
Benefits and challenges of web components
The web component architecture
Template element
HTML Import
Shadow DOM
Custom element
Node distribution
Styling web components
Building a digital clock component
Using the clock component
X-Tag
Summary
Chapter 2: Introducing Polymer
What is Polymer?
Installing and configuring Polymer
Architecture of PolymerJS
Polymer designer tool
Yeoman Polymer generator
Summary
Chapter 3: Developing Web Components Using Polymer
PolymerJS ready event
Polymer expressions
Developing Polymer custom elements
Developing a sample custom element
Extending a custom element
Polymer methods
Asynchronous task execution
Developing a digital clock
Working with Yeoman
Preparing for production using vulcanize
Summary
Chapter 4: Exploring Bosonic Tools for Web Component Development
What is Bosonic?
Browser support
Configuring Bosonic
Bosonic packages
Built-in elements
Developing custom component
Bosonic lifecycle
Digital clock development
Summary
Chapter 5: Developing Web Components Using Mozilla Brick
What is the Brick library?
Mozilla Brick 1.0
Mozilla Brick 2.0
Installing Mozilla Brick
Configuring Mozilla Brick
Built-in components
The X-Tag library
Developing a digital clock using X-Tag
Summary
Chapter 6: Building Web Components with ReactJS
The reactive approach
The flux architecture
Installing ReactJS
Configuring ReactJS
Using ReactJS
What is JSX
ReactJS component lifecycle
Stateful custom component
Precompiled JSX for production
Developing a digital clock using ReactJS
Debugging ReactJS
Summary

Book Details

ISBN 139781784393649
Paperback256 pages
Read More
From 1 reviews

Read More Reviews