[Patternfly] Patternfly SASS and ReactJS support

Fri Jun 3 17:13:37 UTC 2016

Hi Brian and Jeff,

to support diversity among PF users, and in turn make PF easier to adopt
in different projects, I suggest to simply avoid relying on JS frameworks.

Frameworks usually attempt to cover all (or most) aspects of development,
reusable components included. Frameworks usually do impose architectural
constraints, e.g. Model-View-Controller having impact on how you design
your application. PF should be about reusable components with a specific
look'n'feel to them, agnostic to how the given application is designed.

Instead, I suggest to rely on either web standards only (web components)
or if that's problematic, rely on JS support libraries. This way, others
are not locked into specific JS framework just because of PF using it for
the sole purpose of having reusable components.

For example, there's a reason why Bootstrap's interactive components are
based on jQuery (library) and not on Angular or similar (framework). The
jQuery library has been around since like.. forever, and it's still used.

React is a library focused on writing reusable components. It's extremely
popular these days and there's a reason to it - it has a very simple API
and generally stays agnostic to how you design your app or manage data.
It's a building block on top of which other frameworks can be used.

I'm a bit sceptical about web components, Google's pushing Polymer quite
strongly [1] and Chrome natively supports all web component specs, but
the question is if it's worth commiting to that right now. Some PoC that
compares web components to say React components would be nice.

[1] https://www.youtube.com/playlist?list=PLNYkxOF6rcIDnSm7bZRJC36Ca1DYXSQ70

Please consider that using web components specs alone isn't very viable,
since the standards don't cover advanced concepts like data binding etc.
Some could say that "Polymer is web component's jQuery". The question
becomes whether it isn't just easier to use single, dedicated library
designed for the job (like React) vs. using e.g. standards (+ polyfills)
+ Polymer.

Some might say that the line between framework vs. library gets blurry
in JS world, and they may be right. The reason why I mentioned this is
based on the fact that libraries live much, much longer than frameworks.

Regards,
Vojtech

