Turbocharge You Modern Web Apps With Pre-Built UI WebComponents

There are numerous popular JavaScript frameworks that provide a component-based approach to developing web applications. However, the majority of these do not include any pre-assembled components. JavaScript developers must choose between creating these components from scratch or obtaining them from the community. ExtWebComponents allows you to create web applications more quickly. ExtWebComponents comes with over 140 pre-built and pre-tested UI components.

ExtWebComponents includes all of the UI Components required by a developer to create data-intensive web apps, such as a grid, exporter, charts, pivot grid, layouts, and d3 adapter. You get components that work together seamlessly and that have been professionally built, tested, and maintained.

How can I build responsive designs with WebComponents?

Developers can use the built-in Material design inspired theme, eliminating the need to construct custom styles and making it easy to create a fresh, modern user experience with minimal effort. Themes can also be easily modified or extended within Sencha Themer, enabling both developers and designers to create compelling themes without writing a single line of code. Fonts, colors, and padding can all be modified with ease to make components fit the motif of the application.

Adaptive and responsive design enables teams to build immersive user engagement by using layouts and adaptive design features. A flexible layout manager helps to organize the display of data and content across multiple browsers, devices, and screen sizes. It helps developers to control the display of components, even for the most complex user interfaces.

What are some of the features available in ExtWebComponents?

How can I integrate WebComponents with data?

The robust data package included in ExtWebComponents decouples the UI components from the data layer. The data package:

• Allows client-side collections of data using highly functional models that offer features such as sorting and filtering.
• Is protocol agnostic, and can consume data from any back-end source.
• Comes with session management capabilities that allow several client-side operations, minimizing round-trips to the server.

How can I see ExtWebComponents and GXT in Action?

The following video covers using ExtWebComponents in GXT templates. It will start by showing how to quickly import ExtWebComponents into your project. Then show you how to construct a web component with an Ext JS web component. Then show you how to import your custom element into your GXT application.

How can I build my own WebComponents?

A web component can be considered a custom html element, like <my-view/> which is constructed below.

Create a custom component with 3 easy steps. Start by declaring the reusable class element with the web component construction. Then register the class for which will be used for the components construction. Once you’ve constructed and registered the component you can declare it anywhere with

// 1. Define the reusable component
class MyViewElement extends HTMLElement {
  constructor() {
    super();

    // The components html template
    this.innerHTML = `<div>My Simple View</div>`;
  }

  // When the element is ready... 
  connectedCallback() {
  }
}
// 2. Register the component
window.customElements.define('my-view', MyViewElement);

Check out the full guide.

How can I incorporate these powerful ExtWebComponents in my own application?

In this post we’ve learned more about the Most Comprehensive Library of WebComponents to use with a JavaScript Framework or Framework-agnostic development. We’ve seen how easy it is to create you own WebComponents and we’ve looked at a tutorial video showing ExtWebComponents in action.

Ready to get started with everything you need to Create Stunning Web Applications using WebComponents?

Head over to the ExtWebComponents product page to find out more about adding them to your project.