Slide 1
Slide 1 text
Vim and the Web
Ways to use Vim in ways you probably shouldn’t, but someone
on Hacker News will convince you to buy a Chromebook, so…
Slide 2
Slide 2 text
Working in the
cloud
“A buzz from my iPhone tells me
my build and tests are finished. I
pull it out and glance at the push
notification, courtesy of Prowl.
New test failures. I finish jotting
down my thoughts so far into the
Pages document I’m using for the
spec then swipe back to iSSH.”
!
— Mark O’Connor
Slide 3
Slide 3 text
Great, but can I run Vim on it?
Slide 4
Slide 4 text
Cloud9
Open source
GitHub integration
!
Vim mode
https://c9.io/
Slide 5
Slide 5 text
Cloud9 Vim Features
• hjkl (phew)
• Visual, Visual-block
• Left-right and up-down motions, repeat motion
• Commands (r, d), motions as arguments
• Numerical arguments
• Repeat with .
• Yank, put
• No named registers, no replace, :%s, no split windows…
Slide 6
Slide 6 text
Ace
Open source, derived from Cloud9, used by GitHub
!
GitHub trick: http://lauris.h-s.io/2013/12/13/github-vim-editor/
Slide 7
Slide 7 text
Vim.js
• Real Vim!
• Emscripten
• 1,800 stars
• HTML5 File API
• .vimrc
• https://github.com/coolwanglu/vim.js
Slide 8
Slide 8 text
Vim.js build process
1. Build Vim
2. Take the LLVM byte code and process it with Emscripten
3. Emscripten generates asm.js JavaScript
4. Transformed with Node programs
5. Closure Compiler
Client-side code for keyboard DOM events and HTML5
filesystem API is added as well.
Slide 9
Slide 9 text
Browser support
• Chrome: Fast
• Firefox: Best support
• IE: Average performance and support
• Note: The online demo is built with a small feature
set
Slide 10
Slide 10 text
Performance
• Firefox on Mac OS X:
Mavericks
• Duck Duck Go: 260 MB
• Cloud9, Vim mode: 446.1 MB
• Running Vim.js: 592 MB
Slide 11
Slide 11 text
What can you do with
Vim.js?
• Help the author, because it would be a way of
running everything (like plugins) on the web
• You could technically drop it into a project
• Imagine a combination of GitHub, Heroku, and
Vim.js to make an online IDE
Slide 12
Slide 12 text
Chromebooks, Tablets
• There are times when you don’t have access to a regular
Linux, Mac OS, or Windows computer
• NPD: 21% of laptop sales in 2013 were Chromebooks
• Chromebooks can be cheap, ARM-based, with small
storage
• Android and iOS tablets have fast and capable browsers
• Does Safari crash all the time for everyone else or is it
just me?
Slide 13
Slide 13 text
But I can use ssh!
• Experiments like Vim.js may open up new
opportunities
• Embed Ace with Vim mode in your own web apps!
• Trick GitHub into using Vim
• Education: Read an eBook on a tablet, edit code in
Vim without leaving the book
• Edit your projects from any browser… at least for
browser and Node projects