Skip to main content
Redhat Developers  Logo
  • Products

    Platforms

    • Red Hat Enterprise Linux
      Red Hat Enterprise Linux Icon
    • Red Hat AI
      Red Hat AI
    • Red Hat OpenShift
      Openshift icon
    • Red Hat Ansible Automation Platform
      Ansible icon
    • View All Red Hat Products

    Featured

    • Red Hat build of OpenJDK
    • Red Hat Developer Hub
    • Red Hat JBoss Enterprise Application Platform
    • Red Hat OpenShift Dev Spaces
    • Red Hat OpenShift Local
    • Red Hat Developer Sandbox

      Try Red Hat products and technologies without setup or configuration fees for 30 days with this shared Openshift and Kubernetes cluster.
    • Try at no cost
  • Technologies

    Featured

    • AI/ML
      AI/ML Icon
    • Linux
      Linux Icon
    • Kubernetes
      Cloud icon
    • Automation
      Automation Icon showing arrows moving in a circle around a gear
    • View All Technologies
    • Programming Languages & Frameworks

      • Java
      • Python
      • JavaScript
    • System Design & Architecture

      • Red Hat architecture and design patterns
      • Microservices
      • Event-Driven Architecture
      • Databases
    • Developer Productivity

      • Developer productivity
      • Developer Tools
      • GitOps
    • Automated Data Processing

      • AI/ML
      • Data Science
      • Apache Kafka on Kubernetes
    • Platform Engineering

      • DevOps
      • DevSecOps
      • Ansible automation for applications and services
    • Secure Development & Architectures

      • Security
      • Secure coding
  • Learn

    Featured

    • Kubernetes & Cloud Native
      Openshift icon
    • Linux
      Rhel icon
    • Automation
      Ansible cloud icon
    • AI/ML
      AI/ML Icon
    • View All Learning Resources

    E-Books

    • GitOps Cookbook
    • Podman in Action
    • Kubernetes Operators
    • The Path to GitOps
    • View All E-books

    Cheat Sheets

    • Linux Commands
    • Bash Commands
    • Git
    • systemd Commands
    • View All Cheat Sheets

    Documentation

    • Product Documentation
    • API Catalog
    • Legacy Documentation
  • Developer Sandbox

    Developer Sandbox

    • Access Red Hat’s products and technologies without setup or configuration, and start developing quicker than ever before with our new, no-cost sandbox environments.
    • Explore Developer Sandbox

    Featured Developer Sandbox activities

    • Get started with your Developer Sandbox
    • OpenShift virtualization and application modernization using the Developer Sandbox
    • Explore all Developer Sandbox activities

    Ready to start developing apps?

    • Try at no cost
  • Blog
  • Events
  • Videos

Are "Web Components" in the future for PatternFly?

August 9, 2016
Dana Gutride
Related products:
Developer Tools

