Open aalwash opened 6 years ago
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.
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.
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).
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.
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.
Good idea! We could also start with something basic like the HTML in coins.js-file.
Sure, I started working an simple PoC, so you guys can see how it works
Hi @aalwash
How's the PoC going? Already something we can have a look at?
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
No worries, I also had a bit of a quiet period on Dashticz. I was just wondering if I had maybe missed something.
@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:
var dashticz = new Dashticz()
, it's a Singleton, so the next call will re-use the same instannceTemplate module
Let me know what you think about this
Note
In case you want to see the diff, use this url https://github.com/aalwash/dashticz_v2/commit/5ed60db4f07301ceabfa5935ae1eba638efbb490
Did anyone check it out :)?
Sorry, busy times for me (as always). I'll try checking this out tonight!
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
No problem, take your time :)
I already trying to experiment with unit testing and JS code that is normally written for browsers :(
Just tested it, works great :) 1 thing though; I had to manually add the ractive.min.js file, it was missing in the branch...
@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
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?