Vim on Browser

How to run Vim editor in your web services/apps

Transcript

1. Vim on Browser vimconf 2015 
2. @Linda_pp @rhysd 
3. .Z
   PXO
   MBOHVBHF
   XSJUUFO
   XJUI
   $
   
   --7.
   %BDIT .BSLEPXO
   QSFWJFX
   BQQ
   4IJCB (JU)VC
   USFOEJOH
   SFQPT
   DMJFOU
   5SFOEZ 5JMJOH
   XJOEPX
   CSPXTFS
   5JMFDUSPO  HJUIVCDPNQMFUFWJN WJNDSZTUBM
4. Repo search by “user:rhysd” 
5. 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) 
6. Vim on Linux 
7. Vim on Windows 
8. Vim on OS X 
9. Vim on Android  IUUQTQMBZHPPHMFDPNTUPSFBQQTEFUBJMT JEOFUNPNPEBMPBQQWJNUPVDIIMKB
10. Vim on iOS 
11. Vim on Browser 
12. Vim.js • What is Vim.js? • Emscripten • How Vim.js works • Notes of Vim.js 
13. 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! 
14. http://kripken.github.io/emscripten-site/ A compiler from C,C++,LLVM IR to optimized JavaScript (asm.js) 
15. • 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 
16. 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!’) 
17. How Vim.js works  -PBEJOH
    DPNQJMFE
    +4
    DPEF
    JO
    IUNM *OJUJBMJ[BUJPO
    ɾ(FU
    GPOU
    TJ[F
    ɾ*OJUJBMJ[F
    DBOWBT
    FMFNFOU
    ɾ$POTUSVDU
    'JMF4ZTUFN
    PO
    NFNPSZ %SBX
    7JN
    TDSFFO
    UP
    DBOWBT
    GPMMPXJOH
    FWFOU
    FNJUUFE
    WJB
    &NTDSJQUFO
    "1* (FU
    JOQVU
    WJB
    LFZQSFTT
    FWFOU .F TDSJQU *OQVU
    LFZT /PUJGZ
18. 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 :( 
19. Introduced in dailyjs 
20.  )NN
    5IBU
    XPSLT
    HSFBU
    BDUVBMMZ
    
    *T
    UIFSF
    BOZ
    QSBDUJDBM
    VTBHF
21. react-vimjs • What is React.js? • What is react-vimjs? • markdown demo 
22. 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) 
23. What is React.js?  1 React.render( 2 <div className="hello, world"> 3 <h1>Hello, World!</h1> 4 </div>, 5 document.querySelector('.main') 6 );
24. What is React.js?  1 class MyComponent extends React.Component { 2 render() { 3 return ( 4 <div className="my-component"> 5 <h1>Hello, {this.props.name}</h1> 6 </div> 7 ); 8 } 9 } 10 11 React.render( 12 <MyComponent name="Linda_pp"/>, 13 document.querySelector('.main') 14 );
25. What is react-vimjs? https://github.com/rhysd/react-vimjs  $ npm install react-vimjs
26. 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 <Vim memPath="path/to/dist/vim.js.mem"> 6 Loading... 7 </Vim>, 8 document.body 9 );
27. markdown demo A text editing with Vim is previewed as markdown. It’s updated on Vim’s TextChanged event.  IUUQSIZTEHJUIVCJPSFBDUWJNKT
28. markdown demo 
29. markdown demo  3FOEFS
    BT
    )5.- 1BTT
    DPOUFOU
    PG
    CV⒎FS
    UP
    +BWB4DSJQU 5FYU$IBOHFE
    BVUPDNE
    &WFOU  *OQVU NBSLEPXO
    UP
    IUNM
    CZ
    NBSLFE 4IPX
30. Practical example of Vim.js • Vim plugin online demo • How it works? • Other ideas 
31. clever-f.vim Online Demo  IUUQSIZTEHJUIVCJPDMFWFSGWJN
32. clever-f.vim Online Demo 
33. 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. 
34. Other Ideas • Browser extension to edit <textarea> using Vim.js! • Online preview of colorschemes! • WebComponent for Vim.js • etc, etc,… 
35. 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!! 
36. 5IBOLT @Linda_pp @rhysd