Svelte

JavaScript製超高速フレームワークであるSvelteを導入し、動かすところまでを紹介します。

動作環境

Node.js 7.6.0
yarn
macOS Sierra 10.12.3
svelte-cli v1.3.0

Svelte-cliのインストール

yarn global add svelte-cli

ファイル構成

実際にコーディング

ベースとなるhtmlファイルの作成

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.htmlファイルの作成

MyApp.html

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

コンパイル

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

表示確認

実際のページ

雑感

開発側でコンパイルをしているため、閲覧者のページ読み込み速度が上がるのはすごい良いなと思った。
あと、依存関係が特に無いため、読み込む順番を気にする必要が無いのは楽。
ちょっとSvelteに興味が湧いたので、これを気に何か作ってみようと思う。
次はTodoアプリとか作るので、実装したらまた投稿することにする。

開発でストレスを無くすために

今は、チュートリアルとして、実行しただけですが、gulp-svelteっていうプラグインがあるので、
gulpでwatchして、変更がある毎にコンパイルするようにしたりしたい。

以上。

【JS】JSフレームワークのSvelteを動かしてみた。（動作が超高速らしいよ！）