----- Original Message -----
> From: "Jeffrey Phillips" <jephilli at redhat.com>
> To: "Brian Leathem" <bleathem at redhat.com>
> Cc: "Vojtech Szocs" <vszocs at redhat.com>, "patternfly" <patternfly at redhat.com>, "Alexander Wels" <awels at redhat.com>,
> "Oved Ourfali" <oourfali at redhat.com>, "Kathryn Gough" <kgough at redhat.com>
> Sent: Friday, June 3, 2016 2:41:55 PM
> Subject: Re: [Patternfly] Patternfly SASS and ReactJS support
> 
> 
> I agree with Brian. We should be looking at ways to extend the usage of
> Patternfly into multiple frameworks. This would grow the community and
> hasten the growth of Patternfly’s features and adoption. Web components
> seems like a promising mechanism to enable this with less effort than having
> specific repositories for each framework. I would love to see a POC around
> this to see just what could be accomplished.
> 
> Jeff
> 
> > On Jun 2, 2016, at 7:08 PM, Brian Leathem <bleathem at redhat.com> wrote:
> > 
> > I've been thinking a lot about how patternfly can grow to support the
> > diversity in product ui implementations and the even larger diversity we
> > will see in the community.  Patternfly will suffer if we are continually
> > chasing the js framework of the day, as providing support for a framework
> > is a long term commitment and can not be discarded easily.  And yet the
> > ever-changing nature of the js framework space means we cannot simply
> > choose one framework and ignore the rest.
> > 
> > Fortunately I believe the emerging web component specification [1] can
> > provide us with a solution to this dilemma.  Many of the current and
> > emerging js frameworks are targeting web components with their UI model.
> > If we were to target web components with our own reference
> > implementation, we would then be able to more easily support a larger
> > number of frameworks with smaller effort.  We can in effect view web
> > components as the lingua franca between ui frameworks.
> > 
> > This idea obviously needs further exploration and a proof of concept, but
> > it's a story we should keep in mind as we formulate our js framework
> > strategy.
> > 
> > Brian Leathem
> > 
> > [1] http://webcomponents.org <http://webcomponents.org/>
> > On Jun 1, 2016 6:41 PM, "Vojtech Szocs" <vszocs at redhat.com
> > <mailto:vszocs at redhat.com>> wrote:
> > Hi everyone,
> > 
> > the react-patternfly project on GitHub [1] was initiated by Jirka Tomasek
> > as a way to share common PatternFly components for use with React library.
> > 
> > [1] https://github.com/jtomasek/react-patternfly
> > <https://github.com/jtomasek/react-patternfly>
> > 
> > For now, it only contains data table component originally taken from the
> > rdo-director-ui [2], which seems to be now replaced by tripleo-ui [3].
> > 
> > [2]
> > https://github.com/rdo-management/rdo-director-ui/tree/master/src/js/components/ui/tables
> > <https://github.com/rdo-management/rdo-director-ui/tree/master/src/js/components/ui/tables>
> > [3]
> > https://github.com/openstack/tripleo-ui/tree/master/src/js/components/ui/tables
> > <https://github.com/openstack/tripleo-ui/tree/master/src/js/components/ui/tables>
> > 
> > We're using React in oVirt (Dashboard). We basically implemented Angular
> > directives from angular-patternfly [4], which were needed for our project,
> > as React components.
> > 
> > [4] https://github.com/patternfly/angular-patternfly/
> > <https://github.com/patternfly/angular-patternfly/>
> > 
> > As soon as we have more time, we'd like to contribute React components
> > we've developed in oVirt into react-patternfly. I believe that diversity
> > is good for community, React is very popular these days, allowing people
> > to share/contribute React/PF components will have positive impact on the
> > overall PatternFly adoption.
> > 
> > >From technical standpoint, React is a library and Angular is a framework.
> > This means it should be possible to mix both if needed, e.g. an existing
> > project using Angular might adopt React for its widgets. There are some
> > nice projects to bridge gaps between the two, for example ngReact [5].
> > 
> > [5] https://github.com/ngReact/ngReact <https://github.com/ngReact/ngReact>
> > 
> > Regards,
> > Vojtech
> > 
> > 
> > ----- Original Message -----
> > > From: "Andres Galante" <agalante at redhat.com <mailto:agalante at redhat.com>>
> > > To: "Jeffrey Phillips" <jephilli at redhat.com <mailto:jephilli at redhat.com>>
> > > Cc: "Greg Sheremeta" <gshereme at redhat.com <mailto:gshereme at redhat.com>>,
> > > "patternfly" <patternfly at redhat.com <mailto:patternfly at redhat.com>>,
> > > "Vojtech Szocs"
> > > <vszocs at redhat.com <mailto:vszocs at redhat.com>>, "Alexander Wels"
> > > <awels at redhat.com <mailto:awels at redhat.com>>, "Kathryn Gough"
> > > <kgough at redhat.com <mailto:kgough at redhat.com>>, "Oved Ourfali"
> > > <oourfali at redhat.com <mailto:oourfali at redhat.com>>
> > > Sent: Wednesday, May 25, 2016 1:52:34 AM
> > > Subject: Re: [Patternfly] Patternfly SASS and ReactJS support
> > >
> > > Hi kathryn, here is the supported sass version of patternfly:
> > >
> > > https://github.com/patternfly/patternfly-sass
> > > <https://github.com/patternfly/patternfly-sass>
> > >
> > > I agree with Brian, we should think of a way to support different
> > > frameworks. How can we do it?
> > >
> > > Thanks
> > >
> > > Andres
> > >
> > > On Tuesday, 24 May 2016, Jeffrey Phillips <jephilli at redhat.com
> > > <mailto:jephilli at redhat.com>> wrote:
> > >
> > > > There is also  https://github.com/jtomasek/react-patternfly
> > > > <https://github.com/jtomasek/react-patternfly> .
> > > >
> > > > Jeff
> > > >
> > > >
> > > > On May 24, 2016, at 7:15 PM, Greg Sheremeta <gshereme at redhat.com
> > > > <mailto:gshereme at redhat.com>
> > > > <javascript:_e(%7B%7D,'cvml','gshereme at redhat.com
> > > > <mailto:gshereme at redhat.com>');>> wrote:
> > > >
> > > > Also, we have some preliminary work here: [1] [2]
> > > >
> > > > These are components for a dashboard we've built. Seems like we have a
> > > > good starting point for a react-patternfly project.
> > > >
> > > > Greg
> > > >
> > > > [1]
> > > > https://gerrit.ovirt.org/gitweb?p=ovirt-engine-dashboard.git;a=tree;f=src/components/patternfly
> > > > <https://gerrit.ovirt.org/gitweb?p=ovirt-engine-dashboard.git;a=tree;f=src/components/patternfly>
> > > > [2]
> > > > https://gerrit.ovirt.org/gitweb?p=ovirt-engine-dashboard.git;a=tree;f=src/components/bootstrap
> > > > <https://gerrit.ovirt.org/gitweb?p=ovirt-engine-dashboard.git;a=tree;f=src/components/bootstrap>
> > > >
> > > >
> > > > On Tue, May 24, 2016 at 7:00 PM, Greg Sheremeta <gshereme at redhat.com
> > > > <mailto:gshereme at redhat.com>
> > > > <javascript:_e(%7B%7D,'cvml','gshereme at redhat.com
> > > > <mailto:gshereme at redhat.com>');>> wrote:
> > > >
> > > >> Re: React, it's early to say, but we're using both React and
> > > >> PatternFly
> > > >> in oVirt, and I could see us making a react-patternfly library soon.
> > > >> Let's
> > > >> keep in touch on that :)
> > > >>
> > > >> Best wishes,
> > > >> Greg
> > > >>
> > > >> On Tue, May 24, 2016 at 6:25 PM, Kathryn Gough <kgough at redhat.com
> > > >> <mailto:kgough at redhat.com>
> > > >> <javascript:_e(%7B%7D,'cvml','kgough at redhat.com
> > > >> <mailto:kgough at redhat.com>');>> wrote:
> > > >>
> > > >>> Hello
> > > >>>
> > > >>> I'm a member of the Zanata translation project with Red Hat and am
> > > >>> interested in using the Patternfly framework, particularly the SASS
> > > >>> port.
> > > >>>
> > > >>>
> > > >>> Do you officially support SASS? Also, are there any future plans to
> > > >>> integrate with ReactJS?
> > > >>>
> > > >>> Kindest regards,
> > > >>>
> > > >>> Kathryn
> > > >>>
> > > >>> --
> > > >>> [image: photo]
> > > >>> Kathryn Gough
> > > >>> Web Developer
> > > >>> G11n (Globalisation)
> > > >>> Red Hat, Inc
> > > >>>
> > > >>> 61 7 3514  7119 // au.redhat.com <http://au.redhat.com/>
> > > >>> <http://redhat.com/ <http://redhat.com/>>//
> > > >>> kgough at redhat.com <mailto:kgough at redhat.com>
> > > >>> <http://jdavila@redhat.com/ <http://jdavila@redhat.com/>>//
> > > >>> Brisbane, AU
> > > >>>
> > > >>>
> > > >>>
> > > >>> _______________________________________________
> > > >>> Patternfly mailing list
> > > >>> Patternfly at redhat.com <mailto:Patternfly at redhat.com>
> > > >>> <javascript:_e(%7B%7D,'cvml','Patternfly at redhat.com
> > > >>> <mailto:Patternfly at redhat.com>');>
> > > >>> https://www.redhat.com/mailman/listinfo/patternfly
> > > >>> <https://www.redhat.com/mailman/listinfo/patternfly>
> > > >>>
> > > >>>
> > > >>
> > > >>
> > > >> --
> > > >> Greg Sheremeta, MBA
> > > >> Red Hat, Inc.
> > > >> Sr. Software Engineer
> > > >> gshereme at redhat.com <mailto:gshereme at redhat.com>
> > > >> <javascript:_e(%7B%7D,'cvml','gshereme at redhat.com
> > > >> <mailto:gshereme at redhat.com>');>
> > > >> 919-741-4016 <tel:919-741-4016>
> > > >>
> > > >
> > > >
> > > >
> > > > --
> > > > Greg Sheremeta, MBA
> > > > Red Hat, Inc.
> > > > Sr. Software Engineer
> > > > gshereme at redhat.com <mailto:gshereme at redhat.com>
> > > > <javascript:_e(%7B%7D,'cvml','gshereme at redhat.com
> > > > <mailto:gshereme at redhat.com>');>
> > > > 919-741-4016 <tel:919-741-4016>
> > > > _______________________________________________
> > > > Patternfly mailing list
> > > > Patternfly at redhat.com <mailto:Patternfly at redhat.com>
> > > > <javascript:_e(%7B%7D,'cvml','Patternfly at redhat.com
> > > > <mailto:Patternfly at redhat.com>');>
> > > > https://www.redhat.com/mailman/listinfo/patternfly
> > > > <https://www.redhat.com/mailman/listinfo/patternfly>
> > > >
> > > >
> > > >
> > >
> > 
> > _______________________________________________
> > Patternfly mailing list
> > Patternfly at redhat.com <mailto:Patternfly at redhat.com>
> > https://www.redhat.com/mailman/listinfo/patternfly
> > <https://www.redhat.com/mailman/listinfo/patternfly>
> > _______________________________________________
> > Patternfly mailing list
> > Patternfly at redhat.com
> > https://www.redhat.com/mailman/listinfo/patternfly
> 
> 