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!
• 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
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!’)
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 :(
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)
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.
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!!