5 reactive UI interactions you'd better did instead of querying $elements

Introduction

This article is dedicated for a web developer who appreciates design freedom, yet who'd like to code less in a setup-free web-based development environment.

It's a 5 DOM interaction you'd better did in a reactive way instead of using jQuery or document.querySelector.

Why? - Because it's more maintainable and scalable. You can read more in one of my past articles.

The below snippets are meant to work with GlueCodes Studio - the tool powering your every-day work in the ways you haven't seen elsewhere. It's for somebody who'd be pleased with loads of automation to deliver an extremely fast and scalable code i.e. build-time diffed JSX using SolidJS organised around an implicit uni-directional data flow. Obviously you can use it for FREE, so let's begin!

1. Updating a CSS class on a button click

<button-x>
  <script>
    if (uiSignals.updateClass) {
      props.className = 'some-class'
    }

    props.onClick = () => {
      uiSignals.updateClass = true
    }
  </script>Click
</button-x>

2. Toggling a CSS class on a button click

<button-x>
  <script>
    if (uiSignals.updateClass) {
      props.className = 'some-class'
    }

    props.onClick = () => {
      uiSignals.updateClass = !uiSignals.updateClass
    }
  </script>Click
</button-x>

Note: The snippets are made using a concept called "extended tags". Below you'll be seeing a global uiSignals object being accessed in embedded <script>s. You can freerly set/get properties on/of this object. Think of it as a local UI state, something you'd see in React as hooks. What matters the most is that when a property of uiSignals changes, only the DOM elements which access it get updated.

3. Switching tabs

<span-x>
  <script>
    if (uiSignals! || uiSignals.activeTab === 'a') {
      props.className = 'active'
    }

    props.onClick = () => {
      uiSignals.activeTab = 'a'
    }
  </script>Default tab (A)
</span-x>
<span-x>
  <script>
    if (uiSignals.activeTab === 'b') {
      props.className = 'active'
    }

    props.onClick = () => {
      uiSignals.activeTab = 'b'
    }
  </script>B
</span-x>
<span-x>
  <script>
    if (uiSignals.activeTab === 'c') {
      props.className = 'active'
    }

    props.onClick = () => {
      uiSignals.activeTab = 'c'
    }
  </script>C
</span-x>

4. Removing an element on a button click

<div>
  <button-x>
    <script>
      props.onClick = () => {
        uiSignals.shouldTheSpanBeRemoved = true
      }
    </script>
  </button-x>
  <span-x gc-as="conditional">
    <script>
      props.isConditionMet = uiSignals.shouldTheSpanBeRemoved
    </script>
  </span-x>
</div>

5. Adding an item to the list

<div>
  <input-x>
    <script>
      props.onKeyUp = async (e) => {
        if (e.code === 'Enter') {
          await actions.submitRecord(e.target.value)
          actions.reload()
        }
      }
    </script>
  </input-x>
  <ul>
    <li gc-as="listItemPresenter" gc-provider="getSomeRecords">
      <fragment gc-as="varPresenter" name="getSomeRecordsItem">repeated item</fragment>
    </li>
  </ul>
</div>

There are some more directives in this snippet which you can read about here. Note that when an extended tag is placed inside a "list item presenter", you get access to a variable called: providerName + Item, in our case getSomeRecordsItem which is an item while looping over getSomeRecords action result (an array). You could also access getSomeRecordsIndex for a numeric index in the array.

What are those tagName-x tags?

Static HTML has no built-in way to make it reactive. Hence, GlueCodes Studio supports a concept called extended tags which is named like: tagName + '-x' and has an embedded <script> included. Its code is sandboxed allowing you to access variables which are available inside other directives including slots or list item presenters. In the script you can assign to props variable to change props/attributes of the "extended" tag. For a complete list of the directives click here.

What's next?

Before you shout "this is another self-promotional read", I'll say yeah, this article is indeed about a new tool. But, bear in mind it's made by two developers who want to address the problem differently. And we're not a corporation. I'm trying to share with you a new way where you can use a slightly extended old-fashion HTML to build reactive apps. So if you like the idea of managing local UI state using the extended tags and attribute directives, you may want to read more in our documentation.

Also join our Facebook forum for help and support. Thanks!