This is currently a draft that is meant to highlight some of the challenges and opportunities of creating reactive UI from scratch. My current feeling is that while yes, it is nice to do this in a really plain JS way, it relies a lot on us to take care of sticking to the "rules" we create as opposed to following established ones by way of using a framework like react and vue.
I want to try and get this this demo to a working state so we can at least have a better feeling for what this approach entails, but I may also start a parallel thread and set up a version running on React using the contextApi to help us to resolve state sharing across components...and if that last bit sounds totally crazy, I will make sure to clarify that in the relevant PR :)
Updates
This PR is ready for review.
Some of the previous styles have been dropped for now, but all of the pieces are now in place.
Setup explained
We have 4 main files:
src/renderer/Model.js:
the model is where our state lives and where our ML models are bound to
src/renderer/Controller.js
the Controller connects the model the view. It ensures that when data in the model changes, that any view components are updated with the corresponding data.
src/renderer/View.js
the view handles all the UI elements. Any event handlers are that are attached to DOM elements are handled by a handler() that is called by the controller to connect with any data in the Model
src/renderer/index.js
where all the MVC comes together.
Feedback
TBH, there's a lot of mental gymnastics involved with separating out the concerns. And as you'll see it's pretty verbose with all the updateX and bindHandlerY etc etc.
In any case, I think the structure does help us to separate out functionality in a cleaner way and would not be wasted time if we decide to move to using a framework.
Description
This PR uses the vanilla JS approach outlined here (https://github.com/taniarascia/mvc/blob/master/script.js) to building a Model-View-Controller framework to help manage state and view updates.
This is currently a draft that is meant to highlight some of the challenges and opportunities of creating reactive UI from scratch. My current feeling is that while yes, it is nice to do this in a really plain JS way, it relies a lot on us to take care of sticking to the "rules" we create as opposed to following established ones by way of using a framework like react and vue.
I want to try and get this this demo to a working state so we can at least have a better feeling for what this approach entails, but I may also start a parallel thread and set up a version running on React using the contextApi to help us to resolve state sharing across components...and if that last bit sounds totally crazy, I will make sure to clarify that in the relevant PR :)
Updates
This PR is ready for review.
Some of the previous styles have been dropped for now, but all of the pieces are now in place.
Setup explained
We have 4 main files:
handler()that is called by the controller to connect with any data in the ModelFeedback
TBH, there's a lot of mental gymnastics involved with separating out the concerns. And as you'll see it's pretty verbose with all the
updateXandbindHandlerYetc etc.In any case, I think the structure does help us to separate out functionality in a cleaner way and would not be wasted time if we decide to move to using a framework.