Copy-pasted HTML to reactive UI with a couple of directives? - join my project!

I have another demo for you to show you what we've been developing at GlueCodes.

Problem

We all know the pain of getting a static HTML and splitting it into components/sections, turning lists into loops, adding data bindings. - The lists goes on an on. Often it's easier to start from scratch.

As inventions are often born from the frustrations, that was the case this time too. I decided to address this issue. If you like it gimme ❤️, follow me and let's be bff 😃.

Solution

In a comment of my previous article I wrote the following:

Imagine you can quickly prototype UI with HTML, add few attribute directives and boom! 💣 You didn't touch JavaScript yet but you already have a working app. Actions are generated and they use data you wrote in HTML. E.g. what you have in your LI tags becomes an action which returns an array of objects. When you done coding, you can download stand-alone code, run docker-compose up and you can keep changing it as you wish. It uses Webpack, Babel and all other open source goodies.

I decided to extend it with a few snippets of code and this demo

Imagine you copied-pasted this:

<ul class="todo-list">
  <li>
    <div class="list_view">
      <input type="checkbox" class="list_toggle">
      <label>share our content</label>
      <button class="list_destroy"></button>
    </div>
  </li>
  <li>
    <div class="list_view">
      <input type="checkbox" class="list_toggle">
      <label>contribute</label>
      <button class="list_destroy"></button>
    </div>
  </li>
  <li>
    <div class="list_view">
      <input type="checkbox" class="list_toggle">
      <label>support us</label>
      <button class="list_destroy"></button>
    </div>
  </li>
</ul>

How do you turn it into reactive UI? - let me show you 😉

• in the first LI add gc-as="listItemPresenter" and gc-provider="getFilteredTodos" directives, the name of a provider is up to you. What's a provider? - check this repo
• to display a field, add these to any child node of the LI - gc-as="listFieldPresenter", gc-provider="getFilteredTodos" and gc-field="title". The last one is the name of property you wish to display
• as you type, you'll be notified to implement getFilteredTodos provider, you'll be able to simply choose it from Implementation Assistant dropdown. Job done!

<li gc-as="listItemPresenter" gc-provider="getFilteredTodos">
  <div class="list_view">
    <input type="checkbox" class="list_toggle">
    <label gc-as="listFieldPresenter" gc-provider="getFilteredTodos" gc-field="title">share our content</label>
    <button class="list_destroy"></button>
  </div>
</li>

What just happened? Spoiler alert - something cool! The bellow code has been generated taking example data from your copied-pasted HTML.

export default (async () => {
  return [{
    title: 'share our content'
  }, {
    title: 'contribute'
  }, {
    title: 'support us'
  }];
});

You may think, OK what's the big deal? - Well, now you can prototype faster. UI is feed by the generated provider action. The data is available from any section of the UI and other subsequent providers. I think it's quite something.

Hope you enjoyed it!

Discussions are very welcome. Want to be part of it? - Help me spread it around, react and follow me. Star this repo (more repos are coming). Open issues or just talk to me: chris@glue.codes