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して、変更がある毎にコンパイルするようにしたりしたい。
以上。