Vim on Browser (short) - Speaker Deck

Slide 1

Slide 1 text

on emscripten night (2016/10/05) @Linda_pp @rhysd

Slide 2

Slide 2 text

Vim on Browser

Slide 3

Slide 3 text

Vim.js • Vim.js ͱ͸ • Vim.js ͷ࢓૊Έ • Vim.js ͷػೳ

Slide 4

Slide 4 text

Vim.js ͱ͸ • https://github.com/coolwanglu/vim.js/ • Vim Λϒϥ΢βʹҠ২ͨ͠΋ͷ • Author: Wang Lu (ɹɹ@coolwanglu) • Emscripten Λ࢖ͬͯ Vim ͷίʔυΛ JavaScript (asm.js) ʹίϯύΠϧ

Slide 5

Slide 5 text

Vim.js ͷ࢓૊Έ • Vim ͷϑϩϯτΤϯυ෦෼Λ֦ு • gui_gtk.c ΍ gui_win32.c, gui_x11.c ͳͲʹՃ͑ ͯ gui_web.c Λ࣮૷ • gui_web.c ಺Ͱ Emscripten ͷ API Λ௨ͯ͠ϒϥ ΢βଆ (JavaScript) ͱͭͳ͛Δ

Slide 6

Slide 6 text

Vim.js ͷ࢓૊Έ IUNM಺Ͱ+4ʹίϯύΠ ϧ͞ΕͨίʔυΛϩʔυ ॳظԽॲཧ ɾϑΥϯταΠζऔಘ ɾDBOWBTཁૉͷॳظԽ ɾΦϯϝϞϦ'JMF4ZTUFN &NTDSJQUFOΛܦ༝্͕ͯͬͯ͘͠Δ &WFOUʹैͬͯεΫϦʔϯΛDBOWBT ཁૉʹඳը LFZQSFTTͰೖྗΛऔಘ͢Δ Ϣʔβ TDSJQU Ωʔೖྗ ௨஌

Slide 7

Slide 7 text

Vim.js ͷػೳ • .vimrc ͸ Local Storage ্ʹஔ͔ΕΔͷͰΧε λϚΠζˍอଘ͕Մೳ • Vim script ͕ಈ͘ → Vim ϓϥάΠϯ͕ಈ͘ • :! console.log(‘Hello, JavaScript!’)

Slide 8

Slide 8 text

Vim.js ׆༻ྫ • react-vimjs Ͱ markdown ΤσΟλ • ϓϥάΠϯͷΦϯϥΠϯσϞ

Slide 9

Slide 9 text

react-vimjs ͱ͸ ίϯύΠϧࡁΈͷ Vim.js Λ bundle ͠ɼReact ίϯϙʔωϯτͱͯ͠؆୯ ʹ࢖͑ΔΑ͏ʹͨ͠΋ͷ 1 import React from 'react' 2 import Vim from 'react-vimjs' 3 4 React.render( 5 6 Loading... 7 , 8 document.body 9 );

Slide 10

Slide 10 text

markdown σϞ Vim Ͱฤू͍ͯ͠ΔςΩετ͕ TextChanged ͰϓϨϏϡʔ͞ΕΔ IUUQSIZTEHJUIVCJPSFBDUWJNKT

Slide 11

Slide 11 text

markdown σϞ

Slide 12

Slide 12 text

Vim ϓϥάΠϯ clever-f.vim ͷΦϯϥΠϯσϞ IUUQSIZTEHJUIVCJPDMFWFSGWJN Vim ϓϥάΠϯΛ github pages Ͱମ ݧͰ͖Δ

Slide 13

Slide 13 text

clever-f.vim ͷ ΦϯϥΠϯσϞ