1 minute read

Categories:
Tags:

At the heart of a web page, there are UI elements and these elements interact: with the user, each other, and the server. Although HTML5 expanded the original set of elements to include audio, video, and date pickers, there has been no standard way to define custom elements. Elements not specified in the HTML specification have had no support thrusting this responsibility onto client-side and server-side web frameworks.

The Web Components standard solves this issue by allowing the creation of custom HTML elements, seamlessly integrating them into HTML markup as if they were part of the original specification.

Introductory Articles

Introductory Presentations

Even before browsers are updated, JavaScript libraries called polyfills are allowing today’s browsers to support Web Components. In June 2013, Mozilla and Google polyfill libraries were consolidated into a single library called Polymer bringing Web Component support to all modern browsers.

With browsers natively supporting: custom HTML elements, data binding and templates; client-side web frameworks will soon undergo a great simplification. In the meantime Web Components’ everything-is-in-the-DOM architecture encapsulates all new features allowing it to coexist with methods employed by most JavaScript frameworks. Transitioning between AngularJS directives or Bootstrap UI is seamless since Web Components cannot be differentiated from core HTML tags, meaning today’s frameworks already offer full support – leaving no reason to delay migration.

Two web frameworks, Google Polymer and Mozilla X-Tags specifically target and are optimized for Web Components, while other client-side JavaScript frameworks such as AngularJS are committed to full support upon their next major release. However the main goal of Web Components is to simplify web applications to an assembly of standalone components, a methodology for reuse and ease of configuration which will lower the learning curve to new developers.

The open-source community for re-usable Web Components is hosted at Custom Elements, as well there are bundled libraries such as Mozilla Brick.

Categories:
Tags:
Updated:

You May Also Enjoy

Flutter gRPC File Transfers

4 minute read

, ,

Modern mobile apps are benefiting from using gRPC with Protobuf to reduce boilerplate code for their client-server networking implementation. While directly implemented by gRPC, the library can easily implement all necessary features for efficient file transfers.

File Transfers using gRPC and ZIO

10 minute read

, ,

gRPC with Protobuf is a framework to efficiently simplify the client-server networking requirements of modern applications. One use-case where the low-level simplicity of pure HTTP maintains an advantage over gRPC is handling file transfers: the uploading and downloading of contiguous binary block data. But gRPC can efficiently replicate all HTTP functionality within its Protobuf message framework making it unnecessary to host separate gRPC and HTTP servers for applications.