Experimenting with Hype and VUE.js

(Loves Hype) #1

This thread is about experiments with VUE and Hype. If you never heard about VUE it’s basically a reactive Javascript library. Meaning it offers things that go beyond jQuery like two way binding and easy reusable components. It follows in the footsteps of ReactJS but has a smaller learning curve and offers the usage of the library from a CDN (not forcing you to use a full development stack like nodejs+webpack etc., although you can if you want).

Read more about it here …

This simple example is implementing the VUE.js example (on their site) inside of a Hype project. In this case it shows how easy one can create a MarkDown Editor. This example is thereby very specific and uses some extra libraries like marked.js and lodash.js. I just thought as it is the official example I’d use this first:

Download Example “MarkDown Editor”:
MarkDownEditor-UsingVUEinsideOfHype.hype

Vue.js inside of Hype
(Loves Hype) #2

Here are some more ressources

And here is a introduction to VUE.js

(Loves Hype) #3

Here is a example using components in Hype. This has the advantage that one can use VUE just in certain places as encapsulated components and the use the data from them in animations or other parts of the document.

The example uses the Bluefy Component Library! Nice stuff.

The example is fetching data from a Movie Database (please use your own API key in production) and from the Buefy example repository.

Download:
UsingBuefy-UsingVUEinsideOfHype.hype.zip

(Cipsteroni) #4

I’m learning ReactJS. Here in Europe is it JS interface library of choice. If it works in Vue, it should work in React.

You can create any component that contains html, css, js. I guess the key is if ReactDOM.render can render all of the Hype docs in a way thats seemless.

My goal (or at least try) is to implement Hype into ReactJS. Wish me luck.

I’ll let you guys know,

(Loves Hype) #5

I am from Berlin. Cheers. The statement if it works in React it works in Vue is, if I am not mistaken, only partly true. The difference being that Vue allows a CDN inclusion. The example here uses Vue inside of Hype. Wrapping Hype into Vue or React (so the other way around) might be problematic as you got two view library managing a „virtual DOM“ at once. If you consider the entire hype document as a component you might also run into problems as Vue / React will re-render the branch and thereby reset the Hype document on updates. If you manage on getting external parameter passed in and avoid any kind of initialitation flicker your still not golden as the Hype document loader doesn’t clean up after itself properly. You could run into garbage collection issues … but in case of an implementation in twine where I am using Hype as components I added a manual garbage collection but it’s rudemantry at best.

(Cipsteroni) #6

Ok. I’m in Bergen, Norway. Skål!
Looks like it maybe more complicated than I thought. :frowning:

React allows CDN inclusion as well.

The two kinds of React web apps are 1) single pages documents where content is (re)rendered client side and all the components can pass data between each other an know each others states. 2) Multi page apps where there are React component snippets reside in a standard html page. The React components do not know the existense of each other.

Based on this, the simple solution is #2 where you can place the Hype docs in the non React sections of the page. But the down side of this is that you aren’t taking advantage of the fast client side processing that React is famous for.

I need to read up more on and learn how the Hype docs works and then see if its possible to use #1 in implementing Hype. A lot to learn.

Ciao 4 now!

45%20PM
Screen Shot 2018-12-30 at 1.43.45 PM.png2808x1342 746 KB

(Loves Hype) #7

The solution with Vue as components inside of Hype should work. What I am referencing with a simple CDN hookup of Vue is that React usually needs a build pipeline. There are workarounds for React though but they are not intended out of the box: