denisismagilov – Fotolia
Code reuse is indubitably valuable. With reusable application modules, developers can take it a step further into web apps and UIs.
Web Components are modular elements of a UI that developers can assemble, reuse and port among browsers and sometimes even app environments. Developers create UIs from Web Components similarly to how they compose applications from services or microservices. As with service- or microservices-based programming, the Web Component model has rules, tips and drawbacks.
Let’s explain how to use Web Components and the pieces that comprise them.
Web Components are snippets of JavaScript or HTML code designed to perform a simple and complete function. Virtually all browsers and World Wide Web Consortium standards support the foundational set of APIs for Web Components, which means developers can introduce Web Components into nearly any HTML page. This modularity frees developers from switching to another programming language, which usually creates pieces of page functionality that are opaque to web designers.
Web Components standards and related processes consist of four pieces:
The specifications for Web Components enable developers to use Custom Elements, an extension of the browser API set, to define a particular piece for the browser to parse. Each Web Component is embedded in its Shadow DOM, which stands for Document Object Model, the representation of a webpage. Each Component can then function as a self-contained element of the larger page.
To use Web Components, developers must install, import and then reference them; the site webcomponents.org details this process, and it hosts Web Component samples and a community of web developers.
It’s one thing to write Web Components, but it’s another to design UIs to take advantage of them. There are two pathways for how to use Web Components in a UI. You can incorporate them in webpage development using HTML, which will normally entail using Components in their native JavaScript or HTML form. Or you can turn to a UI design tool to work with Web Components directly.
Any modern HTML authoring tool that provides a means for JavaScript creation supports Web Components — either to develop them or to use premade, commercial or free components in UI building tasks. However, HTML authoring doesn’t necessarily impose discipline on page design, and developers must exercise some discipline to take full advantage of Web Components.
Components are objects. Think of a Web Component as a subpage that a constructor must invoke to be visible and active. Each Component has a constructor that runs when it’s activated, which makes the Component visible and defines its initial state. Thus, object-oriented thinking is important when you construct a UI for Web Component implementation.
It’s fairly easy for most JavaScript-fluent web designers to directly use Web Components, but it can be more challenging to achieve a cohesive design from a bunch of autonomous components. Before designers use Web Components, they should have the design-level elements down pat; they should also know how to use a framework to describe a UI, as well as the supporting tools to populate it with Web Components.
For the lowest barrier to entry with Web Components, use UI design tools. These tools can help design a UI that matches Web Component capabilities. Most web design tools follow the precepts of the Material Design system; and Google, which originally designed it, offers a Material Components framework, as well as a broader set of tools and practices associated with building a modular UI that’s suitable with Web Components.
Material Design is the most widely used design language on the internet, but there are other options for UI designers who prefer customized looks. Materialize is a superset of Material Design that offers, according to many web designers, better creative support. MUI and Flat Remix are lightweight design languages that constitute subsets of Material Design.
Ant and Grommet are design languages that represent total departures from Material Design in principles and use.
There is also a Material Designs Lite that has its own Web Components, not dependent on JavaScript but framed directly in HTML; this UI design tool helps achieve a look and feel like Material Designs with many of the benefits of Web Components.
Many developers want event-driven and interactive UI designs, which can be a challenge to create with Web Components. They might have to use a UI design language like Material Design within a JavaScript web development framework, such as AngularJS or Bootstrap, both of which include Material Design hooks. For advanced UI construction, use one of these frameworks and integrate them with Material Design UI principles through these hooks.
Design + Web Components = the UI. The better control a software team has over its designs and the more it relies on standardized structures, the more it will get out of Web Component use.
What to make of the proliferation of progressive web apps
Why enterprises need to prioritize UX research
An investment in people is an investment in the company. See how a trained and upskilled staff can have a positive impact on …
Cloud certifications are available for all levels of cloud expertise. Use this guide to evaluate basic, topic-specific, …
The cost of spot prices can be a risk-and-reward kind of strategy. Better understand the risks that come with Azure Spot VMs so …
Domain-driven design helps organizations develop software focused on key business needs. But to do so, architects need to …
While plenty of developers entertain the idea of adopting a functional programming model, it’s important to first know exactly …
In this primer on SOLID, we’ll examine the five principles this development ideology embodies, the practices they encourage and …
With microservices now mainstream — and past the trough of disillusionment — a framework developed for them appeals to platform…
The emerging competitor to Dynatrace, Datadog and Splunk shuns AIOps, and its approach to data management and price tag intrigued…
Score one for IT orgs that rely solely on upstream code, as Flux CD sails on. But Weaveworks’ demise points to larger issues for …
Blockchain, AI, anti-competitive activity and the new programming language Mojo are sure to fill the headlines in 2024.
There’s more to blockchain development than what you hear from the crypto community. Here, we debunk five common blockchain myths.
Learn how to control state changes as immutable events through the event sourcing model.
Many organizations struggle to manage their vast collection of AWS accounts, but Control Tower can help. The service automates …
There are several important variables within the Amazon EKS pricing model. Dig into the numbers to ensure you deploy the service …
AWS users face a choice when deploying Kubernetes: run it themselves on EC2 or let Amazon do the heavy lifting with EKS. See …
All Rights Reserved, Copyright 2006 – 2024, TechTarget
Privacy Policy
Cookie Preferences
Do Not Sell or Share My Personal Information