魔法のように消えるJSフレームワーク

かなり奇妙ですが、これまでのところ、少なくともこれについて非常に興味深い開発ツールに関するHabréに関する記事はありませんでした。 おそらく、これは、このフレームワークが非常に新しいという事実と、その基盤となるアイデアによるものです。 あるいは、重要なのは、「ビッグ3」フロントエンドにまつわる永続的な誇大広告にあり、代替ソリューションの概要を閉じることです。 確かではありませんが、この記事ではこの誤算を修正しようとします。 切り替えないでください。

複雑な壁にぶつからない限り、バニラJavaScriptで本格的なアプリケーションを書くことはできません。 しかし、コンパイラがあなたのためにそれを行うことができます。

-リッチ・ハリス、2016

プロローグ

遠くから行きます。 2013年頃から現在まで、私は自分の仕事でRactiveJSを積極的に使用してきました。それほど人気はありませんが、リアクティブMVVMフレームワークを開発しています。 その瞬間、Ractiveが登場したとき、それは非常に革新的で、私の意見ではまだ最も便利なAPIを持っているように思えます。 ただし、他のツールと同様に、Ractiveには欠点があります。 私にとっての主な欠点は、そのサイズ（最小化された200Kb）であり、競合他社と比べて作業速度がそれほど高くないことです。

比較的最近、サイト用のかなりインタラクティブなウィジェット（alaコールバックウィジェット）を書くことが必要になりました。 ウィジェットの基本的な要件は明確です：少し重く、素早く動作するはずです。 上記で説明した短所を考慮すると、Ractive、および他のほとんどのJSフレームワーク（Vue〜70Kb / React〜150Kb /など）は、このタスクにはあまり適していません。 そのため、ある時点で、フレームワークやライブラリをまったく使用せずに、バニラJSでウィジェットを作成するという考えさえありました。 しかし、私は幸運でした。

魔法のように消えるUIフレームワーク

そのため、 SvelteJSは、ビルド段階（AoT）でバニラjavascriptでコードをコンパイルするJSフレームワークです。 これに関連して、フレームワーク自体に関連するオーバーヘッドは完全になくなります。 その作成者でありメインのメンテナーであるRich Harrisは、 Rollup 、 Buble 、 Roadtripなどのクールな作品の著者であり、同じRactiveでもあります。 2016年、RichはRactiveのアクティブな作業を停止し、Svelteを開発するために他のメンテナーに任せ、同じ年に彼の新しい開発に関する紹介記事を書きました。

Richは新しい「頭脳」で、フレームワークを使用する理由を再考しようとしました。 なぜ何百、何千キロバイトのjavascriptをユーザーのブラウザーに送信する準備ができているのでしょうか。ネイティブコードの抽象化に固執し、本質的にパフォーマンスを低下させます。 これが問題だと思わない場合は、 Alex Russellのブログをご覧ください。興味深い考えや例がたくさんあります。

だから、リッチは、フレームワークが解決する主なタスクは、フレームワークコードに過度の複雑さを加えることによって、あなた自身のコードの複雑さを減らすことではなく、あなたの考えと問題を解決する方法を構築することであるという結論に達しました。 つまり、フレームワーク自体は必要ありません。 コンポーネントなどのある種のアプローチによって導かれる、アプリケーションを記述する方法のみが必要です。 そして、このための便利なAPIが必要です。 では、フレームワークがアプリケーションコード自体ではなく、コードを記述するための単なる手段であるとしたらどうでしょうか。

Svelteが説明されたタスクに理想的に適しているのはなぜですか？

React、Vue、またはRactiveで記述すると、アプリケーションのコードと、アプリケーションのコードのベースとなっているフレームワーク自体のコードが得られます。これがないと、このコードは先験的に機能しません。 合計で、フレームワークコード（平均100kb）+アプリケーションタスクを実際に解決するアプリケーションコードがあります。 ただし、Svelteで記述する場合、Svelteは主にSvelte APIを使用して記述されたコードからバニラJSを作成するコンパイラであるため、アプリケーションのコードしかありません。 コンパイルされたコードは、アプリケーションのタスクのみを解決し、オーバーヘッドはありません。 したがって、JSバンドルの重さは、アプリケーション自体のコードとまったく同じです。

