The goals for PatternFly 4 are primarily focused on modernizing the Angular-PatternFly project, and consist of:

Angular-PatternFly 4 will consist of a refactor of all our Angular directives as Angular 1.5 components. This is a comparatively simple re-factor and enables Angular 2 applications to consume our existing pattern implementations. Look for additional blog posts detailing how to build such Angular 2 applications as we roll out our initial Angular 1.5 components. This migration has the follow-on effect that all downstream applications will have to upgrade to Angular 1.5 to stay current with PatternFly releases.

In addition to this directive → component refactor, we will introduce a number of dependency upgrades into Angular-PatternFly with this major release. Most notably we will update our ui-bootstrap dependency to the latest release, an update a number of developers have been asking for.

The Angular-PatternFly jQuery dependency will be made optional in this 4.0 release. Several of our pattern implementations will continue to be built around jQuery, but if an application doesn’t use those patterns, then the jQuery dependency will not be required.

It should be noted that these updates will result in some directive API changes, implying minor code changes in downstream applications. It is for this reason that we are incrementing the major version to 4 with this release.

The changes to our PatternFly “core” repository are less significant in the 4.0 release. They primarily involve breaking apart the “core” repo into one for CSS and one for the jQuery pattern implementations. Re-structuring the repositories in this manner puts the jQuery pattern implementations on an even level with the Angular-PatternFly implementations.

PatternFly consists of:

We will have an initial alpha release of the PatternFly and Angular-PatternFly projects in January. This first alpha is expected to be sufficiently complete to try it out in downstream applications. We will stabilize our APIs and implementations with follow-on alpha and beta releases, aiming to get to a final release a timely manner.

The scope of PatternFly 5 is much larger than the scope of PatternFly 4. With PatternFly 5, we are working to scale PatternFly in a number of areas:

The roadmap below covers how we’ve solved these challenges and are pushing PatternFly forward to power great user experiences through open source design.

In PatternFly 5, we are adopting a modular approach in both our CSS and Javascript implementations. This modular approach offers a number of advantages:

We are using the atomic design system by Brad Frost to implement our modular design system for PatternFly 5. Implementing our CSS in such a modular fashion involves a full rewrite, which provides a good opportunity to adopt Bootstrap 4. We’ve also developed a set ofhttps://github.com/andresgalante/patternfly-atomic/blob/code-guidelines/CODE-GUIDELINES.md[CSS guidelines] based on BEM to ensure we develop performant and maintainable CSS.

The PatternFly 4 work to move to Angular 1.5 components offers a useful stop gap, enabling Angular 2 development, but does not offer a suitable long term strategy. Nor does it address the requests to support React and other web UI frameworks. To understand what it means for PatternFly to support a web framework, let’s review our current deliverables.

PatternFly 3 and 4 deliverables consist of:

The behaviors associated with patterns are implemented as both jQuery plugins as well as Angular 1 directives/components. We could support Angular 2 and React by developing both Angular 2 components and React components, effectively doubling the number of behavior implementations we develop and support for each pattern. However, this is an approach that does not scale.

Instead, we are looking tohttp://webcomponents.org/[web components] as the solution to scale out our PatternFly framework support. We are focusing on the Custom Element specification in particular, and the corresponding polyfill. We will consider incorporating the remaining web component specifications into our solution in the future, after they have had a chance to mature.

Browser support for custom elements (when incorporating the polyfill), provide support for relatively current browser releases, and provides support for IE as far back as IE 10. This is acceptable for new applications, and applications that adopt modern browser support statements. We recognize that there are applications in production that will have an ongoing requirement to support older browsers for some time. We are recommending applications with such requirements stay on PatternFly 4, and wait to move to PatternFly 5 until their browser requirements are aligned with what is supported by PatternFly 5.

Support for internationalization and accessibility are increasingly requested features for PatternFly. However, retro-fitting those concerns into our existing framework has proven to be a difficult task. As such, we are baking solutions for these concerns into our web component development process to ensure the problem is solved from the get-go in PatternFly 5.

Work has already begun on PatternFly 5. The CSS rewrite is being done in a patternlab instance, check it out at http://www.PatternFly.org/patternfly-atomic/. Get involved with the CSS rewrite in the #css-army channel of the PatternFly slack.

Similarly, work has begun on the webcomponent effort, finalizing the details of our web component prototype. Check it out on github https://github.com/patternfly-webcomponents and get involved via the #webcomponents channel in our PatternFly slack.

Look for an initial alpha release with our PatternFly-core CSS (including our new style updates) and a few initial web components in the coming months.