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