Exploring Web Components

Andrea Chiarelli

Description

Learn how to create reusable components to build modern Web user interfaces with standard technologies Key Features a- Learn how standard Web technologies allows you to build reusable UI components. a- Learn how to protect the look and the internal behavior of your components. a- Learn how to use Web Components in React, Angular, and Vue projects. a- Learn how to use third-party libraries and tools to simplify the process of building your components. Description The design of Web user interfaces has been growing significantly in recent times thanks to libraries like React, Angular, Vue. They allow you to create awesome UI components, but have a great drawback: their components are not interoperable. Web Components enable you to overcome this drawback by using a set of standard technologies. The book drives you in the exploration of these technologies with a practical approach. It describes how to create Custom Elements; how to protect their internal behavior by leveraging the Shadow DOM; how to simplify the UI definition through HTML templates. Also, you will discover how to distribute and use your Web Components and how to leverage libraries and tools to develop them. Throughout the book, you will carry out a Web Component project that will provide you with practical experience in using those technologies. What will you learn a- Use Custom Elements technology to define your HTML elements. a- Use Shadow DOM to protect the inner behavior of your UI components. a- Work with HTML templates to simplify and enhance the way you define the UI of your components. a- Reuse your Web Components in applications built with Vanilla JavaScript, React, Angular, and Vue. Who this book is for This book is for frontend Web developers who want to leverage standard technologies to build reusable UI components. Basic knowledge of JavaScript, HTML, and CSS is required. Table of Contents 1. Getting Started with Web Components 2. Extending HTML Elements 3. Creating Custom Web Components 4. Managing Properties and Attributes 5. Handling Events 6. Using the Shadow DOM 7. Using HTML Templates 8. Distributing and Extending Web Components 9. Web Components and Other UI Frameworks 10. Tools for Web Components Development About the Author Andrea Chiarelli is a software engineer and technical author with more than 20 years of experience in the software development industry. Throughout his career, he used several programming languages and technologies for the projects he was involved in. Lately, he is focusing on the JavaScript ecosystem both on the server and on the client-side. He has contributed to many online and offline magazines and authored a few books. Currently, he is working at Auth0 as an R&D Content Engineer. Your Blog links: https://andreachiarelli.it/ Your LinkedIn Profile: https://www.linkedin.com/in/andreachiarelli/

Sujets

• Informatique
• Web development

Informations

• Publié par: BPB Publications
• Date de parution: 03 septembre 2020
• Nombre de lectures: 4
• EAN13: 9789389423983
• Langue: English

Extrait

Exploring Web Components

Build Reusable UI Web Components with Standard Technologies

