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.

Blog

Frameworks without a Framework: The next (big) thing

Siddharth

We're just getting started

Join Our Newsletter. No Spam, Only the good stuff.

Related