[jbosstools-dev] PoC : Browser Refresh in conjunction with the Chrome LiveReload Extension

Tue Jan 15 14:25:12 EST 2013

Hi Xavier,

There is livereload.js <https://github.com/livereload/livereload-js> which
could be used in any browser by just adding it as a <script> tag.
So I implemented a PoC version of BrowserSim with LiveReload support. It
checks if a LiveReload server is started, and if yes, it adds this script
to the opened page.

Standalone jar of BrowserSim with LiveReload support (run as >java -jar
browsersim.jar):
https://dl.dropbox.com/u/79157143/JBIDE/BrowserSim/livereload-poc/browsersim.jar
YouTube screencast: http://www.youtube.com/watch?v=MQikQPwqGJk
The source:
https://github.com/yradtsevich/jbosstools-vpe/tree/livereload-poc
JIRA: https://issues.jboss.org/browse/JBIDE-13379

In general it works not bad. But if you watch the screencast carefully, you
will see that sometimes it lose some CSS or text. A bug on the server side?

On Mon, Jan 7, 2013 at 11:06 AM, Xavier Coulon <xcoulon at redhat.com> wrote:

> Hello Yahor,
>
> thanks !
> here are the links for the Chrome extension (
> https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei)
> and the Fireforx extension (
> http://download.livereload.com/2.0.8/LiveReload-2.0.8.xpi)
>
> As I said, for now, each time a file is re-published on the server (ie,
> after server adapter notified the publication) the Eclipse plugins send a
> "refresh" command to the browser extension using the syntax described here
> https://github.com/mockko/livereload/blob/master/docs/WebSocketProtocol.md#file-modified<https://github.com/mockko/livereload/blob/master/docs/WebSocketProtocol.md#file-modifiedhttps://github.com/mockko/livereload/blob/master/docs/WebSocketProtocol.md%23file-modified>
> :
>
> ["refresh", { "path": "/some/path/myfile.css", "apply_js_live": true, "apply_css_live": true }]
>
>
> This happens over websocket because the browser extension initialized the
> connexion when the user enabled 'LiveReload' on the browser (the Eclipse
> plugin embeds a websocket server based on netty 3.5)
>
> I kept the "apply_js_live" and "apply_css_live" optional args to "true"
> and I run a quick test: when changing a .css file, it's just that file
> that's reloaded:
>
>
>
> I did not do testing with AJAX not CSS @import, so I can't tell if you'd
> need to send a "refresh" command for the whole page or not.
> If you change the html file, I guess it'll do a full refresh. Did you
> expect some DOM update ?
>
> Also, the extensions code is on github:
> https://github.com/mockko/livereload/ , if we need to better understand
> how they work.
>
>
> Best regards,
> /Xavier
>
>
>
> On Jan 6, 2013, at 4:07 PM, Yahor Radtsevich wrote:
>
> Hi Xavier,
>
> The video looks great! I like the one click interface (just enable
> LiveReload on server).
>
> I wanted to run it on my desktop, but did not found the Chrome and FF
> extensions. Are they available somewhere?
>
> Also could you please explain how it works in some technical details?
> I.e. about which changes the browser is notified (all published files or
> only currently loaded files)?
> How it decides to refresh? Does it refreshes the full page? If not, then
> does it rerun changed scripts?
> Does it handle html content loaded through AJAX (like it is done in jQuery
> Mobile)?
> Does it handle CSS @import?
> What if I change opened html file, will it do a partial refresh or full
> refresh?
>
> On Thu, Jan 3, 2013 at 1:15 PM, Xavier Coulon <xcoulon at redhat.com> wrote:
>
>>  On Jan 3, 2013, at 9:28 AM, Xavier Coulon wrote:
>>
>> Hello and Happy New Year to everyone!
>>
>> Between F2F meeting and Christmas vacations, I spend some time working on
>> a PoC of LiveReload from Eclipse.
>> [My first iteration was using the Chrome Remote Debugging Protocol, but
>> since it required starting Chrome with an extra
>> "--remote-debugging-protocol" arg and it was specific to Chrome, I reworked
>> on it to turn what's described below]
>>
>> The PoC implements the server-side of the LiveReload protocol (based on
>> websockets).
>> 2 things to get it working (once you've checkout the plugin repo on
>> github and started an Eclipse Runtime):
>>
>> * on the Browser side, the user needs to install the LiveReload extension
>> * on the Eclipse side, the user starts his AS server and then clicks on
>> "Enable LiveReload" on the server menu.
>>
>> Then, when the use edits html/js/css content, the files are published by
>> the server adapter on the AS server and then, the browser is notified of
>> the (web) resource changes (with URL and not file location). Then, the
>> extension decides which part of the page needs to be refreshed.
>> Of course, the notification occurs *after* the html/js/css files have
>> been published on the server ;-)
>>
>> # A few notes: #
>>
>> * this PoC only works from Server Adapter level, as it made more sense
>> and helped me resolve the file URL from the server host/port and the
>> application deployment context.
>> See the "refresh" command description (
>> https://github.com/mockko/livereload/blob/master/docs/WebSocketProtocol.md#file-modified):
>> the command must include the URL of the changed file.
>> To get notified that the server deployed the resource, I use a
>> PublishAdapter, so this is pure generic WTP API.
>> The only JBossAS-specific thing I use here is when I need to retrieve the
>> server port:
>>  server.getAttribute("org.jboss.ide.eclipse.as.core.server.webPort",
>> "8080")
>> but there may be a more portable manner to do it.
>>
>> - one thing I did not get to work (yet) was the Firefox "LiveReload"
>> extension. It looked as if the browser extension was disconnecting
>> immediately after connexion, so there was no channel I could use to send
>> the "refresh" command. That should be solved, though.
>>
>> * the http://livereload.com/ doc mentions this hack:
>> "How do you stop that snippet from making it into production, then? Well,
>> simple: add an IF and check location.host, and then feel free to commit and
>> deploy."
>> which means that it should be possible to also support Mobile devices and
>> BrowserSim if no extension can be installed on them.
>>
>> The code is at the same location as before:
>> https://github.com/xcoulon/jbosstools-pagereload (the old plugin has
>> been moved to another branch)
>> There's another screencast for that:
>> https://www.youtube.com/watch?v=MWoZIQwitSs
>> As usual, sound is low and accent is strong, but I'll try to fix that in
>> the future ;-)
>>
>> # Further developments #
>>
>> Now, this also opens question of support to even wider file types, such
>> as SASS/LESS instead of plain CSS:
>>
>> * should we provide editors for those types (usual stuff: syntax
>> coloring, validation, content assist, navigation) ?
>> * as far as SASS is concerned, there's no Java implementation of the
>> processor. Would writing one in Java help us when it comes to processing
>> SASS files to convert them into CSS and publish them ? The only way to do
>> it is to invoke the ruby gem with JRuby - I haven't tried it yet, though.
>>
>> After a little more search, I found these Java implementations for SASS:
>> - http://code.google.com/p/jsass/ but licensed under GPLv3
>> - https://github.com/darrinholst/sass-java but looks inactive (
>> https://github.com/darrinholst/sass-java/graphs/commit-activity) - Last
>> release was in May 2011
>>
>> OTOH, LESS seems to have an "official" Java port:
>> https://github.com/marceloverdijk/lesscss-java
>>
>>
>>
>>
>> All feedback is welcome.
>>
>> Best regards,
>> /Xavier
>>
>>
>>
>>
>> _______________________________________________
>> jbosstools-dev mailing list
>> jbosstools-dev at lists.jboss.org
>> https://lists.jboss.org/mailman/listinfo/jbosstools-dev
>>
>>
>> _______________________________________________
>> jbosstools-dev mailing list
>> jbosstools-dev at lists.jboss.org
>> https://lists.jboss.org/mailman/listinfo/jbosstools-dev
>>
>>
>>
>> _______________________________________________
>> jbosstools-dev mailing list
>> jbosstools-dev at lists.jboss.org
>> https://lists.jboss.org/mailman/listinfo/jbosstools-dev
>>
>
>
>
> --
> Best Regards,
> Yahor Radtsevich
>
>
>

-- 
Best Regards,
Yahor Radtsevich
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.jboss.org/pipermail/jbosstools-dev/attachments/20130115/9250fb39/attachment-0001.html 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 26353 bytes
Desc: not available
Url : http://lists.jboss.org/pipermail/jbosstools-dev/attachments/20130115/9250fb39/attachment-0001.png 