Andrea Chiarelli
www.bpbonline.com
FIRST EDITION 2020
Copyright © BPB Publications, India
ISBN: 978-93-89423-976
All Rights Reserved. No part of this publication may be reproduced or distributed in any form or by any means or stored in a database or retrieval system, without the prior written permission of the publisher with the exception to the program listings which may be entered, stored and executed in a computer system, but they can not be reproduced by the means of publication.
LIMITS OF LIABILITY AND DISCLAIMER OF WARRANTY
The information contained in this book is true to correct and the best of author’s & publisher’s knowledge. The author has made every effort to ensure the accuracy of these publications, but cannot be held responsible for any loss or damage arising from any information in this book.
All trademarks referred to in the book are acknowledged as properties of their respective owners but BPB Publications cannot guarantee the accuracy of this information.
Distributors:
BPB PUBLICATIONS
20, Ansari Road, Darya Ganj
New Delhi-110002
Ph: 23254990/23254991
MICRO MEDIA
Shop No. 5, Mahendra Chambers,
150 DN Rd. Next to Capital Cinema,
V.T. (C.S.T.) Station, MUMBAI-400 001
Ph: 22078296/22078297
DECCAN AGENCIES
4-3-329, Bank Street,
Hyderabad-500195
Ph: 24756967/24756400
BPB BOOK CENTRE
376 Old Lajpat Rai Market,
Delhi-110006
Ph: 23861747
Published by Manish Jain for BPB Publications, 20 Ansari Road, Darya Ganj, New Delhi-110002 and Printed by him at Repro India Ltd, Mumbai
www.bpbonline.com
Dedicated to
My family, who supported and put up with me during the writing process.
About the Author
Andrea Chiarelli is a software engineer and technical author with more than 20 years of experience in the software development industry. In his career, Andrea has held various roles (software developer and architect, trainer, technical writer) in different ways (as an independent contractor, as a company owner, as an employee).
For the project he was involved in, he has used several programming languages and technologies: from .NET to Node.js, from C# to JavaScript, from SQL Server to MongoDB, from IIS to nginx.
Lately, he is focusing on the JavaScript ecosystem both on the server and on the client-side.
He has contributed to many online and offline magazines and authored a few books.
Currently, he is working at Auth0 as an R&D Content Engineer.
About the Reviewer
Akanksha Sinha is a Technical Manager having 12+ years of experience in various progressive roles in Software Development. Her area of work has been in domains like Digital Marketing, Technology, and Insurance. She was one of the founding members of the Tools & Automation team in Cognizant for Operation Teams working for Tech giants.
As part of her contribution to building a Bot and Tools landscape from scratch, she has explored web development, UI/UX, and the latest technologies like ML, Chatbots, Cloud Computing, NLP, etc. Her skill set includes Javascript, Google Cloud, Google App Script, AngularJS, Typescript, Python, Chrome Extension, GSuites, HTML & CSS, and Unix Shell Scripting. Natural Language, Chatbots, Big Query, and Machine Learning are her area of interest where she has done multiple prototypes.
She has a B.E in E&E from RTM Nagpur University and has worked with Cognizant Technology Solutions.
Acknowledgement
I would like to thank a few people for allowing this book to become a reality.
First and foremost, I would like to thank my wife and my two daughters, Sofia and Lorena, for putting up with me while I was spending many weekends on writing.
I also thank the online and offline developers community, which loves to exchange experiences and code and support each other more like friends than colleagues.
Finally, I would like to thank the BPB team for their patience in waiting for my always late chapters.
Preface
In recent years, the design of Web user interfaces has evolved more and more until it is becoming quite similar to native graphical user interfaces. This evolution has been possible mainly to a few popular libraries that spread a composable approach to build user interfaces. Among the others, we can mention React and Angular as the main influencers of this new way of design Web user interfaces.
However, despite the innovation, these libraries brought in the Web development, they created somewhat isolated worlds. Developers that are using React can share and reuse their components just with other React applications. Similarly, Angular developers can share and reuse their components only with Angular projects. Of course, the same also happens with other UI libraries.
This sort of isolation is not what the Web is meant to. Quite the opposite, Web technologies are meant to be open and interoperable. How can we fix this fragmentation created by different approaches in implementing the same high-level design?
Web Components answer to this question.
The set of technologies that Web Components rely on allows developers to create components that can be used to build Web user interfaces independently of the libraries used in a specific project. These technologies are standard and supported by most recent browsers, so they can be considered the standard way to create reusable and interoperable UI components.
This book will present to you the technologies behind Web Components and let you start using them step by step with a practical approach. In fact, throughout the book, you will carry out a full Web Component project that will lead you to understand in detail how to use them.
The 10 chapters of this book will let you explore the following topics:
Chapter 1 introduces the component-based design approach to build user interfaces and the basic concepts behind Web Components.
Chapter 2 discusses how to extend existing standard HTML elements to customize their behavior.
Chapter 3 describes how to create Custom Elements, that is, custom HTML elements built from scratch, without extending the standard ones.
Chapter 4 explains how to manage the properties and attributes of Custom Elements and how to apply the best practices to keep them synced.
Chapter 5 is focused on enriching your Web Component’s interactivity by listening to events and creating your own.
Chapter 6 shows how to implement encapsulation for Web Components by exploiting the Shadow DOM. This feature allows you to include your component on any page without worrying about external CSS or JavaScript side effects.
Chapter 7 discusses how to use HTML templates in order to simplify the component’s markup management.
Chapter 8 describes different strategies on how to distribute and import modules containing Web Components. It also shows how to extend them to create new components.
Chapter 9 discusses how Web Components integrate with other UI libraries and frameworks. It shows how to integrate them into React, Angular, and Vue applications with very little effort. It also shows how to create Web Components by writing them in Angular, Vue, and React.
Chapter 10 describes a few libraries, such as LitElement, Hybrids, Slim, and Stencil, that may help developers to build Web Components.
Downloading the code bundle and coloured images:
Please follow the link to download the Code Bundle and the Coloured Images of the book:
https://rebrand.ly/62bc7
Errata
We take immense pride in our work at BPB Publications and follow best practices to ensure the accuracy of our content to provide with an indulging reading experience to our subscribers. Our readers are our mirrors, and we use their inputs to reflect and improve upon human errors if any, occurred during the publishing processes involved. To let us maintain the quality and help us reach out to any readers who might be having difficulties due to any unforeseen errors, please write to us at :
[e-mail]
Your support, suggestions and feedbacks are highly appreciated by the BPB Publications’ Family.

Did you know that BPB offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.bpbonline.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [e-mail] for more details.
At www.bpbonline.com , you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on BPB books and eBooks.
BPB is searching for authors like you
If you're interested in becoming an author for BPB, please visit www.bpbonline.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.
The code bundle for the book is also hosted on GitHub at https://github.com/bpbpublications/Exploring-Web-Components . In case there's an update to the code, it will be updated on the existing GitHub repository.
We also have other code bundles from our rich catalog of books and videos available at https://github.com/bpbpublications . Check them out!
PIRACY
If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [e-mail] with a link to the material.
If you are interested in becoming an author
If there is a topic that you have expertise in, and you are interested in either writing or contributing to a book, please visit www.bpbonline.com .
REVIEWS
Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased