Monday, 20 August 2012

Rapid js + css development

Background

Last time I had some work to do in OSGi web module written in Spring MVC. If we have application splitted to well-designed modules, back-end development in this framework run in OSGi environment is quite fast because after some modification we must update only one bundle (without dependencies). But programming in front-end is much less dynamic than in in modern frameworks like Ruby or Groovy. There is no build-in support to update resources "on the fly" after their modification (or I can't find it).

There is many plugins to web browser which help you build front-end from scratch in wysiwyg mode. But I can't find any which could modify resources of already ran application. Also it will be complicated to keep synchronized these modifications with our sources. Therefore I tried to use local links to my project in my application. I put code similar to this below in my page.



After redeploy I found in my Chromium console: Error::Not allowed to load local resource: file:///path/to/my/local/resource.js. After some googling I found solution: adding --allow-file-access-from-files switch to application. Unfortunately it doesn't work on my Chromium v.18. I also checked other switches: --disable-web-security and --allow-file-access but with no effect. I also tried  LocalLinks plugin but with the same result.



Solution

I found out that the simplest walkaround to this problem is to link my local resources directory in Apache2 web root. So i did this:



After this inclusion of script looks like:

As you can see, it is only difference in port in new location of script. So maybe there is a tool which helps in automatic replace this string?

Tampermonkey script

In Firefox I've been using Greasemonkey plugin which could do automatic code replacement like this on the fly. On Chrome there is Tampermonkey which is a port of Greasemonkey. I wrote script which do this thing for me:



What the script do?

It simply add on end of <head> script includes from location with replaced string from -> to. It also modify CSS link hrefs using the same approach. Both scripts and links are filtered using blacklist - it is helpful if our application using external resources.

Result

Now I can spend all of my time intended for development only writing a code. After any modification I only refresh a page in browser (I'm using IntelliJ Idea so instant autosaving is working for me). And what solutions of this problem you are using?

12 comments:

  1. It is worth a try and your personal approach could mean some time spent to getting used to it. I will try that with my current OpenSource projects.

    web design company leeds
    Xara

    ReplyDelete
  2. I impressed, I must say. Actually hardly ever do I encounter a blog that each educative and entertaining, and let me let you know, you have got hit the nail on the head. Your concept is outstanding; the difficulty is something that not enough people are talking intelligently about. I am very glad that I stumbled across this in my search for something regarding this. new york web designs

    ReplyDelete
  3. superb post. Ne’er knew this, appreciate it for letting me know. web design in new york

    ReplyDelete
  4. Notwithstanding, topping is the adversary of overwhelming web clients. You can get away from this issue by having a devoted server. Danny

    ReplyDelete
  5. Hey there guys, newbie here. I’ve lurked about here for a little while and thought I’d take part in! Looks like you’ve got quite a good place here web design new york

    ReplyDelete
  6. You would endure heaps of different advised organized excursions with various chauffeur driven car experts. Some sort of cope previous features and a normally requires a to obtain travel within expense centre, and even checking out the upstate New York. ??????? new york website design company

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. You could definitely see your skills in the work you write. The world hopes for more passionate writers like you who aren’t afraid to say how they believe. At all times follow your heart branding san francisco

    ReplyDelete
  9. Glad to be one of several visitants on this awful website : D. branding sf

    ReplyDelete
  10. I truly appreciate this post. I have been looking everywhere for this! Thank goodness I found it on Google. You have made my day! Thx again.. san francisco brand agency

    ReplyDelete
  11. adwokat rzeszów - dobry adwokat rzeszów i okolice

    ReplyDelete
  12. Heya just wanted to give you a brief heads up and let you know a few of the pictures aren’t loading properly. I’m not sure why but I think its a linking issue. I’ve tried it in two different web browsers and both show the same results. interface design agency san francisco

    ReplyDelete