HTML-based MVVM

[Bob Devine 11]

https://github.com/SigmaSciences/KnockoutOP

 

Still pretty rough but looking quite promising I think. Based on Stefan Glienke's KnockOff and the DelphiHTMLComponents.

 

Any bugs, suggestions, problems etc. just drop me an email (see the readme for gmail address).

[David Schwartz 426]

I haven't looked at the code, but is there anything special about the DHTML components that's required?

 

TMS has a new lib, TMS FNC WX PACK, that includes TTMSFNCWXHTMLMemo (among other things).

 

If I had to guess, you might be using the Observables to act as setters / getters for the HTML tags.

 

The TMS FNC components are universal components and work in all platforms that Delphi supports.

 

Specifically in this case, they work in WebCore (and WebCore VSC), which translates Delphi into javascript. You can get access to the js in several ways at the Delphi level.

 

I think an interface library that works in WebCore and uses TTMSFNCWXHTMLMemo would be fairly easy to write.

 

As for a regular VCL Delphi app ... not sure.

[Bob Devine 11]

I've actually been using the FNC components with Stefan's Knockoff for a few years now so I'm very familiar with them. In Knockoff it's easy to create new bindings and this type of MVVM is addictive 🙂 I'd used WPF and also KnockoutJS in the past so when Knockoff came along I was delighted. However I'm now getting close to actually requiring a cross-platform app and every time I used the FMX style designer I lost the will to live. Linking Knockoff and DHTML seemed an ideal solution.

 

1 hour ago, David Schwartz said:

you might be using the Observables to act as setters / getters for the HTML tags

That's right - I've been using DHTML for almost a year and it really is an amazing component set. The website and documentation don't do it justice. When you get into it, CSS is just great to use - no fiddling with visual designers if you don't want to. Having said that, you can use something like Figma to create HTML/CSS UIs, e.g.:

 

https://www.uistore.design/items/macos-monterey-free-ui-kit-for-figma/

https://docs.telerik.com/blazor-ui/styling-and-themes/figma-ui-kits

An example of what can be achieved just with CSS is here (there are many others):

https://picturepan2.github.io/spectre/index.html

 

I'd also briefly looked at Flutter but really don't see the point of adopting another non-standard UI technology. With CSS I can draw on a vast pool of resources, and developers.

 

Another potential benefit of this approach is right-to-left script. I think some of the demos might support this but am not sure - if anyone with an RTL system could test them I'd be grateful.

[wuwuxin 28]

On 11/15/2021 at 11:07 AM, Bob Devine said:

https://github.com/SigmaSciences/KnockoutOP

 

Still pretty rough but looking quite promising I think. Based on Stefan Glienke's KnockOff and the DelphiHTMLComponents.

 

Any bugs, suggestions, problems etc. just drop me an email (see the readme for gmail address).

Is KnockOff thread-safe?  I saw it uses a global ObservableStack without thread-protection?

[Bob Devine 11]

TBH I haven't considered that yet. @Stefan Glienke would be the best person to ask.

[Stefan Glienke 2002]

It's a UI thing so I never considered thread safety. Especially as I just wrote it as a prototype.

[sakura 45]

HTML/JavaScript is single-threaded by definition of all browsers at this point, therefore that shouldn't be a big problem. To get a two-threaded solution, you would need a background service-worker, but that's it as of now for JavaScript/HTML solutions.

[wuwuxin 28]

5 hours ago, Stefan Glienke said:

It's a UI thing so I never considered thread safety. Especially as I just wrote it as a prototype.

Yes.  @Stefan Glienke With current prototype,  View, ViewModel, and Model have to run within in the same thread - otherwise, the global ObservableStack would be messed up.  Is my understanding right?

 

Also currently,  the DependencyList field is not of much use,  thought it might be used to trace the origin of the Notify call?

 

Any future plan for KnockOff that might be shared here?  It is very refreshing code, and I learned a lot from it!

Edited November 24, 2021 by wuwuxin

[wuwuxin 28]

3 hours ago, sakura said:

HTML/JavaScript is single-threaded by definition of all browsers at this point, therefore that shouldn't be a big problem. To get a two-threaded solution, you would need a background service-worker, but that's it as of now for JavaScript/HTML solutions. 

@sakura  Thank you for the heads up.  Appreciated.