DEV Community

Discussion on: What is the most potentially-revolutionary software currently being developed?

Collapse
 
oxharris profile image
Oxford Harrison • Edited

So I've been working on Scoped JS as part of the CHTML suite - a set of new DOM features that finally lets us author the UI in plain HTML. Scoped JS is the part that lets us add behaviour to markup. It enables us bind application data to any part of the UI, and most-importantly, keeps that part of the UI in sync with application data/state. While this is the same problem every UI framwork tries to solve, there is this major difference in the HOW.

  • Unlike other approaches that are based on some own-made syntax (mustache-like string interpolation, attribute-based directives, JSX, etc) that must be compiled, this approach is raw HTML and JS.

    <body>
      <div id="alert">
        <script type="text/scoped-js">
          this.innerHTML = message;
          this.addEventListener('click', () => this.remove());
        </script>
      </div>
    </body>
    

    ...

    let msg = {message: 'Success!'};
    document.querySelector('#alert').bind(msg);
    // #alert will also remain in sync with the msg scope object.
    

    (You could even author all of this on the fly on the browser and see it work. CHTML is the Web-Native UI component technology that works at platform level, contrasting the high abstractions, the compile step, and the rest of the over engineering of current frameworks.)

  • While we traditionally call DOM elements from JavaScript code, Scoped JS lets us place that code right on the elements that need it. We can all stop worrying about CSS selectors by simply scoping a JS snippet.

  • The zero bloat proposition! With Scoped JS there is no need to build a JavaScript class just to implement a simple alert component. Additionally, since every HTML now comes with it's own Scoped script, each page gets to work with just what it needs to work. And this is some inherent code splitting.

The Scoped JS technology itself is regular JavaScript that runs scoped to its containing element, featuring automatic observability on the given variables in scope.

So this I consider one good innovation that could have a major impact. Your thoughts, though.