<div dir="ltr">Hi Jonathan,<div><br></div><div>Thanks for reaching out to the PatternFly ML with your question about VueJs.  I love the enthusiasm you're sharing around this new framework!</div><div><br></div><div>To date Patternfly supports jQuery and Angular 1 development through the patternfly "core" [1] and angular-patternfly [2] projects.  We have had a number of requests to add support for both Angular 2, and React.  This is our first request for VueJS support :-)</div><div><br></div><div>As you can imagine, scaling out to support each new javascript web framework with a set of "native" components for that framework is just not an approach that would scale.  In the above scenario we would go from 2 javascript behaviour implementations for each of our patterns, to 5 implementations - that's a significant increase!</div><div><br></div><div>As such we've been looking heavily at pursuing a web component approach for supporting the next generation of javascript web frameworks.  With a web component approach we can support many new frameworks with the introduction of a single new development stream.  We are currently working out a prototype architecture for such a web component [3] approach, and are hopefully to have a roadmap to share shortly on how we plan to move forward with such an approach.</div><div><br></div><div>If you would like to investigate web component interop with VueJS (specifically using the custom elements spec), I would be very interested to hear your results.  Alternatively, you are more than welcome to build off the Paternfly CSS with your own javascript behaviour implementations - I'd also be happy to hear of any progress you make in this regard.</div><div><br></div><div>Cheers,</div><div>Brian Leathem</div><div><br></div><div>[1] <a href="https://github.com/patternfly/patternfly">https://github.com/patternfly/patternfly</a></div><div>[2] <a href="https://github.com/patternfly/angular-patternfly">https://github.com/patternfly/angular-patternfly</a></div><div>[3] <a href="https://github.com/patternfly-webcomponents">https://github.com/patternfly-webcomponents</a></div><div><div class="gmail_extra"><br><div class="gmail_quote">On Mon, Nov 14, 2016 at 7:07 AM, Jonathan Yu <span dir="ltr"><<a href="mailto:jawnsy@redhat.com" target="_blank">jawnsy@redhat.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div class="gmail_extra"><br><div class="gmail_quote"><span class="gmail-">On Mon, Nov 14, 2016 at 5:44 AM, Andres Galante <span dir="ltr"><<a href="mailto:agalante@redhat.com" target="_blank">agalante@redhat.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr">Hey <span style="font-size:12.8px">Jonathan,</span><div><span style="font-size:12.8px"><br></span></div><div><span style="font-size:12.8px">Vue sounds really intresting, y</span><span style="font-size:12.8px">esterday I've read the best tweet about it:</span></div><div><div><br></div><div><span style="font-size:12.8px"></span><a href="https://twitter.com/sarah_edo/status/797574272692748288" target="_blank">https://twitter.com/sarah_edo/<wbr>status/797574272692748288</a></div></div></div></blockquote><div><br></div></span><div>I follow Sarah too, and saw that tweet, it's certainly quite the endorsement coming from her!<br> <br></div><span class="gmail-"><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div></div><div>I am not a javascripter, but I wonder how the web components story aligns with Vue.</div></div></blockquote><div><br></div></span><div>>From what I can tell (I also can't call myself a JavaScript or even a web guy), Vue borrowed the syntax from Web Components to form their *.vue component files (though it's not mandatory - you can define everything using the JavaScript API).  I think they borrow concepts heavily from a bunch of other frameworks, which is a really good sign for me: it means they're looking around the ecosystem, figuring out what works, and adopting it.<br><br></div><div>So you can author Vue components with the ease with which you author Web Components, Polymer, or Angular templates, but everything gets compiled down to fast JavaScript (similar to React).  I think the main advantage right now is practicality: Web Components are awesome, and I believe they're the future of the web, but it'll be some time before the future gets here (many folks still use IE8 or IE9, not to mention older mobile devices that no longer receive updates).  So Vue lets you write Web Component things but in a way that's compatible with any ES5-supporting browser (IE9+), and in a way that performs well (the comparison mentions that Polymer works on IE9+ using polyfills, but is very slow as a result).<br><br></div><span class="gmail-"><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div class="gmail_extra"><br><div class="gmail_quote"><div><div class="gmail-m_-2896370029907915520h5">On Sun, Nov 13, 2016 at 3:42 PM, Jonathan Yu <span dir="ltr"><<a href="mailto:jawnsy@redhat.com" target="_blank">jawnsy@redhat.com</a>></span> wrote:<br></div></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div><div class="gmail-m_-2896370029907915520h5"><div dir="ltr"><div><div><div><div>Hello PatternFlyers!<br><br></div>I know, I know - <a href="https://javascript-game.firebaseapp.com/" target="_blank">another year, another whiz-bang JavaScript framework</a> (no, really, try this game) - but I've been playing with <a href="https://vuejs.org/" target="_blank">Vue</a> (2.0 was just released <a href="https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8" target="_blank">a few months ago</a>) and everything I've read about it seems pretty promising so far.<br><br>Despite being a relatively young project (starting in 2013), its tooling support seems fairly good, and there's quite an active ecosystem, including a port of Bootstrap's components called <a href="http://yuche.github.io/vue-strap/" target="_blank">VueStrap</a>.  The design borrows from various other initiatives, taking inspiration from Web Components, Polymer, and React, among others.  If you're not familiar with Vue, their documentation has a <a href="https://vuejs.org/v2/guide/comparison.html" target="_blank">great comparison with other technologies</a>.<br><br></div>In the summer, Dana Gutride asked if <a href="http://developers.redhat.com/blog/2016/08/09/are-web-components-in-the-future-for-patternfly/" target="_blank">Web Components are in the future for PatternFly</a>, and I wanted to start a discussion about Vue.  What would it take to get a Vue-ified PatternFly?  Would anyone be interested in trying this out with me, as a little hobby project?  (I've got lots of enthusiasm and some energy to put into this, but not much web-fu, so I could use a mentor!)<br><br></div><div>Bonus content: <a href="https://twitter.com/Real_CSS_Tricks/status/797799175442182144" target="_blank">a bunch of CSS-only components</a> (what is this sorcery?!)<br></div><div><br></div>Cheers,<br><br></div>Jonathan<span class="gmail-m_-2896370029907915520m_-501169450121685770HOEnZb"><font color="#888888"><br clear="all"><div><div><div><div><div><br>-- <br><div class="gmail-m_-2896370029907915520m_-501169450121685770m_2216424135801948195gmail_signature"><div dir="ltr"><div style="color:rgb(68,68,68);font-family:arial,"helvetica neue",helvetica,sans-serif;font-size:12px;font-style:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px"><span><span>Jonathan</span><span> </span><span>Yu</span><span> </span></span>/<span> </span><span>Software Engineer</span>,<span> </span><span>OpenShift</span><span> </span>by<span> </span><span>Red Hat</span><span> </span>/<span> </span><a href="https://twitter.com/jawnsy" style="color:rgb(49,175,89);text-decoration:none" target="_blank">Follow me on Twitter @jawnsy</a></div><br style="color:rgb(68,68,68);font-family:arial,"helvetica neue",helvetica,sans-serif;font-size:12px;font-style:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px"><i style="color:rgb(68,68,68);font-family:arial,"helvetica neue",helvetica,sans-serif;font-size:12px;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px">“Restlessness is discontent — and discontent is the first necessity of progress. Show me a thoroughly satisfied man — and I will show you a failure.”</i><span style="color:rgb(68,68,68);font-family:arial,"helvetica neue",helvetica,sans-serif;font-size:12px;font-style:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;float:none;display:inline"><span> </span>— Thomas Edison</span></div></div>
</div></div></div></div></div></font></span></div>
<br></div></div>______________________________<wbr>_________________<br>
Patternfly mailing list<br>
<a href="mailto:Patternfly@redhat.com" target="_blank">Patternfly@redhat.com</a><br>
<a href="https://www.redhat.com/mailman/listinfo/patternfly" rel="noreferrer" target="_blank">https://www.redhat.com/mailman<wbr>/listinfo/patternfly</a><br>
<br></blockquote></div><br></div>
</blockquote></span></div><br></div></div>
<br>______________________________<wbr>_________________<br>
Patternfly mailing list<br>
<a href="mailto:Patternfly@redhat.com">Patternfly@redhat.com</a><br>
<a href="https://www.redhat.com/mailman/listinfo/patternfly" rel="noreferrer" target="_blank">https://www.redhat.com/<wbr>mailman/listinfo/patternfly</a><br>
<br></blockquote></div><br></div></div></div>