I didn't like Vue or React so I've been working on my own Javascript framework this year. I wanted to share it at some point as I've gotten value from so many other people's projects. Maybe someone will benefit from my project too.
My framework uses an html attribute called foreignkeys="" to hold urls with custom schemes that reference pieces of browser state. When that browser state changes, the framework searches for all the linked elements and emits a 'foreignkey' event on them. This uses a ForeignKeyEvent event object that has the value of the changed data and the url key that changed. Then the elements just react to the change via event listener code.
The benefit of doings things this way are:
1. I can write normal event driven javascript code and object oriented custom elements. No functional code or anything like JSX is required.
2. The framework can use setTimeout() to return control to the browser between processing each event. With this the page can update one element at a time while letting the browser render in between. I did set things up so that visual elements update synchronously while hidden elements update one at a time.
3. In theory, because the reactivity information is contained in an HTML attribute, this should integrate nicely with server rendered HTML. Should be able to render some regular HTML with foreignkeys="" to state that will change. Then when the javascript code is loaded and runs, the UX can react to future state changes. I use Firebase and don't do any server rendering right now so I haven't tested that, but I think it could be made to work.
I am currently in the middle of rewriting a personal project to use this, so it's still a work in progress. Let me know what you think.
pianopatrick•2mo ago
My framework uses an html attribute called foreignkeys="" to hold urls with custom schemes that reference pieces of browser state. When that browser state changes, the framework searches for all the linked elements and emits a 'foreignkey' event on them. This uses a ForeignKeyEvent event object that has the value of the changed data and the url key that changed. Then the elements just react to the change via event listener code.
The benefit of doings things this way are: 1. I can write normal event driven javascript code and object oriented custom elements. No functional code or anything like JSX is required. 2. The framework can use setTimeout() to return control to the browser between processing each event. With this the page can update one element at a time while letting the browser render in between. I did set things up so that visual elements update synchronously while hidden elements update one at a time. 3. In theory, because the reactivity information is contained in an HTML attribute, this should integrate nicely with server rendered HTML. Should be able to render some regular HTML with foreignkeys="" to state that will change. Then when the javascript code is loaded and runs, the UX can react to future state changes. I use Firebase and don't do any server rendering right now so I haven't tested that, but I think it could be made to work.
I am currently in the middle of rewriting a personal project to use this, so it's still a work in progress. Let me know what you think.