Sto costruendo una SPA. Utilizzerà WebGL, Canvas e SVG per determinati componenti e html per il rendering delle viste. Ho una configurazione del sistema di messaggistica per definire i messaggi provenienti da un server, che otterrà classi di gestori per applicare la logica nel modello di dominio. Mi piacerebbe che il modello di dominio fosse il più semplice possibile, senza alcuna cerimonia, per soddisfare altri livelli (ad es. UI). Quindi, ad esempio:
class Customer {
get orders() { return []; } // return just an array of orders
get name() { return this._id; } //return just a simple string
}
Questo mi permette di scrivere semplici gestori:
class SetCustomerNameHandler {
execute(customer) {
customer.name = this.name;
}
}
Vue.js, React.js e altri framework forniscono tecniche per ascoltare queste classi senza bisogno di cambiare nulla. Per esempio, Vue.js ridefinisce i getter / setter sott'acqua per ascoltare i cambiamenti. Quindi, per le visualizzazioni HTML, sono deciso (a condizione di rispettare i limiti della tecnica di ascolto).
Tuttavia, ho bisogno di un po 'di logica di visualizzazione nei renderer canvas / webGL / SVG personalizzati. Devono rispondere ai cambiamenti nel modello di dominio. I framework per l'interfaccia utente non supportano realmente questi casi di utilizzo in modo nativo, tuttavia forniscono alcuni helper.
Ho alcune opzioni da applicare. Tutti sembrano avere degli svantaggi che non mi piacciono, e mi chiedo se c'è un modo più pulito di affrontare il problema.
- Proxy. Posso creare un'istanza di un proxy su un oggetto nella classe di rendering per tenere traccia delle modifiche di un oggetto dominio. Funziona, ma i Gestori non operano su proxy (operano direttamente sugli oggetti del dominio) e in quanto tali si rompono. Funziona solo se accedo invece agli oggetti con proxy sui processori (ad esempio
CustomerRenderer.customer.name = newName
.- RxJs. Potente, ma richiede modifiche nel modello di dominio: gli oggetti del dominio devono rendersi osservabili.
- Vue.js. Semplice ma come RxJs richiede che gli oggetti del dominio siano "Vue-ed".
C'è un modo in javascript (es5 / es6 / es7) per mantenere il modello di dominio pulito e rispondere ancora ai cambiamenti nel modello?