$30 off During Our Annual Pro Sale. View Details »

Vim on Browser

Linda_pp
November 18, 2015

Vim on Browser

How to run Vim editor in your web services/apps

Linda_pp

November 18, 2015
Tweet

More Decks by Linda_pp

Other Decks in Technology

Transcript

  1. Vim on Browser
    vimconf 2015

    View Slide

  2. @Linda_pp
    @rhysd

    View Slide

  3. .ZPXOMBOHVBHFXSJUUFO
    XJUI$--7.

    %BDIT
    .BSLEPXO
    QSFWJFXBQQ
    4IJCB
    (JU)VCUSFOEJOH
    SFQPTDMJFOU
    5SFOEZ 5JMJOHXJOEPX
    CSPXTFS
    5JMFDUSPO

    HJUIVCDPNQMFUFWJN WJNDSZTUBM

    View Slide

  4. Repo search by “user:rhysd”

    View Slide

  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)

    View Slide

  6. Vim on Linux

    View Slide

  7. Vim on Windows

    View Slide

  8. Vim on OS X

    View Slide

  9. Vim on Android

    IUUQTQMBZHPPHMFDPNTUPSFBQQTEFUBJMT JEOFUNPNPEBMPBQQWJNUPVDIIMKB

    View Slide

  10. Vim on iOS

    View Slide

  11. Vim on Browser

    View Slide

  12. Vim.js
    • What is Vim.js?
    • Emscripten
    • How Vim.js works
    • Notes of Vim.js

    View Slide

  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!

    View Slide

  14. http://kripken.github.io/emscripten-site/
    A compiler from C,C++,LLVM IR to
    optimized JavaScript (asm.js)

    View Slide

  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

    View Slide

  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!’)

    View Slide

  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

    View Slide

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

    View Slide

  19. Introduced in dailyjs

    View Slide


  20. )NN5IBUXPSLTHSFBU
    BDUVBMMZ*TUIFSFBOZ
    QSBDUJDBMVTBHF

    View Slide

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

    View Slide

  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)

    View Slide

  23. What is React.js?

    1 React.render(
    2
    3 Hello, World!
    4 ,
    5 document.querySelector('.main')
    6 );

    View Slide

  24. What is React.js?

    1 class MyComponent extends React.Component {
    2 render() {
    3 return (
    4
    5 Hello, {this.props.name}
    6
    7 );
    8 }
    9 }
    10
    11 React.render(
    12 ,
    13 document.querySelector('.main')
    14 );

    View Slide

  25. What is react-vimjs?
    https://github.com/rhysd/react-vimjs

    $ npm install react-vimjs

    View Slide

  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
    6 Loading...
    7 ,
    8 document.body
    9 );

    View Slide

  27. markdown demo
    A text editing with Vim is previewed as
    markdown. It’s updated on Vim’s
    TextChanged event.

    IUUQSIZTEHJUIVCJPSFBDUWJNKT

    View Slide

  28. markdown demo

    View Slide

  29. markdown demo

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

    *OQVU
    NBSLEPXOUPIUNM
    CZNBSLFE
    4IPX

    View Slide

  30. Practical example of Vim.js
    • Vim plugin online demo
    • How it works?
    • Other ideas

    View Slide

  31. clever-f.vim Online Demo

    IUUQSIZTEHJUIVCJPDMFWFSGWJN

    View Slide

  32. clever-f.vim Online Demo

    View Slide

  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.

    View Slide

  34. Other Ideas
    • Browser extension to edit using
    Vim.js!
    • Online preview of colorschemes!
    • WebComponent for Vim.js
    • etc, etc,…

    View Slide

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

    View Slide

  36. 5IBOLT
    @Linda_pp
    @rhysd

    View Slide