NeoComp, despite sharing a ton of common points with other reactive web frameworks, possesses a distinct and unique philosophy. It sits in the opposite corner of the spectrum, it is derived from a simple idea.
Conservative simplicity is a direct and lightweight simplicity in API surface and design, simplicity that is deliberate in its implementation complexity.
It is a simplicity that does not seek to be state-of-the-art in eliminating the last character in the source code at the expense of implementation depth. Instead, it is simplicity summarized in a collection of utility functions having a transformative impact.
It is not about favoring bare-bones imperative over rich declarative, in essence, it consists of lightweight declarative definitions/actions inlined within an imperative flow, simplifying tedious work while being direct and efficient.
As an ideology in web frameworks, conservative simplicity flips the paradigm. It creates a unique framework that doesn't obey the modern mentality of reactive declarative UI design.
much of the muscle memory you acquired and the design patterns you used will must be dropped while using NeoComp, however, new and powerful patterns will replace them in the long run.
And now, after establishing the core ideology, let's dive into the individual rules.
NeoComp, like other fine-grained reactivity frameworks, creates the full structure of the UI at initialization, with bindings inferred from the templates. Then, the updates flow directly between states and effects to the DOM.
This set contrast to what other frameworks do, notably the VDOM powered ones, where on each update, the relevant render functions rerun creating a fresh structure before the reconciling mechanisms continue the work.
This approach enables negligible cost updates at the cost of a fixed structure. While this seems restrictive, in reality, it is quite natural, as all HTML-powered pages are fixed structures with dynamic content and navigation. Structures that don't change from construction, can be hidden. if they change, their identity that had shifted.
These structures don't need to be mathematical formulas. Treating them as such created problems that didn't need to exist, for benefits that were ultimately trivial.
Contrary to the monolothic templating approach taken by the majority, defining the entire structure of the component as a big blob at the end, NeoComp utilizes a unique way of construction.
In NeoComp, templates are created as multiple chunks in an imperative flow. Each section is defined around its logic, and construction is not restricted to a single location.
This feature single-handedly unlocks multiple capabilities. It removes most restrictions on templates, localizes logic to the heart, and allows outstanding patterns to emerge.
You can use regular control flow, extract and localize major and minor sections into their own place and scope, create reusable nano fragments, and countless more. you can structure your templates as you see fit.
Functional components, while less verbose, suffer from limited scope. Their logic, structure, and local utilities share the same space, causing code to become cluttered quickly.
NeoComp components, conversly, are defined in classes, granting them their own distinct scope. This makes things much more manageable, you can freely grow vertically without the fear of 60 line functions.
When the component grows, you can migrate major sections into their own functions, with shared states in fields, independent logic inside methods, and local utilities hosted within the class, all under the same curly braces.
You should not feer large components, as classes can host them with ease. Moreover, splitting them into smaller components is similar to extracting major sections into their own methods plus awkward state sharing.
Components in NeoComp are not abstract concepts, they are real objects that can interact and be interacted with, like regular DOM elements.
Components are not just UI factories; they are UI entities that can be interacted with. They can expose a public API inside public methods, fields, and events.
The communications between components are not limited to static parent-to-child data flow or hacked grandfather-grandchildren state elevators. Any two components can interact together at any time through the standard mechanism: events, methods, and signals.
Mini components, components of few lines, are counterproductive in NeoComp. aside than writing relatively large boilerplate with respect to the logic size, these components introduce an overhead larger their utility.
Instead, you should create independent sections, not entire components: functions that create a chunk using the component resources, having significantly lower boilerplate and coexisting like a part of the parent component.
In render function frameworks, conditional rendering is typically achieved by conditionally recreating and destroying the structure and components. This approach is flawed, as rerendering the entire structure is computationally expensive.
conversly, the approach used by NeoComp and similar frameworks, you create the structure once on creation and conditionally display it on demand, a small semantic shift optimizing the performance of many pages.
Opposite to the majority of frameworks, NeoComp grants you full ownership of the DOM. Its actions are localized to specific elements and attributes defined in the template. You can literally move the elements around and the bindings remain intact, even across document boundaries.
While manual DOM manipulation is what modern frameworks from their inception were trying to eliminate, having reliable control over the DOM is crutial for the existence of some elements like dropdowns and modals.
Another nice to have feature NeoComp has is wrapping existing elements and owning them. Components can accept an element, then add functionality to their contents.
NeoComp is a vanilla JavaScript framework. It doesn't add new syntax to the language, opposite to what other frameworks do. It uses old-school string template literals like Lit.js but with a twist.
The template strings can be optimized at build time into an efficient form, removing the need for runtime parsing. This step is optional as the source code run perfectly without a build step, it is simply a nice touch of optimization.
NeoComp is a unique framework with a unique simplicity, a simplicity that merges declarativity and imperativity in an efficient lightweight manner.
It is a vanilla JavaScript framework introducing a new paradigm: declarative HTML templates with implicit direct bindings, derived by imperative chunked construction, optionally enhanced with vanilla transformations.
Taking the best of past frameworks, NeoComp presents to you a case study on how revisiting old concepts in a modern perspective, mixing them with the best of the new, while being conservative in the used magic, can lead to a framework that is truly powerful yet simple.