Download to read offline
Vue.jsをhaxeで
- 1.
- 2. 自己紹介：terurou • デンキヤギ(株) 代表取締役 •NGK2017B実行委員、DSTokai管理人 • 主に基盤チームおじさん • Transiru（自社開発）に最近やっと携われるように… • プレゼン（スライド＋音声）をWeb配信 • ビジネス面での転換もあり、Haxe/JS + Vue.jsで作り直し中
- 3. 社員募集 • 会社見学で焼肉or寿司が食べられます（採用教育費） • 「広義のWeb系開発者」を歓迎 •業務SE/ディレクター（ビジネス要求を交通整理する人）や 型に興味のあるWeb Frontendエンジニアは大歓迎 • 連絡先：@terurou / info@denkiyagi.jp まで
- 4.
- 5. Vue.jsとは • 三大Web FrontendFrameworkの一角（2017年末時点） • Vue.js以外はReact(+Redux), Angular • 学習コストが低い（vs Angular, React/Redux） • 原理主義すぎない, Webは泥臭い（vs React） • オールインワンではない（vs Angular） • 他より手軽で、開発規模が小さくても適用しやすいが、 プロジェクト統制力が若干劣る
- 6. Haxeとは • オブジェクト指向＋関数型 • ActionScript3(ECMAScript4の構文＋OCaml） • マルチプラットフォームをターゲットにコンパイル • JS, Flash, C++, C#, Java, PHP, Lua, … • ゲームでの実績が多い • Haxe創始者はShiro Games（Indie Game開発）のCTO • 日本国内の著名なユーザー企業はヌーラボ社
- 7.
- 8. Haxeの良いところ • HaxeのEnumはすごい • 代数的データ型、GADT •強力なマクロ • ASTを操作してコード生成・変換 • ビルドプロセス内でのIO（File, Process, Socket, …） • JSへのトランスコンパイルが超高速 • JSターゲット以外はほぼ触ってないのでわからん… 覚えて帰るか、 SNSに流しましょう
- 9.
- 10.
- 11.
- 12. Single File Components（SFC）とは •JS（NPMモジュール）, HTML Template, CSS Modulesを 1ファイルにまとめて、コンポーネント管理しやすく • 性能面も有利 • Webpack （vue-loader）等でのビルドが必要となるが、 Template文字列が事前コンパイルされる • Vue.js自体を軽量版（Template Compiler抜き）にできる • 開発ツールサポートあり（VS Code Plugin: vetur）
- 13. SFCのイメージ <template> <p>Hello {{name}}!</p> </template> <script> module.exports ={ data: () => { name: 'terurou' } } </script> <style scoped> p { font-size: 20px; } </style> 1ファイル内に ・Template(HTML) ・JS(NPM Module) ・CSS
- 14.
- 15.
- 16. HaxeとSFCの定義粒度のギャップ • Haxeの管理単位はプロジェクトごと • プロジェクトをビルドすると、プロジェクト全体が単一の JSファイルになって出力される •出力JSファイルはWebpack等でbundleしたものに近い • SFCの管理単位はコンポーネントごと • vue-loaderはbundleされていないJSを期待している • 1コンポーネント＝1プロジェクトは破綻した発想
- 17. haxe-modular （採用見送り） • Haxe/JS出力コードを複数NPMモジュールに分割できる •NPMモジュールに分割できれば、vue-loaderで処理できる • 色々気持ち悪いので、採用見送り • コード記述に制限が生じる（分割箇所を特定させるため） • ビルド後に別処理で無理やりJSファイルを分割する実装 • 蛇足だが、Haxe + React方面では使われているっぽい
- 18.
- 19. そもそもSFCを使うと何が嬉しいんだっけ？ • JS（NPMモジュール）, HTMLTemplate, CSS Modulesを 1ファイルにまとめて、コンポーネント管理しやすく • 性能面も有利 • Webpack （vue-loader）等でのビルドが必要となるが、 Template文字列が事前コンパイルされる • Vue.js自体を軽量版（Template Compiler抜き）にできる • 開発ツールサポートあり（VS Code Plugin: vetur）
- 20. そもそもSFCを使うと何が嬉しいんだっけ？ • JS（NPMモジュール）, HTMLTemplate, CSS Modulesを 1ファイルにまとめて、コンポーネント管理しやすく • 性能面も有利 • Webpack （vue-loader）等でのビルドが必要となるが、 Template文字列が事前コンパイルされる • Vue.js自体を軽量版（Template Compiler抜き）にできる • 開発ツールサポートあり（VS Code Plugin: vetur）
- 21.
- 22.
- 24.
- 25. Vue.hxというものを作り始めた • Haxe externfor Vue.js • Vue.js extern自体は他にも存在するが敢えて新規開発 • SFCの扱い方に新規性がある • GitHub • https://github.com/DenkiYagi/vue.hx • この発表の時点では「ソースが置いてあるだけ」の状態
- 26. 方向性：Webpackを捨てる • SFCを使って嬉しい事はTemplateの事前コンパイル • ブラウザ実行時に辻褄が合っていればOK •Webpackに頼らずTemplateをコンパイルする方法を検討 • もしHaxeだけでビルド可能であれば、高速化も期待できる • Webpackに限らずJSのビルドツールは全体的に遅い傾向…
- 27. SFCのコンパイル方法：Webpack（vue-loader）を解析 • vue-template-compilerが使われている • SFCをコンパイルすると<template>はrender関数文字列、 <style>はCSS文字列となる •render関数はそのままJSコードとして扱える • CSSはTemplateで記述した文字列がそのまま出力されるので PostCSS（CSS ModulesやAutoprefixer等）で別途処理している
- 28. できたもの：HaxeのマクロでSFCを処理 • SFCをマクロで処理しやすいように分割記述 • JS部分のみをHaxeクラスとして記述 •HTML/CSS部分を<script>パートなしのSFCとして記述 • Single Fileとは何だったのか • @:autoBuildマクロにより、Haxe側から紐づくSFCを コンパイルして取り込む
- 29. @:autoBuildマクロ • @:autoBuild付きinterfaceを継承したクラスを作成すると、 コンパイル時のマクロ処理対象となる • マクロからNode.jsプロセスを実行し、SFCを取り込む •vue-loaderの解析結果に準拠してSFCをコンパイル • render関数はAST変換で当該クラスにインライン埋込 • CSSはマクロのポスト処理コールバックでファイル出力
- 30. Vue.hxでのコンポーネント定義イメージ // Hello.hx import vuehx.IVueComponent; classHello implements IVueComponent { // vue.jsのオプションを記述 var _ = { data: function () { return { name: "terurou" }; } } } <!– Hello.vue --> <template> <p class="$styles.hello">Hello {{name}}!</p> </template> <style modules> .hello { font-size: 20px; } </style> IVueComponentを継承するとマクロが 自動でSFCをコンパイル＋結合する。 Single Fileとは何だったのか。
- 31. Vue.hxの残課題 • externをまだ完全に書き切ってない＋テスト不足 • いちおう自社プロダクトで使用中だが… •Vue.js自体への型付けをもう少し工夫できる余地あり • 型安全、入力補完 • マクロのパフォーマンスチューニング • SFCのコンパイルキャッシュ • Haxelib（Haxeのパッケージマネージャ）に未対応
- 32. Webpackを捨てた影響 • Hot ModuleReplacement（HMR）が利用不能に • Haxe/JSはビルドが超高速なので、影響なしでは？？？ • そもそも「モダンJS開発のビルド遅すぎで開発効率が低い」 問題に対するワークアラウンドがHMRという認識 • HMRでは開発ビルドと本番ビルドと大きな差異が発生する • Browsersync等でのオートリロードで必要十分 • むしろ生産性は向上したのでは？？？
- 33.
- 34. まとめ • HaxeとVue.js（SFC）は相性があまり良くないが、 Webpack（Vue.jsのエコシステム・ツールチェイン）を 捨てることで、快適なHaxe +Vue.js開発を実現 • Haxeのマクロすごい • Vue.js公式がNPMでTemplate Compilerを配布していて 本当によかった • Vue.hxは自社で使うので今後アップデート予定