5 reactive UI interactions you'd better did instead of querying $elements
Published: 2021-06-15 17:56:14

## 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](https://dev.to/chrisczopp/ready-to-move-from-jquery-to-shiny-reactivess-307o). 

The below snippets are meant to work with [GlueCodes Studio](https://www.glue.codes) - 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](http://solidjs.com/) 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

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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](https://www.glue.codes/docs-templating-htmlDirectives.html#listItemPresenter). 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](https://www.glue.codes) 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](https://www.glue.codes/docs-templating-htmlDirectives.html#slot) or [list item presenters](https://www.glue.codes/docs-templating-htmlDirectives.html#listItemPresenter). 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](https://www.glue.codes/docs-templating-htmlDirectives.html).

## 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](https://www.glue.codes/docs-templating-htmlDirectives.html). 

Also join our Facebook [forum](https://www.facebook.com/groups/gluecodesstudio) for help and support. Thanks!