Vuejs

[davidmoshal]

Hi, i'm wondering if you're thought about porting to Vue.js.

• very similar to Ractive.
• well supported, low issue count.
• very popular:
  • Vuejs: 28,000+ stars on github
  • Ractive: around 5,000
  • Angular: around 16,000
  • React: around 49,000

Dave

[andreaferretti]

Hi @davidmoshal Paths.js is in fact agnostic to the framework you use for rendering and can easily be used with vue.js (a colleague of mine has done it for an internal demo), as well as plain template languages such as Mustache, or even on the server side with Node.js. All paths.js does is generating strings from data that one can put as the d= attribute in <path> nodes (it is the attribute that describes the path shape).

Now, porting the demos to Vue.js is another thing entirely. For obvious reasons, I cannot mantain demos with all possible frameworks. My first example was using Ractive, while the most up to date is now using React. I hope these two are different enough that people can abstract the differences and use paths with their framework of choice.

That said, I would be happy to see demos using other technologies. Would you be willing to contribute some examples in vue.js?

[davidmoshal]

Thanks Andrea - in answer to your question:
Yes, I would be willing to contribute examples in Vue.js.

So far the translation of one of your demos from Ractive to Vue has resulted in much more concise and readable code, though, note that I'm actually using Typescript (vue-typescript), so these demos might not be that useful to your audience, and would require a different set-up to run.

I have to say that I've been really impressed with Vue. Interestingly, I actually suggested to Rich-Harris that he combine the script, html, and style sections in a single page, in 2013, see issue #299:

https://github.com/ractivejs/ractive/issues/299

Rich-Harris seemed interested: "A-ha! I understand perfectly. This is an excellent idea - I've been wondering about how best to package components up for distribution, and this is much better than anything I'd thought of so far." - Rich-Harris.

But it seems that it was Vuejs that ultimately implemented the concept.

David

[andreaferretti]

Well, my audience is not so well-defined: for instance, I mantain a scala.js wrapper of paths.js, together with a small demo (for simplicity, I stripped away most animations there).

It would be definitely nice to see some examples using TypeScript and Vue.js!

[davidmoshal]

Yep, I saw your Scala.js version. I was a fan of Scala 2010-2014, but working with json in Scala (JVM, not JS) was just too painful! 'Optional-typing' brings the best of both worlds, so my weapons of choice these days are Typescript and Groovy.

Great work on Path.js BTW - it's the best declarative charting library I've seen!

Dave

[ameistad]

I'm trying to get the tree demo working with Vue. I got everything working except the collapsing of nodes. Here is a gist of what i got so far.

Mind giving me some pointers on how to get collapsing of nodes working with Vue? If you're interested I could try to make some more demos with Vue once I get it working right.

[umi-soft]

do we support vue now?

[andreaferretti]

@umi-soft Uh, that's a strange question! As I mentioned at the beginning of this thread, Paths.js is completely framework-agnostic. It is also literally the first paragraph in the README :-)

It provides the primitives to create various shapes and charts starting from raw data, but it does not prescribe how you render these charts. This means you can use Paths.js to build components for your favorite frontend framework, and works even server-side on NodeJS.

You can use Paths.js with Vue today, and it has always been possible!

[andreaferretti]

Closing as not really an issue