JS Envy: Minimal Testing Environment

18 Apr , 2014  

The story: As a Javascript developer, I would like to quickly create a minimal environment in which I can experiment with a library, without creating a new project and downloading a bunch of dependencies.Maybe I’m the only person who has this issue, but right now my project explorer is overloaded with projects like “prototype-test” and “dojo-test”. Though this works in a pinch, it takes precious time to setup and creates clutter when you end up abandoning it for a different library altogether, (not to mention the repetitive nature of creating an index.html just to add a few scripts. So how can we dynamically create environments to test in? Simple, JSFiddle (or anything similar) will take care of that for you. You just have to go grab a link to a CDN hosted copy of your library of choice, whip up a script to test it and voilà, a minimal environment you have! But wait…we can’t access the library’s API from the console? We have to ‘compile’ after we modify the code? I just want to see what options I have when I type jQuery “dot”!

Enter JS Envy, a sweet little utility that lets you quickly load any CDN hosted Javascript library and use it from the console. I wrote this tool with the intent that you can create a minimal environment in under 10 seconds: Just enter the name of your library of choice and JS Envy will return matching libraries (courtesy of cdnjs). Additionally, if you would prefer to load from a different CDN or want a library they do not host, you can manually enter the path to a library and add it directly. This application is written in pure Javascript to avoid any conflicts with other libraries, although I did use Bootstrap’s CSS library to help make things look nice.

Be careful to avoid loading libraries that may conflict with one another as JS Envy will not stop you. Loading dependencies in the correct order is also currently outside the scope of JS Envy’s features.

The console present in this application is still very much in its beta stage. I have implemented some basic features found in your browser’s console, (such as autocomplete for existing objects), however the complexity of the features and my interest in other projects has slowed me down. I hope to abstract the console into its own project in the near future to ease the feature integration process and provide a logically separate space for testing beta builds.

Planned improvements for the project in general include:

  • Automatic dependency loading (for supported libraries)
  • Library configuration editor
  • Library documentation integration (for supported libraries)
  • Full-featured console

Something missing? Check out my project on github and open an issue (or better yet send me a pull request) for any features you would like to see included.

Leave a Reply