次に、Svelteは高速です。 実際、Javascript自体と同じくらい高速です。 これは明らかです。Svelteは、書く必要のないバニラのjavascriptであるためです。

要するに、SvelteはバニラJSを書くことなくバニラJSを書くためのツールです。 ここにそのようなトートロジーがあります。 ）））））

優れた機能

そのため、一見、すべてが美味しそうに聞こえますが、よく見る必要があります。 簡単に！

Svelteは、おそらく私が書いたすべてのフレームワークの中で最も穏やかな学習曲線を持っています。 私の場合、Svelte APIはRactive APIとほとんど同じですが、Ractiveがより洗練されていることを除いて、トレーニングさえ必要ありませんでした。 ただし、Svelteはそれほど遅れておらず、その武器庫にいくつかのクールな機能があります。これについては、以下で説明します。

すべてのSvelteのドキュメントは文字通り1 ページ （15分間の読み取り）にあり、インタラクティブなコード例（ 7GUIを含む）を備えたすぐに使用できるREPLもあります。

Svelteアプリケーションの基盤はコンポーネントです（驚き）。 見た目と書き方では、svelteコンポーネントはVueまたはRiotタグの 単一ファイルコンポーネントと非常によく似ており、実際、 Ractiveであっても、ほとんどすべてのフレームワークで長い間使用されてきたものに似ています。 通常、この経済はすべてWebpackまたはRollupのローダーに基づいています。 Svelteにも同じ話があります。svelte-loaderとrollup-plugin-svelteがあります。 svelte-cliを使用して、いつでもコンポーネントを純粋なJSにコンパイルすることもできます。

したがって、Svelteコンポーネントは、次の構造を持つことができる単なるhtmlファイルです。

<!--  html     --> <h1>Hello {{name}}!</h1> <!-- component scoped  --> <style> h1 { color: red; } </style> <!--   ,  ES6  --> <script> export default { }; </script> 

どの要素も必要ありません。 したがって、スクリプトタグをまったく使用せずに、単純なステッパーコンポーネントを次のように記述できます。

 <!-- stepper.html --> <button on:click="set({ count: count - 1 })">-</button> <input bind:value="count" readonly /> <button on:click="set({ count: count + 1 })">+</button> 

Svelte自体は非常にミニマルです。 ただし、同時に、実際にはWebアプリケーションの開発に必要なすべてが含まれています。

コンポーネントと構成

コンポーネントの命令型インスタンス化は次のようになります。

 import MyComponent from './MyComponent.html'; const component = new MyComponent({ target: document.querySelector( 'main' ), data: {} }); 

当然、コンポーネントの構成と属性を介した値の転送があります。

 <div class='widget-container'> <Widget foo="static" bar="{{dynamic}}" /> </div> <script> import Widget from './Widget.html'; export default { data () { return { dynamic: 'this can change' } }, components: { Widget } }; </script> 

スロットを使用したマークアップインジェクションもあります（hi Vue）：

 // Box component <div class='box'> <slot><!-- content is injected here --></slot> </div> // parent component <Box> <h2>Hello!</h2> <p>This is a box. It can contain anything.</p> </Box> 

データと計算された小道具

Svelteコンポーネントには内部状態があり、これは「data」プロパティで説明され、POJOオブジェクトでなければなりません。 RactiveやVueと同様に、Svelteコンポーネントは他のリアクティブデータに応じて小道具を計算できます。

 <p> The time is <strong>{{hours}}:{{minutes}}:{{seconds}}</strong> </p> <script> export default { data () { return { time: new Date() }; }, computed: { hours: time => time.getHours(), minutes: time => time.getMinutes(), seconds: time => time.getSeconds() } }; </script> 

Svelteで計算されたプロパティの唯一のマイナスは、それらのセッターを設定できないことです。 計算されたプロパティは、値を取得するときにのみ機能します。

状態を操作するために、Svelteコンポーネントのインスタンスには組み込みメソッドがあります。

 component.set({ time: new Date() }); component.get('time'); 

set（）メソッドを使用してコンポーネントデータを変更すると、変更はすべての依存する計算されたプロパティとDOMに事後的に適用されます。

オブザーバーとライフサイクルフック

