Vim on Browser

How to run Vim editor in your web services/apps

Transcript

1. Vim on Browser
   vimconf 2015
   
   

   View Slide

2. @Linda_pp
   @rhysd
   
   

   View Slide

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

   View Slide

4. Repo search by “user:rhysd”
   
   

   View Slide

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)
   
   

   View Slide

6. Vim on Linux
   
   

   View Slide

7. Vim on Windows
   
   

   View Slide

8. Vim on OS X
   
   

   View Slide

9. Vim on Android
   
   IUUQTQMBZHPPHMFDPNTUPSFBQQTEFUBJMT JEOFUNPNPEBMPBQQWJNUPVDIIMKB
   

   View Slide

10. Vim on iOS
    
    

    View Slide

11. Vim on Browser
    
    

    View Slide

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

    View Slide

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!
    
    

    View Slide

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

    View Slide

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
    
    

    View Slide

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!’)
    
    

    View Slide

17. 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
    

    View Slide

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 :(
    
    

    View Slide

19. Introduced in dailyjs
    
    

    View Slide

20. 
    )NN5IBUXPSLTHSFBU
    BDUVBMMZ*TUIFSFBOZ
    QSBDUJDBMVTBHF
    

    View Slide

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

    View Slide

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)
    
    

    View Slide

23. What is React.js?
    
    1 React.render(
    2
    3 Hello, World!
    4 ,
    5 document.querySelector('.main')
    6 );
    

    View Slide

24. 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 );
    

    View Slide

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

    View Slide

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
    6 Loading...
    7 ,
    8 document.body
    9 );
    

    View Slide

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

    View Slide

28. markdown demo
    
    

    View Slide

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

    View Slide

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

    View Slide

31. clever-f.vim Online Demo
    
    IUUQSIZTEHJUIVCJPDMFWFSGWJN
    

    View Slide

32. clever-f.vim Online Demo
    
    

    View Slide

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.
    
    

    View Slide

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

    View Slide

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!!
    
    

    View Slide

36. 5IBOLT
    @Linda_pp
    @rhysd
    

    View Slide