i created an INPUT wrapper (+extra linking/constraint/animation system) around HTML and CSS, which started me thinking at an Autogram level instead of an OOP-ish,
event/constraints/attributes/etc. level as my original, more theoretical idea called for with cascading changes. As it is now, the non HTML/CSS parts of the
system (constraints, link, offsets, dataobjs, etc.) are stored the way they specified by user...the parsing work involves looking up references
for the dynamic part (when used in conjunction with HTML) and replacing with "ref" to save using JSON.stringify and tying my backend javascript based
system with the browser-centric HTML/CSS system
The essence here is an Autogram, portmanteau of automaton and program, which is the fundamental "interaction object". These Autograms are wrappers around DOM objects and can be instantiated using Blueprint objects wich are just object literals holding information about what an Autogram is and should do (animation, constraints on value transformations, events, offsets from other values to create scene graph, etc.). A single Blueprint can be used to instantiate many Autograms ala classes and objects in OOP. In the end, the process just became an issue of mapping; mapping one object details (DOM) to another object (my wrapper). My wrappers, in turn, were a web of interconnected object references in order to create a scene graph.
Deconstructing and reconstructing these object references when saving and loading the web app was sort of a pain. Further the process of actually specifying the details of the scene graph relationships was kinda clunky to write and a little annoying to read. However, it still worked so I went ahead and used autograms to build an in-browser editor that allowed live editing of autograms in order to get immediate feedback of what a UI would look and behave like; the beginnings of WYSIWYG editor for the dynamic web if you will. You can view and download the code for my editor by visiting my linked github page in my bio under the repository 'floweo' or just click here. Below is an in-browser live demo; editor commands explanation is viewable at the repository link:
The cool thing is that this is written entirely with nothing but vanilla, pre-ES2015 JavaScript, JSON, HTML and CSS. I now had proof of concept for the viability of my "transparent enhancement wrapper" idea.
However, there were clear issues with the code organization that I realized would only become worse when attempting to implement a full-sized project. Here's a sample of some of the concerns:
- Callback functions were just grouped in a giant object I call "Module Factory". This was necessary for code sharing among Autograms but there was no clear organization of what went where.
- As mentioned briefly above, specifying the details of an Autogram, particularly my part of the system (constraints, offsets, tweening, etc.) was clunky and awkward.
- More importantly than just being awkward my constraints and offsets were only single values or value ranges and, in practice, I needed to be able to specify more complex relationships among objects in a scene graph.
- The method by which Autograms (the View) interacted with underlying data (the Model) was not thoroughly specified and delineated enough.
- For constructing larger components Autograms needed to be able to contain other Autograms or some other method of organizing related Autograms needed to be created.
- Instead of specifying CSS through the DOM, a CSS stylesheet should be able to be passed directly to an Autogram.
Next.