Learning Web Component Development

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

Learning Web Component Development

Sandeep Kumar Patel

1 customer reviews
Discover the potential of web components using PolymerJS, Mozilla Brick, Bosonic, and ReactJS
Mapt Subscription
FREE
$29.99/m after trial
eBook
$22.40
RRP $31.99
Save 29%
Print + eBook
$39.99
RRP $39.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$22.40
$39.99
$29.99p/m after trial
RRP $31.99
RRP $39.99
Subscription
eBook
Print + eBook
Start 30 Day Trial

Frequently bought together


Learning Web Component Development Book Cover
Learning Web Component Development
$ 31.99
$ 22.40
Learning Joomla! 1.5 Extension Development: Creating Modules, Components, and Plugins with PHP Book Cover
Learning Joomla! 1.5 Extension Development: Creating Modules, Components, and Plugins with PHP
$ 23.99
$ 16.80
Buy 2 for $34.30
Save $21.68
Add to Cart
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
 

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

Recommended for You

Mastering Web Application Development with AngularJS Book Cover
Mastering Web Application Development with AngularJS
$ 26.99
$ 5.40
AngularJS Web Application Development Blueprints Book Cover
AngularJS Web Application Development Blueprints
$ 29.99
$ 21.00
Responsive Web Design with HTML5 and CSS3 Book Cover
Responsive Web Design with HTML5 and CSS3
$ 23.99
$ 4.80
MEAN Web Development Book Cover
MEAN Web Development
$ 29.99
$ 3.00
React.js Essentials Book Cover
React.js Essentials
$ 23.99
$ 16.80
Object-Oriented JavaScript - Second Edition Book Cover
Object-Oriented JavaScript - Second Edition
$ 29.99
$ 21.00