Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Vue.jsをhaxeで

1.094 visualizaciones

Publicado el

NGK2017Bでの発表資料です。

Publicado en: Tecnología
  • Sé el primero en comentar

Vue.jsをhaxeで

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

×