Frameworks without a Framework: The next (big) thing

Wait, this framework compiles to JavaScript only?! Thanks, I'll pass – Frontend developers in 2023

I've been developing Sleek for the past week. It's a compiled framework without a framework like Svelte. There's no docs yet, so don't check it out. I'll post when it's ready.

One thing which prompted me to build a new framework was Svelte. Yes, in both ways. Consider this Svelte component:

<script>
    let name = 'world';
</script>

<h1>Hello {name}!</h1>

What do you think it outputs? Here:

/* App.svelte generated by Svelte v3.43.2 */
import {
    SvelteComponent,
    detach,
    element,
    init,
    insert,
    noop,
    safe_not_equal
} from "svelte/internal";

function create_fragment(ctx) {
    let h1;

    return {
        c() {
            h1 = element("h1");
            h1.textContent = `Hello ${name}!`;
        },
        m(target, anchor) {
            insert(target, h1, anchor);
        },
        p: noop,
        i: noop,
        o: noop,
        d(detaching) {
            if (detaching) detach(h1);
        }
    };
}

let name = 'world';

class App extends SvelteComponent {
    constructor(options) {
        super();
        init(this, options, null, create_fragment, safe_not_equal, {});
    }
}

export default App;

I can see a bunch of imports, create_fragment(), and a class extends SvelteComponent. This is a huge file – and that's not even counting the imports. And the HTML? Svelte only generates a template. There is no real HTML. There is not even an HTML tab in the Repl.

Let's look at what the same thing outputs in Sleek:

<!-- ...excluded head, body, etc. -->
<h1>Hello world</h1>
<!-- ...excluded /body, etc. -->

That's it. No JavaScript, just plain simple HTML. And it's wayyy more fast than having to load a bunch of imports, and having to use the DOM to embed an otherwise static element.

Now you say "wait, that is definitely not any real world code". Well, this is the precursor to a bigger problem: everything is in JavaScript. Suppose you have this totally static form:

 <form action="action_page.php" method="post">
  <div class="imgcontainer">
    <img src="img_avatar2.png" alt="Avatar" class="avatar">
  </div>

  <div class="container">
    <label for="uname"><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit">Login</button>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form>

It also compiles to JavaScript?!

/* App.svelte generated by Svelte v3.43.2 */
import {
    SvelteComponent,
    attr,
    detach,
    element,
    init,
    insert,
    noop,
    safe_not_equal
} from "svelte/internal";

function create_fragment(ctx) {
    let form;

    return {
        c() {
            form = element("form");

            form.innerHTML = `<div class="imgcontainer"><img src="img_avatar2.png" alt="Avatar" class="avatar"/></div> 

  <div class="container"><label for="uname"><b>Username</b></label> 
    <input type="text" placeholder="Enter Username" name="uname" required=""/> 

    <label for="psw"><b>Password</b></label> 
    <input type="password" placeholder="Enter Password" name="psw" required=""/> 

    <button type="submit">Login</button> 
    <label><input type="checkbox" checked="checked" name="remember"/> Remember me</label></div> 

  <div class="container" style="background-color:#f1f1f1"><button type="button" class="cancelbtn">Cancel</button> 
    <span class="psw">Forgot <a href="#">password?</a></span></div>`;

            attr(form, "action", "action_page.php");
            attr(form, "method", "post");
        },
        m(target, anchor) {
            insert(target, form, anchor);
        },
        p: noop,
        i: noop,
        o: noop,
        d(detaching) {
            if (detaching) detach(form);
        }
    };
}

class App extends SvelteComponent {
    constructor(options) {
        super();
        init(this, options, null, create_fragment, safe_not_equal, {});
    }
}

export default App;

The best thing to do would be to put that in the HTML, and just make the reactive stuff reactive. That is what Sleek does.

We're just getting started

Sleek is very new. We're still adding some essential features and testing (but no bugs found yet 🎉). There are some essential features to work on: SSR, docs, Started kits, Integrations, stores, you name it.

But we've already got most of the features in there, and soon Sleek might help kickstart the next era of frontend development.

Comments

[Mendel Jacks]

Great initiative. If you need an extra hand reach out to me [e-mail].

[Siddharth]

Thanks a lot man!

Once I clean up the codebase and write some docs, and convince all of you that this is awesome, I'll write a post detailing a bit more about this. At that point you could contribute! 🔥

[Mendel Jacks]

Make sure to take inspiration from solid-js for runtime dependency tracking. You may want to consider not including any state management in the box as mobx and other reactivity libraries would just need a reference to the render function

[Siddharth]

Thanks for the tips!

[Keff]

Quite cool!

[Dexter]

Cool stuff! But aren't you forgetting that the generated javascript can be imported and reused? That's very handy when making components.
How do you make reusable components in your approach?

[Siddharth]

I didn't forget that - it's just that I haven't tested that too much.

As to how to make a reusable commitment component: since sleek also generates HTML, the only viable current way is to manually copy/paste that into a component. I'm still figuring out a way to compile to a web component or otherwise reusable manner.