Skip to content

Instantly share code, notes, and snippets.

@bleathem
Last active February 28, 2017 19:01
Show Gist options
  • Save bleathem/59bcdfaaac0c347d59665762745ed674 to your computer and use it in GitHub Desktop.
Save bleathem/59bcdfaaac0c347d59665762745ed674 to your computer and use it in GitHub Desktop.
PatternFly Web Components / Framework-Native Proposal

PatternFly Web Components / Framework-Native Proposal

Where we stand

The PatternFly roadmap outlines a proposal to scale framework support by adopting a Web Component based solution for implementing pattern behaviours to support multiple web frameworks.

By building prototypes for PatternFly-webcomponents, we have shown that framework integration of web components is possible, but benefits from the introduction of framework-specific shims to provide application developers with a framework-native experience when consuming the web components.

The problem

Front-end developers are by-and-large in favor of the web component approach for implementing pattern behaviours. However, we need to achieve a critical mass of pattern implementations in order for developers to adopt the solution and begin contributing back their own implementations.

A possible solution

As a means of bootstrapping the webcomponent effort, we are considering that we start our framework integrations with a mix of web component and framework-native implementations. As community members want to implement patterns in a PatternFly-framework component library, they are encouraged to submit a PR with either a wrapped-web-component implementation, or with a framework-native implementation. At a later point, the framework-native implementation would be replaced when the web-component implementation is available.

                          +-------------------+
                          |                   |
                          | PatternFly-design |
                          |                   |
                          +---------+---------+
                                    |
                          +---------v--------+
                          |                  |
                          |  PatternFly-css  |
                          |                  |
                          +---------+--------+
                                    |
                      +-------------v------------+
                      |                          |
                      | PatternFly-webcomponents |
                      |                          |
                      +---+---+---------+---+----+
                          |   |         |   |
+---------------------+   |   |         |   |    +-------------------+
|                     |   |   |         |   |    |                   |
| PatternFly-Angular  <---+   |         |   +----> PatternFly-jQuery |
|                     |       |         |        |                   |
+---------------------+       |         |        +-------------------+
                              |         |
           +------------------v--+   +--v---------------+
           |                     |   |                  |
           | PatternFly-Angular2 |   | PatternFly-React |
           |                     |   |                  |
           +---------------------+   +------------------+

Web Components as the Reference Implementation

Web components would serve as the reference implementation of our patterns, and would be integrated in the various PatternFly-framework libraries. Application UX would benefit from a consistent pattern behaviour implementation across frameworks.

@kahboom
Copy link

kahboom commented Feb 24, 2017

Any word on the Angular 2 - PatternFly repository? Sorry hopefully not being too pushy, but I have a few people on my team asking if this is going to be possible prior to RH Summit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment