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

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

16f3ea7644bc4ce1dfc7de932291af58?s=128

Yuki Hattori

April 24, 2019
Tweet

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