UI development is insane

All my startups, consulting gigs and even corporate jobs had a lot of trouble with building UI. I've decided to do something about it.

Maybe you want to make an interactive data presentation for your blog. Or maybe you want to publish a small web app(MVP) to test that idea you've been thinking about for the past year. Or just want to share something with the world. Or build a usage calculator for your SaaS startup. If you're not a dedicated UI developer, good luck!

Even online courses seem to agree - become a React expert in 3 months. Learn Angular in 6 months. What happened to the good old and document.getElementById that we used to know and love?

But i just want to have a cool interface for my Arduino...

Moreover, javascript libraries don't work out of the box with these new technologies. You need adapters and workarounds. 20 years of open source web development, down the drain.

Earlier last year i ran into a component library that uses vanilla javascript, CSS and HTML(with some templating). I've found it refreshingly simple, with a 15 minute learning curve and very lightweight -Svelte JS https://svelte.dev/.

In order to support other breed of developers publish front end for their hobby/pet projects, i have ported a very popular UI Kit framework to Svelte. Following is the end result, and how to use this.

To give you a taste, instead of writing this:

<ul uk-accordion>
    <li class="uk-open">
        <a class="uk-accordion-title" href="#">Item 1</a>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href="#">Item 2</a>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href="#">Item 3</a>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

You get to write just this:

<script>
  import Accordion from "../src/components/Accordion.svelte";

    let accordionProps = [
      ...
      ];

</script>

<Accordion accordionElements = {accordionProps}/>

The component is pure HTML, with some templating. And building the project gets you pure HTML, which you can deploy anywhere you'd like(can be statically served). This also makes it real easy to build around and consume microservices. And it also makes it easy to embed the code in a wordpress page, for instance.

In this case, it might seem it's not doing so much, but once you get to more complicated structures, it really pays off. For instance, have a look at the demo here(http://getuikit-elements.surge.sh/):

You can see 3 elements, with a similar structure - title, a component from UIKit, and the code to instantiate it. While a very simple documentation app, it would have quickly become unfeasible to copy and paste HTML around. Here's how to use this particular component:

<PresentationComponent componentName="Alert" gistId="08ed2865818460fd42e5cee978658234">
    <div><Alert content = "Alert text"/></div>
</PresentationComponent>

The PresentationComponent employs a DynamicGist component - responsible with rendering the code.

Passing down properties and property changes is also refreshingly simple - as is keeping a central, in-memory data store, but that's outside of the scope of this article.

Until next time, here's the repo for the UI Kit: https://github.com/DashboardHero/uikit

Please let me know what awesome things you're going to build - and if there's any other way i can help.

Happy coding!