Posted by & filed under Announcements, PatternFly, Web Components.

We’d like to take a chance to update the community on our Patternfly web components work. Progress continues on our web component prototype and you can now install an early alpha of our Alert, Tabs, Tooltip, and Utilization Bar Chart components with the npm module. We also have a new showcase site which provides documentation for getting started, component usage, and some demo applications for Angular1, Angular2, and React.

Framework Integrations

We’ve also started framework integration projects for Angular1, Angular2, and React. These modules can be consumed in cases where a framework integration helps in consuming the web component in a particular framework.

Angular 1 & Angular2 Integrations

One area framework integrations can help is in cases where you want to expose two way binding or custom events to a framework. In Angular1, we can “shim” this behavior. You can see an example of this here with our pf-tabs component shim.

Since Angular2 supports custom events by default, you’ll be able to consume web component custom events out of the box with Angular2. It is also generally discouraged to use two-way bindings in Angular2 (notes here). One place you will still find shims helpful though is when you are adding typings (for better Typescript support), or when you’d like to communicate to a component that content has changed. See our Tooltip component shim here for Angular2.

React Integrations

With React, the general pattern of “data in via attributes and properties, data out via events” applies very closely to our philosophy with web components and web component shims (so it’s a natural fit). There is a great post on these patterns here by Rob Dodson which explains this in more detail. Typically with React, our framework component shim is primarily responsible for three things:

  1. Defining a Class Component which internally renders our web component

  2. Mapping attributes and setting any type restrictions (prop types) which would be helpful to a React developer

  3. Handling nested DOM updates (where you are updating a binding inside the web component and triggering React’s componentDidUpdate method). In these cases we let the React shim notify the web component that its content has changed.

You can see this in action with our pf-tooltip jsfiddle.

Hopefully this clarifies some things about our framework integrations. I look for more framework integrations to make it in as our community grows!

Upcoming Plans

We have some ongoing work which should make its way into our patternfly-webcomponents project soon.

  • Adding v1 support for our custom elements. The web component polyfill was recently upgraded from the v0 specification to the v1 specification. This will change a few things like using “constructors” in our classes instead of the “createdCallback”, but should be a pretty minor upgrade for us. #28

  • New web component developments are underway for our Dropdown, Accordion, and Popover components. These will expose similar APIs to Bootstrap’s so they’ll fit right into your existing Bootstrap application. #24, #25, #26

  • New test pages. We’ll soon be incorporating test pages into our PR/development process with Travis so that you can review these at your leisure when reviewing a PR or you’d like to dive further into a web component example. #27

Getting involved

If you want to gain some experience working with Web Components, then check out our web component project on github, join our conversation on slack #webcomponents channel.  If you are eligible, we’d love to have you participate through our GSoC proposal.

We’d love your feedback on our progress so far and certainly appreciate any early alpha adopters. Please feel free to leave comments and questions in the Patternfly mailing list. We are always happy to hear how things are going on your end!

Leave a Reply

(will not be published)