I am building an SPA. It will use WebGL, Canvas and SVG for certain components, and html for rendering views. I have a messaging system setup to define messages coming from a server, which will get handler classes to apply the logic in the domain model. I'd like the domain model as simple as possible without any ceremony to cater to other layers (e.g. UI). So, per example:

class Customer {
    get orders() { return []; } // return just an array of orders
    get name() { return this._id; } //return just a simple string

This allows me to write simple handlers:

class SetCustomerNameHandler {
    execute(customer) {
        customer.name = this.name;

Vue.js, React.js and other frameworks provide techniques to listen to these classes without needing to change anything. Vue.js for example redefines getters/setters under water to listen to changes. So for html views, I'm settled (providing I adher to the limitations of the listening technique).

However, I need quite some view logic in custom canvas/webGL/SVG renderers. They need to respond to changes in the domain model. UI frameworks do not really support these usecases natively, yet they do provide some helpers.

I have a few options to apply. All seem to have disadvantages which I don't like, and I'm wondering if there is a cleaner way of dealing with the problem.

  • Proxies. I can instantiate a proxy on an object in the renderer class to track changes of a domain object. This works, but Handlers do not operate on proxies (they operate directly on the domain objects) and as such it breaks down. It only works if I access proxied objects on the renderers instead (e.g. CustomerRenderer.customer.name = newName.
    • RxJs. Powerful, but requires changes in the domain model - domain objects must make themselves observable.
    • Vue.js. Simple yet as RxJs requires domain objects to be "Vue-ed".

Is there a way in javascript (es5/es6/es7) to keep the domain model clean and still respond to changes in the model?

  • If you don't like proxies, you'll have to decide if you want to write all of the custom binding logic yourself, or change the domain model to accomodate the more "modern" approaches to binding. Personally, I think you should bite the bullet and make the necessary changes to the domain model. – Robert Harvey Jan 27 '18 at 17:29
  • There's a pretty good discussion here: medium.com/@TheStrazz86/… – Robert Harvey Jan 27 '18 at 17:32
  • I like proxies, but they simply don't solve the problem if I don't want to change my domain model. – Ruudjah Jan 28 '18 at 13:52
  • There's a library called Fody.PropertyChanged in .NET for WPF that performs the function you describe. It uses dynamic proxies over reflection. I don't know how that would be done in Javascript, but that's the way forward: introspection. Performance may be an issue. See developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – Robert Harvey Jan 28 '18 at 17:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.