Slide 1

Slide 1 text

Vim on Browser vimconf 2015

Slide 2

Slide 2 text

@Linda_pp @rhysd

Slide 3

Slide 3 text

.ZPXOMBOHVBHFXSJUUFO XJUI$--7. %BDIT .BSLEPXO QSFWJFXBQQ 4IJCB (JU)VCUSFOEJOH SFQPTDMJFOU 5SFOEZ 5JMJOHXJOEPX CSPXTFS 5JMFDUSPO HJUIVCDPNQMFUFWJN WJNDSZTUBM

Slide 4

Slide 4 text

Repo search by “user:rhysd”

Slide 5

Slide 5 text

Vimitivity • clever-f.vimɿExtensible ‘f’ mapping (repeating, highlighting, and so on) • vim-clang-formatɿUsing clang-format from Vim • committia.vimɿEnhanced Git commit writing • vim-jp/vital.vim comitter (An awesome Vim script library)

Slide 6

Slide 6 text

Vim on Linux

Slide 7

Slide 7 text

Vim on Windows

Slide 8

Slide 8 text

Vim on OS X

Slide 9

Slide 9 text

Vim on Android IUUQTQMBZHPPHMFDPNTUPSFBQQTEFUBJMT JEOFUNPNPEBMPBQQWJNUPVDIIMKB

Slide 10

Slide 10 text

Vim on iOS

Slide 11

Slide 11 text

Vim on Browser

Slide 12

Slide 12 text

Vim.js • What is Vim.js? • Emscripten • How Vim.js works • Notes of Vim.js

Slide 13

Slide 13 text

What is Vim.js? • http://coolwanglu.github.io/vim.js/ emterpreter/vim.html • Porting Vim to browser • Author: Wang Lu (ɹɹ@coolwanglu) • Compile Vim’s C code to JavaScript (asm.js) using Emscripten!

Slide 14

Slide 14 text

http://kripken.github.io/emscripten-site/ A compiler from C,C++,LLVM IR to optimized JavaScript (asm.js)

Slide 15

Slide 15 text

• Porting codes written in C or C++ • Pseuso memory state and file system on JavaScript • OpenGL → WebGL • Compiling Vim with Emscripten makes Vim running on browsers! → Vim.js

Slide 16

Slide 16 text

How Vim.js works • Add gui_web.c as front end of Vim • https://github.com/coolwanglu/vim.js/blob/master/src/ gui_web.c • Communicate between JavaScript and Vim via Emscripten APIs • .vimrc is put on Local Storage. You can edit and save it! • Running Vim script → Running Vim plugins!! • :! console.log(‘Hello, JavaScript!’)

Slide 17

Slide 17 text

How Vim.js works -PBEJOHDPNQJMFE+4DPEF JOIUNM *OJUJBMJ[BUJPO ɾ(FUGPOUTJ[F ɾ*OJUJBMJ[FDBOWBTFMFNFOU ɾ$POTUSVDU'JMF4ZTUFNPO NFNPSZ %SBX7JNTDSFFOUPDBOWBT GPMMPXJOHFWFOUFNJUUFEWJB &NTDSJQUFO"1* (FUJOQVUWJBLFZQSFTTFWFOU .F TDSJQU *OQVULFZT /PUJGZ

Slide 18

Slide 18 text

Notes for Vim.js • Much knowledge is required to compile Vim using Emscripten. • Vim is built with ‘small’ feature • To suppress memory usage, runtime directory is almost empty. • To obtain user’s input via keypress eventɼ Japanese is not available :(

Slide 19

Slide 19 text

Introduced in dailyjs

Slide 20

Slide 20 text

)NN5IBUXPSLTHSFBU BDUVBMMZ*TUIFSFBOZ QSBDUJDBMVTBHF

Slide 21

Slide 21 text

react-vimjs • What is React.js? • What is react-vimjs? • markdown demo

Slide 22

Slide 22 text

What is React.js • https://facebook.github.io/react/ • Web front end framework by Facebook • Write DOM construction by JavaScript (Virtual DOM) • React runtime performs actual page rendering (differential DOM rendering) • Separate DOM operation and raise web application performance dynamic contents (mainly for SPA)

Slide 23

Slide 23 text

What is React.js? 1 React.render( 2
3

Hello, World!

4
, 5 document.querySelector('.main') 6 );

Slide 24

Slide 24 text

What is React.js? 1 class MyComponent extends React.Component { 2 render() { 3 return ( 4
5

Hello, {this.props.name}

6
7 ); 8 } 9 } 10 11 React.render( 12 , 13 document.querySelector('.main') 14 );

Slide 25

Slide 25 text

What is react-vimjs? https://github.com/rhysd/react-vimjs $ npm install react-vimjs

Slide 26

Slide 26 text

What is react-vimjs? Bundles compiled Vim.js assets. Vim.js can be used easily as React component. 1 import React from 'react' 2 import Vim from 'react-vimjs' 3 4 React.render( 5 6 Loading... 7 , 8 document.body 9 );

Slide 27

Slide 27 text

markdown demo A text editing with Vim is previewed as markdown. It’s updated on Vim’s TextChanged event. IUUQSIZTEHJUIVCJPSFBDUWJNKT

Slide 28

Slide 28 text

markdown demo

Slide 29

Slide 29 text

markdown demo 3FOEFSBT )5.- 1BTTDPOUFOU PGCV⒎FSUP +BWB4DSJQU 5FYU$IBOHFE BVUPDNE&WFOU *OQVU NBSLEPXOUPIUNM CZNBSLFE 4IPX

Slide 30

Slide 30 text

Practical example of Vim.js • Vim plugin online demo • How it works? • Other ideas

Slide 31

Slide 31 text

clever-f.vim Online Demo IUUQSIZTEHJUIVCJPDMFWFSGWJN

Slide 32

Slide 32 text

clever-f.vim Online Demo

Slide 33

Slide 33 text

clever-f.vim Online Demo • Write plugin files on file system via Emscripten API. • Host on github pages • Note that Vim only provides ‘small’ feature. So Vim plugins must work with ‘small’ feature.

Slide 34

Slide 34 text

Other Ideas • Browser extension to edit using Vim.js! • Online preview of colorschemes! • WebComponent for Vim.js • etc, etc,…

Slide 35

Slide 35 text

Conclusion • Vim is now running on browsers! (Vim.js) • I made a React component to easily use Vim.js. • Get super editing power™ by embedding Vim to your web services/web applications!! It’s awesome!!

Slide 36

Slide 36 text

5IBOLT @Linda_pp @rhysd