Share:

    Web development has become increasingly complicated in recent years.  The questions of which framework to use often can eat up much time at the start of a project.  I can't remember the number of times people have asked me while working on a Knockout project if I've heard of Durandal, or when considering Angular 2 - what about React/Flux or Aurelia?

    Patternfly is a community project that promotes design commonality and improved user experience. Its offerings include open source code, patterns, style guides and an active community that helps support it all. But, this complexity, choosing web frameworks, also affects PatternFly.  Our goal is "to build a UI framework for enterprise web applications".  That requires that we remain outside of the discussion of which framework is best and provide a solid set of patterns and designs for developers to rely on.

    How can you build a UI framework when there are so many choices and so many strong feelings about the different choices?  In my opinion, it's important for developers to choose the framework that is best for the project and fits their skill set.  There isn't one choice that works for everybody and it's important that we support all developers that want the benefit of well-designed components that can be used in enterprise applications.

    Web Components - an answer?

    One way you remain outside the fray of which UI library is best is by staying as close as possible to the platform you are delivering to.  In our case, it's the browser.  Browser makers all have agreed to implement the W3C specification so this instantly puts those specifications in a pivotal place for us.  In recent years, Web Components have been introduced as a potential means of solving the differences between UI Frameworks.  You can read the specifications if you are interested here: https://www.w3.org/standards/techs/components#w3c_all.  The various browser teams have already started implementing these specifications at least to some level and commitment is being considered across the board as you can see from this link:  http://jonrimmer.github.io/are-we-componentized-yet/.   Some browsers don't have 100% support for all of the features so we'd use a polyfill to handle those missing gaps.

    One promise of Web Components is to help developers base reusable components on web standards implemented in all browsers.  For a project like PatternFly, the value became immediately clear once we started reading through the specifications.  Instead of needing to potentially provide a version of PatternFly for each possible framework (Angular, React, jQuery...), we could create one core PatternFly Web Component library with examples of how to use these in each framework, updating the examples as new frameworks invariably come along.

    What does a Web Component look like?

    We've created an example using some help from https://github.com/MikeCostello/bootstrap-web-components:

    You can see a Bootstrap progress bar Web Component here: https://github.com/dgutride/patternfly-web-components/blob/master/components/pf-progress.html

    To use this Web Component in normal HTML, it's really quite simple to pull it in.  One of the features of Web Components is the ability to include and reuse HTML documents in other HTML documents - https://w3c.github.io/specs.html.  The example below demonstrates what this looks like in practice.:

    <link rel="import" href="components/pf-progress.html" />

    Then to use the component in code:

    <pf-progress value="40" type="success"></pf-progress>

    For any framework to use this, they'd only need to bind to the attributes. This is already a very common thing frameworks need to do with other HTML attributes, such as setting a class name for a div. Here is an example of how one could use this in a React project:

    https://github.com/dgutride/patternfly-web-components/blob/master/index.html

    Where do we go from here?

    This is just a small glimpse into what we are thinking of for PatternFly's future.  We plan on blogging about other aspects of Web Components shortly as well (Shadow DOM, ES6 modules/tree-shaking benefits and Angular 2 examples of Web Component use).

    Now is the time for you to get involved!  How do you feel about this possible direction for PatternFly?  Is the benefit obvious or are there use cases we aren't considering?  Please join our mailing list, on gitter or on IRC - Freenode at #patternfly to be part of the conversation.

    For more information on our community and how to get involved with PatternFly visit http://www.patternfly.org/community/.

    Last updated: February 6, 2024

    Recent Posts

    • Cloud bursting with confidential containers on OpenShift

    • Reach native speed with MacOS llama.cpp container inference

    • A deep dive into Apache Kafka's KRaft protocol

    • Staying ahead of artificial intelligence threats

    • Strengthen privacy and security with encrypted DNS in RHEL

    Red Hat Developers logo LinkedIn YouTube Twitter Facebook

    Products

    • Red Hat Enterprise Linux
    • Red Hat OpenShift
    • Red Hat Ansible Automation Platform

    Build

    • Developer Sandbox
    • Developer Tools
    • Interactive Tutorials
    • API Catalog

    Quicklinks

    • Learning Resources
    • E-books
    • Cheat Sheets
    • Blog
    • Events
    • Newsletter

    Communicate

    • About us
    • Contact sales
    • Find a partner
    • Report a website issue
    • Site Status Dashboard
    • Report a security problem

    RED HAT DEVELOPER

    Build here. Go anywhere.

    We serve the builders. The problem solvers who create careers with code.

    Join us if you’re a developer, software engineer, web designer, front-end designer, UX designer, computer scientist, architect, tester, product manager, project manager or team lead.

    Sign me up

    Red Hat legal and privacy links

    • About Red Hat
    • Jobs
    • Events
    • Locations
    • Contact Red Hat
    • Red Hat Blog
    • Inclusion at Red Hat
    • Cool Stuff Store
    • Red Hat Summit
    © 2025 Red Hat

    Red Hat legal and privacy links

    • Privacy statement
    • Terms of use
    • All policies and guidelines
    • Digital accessibility

    Report a website issue