Pro Yearly is on sale from $80 to $50! »

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. Vim on Browser vimconf 2015 

  2. @Linda_pp @rhysd 

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

    5SFOEZ 5JMJOHXJOEPX CSPXTFS 5JMFDUSPO  HJUIVCDPNQMFUFWJN WJNDSZTUBM
  4. Repo search by “user:rhysd” 

  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) 
  6. Vim on Linux 

  7. Vim on Windows 

  8. Vim on OS X 

  9. Vim on Android  IUUQTQMBZHPPHMFDPNTUPSFBQQTEFUBJMT JEOFUNPNPEBMPBQQWJNUPVDIIMKB

  10. Vim on iOS 

  11. Vim on Browser 

  12. Vim.js • What is Vim.js? • Emscripten • How Vim.js

    works • Notes of Vim.js 
  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! 
  14. http://kripken.github.io/emscripten-site/ A compiler from C,C++,LLVM IR to optimized JavaScript (asm.js)

    
  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 
  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!’) 
  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
  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 :( 
  19. Introduced in dailyjs 

  20.  )NN5IBUXPSLTHSFBU BDUVBMMZ*TUIFSFBOZ QSBDUJDBMVTBHF

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

    markdown demo 
  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) 
  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 );
  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 );
  25. What is react-vimjs? https://github.com/rhysd/react-vimjs  $ npm install react-vimjs

  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 );
  27. markdown demo A text editing with Vim is previewed as

    markdown. It’s updated on Vim’s TextChanged event.  IUUQSIZTEHJUIVCJPSFBDUWJNKT
  28. markdown demo 

  29. markdown demo  3FOEFSBT )5.- 1BTTDPOUFOU PGCV⒎FSUP +BWB4DSJQU 5FYU$IBOHFE BVUPDNE&WFOU

     *OQVU NBSLEPXOUPIUNM CZNBSLFE 4IPX
  30. Practical example of Vim.js • Vim plugin online demo •

    How it works? • Other ideas 
  31. clever-f.vim Online Demo  IUUQSIZTEHJUIVCJPDMFWFSGWJN

  32. clever-f.vim Online Demo 

  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. 
  34. Other Ideas • Browser extension to edit <textarea> using Vim.js!

    • Online preview of colorschemes! • WebComponent for Vim.js • etc, etc,… 
  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!! 
  36. 5IBOLT @Linda_pp @rhysd