[JS] JS 프레임의 Svelt를 가동해 봤습니다.(동작이 엄청 빠른 것 같아!)

Svelte


자바스크립트제 초고속 프레임Svelte을 도입해 이동하는 곳을 소개한다.

작업 환경

  • Node.js 7.6.0
  • yarn
  • macOS Sierra 10.12.3
  • svelte-cli v1.3.0
  • Svelte-cli 설치

    yarn global add svelte-cli
    

    파일 구성



    실제 인코딩


    기초 문건 작성


    index.html
    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>svelte</title>
    </head>
    <body>
    <main></main>
    </body>
    <script src="MyApp.js"></script>
    <script>
        new MyApp({
            target: document.querySelector('main'),
            data: { name: 'world' }
        });
    </script>
    </html>
    

    MyApp.파일 만들기


    MyApp.html
    <h1>Hello {{ name }}!</h1>
    

    편역하다

    svelte compile --format iife MyApp.html > MyApp.js
    

    보기



    실제 페이지

    잡감


    개발에 있어서 번역을 하기 때문에 열람자의 페이지 읽기 속도가 매우 좋다고 생각한다.
    그리고 특별한 의존 관계가 없기 때문에 읽는 순서에 신경 쓰지 않아도 쉽다.
    Svelte에 관심이 좀 있어서 이걸 뭐라도 해보고 싶어요.
    다음은 Todo 애플리케이션을 만들어 설치한 후 투고해야 한다.

    개발을 위해 스트레스를 해소하다


    지금은 튜토리얼로만 실행되었지만 glop-svelte라는 플러그인이 있습니다
    glyp watch로 변경될 때마다 컴파일하려고 합니다.
    이상.

    좋은 웹페이지 즐겨찾기