19,69 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Explore modern Web Component design and integrate them with a variety of web frameworks to build encapsulated reusable UI components for your web apps
Key Features
- Learn Web Components with more than 50 web component examples for both beginners and advanced users
- Create responsive and highly customizable web pages using HTML, CSS, and JavaScript
- Extend the potential of Web Components by integrating them with standard web frameworks
Book Description
Web Components are a set of APIs that help you build reusable UI modules that can operate in any modern browser using just Vanilla JavaScript. The power of Web Components lies in their ability to build frontend web applications with or without web frameworks.
With this practical guide, you will understand how Web Components can help you build reusable UI components for your modern web apps. The book starts by explaining the fundamentals of Web Components' design and strategies for using them in your existing frontend web projects. You will also learn how to use JavaScript libraries such as Polymer.js and Stencil.js for building practical components. As you progress, you will build a single-page application using only Web Components to fully realize their potential. This practical guide demonstrates how to work with Shadow DOM and custom elements to build the standard components of a web application. Toward the end of the book, you will learn how to integrate Web Components with standard web frameworks to help you manage large-scale web applications.
By the end of this book, you will have learned about the capabilities of Web Components in building custom elements and have the necessary skills for building a reusable UI for your web applications.
What you will learn
- Understand Web Component design, specifications, and life cycle
- Create single-page applications using Web Components
- Enable reusability and customization for your UI components
- Implement Web Components in your web apps using Polymer and Stencil libraries
- Build powerful frontend components from scratch and deploy them on the web
- Design patterns and best practices to integrate Web Components into your existing web application
Who this book is for
This book is for developers who have heard about web components, but don't really know where to start. This book is also for intermediate and advanced developers who know what web components are, but are still afraid to use them in production. This book is also for frontend engineers who are simply looking into web components in order to increase their knowledge and skills.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 134
Veröffentlichungsjahr: 2019
Ähnliche
Getting Started with Web Components
Copyright © 2019 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
Commissioning Editor:Pavan RamchandaniAcquisition Editor:Pavan RamchandaniContent Development Editor:Akhil Nair Senior Editor: Hayden EdwardsTechnical Editor: Jane DsouzaCopy Editor: Safis EditingProject Coordinator: Manthan PatelProofreader: Safis EditingIndexer: Priyanka DhadkeProduction Designer: Arvindkumar Gupta
First published: August 2019 Production reference: 1080819
Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.
ISBN 978-1-83864-923-4
www.packtpub.com
packt.com
Subscribe to our online digital library for full access to over 7,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website
Why subscribe?
Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals
Improve your learning with Skill Plans built especially for you
Get a free eBook or video every month
Mapt is fully searchable
Copy and paste, print, and bookmark content
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.packt.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.
At www.packt.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 Packt books and eBooks.
Contributors
About the author
Prateek Jadhwani is a developer specializing in frontend technologies, living and working in the US. His experience includes 10 years of working as a frontend developer for many high-profile clients and many early-adoption side projects. Prateek had his first exposure to Web Components in 2014, and instantly fell in love with component-driven methodologies. Since then, he has evangelized Web Components and its related libraries to people at work and outside of work. Prateek loves all things open source and enjoys writing good JavaScript. A love for programming in general and a thirst for knowledge provide the motivation he carries through his work.
About the reviewer
Anchal Sarraf has 6 years of IT experience. She has worked on core automation development for the last 3 years with an IT multinational corporation. She is always eager to learn. She invests lots of her time in learning and teaching. Her aim is to make learning easy and exciting. She has also published a video tutorial course on UiPath on the online learning platform Udemy.
Packt is searching for authors like you
If you're interested in becoming an author for Packt, please visit authors.packtpub.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.
Table of Contents
Title Page
Copyright and Credits
Getting Started with Web Components
About Packt
Why subscribe?
Contributors
About the author
About the reviewer
Packt is searching for authors like you
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Reviews
Web Components Essentials and Specifications
Technical requirements
Web Components
Web Component specifications
Custom elements
Types of custom elements
Shadow DOM
Templates
Module loader API
Named export versus default export
Custom elements using imports
Summary
Web Components Life Cycle Callback Methods
Overview of life cycle callback methods
Types of life cycle callback methods
connectedCallback()
disconnectedCallback()
adoptedCallback()
attributeChangedCallback()
Summary
Universal Web Components
Styling Web Components
Accessibility for Web Components
Gold Standard Checklist
Summary
Building Reusable Web Components
The concept of reusability
Responsive Web Components
Building <profile-info> Web Component
Publishing Web Components
Extending Web Components – slots
Creating <my-article> Web Component
Summary
Managing States and Props
Introduction to state management
Attributes and properties
Event handling
Summary
Building a Single Page App using Web Components
Understanding project requirements
Figuring out reusable Web Components
Configuring the Starter Project and APIs
Pre-requisites
Setting up the project
Running the Starter Project
Pre-requisite for API calls
App components
Functional components
The <gif-cover> Web Component
The <search-bar> Web Component
The <search-container> Web Component
The <show-trending> Web Component
The <show-random> Web Component
The <my-app> component
Implementing routing
Enabling analytics
Summary
Implementing Web Components using Polymer and Stencil
Polymer
Hello World in Polymer
Nested elements in Polymer
Attributes and properties in Polymer
Stencil
The Hello World Stencil component
Nested Stencil components
Pre-rendering for Stencil components
Summary
Integrating Web Components with a Web Framework
The <header-image> web component
Integrating Web Components in React
Setting up a React project
Adding a React component
Integration of Vanilla Web Component in a React component
Integrating Web Components in Angular
Setting up an Angular project
Integrating with Angular
Integrating Web Components in Vue
Summary
Other Books You May Enjoy
Leave a review - let other readers know what you think
Preface
This book covers information about a web technology called Web Components. Web components are web specifications that provide the user with a component-driven methodology for development. It also provides encapsulation and allows you to use a component-driven methodology without any dependencies.
Who this book is for
This book is for developers who have heard about web components, but don't really know where to start. This book is also for intermediate and advanced developers who know what web components are, but are still afraid to use them in production. This book is also for frontend engineers who are simply looking into web components in order to increase their knowledge and skills.
You can also use this book to learn about and get into component-driven methodologies. If you are coming from a React/Angular/Polymer background, this book will give you an insight into how most things can be achieved using vanilla JavaScript without any libraries.
What this book covers
Chapter 1, Web Components Essentials and Specifications, discusses the concept of web components and the specifications associated with them.
Chapter 2, Web Components Life Cycle Callback Methods, covers various life cycle callback methods associated with web components.
Chapter 3, Universal Web Components, explores various concepts, such as styling and accessibility, that can increase the usability of web components.
Chapter 4, Building Reusable Web Components, explains the concept of reusability and looks into the concept of slots.
Chapter 5, Managing States and Props, discusses the concepts of states and props and how it can be achieved with the help of properties, attributes, and custom event handlers.
Chapter 6, Building a Single Page App using Web Components, looks into the process of creating a full-fledged single-page web app using just web components.
Chapter 7, Implementing Web Components using Polymer and Stencil, covers how different libraries and frameworks are different from vanilla web components.
Chapter 8, Integrating Web Components with a Web Framework, explores how we can integrate vanilla web components into existing projects with other libraries.
The book also contains a lot of examples—more than 50 web component examples—that can be referred to by both beginners and advanced users.
To get the most out of this book
To get the most out of this book, you need to comply with the following:
You will need a basic understanding of web development technologies such as HTML, CSS, and JavaScript.
You should be able to open websites on a browser and debug them using developer tools.
You should be familiar with GitHub, since it has all the code files you'll need.
You should be able to use Node.js (
https://nodejs.org/en/
) via Terminal or Command Prompt.
You should be able to use a text editor.
Download the example code files
You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packt.com/support and register to have the files emailed directly to you.
You can download the code files by following these steps:
Log in or register at
www.packt.com
.
Select the
SUPPORT
tab.
Click on
Code Downloads & Errata
.
Enter the name of the book in the
Search
box and follow the onscreen instructions.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR/7-Zip for Windows
Zipeg/iZip/UnRarX for Mac
7-Zip/PeaZip for Linux
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Getting-Started-with-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/PacktPublishing/. Check them out!
Download the color images
We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://static.packt-cdn.com/downloads/9781838649234_ColorImages.pdf.
Get in touch
Feedback from our readers is always welcome.
General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at [email protected].
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packt.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.
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 [email protected] 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 authors.packtpub.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 opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!
For more information about Packt, please visit packt.com.
Web Components Essentials and Specifications
Welcome to the world of Web Components.
Web Components, as the name indicates, are components that can be reused across different sections of a website by keeping encapsulation in check. They can even be published on the web, and be used by another site with the help of a simple import. This book covers all there is to know about Web Components. What they are made up of, how they can be used and in what scenarios. The book also covers wide variety of moderate and advanced level concepts such as good practices and integrating Web Components with other technologies.
In this chapter, we will talk about what Web Components are and how we can identify them while browsing various sites. We will also be talking about the specifications that make up Web Components along with detailed examples. You will be able to understand what custom elements are and how you can create one on your own. You will be able to encapsulate your Web Components with the help of a shadow DOM, and you will be able to use templates to achieve reusability.
While this chapter talks only about the basics of Web Components, by the end of this chapter you will be able to create your own Web Components from scratch, and understand the specifications associated with them.
In this chapter, we will cover the following topics:
Web Components
Web Component specifications
Technical requirements
In order to run the code, you will need a simple server, say a Python SimpleHTTPServer. In order to see the code on the browser, first start the server. On Mac, use the following command:
py -m SimpleHTTPServer
On Windows, use the following command in the folder that you have the code :
py -m http.server
and then you can simply go to localhost:8080. It will run index.html for you in that folder.
Web Components
Let's say you have a phone with a touchscreen. This touchscreen is a component of the mobile phone, working in conjunction with various other components, such as the circuit board and battery. Very few of us know how a phone screen works individually, yet we're all able to operate a mobile phone with ease. The same can be said of Web Components, which are the complex building blocks of websites which become navigable to all.
