Using a template system, instead of inline-HTML

[aalwash]

Hi,

I'm using the dashticz system now for a few weeks and it's awesome.
However, the inline-HTML in the JS code does bother me a lot.

Did you guys think about using a light template JavaScript engine?
I previously used Mustache and after that I used Ractive.js

Ractive.js is Mustache on steroids and has a lot of cool options (looping, two-way binding, partials, events, conditional sections, etc)

I think this will clean up the code a lot and make it more bug-"proof"

Of course, this a big change and a huge challenge, so this should be done in small peaces.

Check the tutorials https://ractive.js.org/tutorials/hello-world/

What do you guys think?

[aalwash]

Btw, the extra advantage of seperating the "model" and the view (template), we can unit test the code.

Now it's almost impossible to unit test the code, for expected behavior, since the code is changing a lot in the DOM.
If we start separating the templates and we the code only provides a data layer to the template, then you can unit test if the data output is working as expected.
Without bothering about the template part, which is handled by RactiveJS itself.

NOTE RactiveJS != ReactJS ;)
That's a more advanced system + you need to compile that to make something work.
Could be very heavy for ARM systems.

[aiolos]

Hi,

Good idea to make the code more unit testable. I can tell you: the code already improved a lot over the last few month. I made some huge changes in removing duplicate code and handling stuff more alike.
Quite common on a growing code base, but it is good to see how we can keep improving it.

I don't know ractive (sound like just another JS library ;)). The disadvantage from using such a framework could mean a lot of overhead, while most of the stuff also can be done in VanillaJS (splitting the logic and the html can also be done there). Using a framework can mean that performance on slower tablets gets terrible.

[aalwash]

Happy to hear that a lot of changes are done the last months. I indeed already noticed some code cleanup, but still I see a lot of stuff that can be deduplicated and/or improvement.

I agree, I try to avoid more and more frameworks.
But Ractive is build on the same principles as ReactJS (which is build by Facebook and used by them). See http://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/
It uses the virtual DOM (instead of the normal one) and modifies only the nodes that you're changing.
Maybe hard to believe, it can even be faster then what I see in the current. The code use .html() all the time, that's really slow and requires redrawing a lot.

Just an extra note, RactiveJS is a template engine, not a framework (like jQuery, or Angular, etc).

[aiolos]

Oh, for sure a lot can be improved. But step by step, otherwise we break everything (which already happens sometimes).

We can give it a try of course. Let's play with it in a branch and see how it performs.

[aalwash]

I totally agree, we should do it step by step.

Maybe only use it for new blocks? Or new plugins, so we can start testing it.
Let me see when I can fix some time for this so I can give it a kick-off.

[robgeerts]

Good idea!
We could also start with something basic like the HTML in coins.js-file.

[aalwash]

Sure, I started working an simple PoC, so you guys can see how it works

[aiolos]

Hi @aalwash

How's the PoC going? Already something we can have a look at?

[aalwash]

Hi @aiolos

I did make a start a while ago, but some other priorities kept me busy
I will do my best to resume working on this FR this week

[aiolos]

No worries, I also had a bit of a quiet period on Dashticz. I was just wondering if I had maybe missed something.

[aalwash]

@aiolos @robgeerts
I did a first commit, so maybe you guys can look into it? I've commited to a separate branch, so you can test it easily: https://github.com/aalwash/dashticz_v2/tree/introduction-ractive

So the ideas is as follow:

• Ractive will be loaded by default
• When using any block, you can call var dashticz = new Dashticz(), it's a Singleton, so the next call will re-use the same instannce
• The new Dashticz "class" (it's a prototype, since I can't use ECMA6 classes) should become the more robust "single-point" of access. The idea would be to move the config to this class as well
• The Dashticz class will start having modules/plugins, for now I introduced the Dashticz.Template() module

Template module

• This module handles the fetching & inserting of templates
• It uses internal variables to cache the results (can be turned off, to refetch) so less of network calls are done
• This module also cache the Ractive objects, by element id, this way no re-inserting of HTML blocks is needed. ONLY the variables that are changed, will be redrawn (a major performance upgrade!!)

Let me know what you think about this

Note

• Litebit doesn't work for me, I get errors. So I didn't convert that one yet. Am I the only one that is getting errors?

[aalwash]

In case you want to see the diff, use this url aalwash@5ed60db

[aalwash]

Did anyone check it out :)?

[robgeerts]

Sorry, busy times for me (as always).
I'll try checking this out tonight!

[aiolos]

Hi,

I didn't check it out yet. These days a bit busy on other things, but I'll definitely have a look. It sounds promising.

Cheers

[aalwash]

No problem, take your time :)

I already trying to experiment with unit testing and JS code that is normally written for browsers :(

[robgeerts]

Just tested it, works great :)
1 thing though; I had to manually add the ractive.min.js file, it was missing in the branch...

[aalwash]

@robgeerts hmm, strange, I somehow forgot to add that.

I will try to continue working on a simple unit test for now and I will do a PR after that