先ほど言ったように 、 Svelteは最小限であるため、 oncreateとondestroyの 2つのライフサイクルフックのみを提供します。 データの変更は、オブザーバーの助けを借りて追跡できます。

 <script> export default { oncreate () { const observer = this.observe('foo', (newVal, oldVal) => {}); this.on('destroy', () => observer.cancel()); } }; </script> 

イベント

Svelteには、プロキシイベント（DOMイベントプロキシ）とカスタムイベント（カスタムイベント）の完全なシステムがあり、コンポーネントにも適用できます。

 <!-- CategoryChooser.html --> <p>Select a category:</p> {{#each categories as category}} <button on:click="fire('select', { category })">select {{category}}</button> {{/each}} <script> export default { data() { return { categories: [ 'animal', 'vegetable', 'mineral' ] } } }; <!-- parent component --> <CategoryChooser on:select="doSomething(event.category)"/> </script> 

ここでは、ボタンのクリックをサブスクライブし、DOMクリックイベントを「onselect」コンポーネントのカスタムイベントに変換します。 さらに、親コンポーネントは、このコンポーネントのonselectイベントをサブスクライブできます。 つまり、カスタムイベントはバブリングの方法も知っています。 すべてがいつも通りです。）））

イベントAPIも最小限です。

 const listener = component.on( 'thingHappened', event => { console.log( `A thing happened: ${event.thing}` ); }); // some time later.. listener.cancel(); component.fire( 'thingHappened', { thing: 'this event was fired' }); 

テンプレートとディレクティブ

Svelteテンプレートの構文は「口ひげ」に非常に似ていますが、実際にはそうではありません。

 <!--       ,     --> <h1 style="color: {{color}};">{{color}}</h1> <p hidden="{{hideParagraph}}">You can hide this paragraph.</p> <!--   --> {{#if user.loggedIn}} <a href='/logout'>log out</a> {{else}} <a href='/login'>log in</a> {{/if}} <!--    --> <ul> {{#each list as item}} <li>{{item.title}}</li> {{/each}} </ul> 

（少なくとも今のところ）Svelteにはカスタムディレクティブはありませんが、すぐに使用できるいくつかのタイプのディレクティブがあります。

 <!-- Event handlers --> <button on:click="set({ count: count + 1 })">+1</button> <!-- Two-way binding --> <input bind:value="count" /> <!-- Refs (like Vue) --> <canvas ref:canvas width="200" height="200"></canvas> <!-- Transitions --> <div transition:fly="{y:20}">hello!</div> 

カスタムディレクティブがまったく表示されるかどうかはわかりません。 それでも、この「AngularJSスタイル」のアプローチは徐々に時代遅れになっているようです。

カスタムメソッドとヘルパー

テンプレートのコンポーネントインスタンスメソッドとヘルパー関数は、次のように定義できます。

 <script> export default { helpers: { toUppeCase: (str) => {} }, methods: { toast: (msg) => {} } }; </script> 

プラグイン

どうやらSvelteには、プラグインシステムにいくつかの開発があります。 確かに、ドキュメントはこれについてまだ沈黙しています。 同じトランジションが個別のモジュールとして実装され、個別のsvelte-transitionsパッケージに組み込まれます。 もちろん、独自のトランジションを作成できます。

コンポーネントインスタンス用の追加メソッド（ svelte-extras ）を備えた個別のパッケージもあり、個別にロードして、Svelte APIを同じRactiveに追加できます。

 ractive.set('list.3.name', 'Rich'); //  set()       svelte.setDeep('list.3.name', 'Rich'); 

一般に、プラグインシステムはまだあまり開発されていないか、いずれにしてもドキュメントに記載されています。 待っています。

SSR

サーバー側のレンダリングも使用できますが、同じRactiveと比較すると非常に奇妙に動作します：

 //      Ractive const html = ractive.toHTML(); //     Svelte require( 'svelte/ssr/register' ); const html = svelte.render( data ); // css      const styles = svelte.renderCss(); 

状態管理

Svelteには独自のストレージメカニズムの解釈があり、一方でRedux / Vuexといくつかの類似点がありますが、さらに多くの違いがあります。 ドキュメントで詳細を読むことができますが、主な違いは、Svelte Storeは状態を変更するメカニズム（免疫、一方向のデータフローなど）ではなく、コンポーネント間の状態を共有（共有）するメカニズムに焦点を当てていることです。 たとえば、最上位コンポーネントで「データ」の代わりに「ストア」を使用すると、すべての子コンポーネントでストレージデータが自動的に利用可能になります。 正直なところ、私はまだこのメカニズムを使用する機会がありませんでしたが、理解している限り、これはアプリケーション全体ではなく、コンポーネントの同じ階層内のグローバルな状態のようなものです。

また、Svelte Storeにはアクションとコミットはありません。 ただし、このようなアクセス制御メカニズムが必要な場合は、Storeクラスを拡張してそのようなロジックを実装できます。

ボーナス

上記では、Svelteの主な機能について簡単に説明しました。 そのミニマリズムと、実際に組み込まれた「ツリーシェーキング」（実際に使用されるもののみが常にコンパイルされる）を考えると、Svelteの機能はそれほど悪くはありません。

ただし、特別な注意を払う必要があるクールなものがいくつかあります。

非同期サポート

私のお気に入りである、約束に基づく非同期値のネイティブサポートから始めます。 次のようになります。

 {{#await promise}} <p>loading...</p> {{then data}} <p>got data: {{data.value}}</p> {{catch err}} <p>whoops! {{err.message}}</p> {{/await}} 

これは驚くほど人生を簡素化します。 Ractiveでも同様のことができますが、このためには特別なPromise-adapterを使用する必要があります。 Svelteはそのまま使用できます。

名前空間

私が他のどこにも見たことがないこと-名前空間の助けを借りて、コンポーネントのスコープを決定できます。 たとえば、コンポーネントがsvgタグ内でのみ使用できる場合、これを指定できます。

 <g transform='translate({{x}},{{y}}) scale({{size / 366.5}})'> <circle r="336.5" fill="{{fill}}"/> <path d="m-41.5 298.5c-121-21-194-115-212-233v-8l-25-1-1-18h481c6 13 10 27 13 41 13 94-38 146-114 193-45 23-93 29-142 26z"/> </g> <script> export default { namespace: 'svg' }; </script> 

興味深い機会です。 これがどれほど役立つかはまだ明らかではありませんが、確実に見込みがあります。

<：Self>タグ

また、珍しい機能は、コンポーネントを再帰的に含めることです：

 {{#if countdown > 0}} <p>{{countdown}}</p> <:Self countdown='{{countdown - 1}}'/> {{else}} <p>liftoff!</p> {{/if}} 

カウントダウンカウンターの予想外の実装ではありませんか。 ）））

<：Window>タグ

非常に疑わしい機能ですが、他のどこにも会ったことはありません。 このタイプのタグを使用すると、ウィンドウで宣言的にイベントをハングさせることができます。

 <:Window on:keydown='set({ key: event.key, keyCode: event.keyCode })'/> 

サッパー

昨日、このプロジェクトについて学びました。 このプロジェクトはアイデアの概要にすぎませんが、RichはNext.js / Nuxt.jsの類似物のようなことをするようです。 すべてがうまくいけば、アナログはリッチの固有の程度の個性で作られると確信しています。

エピローグ

最後まで読んでくれたすべての人に感謝します。 彼らが言うように、私のチャンネルを好きで購読してください、そしてフォースがあなたと一緒に来るかもしれません！

真剣に、私はスベルトのような興味深い現象を一般的な用語で概説できたと思います。 私からは、2つのプロジェクトでのSvelteの使用が完全に成果を上げたと付け加えることができます。 個人的には、Ractiveの機能の豊かさに少し欠けていますが、Svelteの仕事の原理と同様に、ミニマリズムはそれをさらに使うために私たちを大いに賄briします。 現在、私は彼を新しい、かなり大きなプロジェクトに参加することを真剣に考えています。そして時間が経つにつれて、RactiveからSvelteに完全に移行することが可能になります。

Svelteも発見してください。 頑張って

更新：

追加してくれたserjogaに感謝します。 StencilJSは、 Svelteと同じパスをたどっているようですが、より複雑な「Angular2スタイル」の構文とJSXしかありません。

更新2：

Svelteに興味があり、その開発をフォローしたい方-ロシア語の電報チャネルSvelteJSへようこそ 。 よろしくお願いします！