Scalable front-end UI systems
The Disconnection Between UI/UX and Front-end Developers
I believe one of the biggest problems companies have when coordinating their UI/UX with developers is the disconnection between the language of UI and the actual fact that developers are building systems to implement concepts and relations that UI/UX is trying to create.
Developers look at UI like requirements and UI/UX look at developers like implementors of their relational vision composed of many, many, interconnected themes, relations and experiences. Developers have a hard time understanding the language of UI/UX because the language of UI/UX is not linear. UI/UX is a non-linear system. Objects in UI/UX interconnect to form wholes of different concepts. A selected font-size, lives within the structure of a heading element, in a collection of other heading elements.
The Literal Difference Between <Element> and <Part>
This brings me to my next point. We need to understand the language of the DOM (Document Object Model). The literal word describing a heading tag( <H1></H1>) is the word element. What does the word element refer to? Elements in mathematics and systems theory, refer to a sub-system within a larger system. A system refers to a group of interconnected sub-systems that form a whole. A whole is not a part, it is a whole, it is its own thing, itself.
To understand this terminology, the opposite of an element is a part. What is a part? A part is something that describes a set of unrelated things in a collection. In everyday language we use the word, part, to describe things such as "computer parts, car parts, metallic parts". In this context, we call them parts, because it is in the contextual environment of a large set of other computer parts, each particular part, is unrelated to the next part.
The fact we do not use this word to describe the DOM should allow us to understand that the H1 is an element of a system within an environment and that environment is the document being rendered on the page. We refer to many interconnected and interdependent things as elements. The element of colour, contrast and hue in the Mona Lisa by Picasso, the fundamental elements in the periodic table and the elements in an array of objects in programming.
UI/UX Development Through a Systems Theory Perspective
Now that we understand that elements in a system are sub-systems. Because of the nature of sub-systems interacting with each other, the end result of such an interaction is the emergent phenomena of a brand new quality that isn't reducible to either particular element within that interactive relationship. Quite literally, the sub-system of an <H1> tag isn't reducible to just the font-size or just the padding/margin or colour, quite literally, the quality of an <H1> tag is the interaction of those parts, and I use the word part here in an explicit way. font-sizes, paddings, margins, are parts. No margin is related to another margin, like no Hydrogen molecule is related to another. However, the combination of the font-size with a particular colour and padding/margin produce the qualities of an <H1>, much the same way that one Hydrogen combining with two Oxygen molecules will produce the property and quality of water.
As sub-systems form from primary parts, they cannot now be referred to as parts, but systems in their own right. As those sub-systems are combined with other sub-systems, the output of such a relation produces other complex qualities that are now irreducible to any sub-system that created the output. This is best exemplified in the formation of different headings, paragraphs, inputs and labels into a <FORM> in the DOM. The form is the combination of interactions between these elements of sub-systems, but no single quality of the form is found in each individual sub-system, but only through the interaction between them.
As <FORM> is now combined with other complex systems, the complexity continues but notice the scalability of each new output from the interaction between systems. In each level of the complexity, code can be modified, enhanced and extended without harming the qualities of each output at each level. This process happens in nature, it's called adaption.
As we adapt the UI to new requirements from UI/UX, it's akin to the process of evolution and can be controlled, incremental and without risk of breaking the entire system. The UI systems changes and evolves but the structure remains, with all its beautiful complexity.
This is what scalable and maintainable UI looks like from a systems view.
-Daniel Ram