New Product: Ignite UI for Web Components

We are excited to announce Ignite UI for Web Components.  If you’re not familiar with Web Components, here’s a quick primer:

• Web Components is not a library or a framework – it’s a web standard. Browsers handle Web Components as native custom elements. Libraries and frameworks come and go, but standards are implemented uniformly and are not subject to interpretations.

With Ignite UI for Web Components, you can build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach. Ignite UI for Web Components gives you the highest-performing data grid, over 50 chart types, including financial charting plus Excel spreadsheet and Excel library, and much more.

Understanding Web Components

Web standards move slowly - so the history of modern web development is full of JavaScript Frameworks leaping ahead and filling a need of developers, and then web standards catching up and obviating the need for those frameworks. jQuery is a good example for this. Inspecting and manipulating the DOM in a cross-browser way was very difficult, so jQuery stepped in to make it safe and easy to do. Suddenly everyone could do much more complicated things on the client, with far less knowledge and effort. But as browsers standardized further and implementations converged with fewer quirks on how to inspect and manipulate the DOM, suddenly jQuery became far less necessary.

To build more complicated client applications, developers have had a need to modularize and their UIs, breaking them into individually testable and reusable components. The browsers didn’t have good support for this kind of modularization built in, so work began on a set of standards for how you might create reusable and encapsulated pieces of UI, described collectively as Web Components. But, of course, web developers needed all this stuff ASAP, so there are a bunch of UI frameworks that also provide a way to componentize your web UI. That’s not all they do, of course, they also provide a suite of other utilities (Data binding, routing, etc) that help developers build applications, but a significant portion of what they are trying to accomplish is to help you break your UI down into testable and reusable components.

Why Ignite UI for Web Components?

Web Components are a standards-based way to build or use reusable UI Components for the web. When you use our Web Components product the components are treated as if they are DOM elements that are just built into the browser, the same as <span>, <p> or <div>, and others. What this means is that almost anywhere you can use a <p> you can also use a <igc-category-chart>. This includes a naked html file, with no further processing, or set via the innerHTML property, etc. What this also means it that you should be able to use these components with any UI framework you would want to use in your application (Angular, React, Vue, Polymer, etc.), since our components are just treated as if they are “built-in” with no special processing required to create or manage them. It's possible for a UI framework to interfere with custom elements, or just be hard coded to only expect the traditional built in DOM elements, but since custom elements are part of the web standards, such incompatibility is erroneous rather than by design.

Should a React or Angular developer use these? Probably not. We have Angular specific and React specific products that go above and beyond what our Web Components product does to help you leverage Angular or React specific functionality to make your app easier to build. But if you are building a Vanilla JS application, or a primarily server side rendered application, or an application using a UI framework we don’t yet have a specific product for, then our Web Components product is great for this. It has no UI framework dependencies that may interact poorly with other things your application might be doing, and uses built in functionality of the browser for its operation.

What’s New in Ignite UI for Web Components

Now that you understand Web Components – let’s talk about Ignite UI for Web Components.  Ignite UI for Web Components ships with the same set of powerful controls we ship in Ignite UI for React: 

• Data Grid 
• Data Chart (includes 50+ Chart Types) 
• Financial Charting 
• Doughnut Chart 
• Pie Chart 
• Sparkline 
• Bullet Graph 
• Linear Gauge 
• Radial Gauge 
• Geospatial Map 
• Excel Spreadsheet 
• Excel Library 
• Zoom Slider 
• … and more

 

With Ignite UI for Web Components you can build sophisticated data grid apps like this:

Rich Geo-spatial applications:

Expressive Tree Map Analysis Tools:

Interactive Dashboards:

 

And Real-time data grids:

For pretty much any line of business scenario, we have you covered!

Wrap Up

We are pretty excited about what Web Components can offer, especially if you are building a vanilla JS app or need some rich UI controls in a framework we don’t currently support. To get started, you can follow the steps on this page:

https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started.html

And browse all of the great samples here:

https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/data-grid.html

And that's it! You're now ready to start using the Ignite UI for Web Components in your next app.  If you have any questions or features requests, or just want to talk about the types of apps you are building, shoot me an email at jasonb@infragistics.com.  

I also want to thank Graham Murray, a Sr. Product Architect on the team for his detailed Web Components background that I used in this blog.  To talk to folks like Graham on our team and get this sort of insight, make sure to attend our Office Hours hosted monthly by Brian Lagunas where our product architects, team leads and developers are online to answer anything you throw at them!

Thanks, and Happy Coding!

 

Jason