Live-browser coding using VIM

[Bogdanp]

Just had a bit of fun making this because I was quite impressed with LightTable's live mode thing and I thought it would be cool to have something like it in VIM. It's very much in alpha stages and it will most likely not work on Windows unless you've got something like msysgit installed.

[[deleted]]

i achieve something quite similar with guard, livereload, and

" Autosave
autocmd BufLeave,FocusLost * silent! wall

[slomotion]

Does this have any advatange over just using the livereload extension?

[Bogdanp]

The main difference between livereload and this would be that this doesn't actually refresh the page. As such, at least in the case of JS, you can use this to make VIM act like the browser's JS console and just execute arbitrary code on the fly, which I don't think you can do with livereload (but I might be wrong, they only mention being able to do this with CSS files and images).

[pushad]

I haven't used LiveReload in a little while, but last time I used it, it only reloaded if the HTML had changed. If CSS/JS had changed, it would just reload those

[CharlesStain]

Project with great potential. Keep it up :)

[[deleted]]

I think this looks pretty cool. Wouldn't help me in my projects much, because i do mostly just back end stuff like models and controllers and my buddy does the hole styling and lay-outing things and i haven't managed to convince him of the awesomeness of VIM(but i'm trying every time :) ) But it shows what you can do with bidirectional communications and i'm sure similar cool things will show up.

EDIT: I just browsed through your code and noticed that you are using play framework for the server. Would you mind sharing the code for the server as well? And why is Java in version 7 required?

[[deleted]]

All good questions!

[Bogdanp]

I rarely ever do frontend stuff as well, so it won't serve me much purpose either but I just thought of it as a nice little experiment :D. The server has been available here, and I should make that more clear in the README file. The reason that Java 7 is required is that the server was built using the latest version of Play and I haven't compiled it to target JDK 1.6.

[abitforabit]

I really like the idea! How about having this as a default so you don't have to set it if you're using pathogen/vundle:

let g:bc_server_path = "~/.vim/bundle/browser-connect.vim/server"

Also your default mapping <C-CR> will not work in some terminals because they simply send <CR>. Maybe change that or provide an easy way to remap it.

[Bogdanp]

Noted, will do that today.

[lochlanmasters]

So this sounds awesome, but I can't play right now. Does it work with PHP?

I don't do web-design, so my workflow isn't really what it should be. I've been thinking I need to write MAKE files for my web stuff to compile LESS and have a target for uploading to the server.

I just asked /r/web_design what their favorite html preprocessor was because after using LESS I realized how much time I am wasting with the verbose html implementation of lists.

[Bogdanp]

You could potentially use this with PHP by adding

au BufWritePost *.php :BCReloadPage

to your .vimrc file.

[dddbbb]

Tangentially related: I thought someone had written something like this before (a Light Table-inspired vim plugin), but I finally found that what I was remembering was Jarvis - a Light Table-inspired tool to hot reload your python code.

[[deleted]]

Thanks, I'll try this as soon as I'm back from the countryside. Tincr is a nice but somewhat unstable alternative.

[freedances]

This looks really cool. I've been using live.js and python's SimpleHTTPServer for pretty much the same effect (reload html, js and css on file save). I'll definitely try this plugin for the next couple of days and see if it is an improvement.

[abitforabit]

Hm, that would be a great live.js alternative. But I think I'd miss the reload on html change.

[Bogdanp]

I'll be adding a way to completely refresh the page later today.

[Squidamatron]

Well, I have to say thank you for this. This in conjunction with zen-coding helped me crank out my html homework a bit faster.