Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで

Floor sponsor LT by Yuki Hattori (yhatt) in Vue.js v-tokyo Meetup #9
https://vuejs-meetup.connpass.com/event/124393/

Web version:
https://yhatt-lt-vuejs-v-tokyo-meetup-9.netlify.com/

Marp Vue:
https://github.com/marp-team/marp-vue

marp-vue-slide (Real-world use case of Marp Vue):
https://github.com/yhatt/marp-vue-slide

Transcript

1. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 1/35 Marp Vue Vue を 1mm も触ったことない人がコンポーネントを公開するまで Floor sponsor LT by Yuki Hattori (@yhatt) | Speee, Inc. 2019‑04‑24 | Vue.js v‑tokyo Meetup #9
2. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 2/35 服部 雄輝 ｜ Yuki Hattori Front‑end developer @ Speee ｜ @yhatt ｜ @y_hatt 2 2
3. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 3/35 Speee の主力 JS ライブラリ勢力図 3 3
4. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 4/35 Vue 0% 自分も普段は React を書いてます 4 4
5. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 5/35 Vue を触るきっかけ The first encounter with Vue 5 5
6. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 6/35 Marp Markdown Presentation Writer https://yhatt.github.io/marp/ 現在、開発は中止しています 現在、開発は中止しています 6 6
7. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 7/35 Marp Next by Marp team The brand‑new Markdown presentation ecosystem 7 7
8. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 8/35 Marpit Base framework Marp Core The core of Marp tools Marp CLI CLI converter Marp VSCode VS Code extension Marp React React renderer component Marp Web Web interface (PWA) Marp Desktop Marp Web wrapper for desktop 8 8 Stable ｜ Stable ｜ In development ｜ In development ｜ Planned Planned
9. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 9/35 インテグレーションを拡大 エコシステムの価値を高める Increase the value of ecosystem by enlarged integrations 9 9
10. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 10/35 e.g. Marp React Marp renderer component for React import { Marp } from '@marp-team/marp-react' import React from 'react' import ReactDOM from 'react-dom' const markdown = '# Hello!' ReactDOM.render( <Marp markdown={markdown} />, document.getElementById('react-app') ) 10 10
11. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 11/35 Vue でも使ってもらいたい We want Vue users to use Marp renderer too! 11 11
12. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 12/35 @marp‑team/marp‑vue Released at 2019‑03‑27 12 12
13. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 13/35 <template> <div id="app"> <Marp :markdown="markdown" /> </div> </template> <script> import { Marp } from '@marp-team/marp-vue' const markdown = '# Page 1\n\n---\n\n## Page 2' export default { components: { Marp }, data: () => ({ markdown }), } </script> <style> #app [data-marpit-svg] { background: #eee; box-shadow: #ccc 0px 5px 10px; margin: 40px; } </style> 13 13
14. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 14/35 Marp Vue コンポーネントを公開するまで The road to release Marp Vue 14 14
15. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 15/35 Marp レンダラーの基本 1. Marp Core に Markdown を渡す 2. 変換された HTML と CSS を描画 15 15
16. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 16/35 Prototyping! on CodeSandbox 16 16
17. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 17/35 React: React: https://codesandbox.io/s/kkryjmyy75 https://codesandbox.io/s/kkryjmyy75 | Vue: | Vue: https://codesandbox.io/s/2x994l3roj https://codesandbox.io/s/2x994l3roj 17 17
18. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 18/35 React / Vue 共通の要件を抽出 Extract requirements for Marp renderer component 18 18
19. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 19/35 仮想 DOM で表示｜ Virtual DOM rendering カスタムレンダラー｜ Custom renderer Web Worker (Experimental) 19 19
20. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 20/35 仮想 DOM で表示 Reflow / Repaint を最小限に 20 20
21. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 21/35 HTM Hyperscript Tagged Markup https://github.com/developit/htm 21 21
22. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 22/35 createElement in React & Vue <div id="html">Hello, <b>World!</b></div> // React createElement('div', { id: 'html' }, [ 'Hello', createElement('b', null, 'World!'), ]) // Vue createElement('div', { attrs: { id: 'html' } }, [ 'Hello', createElement('b', null, 'World!'), ]) 22 22 ※ Markdown ※ Markdown HTML HTML HTM HTM createElement (JSX) createElement (JSX)
23. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 23/35 カスタムレンダラー 利用者が表示結果をカスタマイズ 23 23
24. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 24/35 Custom renderer for React Render Props: スライドの内容を受ける関数を渡す <Marp markdown="# Hello, Marp!"> {slides => ( <div className="marp"> {slides.map(({ slide }) => ( <div className="slide" key={i}> {slide} </div> ))} </div> )} </Marp> 24 24
25. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 25/35 In case you are wondering what's the equivalent pattern in Vue, it's called scoped slots (and if using JSX it works the same as React) — Evan You (@youyuxi) 25 25
26. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 26/35 Custom renderer for Vue Scoped slots で変換結果を受ける <Marp markdown="# Hello, Marp!" v-slot="slides"> <div class="marp"> <div class="slide" v-for="slideObj in slides"> <MarpSlide :slide="slideObj.slide" /> </div> </div> </Marp> 26 26 ※ Vue 2.6 の ※ Vue 2.6 の v-slot v-slot を使用、レンダリング用コンポーネント を使用、レンダリング用コンポーネント MarpSlide MarpSlide も一緒に必要 も一緒に必要
27. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 27/35 Web Worker (Experimental) 一連の変換処理を Worker に逃がす 27 27 ※ Vue 固有の処理ではないので、興味があればコードをご覧ください ※ Vue 固有の処理ではないので、興味があればコードをご覧ください
28. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 28/35 メインスレッドがブロックされない ライブプレビューの体感速度がさらに向上 重い Marp Core を Worker で遅延読み込み JS バンドルサイズの大幅な縮小 28 28
29. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 29/35 Try on Storybook! MarpWorker Large Markdown https://marp‑vue.netlify.com/ 29 29
30. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 30/35 コンポーネントの実装 Vue v3 系を見越して実装 vue-class-component + JSX vue-property-decorator (for TypeScript) Babel やビルドツールは今のところ未使用 TypeScript の --jsx react を Vue にマップ 30 30
31. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 31/35 ≒ 31 31
32. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 32/35 まとめ 1mm も触ってなくても大丈夫!! React が分かるなら、知識を大部分で活かせる Vue は日本語の資料が手厚く、難なく移植できた Marp Vue + Marp React の実用性を高めていき、 Marp エコシステムの発展に繋げたい 32 32
33. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 33/35 Welcome to contribute https://github.com/marp‑team/marp https://github.com/marp‑team/marp‑vue 33 33
34. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 34/35 BONUS: Marp Vue 活用例 A real‑world use case of Marp Vue 34 34
35. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 35/35 marp‑vue‑slide Marp Vue + Vuex + vue‑awesome‑swiper https://github.com/yhatt/marp‑vue‑slide f / F11 : Fullscreen p : Presenter view Ctrl/Cmd+P To PDF 35 35