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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 2/35 服部雄輝｜ Yuki Hattori Front‑end developer @ Speee ｜ @yhatt ｜ @y_hatt 2 2

Slide 3

Slide 3 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 3/35 Speee の主力 JS ライブラリ勢力図 3 3

Slide 4

Slide 4 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 4/35 Vue 0% 自分も普段は React を書いてます 4 4

Slide 5

Slide 5 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 5/35 Vue を触るきっかけ The first encounter with Vue 5 5

Slide 6

Slide 6 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 6/35 Marp Markdown Presentation Writer https://yhatt.github.io/marp/ 現在、開発は中止しています現在、開発は中止しています 6 6

Slide 7

Slide 7 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 7/35 Marp Next by Marp team The brand‑new Markdown presentation ecosystem 7 7

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 9/35 インテグレーションを拡大エコシステムの価値を高める Increase the value of ecosystem by enlarged integrations 9 9

Slide 10

Slide 10 text

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( , document.getElementById('react-app') ) 10 10

Slide 11

Slide 11 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 11/35 Vue でも使ってもらいたい We want Vue users to use Marp renderer too! 11 11

Slide 12

Slide 12 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 12/35 @marp‑team/marp‑vue Released at 2019‑03‑27 12 12

Slide 13

Slide 13 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 13/35

import { Marp } from '@marp-team/marp-vue' const markdown = '# Page 1\n\n---\n\n## Page 2' export default { components: { Marp }, data: () => ({ markdown }), } #app [data-marpit-svg] { background: #eee; box-shadow: #ccc 0px 5px 10px; margin: 40px; } 13 13

Slide 14

Slide 14 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 14/35 Marp Vue コンポーネントを公開するまで The road to release Marp Vue 14 14

Slide 15

Slide 15 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 15/35 Marp レンダラーの基本 1. Marp Core に Markdown を渡す 2. 変換された HTML と CSS を描画 15 15

Slide 16

Slide 16 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 16/35 Prototyping! on CodeSandbox 16 16

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 18/35 React / Vue 共通の要件を抽出 Extract requirements for Marp renderer component 18 18

Slide 19

Slide 19 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 19/35 仮想 DOM で表示｜ Virtual DOM rendering カスタムレンダラー｜ Custom renderer Web Worker (Experimental) 19 19

Slide 20

Slide 20 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 20/35 仮想 DOM で表示 Reflow / Repaint を最小限に 20 20

Slide 21

Slide 21 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 21/35 HTM Hyperscript Tagged Markup https://github.com/developit/htm 21 21

Slide 22

Slide 22 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 22/35 createElement in React & Vue

Hello, World!

// 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)

Slide 23

Slide 23 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 23/35 カスタムレンダラー利用者が表示結果をカスタマイズ 23 23

Slide 24

Slide 24 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 24/35 Custom renderer for React Render Props: スライドの内容を受ける関数を渡す {slides => (

{slides.map(({ slide }) => (

{slide}

))}

)} 24 24

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 26/35 Custom renderer for Vue Scoped slots で変換結果を受ける

26 26 ※ Vue 2.6 の ※ Vue 2.6 の v-slot v-slot を使用、レンダリング用コンポーネントを使用、レンダリング用コンポーネント MarpSlide MarpSlide も一緒に必要も一緒に必要

Slide 27

Slide 27 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 27/35 Web Worker (Experimental) 一連の変換処理を Worker に逃がす 27 27 ※ Vue 固有の処理ではないので、興味があればコードをご覧ください ※ Vue 固有の処理ではないので、興味があればコードをご覧ください

Slide 28

Slide 28 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 28/35 メインスレッドがブロックされないライブプレビューの体感速度がさらに向上重い Marp Core を Worker で遅延読み込み JS バンドルサイズの大幅な縮小 28 28

Slide 29

Slide 29 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 29/35 Try on Storybook! MarpWorker Large Markdown https://marp‑vue.netlify.com/ 29 29

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 31/35 ≒ 31 31

Slide 32

Slide 32 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 32/35 まとめ 1mm も触ってなくても大丈夫!! React が分かるなら、知識を大部分で活かせる Vue は日本語の資料が手厚く、難なく移植できた Marp Vue + Marp React の実用性を高めていき、 Marp エコシステムの発展に繋げたい 32 32

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 34/35 BONUS: Marp Vue 活用例 A real‑world use case of Marp Vue 34 34

Slide 35

Slide 35 text

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