프레임워크가 없는 프레임워크: 다음(큰) 것

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

지난주에 Sleek 개발했습니다. Svelte와 같은 프레임워크가 없는 컴파일된 프레임워크입니다. 아직 문서가 없으므로 확인하지 마십시오. 준비되면 포스팅하겠습니다.

새로운 프레임워크를 구축하게 된 계기는 Svelte였습니다. 예, 두 가지 방법으로. 이 Svelte 구성 요소를 고려하십시오.

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

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

그것이 무엇을 출력한다고 생각합니까? 여기:

/* 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;

많은 수입품 create_fragment() 및 class extends SvelteComponent 를 볼 수 있습니다. 이것은 거대한 파일이며 수입량을 계산하지도 않습니다. 그리고 HTML? Svelte는 템플릿만 생성합니다. 실제 HTML은 없습니다. Repl 에는 HTML 탭조차 없습니다.

Sleek에서 동일한 결과가 출력되는 것을 살펴보겠습니다.

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

그게 다야 JavaScript가 없고 그냥 단순한 HTML입니다. 그리고 많은 가져오기를 로드하고 DOM을 사용하여 정적 요소를 포함해야 하는 것보다 훨씬 빠릅니다.

이제 "잠깐만요, 그건 확실히 실제 코드가 아닙니다"라고 말합니다. 음, 이것은 더 큰 문제의 전조입니다. 모든 것이 JavaScript에 있습니다. 다음과 같은 완전히 정적인 형식이 있다고 가정합니다.

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

자바스크립트로도 컴파일된다?!

/* 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;

가장 좋은 방법은 HTML에 그것을 넣고 반응적인 것들을 반응적으로 만드는 것입니다. 그것이 Sleek이 하는 일입니다.

이제 막 시작하는 중입니다.

Sleek은 매우 새롭습니다. 우리는 여전히 몇 가지 필수 기능을 추가하고 테스트하고 있습니다(그러나 아직 발견된 버그는 없습니다 🎉). SSR, 문서, 시작 키트, 통합, 상점 등 작업해야 할 몇 가지 필수 기능이 있습니다.

그러나 우리는 이미 대부분의 기능을 가지고 있으며 곧Sleek 프론트엔드 개발의 다음 시대를 시작하는 데 도움이 될 것입니다.