Increase Productivity in Javascript Developments

Increase Productivity in Javascript Developments

  
Hi,

While the OutSystems platform does simplify our life tremendously when developing web and mobile applications and those of us that transition from other language can feel the productivity boost there are still some ares on which I feel I could still be more productive. One of those areas is the javascript development.

Despiste the great improvements with the London Theme and more recently with the Silk UI framework we all have reach scenarios on which the complexity of the screens we try to implement makes us resort to different plugins and javascript frameworks to enhance our pages.

Those of us who eperienced these sittuations also know that changing the script, publishing (and wait for it to end), refresh the page, test, repeat... can be cumbersome if not irritating sometimes.

Recently I came across a neat plugin for google chrome called Flip the Script. This plugin allows you to make local modifications to your css or javascript files and use them instead of the ones sent by the server. This allow you to technically do the javascript developments locally and when ready you can then manually copy them to your modules.

What do you need to do (with a basic example on which a few boxes background and text color are changed by JS)

1) Install the Flip the Script extension for google chrome



2) Acess your page and open goolgle development tools. Select the new TAB for the plugin and browse to the file you wish to change.



3) Apply your javascript changes and then hit save & refresh.



The page will be refreshed and your local script will override the one sent by the server thus allowing you to see immediately the changes.



So the next question is can this also be used for css? The answer is yes however the css is much more sensitive to dependencies and the order of the css scripts is more important than in javascript and the way the plugin works is by pulling your overriden files to the top of the stack of loaded files (as you can seen in the above picture) and that can break the dependencies.

Hope this can help you increase the productivity in your JS developments

Cheers,
Guilherme