Vim on Browser

Dea1add99f4cf942792c0f185aa2f2fd?s=47 Linda_pp
November 18, 2015

Vim on Browser

How to run Vim editor in your web services/apps

Dea1add99f4cf942792c0f185aa2f2fd?s=128

Linda_pp

November 18, 2015
Tweet

Transcript

  1. 3.

    .ZPXOMBOHVBHFXSJUUFO XJUI$ --7.  %BDIT .BSLEPXO QSFWJFXBQQ 4IJCB (JU)VCUSFOEJOH SFQPTDMJFOU

    5SFOEZ 5JMJOHXJOEPX CSPXTFS 5JMFDUSPO  HJUIVCDPNQMFUFWJN WJNDSZTUBM
  2. 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) 
  3. 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! 
  4. 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 
  5. 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!’) 
  6. 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
  7. 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 :( 
  8. 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) 
  9. 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 );
  10. 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 );
  11. 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 );
  12. 27.

    markdown demo A text editing with Vim is previewed as

    markdown. It’s updated on Vim’s TextChanged event.  IUUQSIZTEHJUIVCJPSFBDUWJNKT
  13. 30.
  14. 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. 
  15. 34.

    Other Ideas • Browser extension to edit <textarea> using Vim.js!

    • Online preview of colorschemes! • WebComponent for Vim.js • etc, etc,… 
  16. 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!!