In the previous article, I gave a brief introduction to the reaction. This tutorial introduces an alternative approach to the construction of a component front end. Its basic principles have been covered Web ingredients To create modular, reusable elements for your web applications.
Web components are a combination of standard browser APIs that allow you to create customs, reusable HTML elements with intercipulated functionality. They help developers to make self -made ingredients that can be used in different framework or even without a framework.
This tutorial assumes that you have some basic programming experience and they are easily read and easily reading and writing JavaScript. You should understand how to work for variables, functions, loops, objects, classes and browsers. You don’t need to know anything about web components to start.
The four lessons presented here have been taken from my free book off code Playbacks:
Introduction to Web Development from Back to front
By Mark Mahuni
This book is available in free Playback press. This book is a leader for modern web development, which covers everything from the main Javascript features to the construction of full stack apps with different tools and technologies.
Every lesson is presented as Code playbackWhich is an interactive code walkthrough that shows how to change with my explanation about what is happening over time over time. This format helps you focus on the reasoning behind code changes.
To see the playback, click the Comments in the left panel. Each comment updates the code in the editor and highlights the change. Read the explanation, study the code, and use the Bullet in A tutor if you have questions. Here is a short video that shows how to use the code playback:
https://www.youtube.com/watch?v=uybhqcnjvdm
After this introduction, you would like to find official web components resources: MDN Web Components Guide.
The table of content
Web Components Part 1: Your First Customs Element
This first lesson introduces the building user interface using web components, which allows you to connect HTML, CSS, and Javascript into a re -usable element.
These elements can be treated like built -in HTML elements like h1For, for, for,. divAnd img. They are especially useful when you want to break a page in small, self -made, and reusable parts such as heads, tables or form, while keeping each organized and isolated code.
In this playback, you will learn:
How to create a Javascript class that represents a custom HTML element
How to access the attributes of the web component
How to create and use web components in HTML
The lesson is focused on making a LegendHeader The ingredient that can be reused in the web application. You will see how customs elements can have regular HTML elements (such as src One in img Tag), and how these attributes can be converted to the Javascript code, in response to dynamic ways.
View the playback here: Web Components Part 1- Legend Header
Web Components Part 2: Data Communication
The formation of the previous lessons, this playback shows how to create a number of components sharing the data. I will increase it LegendHeader Component to display the counting of legends, and add a new LegendTable The ingredient that shows all CS legends in the database using the HTML table.
One of the key concepts introduced in this tutorial is that a high -level element holds the web app data and allows it to change changes in the components depending on it. This approach makes the component management more systematic and maintained.
In this playback, you will learn:
How to create and work with multiple ingredients
How to configure and use ‘observing attributes’ in the web component
How can a high -level element manage data manage when the data changes and informed the ingredients
View the playback here: Web Components Part 2- Legend
Web Components Part 3: Customs events
This lesson increases the application by adding A NewLegendForm The ingredient that allows users to add new legends to the database. Playback introduces the concept of custom events that make ‘bubble’ via Dome, which enables high -level elements to control applications for data.
You will learn why the app itself is often better for not managing a wide data for the ingredients. Having a high -level element makes components easier and more reusable by handling the entire web app data, as they do not need to know about each other or communicate directly.
In this playback, you will learn:
How components can create a custom event to request data instead of handling itself
How can a high -level element hear for events and handle them
How does a high -level element access data and deliver it to components that require
View the playback here: Web Components Part 3-Navindand
Web Components Part 4: Making a Full App
In this last lesson, I combine everything to make a full application. I will add a new AuthBox Implement and implement a light verification system so that only registered, login users can add new legends to the database.
The playback uses a session on the server to control access to the user and reinforces the importance of central data management in component architecture.
In this playback, you will learn:
How to enforce user verification with a web component
Method to merge all components into a complete, practical application
Best process for data management in component web applications
View the playback here: Web Components Part 4- Author Box
Reacting vs Web Components
Some important differences between reaction and web components can be summarized:
| Key Property | Reaction | Web ingredients |
| The definition of ingredients | Uses functions (usually) for description of the ingredients | JavaScript uses classes that extend to htmalelement |
| Tooling requirements | Installation, transplalation, bundling (NPM, web packs, Babylon, and so on | Support a native browser with any blood tools or installation requirement |
| Template syntax | Java Script uses JSX, an HTML -like syntax | Uses standard HTML in wires or HTML templates |
| Dom update | Use Virtual Dome to bail and minimize the original domino manipulation effectively | Directly connects the domo the dum, usually less corrected for frequent updates |
| Types of property | Accepts different data types as props (indoor, rows, items, functions) | Only accepts strings as attributes in HTML |
| Rendering model | Declaration: Explain that the UI should look like, handles the reaction | More Essential: Direct Dom directly in response to changes |
| Styling encapsulation | No Built-in Styling Inaccessions (CSS-in-JS or CSS Modules Required) | Built -in Styling Incapanation with Shadow Dome |
| Browser support | Works in all browsers via polyfills | Only modern browsers (Polyes may need for older browsers) |
| Ecosystem | Large ecosystem with many libraries and tools | Small environmental system, but growing |
Wrap
These four lessons cover the basic principles of the web components, but there is more to find it. Web components provide a quality -based method of making reusable elements without the need for outdoor libraries or framework, which makes them mainly valuablely valuable for maintaining and portable code construction.
If you find this format helpful, discover the rest of the book to see how complete web apps are made using modern tools and views.
Web components represent only one approach to component web development. When you get ready to go, keep building, reading, and tries other playbacks.
If you have an opinion about Playbacks, I would love to hear from you. You can reach me Mark@playbackpress.com.