vue-nativeのpluginを作った話

Transcript

1. vue‑native のplugin を作った話 Meguro.es 2018/8/2 (Thu.)
2. 自己紹介 syumai Twitter: @__syumai Merpay, Inc. (Backend) 前職は五反田のウェディング系ベンチャー React Native Vue.js etc...
3. 告知 Vue Fes Japan 11/3 (Sat.) Vue のコアチー ムメンバー が多数登壇予定！ https://vuefes.jp
4. 本日のお題 vue‑native のplugin を作った話
5. vue‑native とは？ 今年6 月に爆誕、 巷をざわつかせた Vue.js でiOS / Android のネイティブアプリが作れる 作ったのはGeekyAnts RN 向けUI コンポー ネントのNativeBase を作っている インドのチー ムっぽい vue‑native.io
6. Vue でiOS / Android のネイティブアプリが作れる すごい！
7. と思いきや 実はVue コンポー ネントをReact のコンポー ネントに変換してるだ け 変換したコンポー ネントをReact Native で動かしてる
8. え、 これってreact‑vue に似てない？ https://github.com/SmallComfort/react‑vue
9. 去年のスライドより
10. Vue コンポー ネントをReact コンポー ネント内で使った り
11. Vue のアプリをReact Router で書いたりして遊びました
12. やっぱり、react‑vue のフォー クでした vue‑native‑core のREADME.md にクレジットが書いてある react‑vue のreact‑native 対応版、 react‑vue‑native‑scripts をベー スにしたらしい ちなみに、react‑vue はvue のフォー クなので、 それをさらにフォー クしたものがvue‑native
13. Weex あるじゃん？ 色々 つらい スタイリングがつらい UI コンポー ネントを外部のライブラリに依存しないと綺麗に作 るのは難しい 組み込みのライブラリの質が良くない
14. 主導してたAlibaba が最近はFlutter 使ってるっぽい
15. NativeScript‑Vue 今年2 月にNativeScript のVue.js 版登場 Weex よりは大分良さそう 何故か事例をあまり聞かない 公式サンプルを見ると、 若干のネイティブっぽくなさがある i O S のP l a y g r o u n d で動かしたけど、 B u t t o n 押しても半透明にならなかった… 誰かやり方知ってたら教えてください
16. 一方、vue‑native react‑native のコンポー ネントが使える ネイティブとの違和感は少ない 強いライブラリがめっちゃある react‑navigation react‑native‑vector‑icons lottie‑react‑native 普通にExpo が使える 意外と筋が良いのでは？
17. 反応は上々 登場からたった2 ヶ月で4400 star 突破
18. 本題に戻ります vue‑native のplugin を作った話
19. って言ったものの、 別にvue‑native として提供しているplugin のシステ ムはありません
20. 正しく言うと vue‑native のmetro bundler transformer を差し替えるplugin を作っ た話
21. 経緯を話します
22. vue‑native が出た日のツイー ト
23. 膨らむ期待
24. 辛い現実
25. この時わかったこと 単一ファイルコンポー ネント(SFC) は書けるけど、lang は指定でき ない Sass, TS, Pug 全部無理です CSS のネストは出来ない そもそもCSS のセレクタはclass しか無い
26. 自分で何とかしよう
27. 方針 Vue => React のトランスパイルはmetro bundler のtransformer で行 っている ここをいじればよさそう
28. metro bundler fb 製のJS バンドラー react‑native やreact‑vr で使われている
29. vue‑native のToDo アプリを見に行ってみる
30. rn‑cli.config.js metro bundler の設定ファイルで、transform に使うmodule のパスを 指定している
31. vueTransformerPlugin.js vue‑native‑scripts を呼んで、 ファイルを渡している この結果を使っているっぽい
32. vue‑native‑scripts/src/scripts/compiler.js compileVueToRn
33. これだ！
34. compileVueToRn がやっていたこと i m p o r t R e a c t f r o m ' r e a c t ' とかのコー ドを生のstring を連結し て作る v u e - n a t i v e - t e m p l a t e - c o m p i l e r でVue のSFC をパー スする パー スした結果得られた t e m p l a t e , s c r i p t , s t y l e からReact のコンポー ネントを生成してコー ドに追加する ファイルに書き出す
35. compileVueToRn がやっていたこと パー スした結果得られた t e m p l a t e , s c r i p t , s t y l e からReact の コンポー ネントを生成してコー ドに追加する ここに挟み込んだらできそう
36. 勢いで完遂
37. 成果物 vue‑native‑custom‑transformer‑plugin サンプルアプリ
38. やった事 パー スした t e m p l a t e , s c r i p t , s t y l e に対して、 指定され た l a n g attribute にマッチするプラグインを使って、 トランスパイ ルする仕組みを入れた トランスパイル結果は、 生のHTML, JS, CSS が返ってくるので、 そ れを元々 あったコー ドに渡してやるだけ これをmetro bundler で使えるようにした
39. 辛かった事 metro bundler のデバッグがめちゃくちゃ辛い console.log もconsole.error もどこかに飛んで行く どこで落ちたかわからない console に何も出ないので、 ログをファイルに吐き出せばよか ったと後から気付いた （ 勢い駆動開発だったので、 そこまでやらなかった） 辛うじて、iOS emulator 上には何かしらのエラー が出てたの で、 それで何とかした
40. 中の人からの反応 非公式にTS サポー トをVue Native に入れやがった！
41. 公式からの反応 私達はもう、 チー ムです
42. まとめ vue‑native は意外と見込みあるかも とは言え、 機能はまだまだ足りてない 満足いかなかったら、 自分で何とかしても良いかも 何か作ると、 公式から反応もらえてちょっと楽しい
43. 補足
45. Vue.js 本体のロー ドマップによると、 3.x 系でcustom renderer API が入る NativeScript, Weex, WeChat( ミニアプリ？) などのWeb 以外の利用 法をター ゲットにしている そのうち、vue を無理やりフォー クしなくても、vue‑native 的な仕 組みが作れるようになるかも？
46. ご清聴ありがとうございました！