So my project's python portion has lots of helpful python tests to ensure the codebase isn't falling apart. I want to do the same for the javascript I'm serving out of my static directory.
Can anyone recommend strategies for testing my javascript, especially if it's wrapped into the django test running framework?
Lookup to Lettuce http://lettuce.it/. You can simulate a lot of browser's behavior to test your javascript.
Development in django http://lettuce.it/recipes/django-lxml.html
Related
Is there a way to compile Node.js code to regular JavaScript?
I've wanted to use Node.js code for my web application for a while.
I've tried to use Express, but there was no way I could make it work without converting the HTML file to EJS.
I know it is possible because of the way Create React App builds, but I don't know how to achieve that.
Any solution would help, and it would also help me if you could answer some of these questions
(these are some that I tried and gave up on):
Is there a way to access the document variable with express (keep in mind that I'm working with a framework that requires to have access to the document variable)?
Is there any way I could just import modules to my JavaScript file (basically using require() without node)?
Is there any way I could ship the part of Node.js that I actually need togeher with my application (and yes, it is in fact the require() function)?
You are mixing up a lot of concepts and I would strongly suggest reading more about JavaScript and the difference between executing it on the frontend (web browsers) and the backend (NodeJS)...
Here are a few (quick) answers to some of your questions:
Code that runs in NodeJS is regular JavaScript. However if you use NodeJS APIs, it will not run in a web browser, which has a different execution environment runtime.
The document object only exists in a web browser environment, it has no meaning in a NodeJS environment which is a backend.
require is a NodeJS API to load CommonJS packages, it does not exist in a web browser environment. There are alternatives like RequireJS or Browserify, or you can use import for ES modules (with proper CORS details set up).
Express is a server-side routing library, it is not meant to run in web browser environment.
If you are trying to build a web application, you could start by looking into JS frameworks that do the heavy lifting for you like Svelte, Angular, React, Vue (to name only the most popular ones).
Project I'm working on
I am starting a webaudio project in a team in which we are making audio effects, audio visualization and audio synthesis. We are now designing a basic folder structure. Each of us is thinking of a structure and in our next meeting we will choose the best one. One of the team-members is really experienced with Javascript, but I'm leaning more to Dart, cause it just feels more familiar and robust. I have a Java background, but I'm not really experienced with web development. Therefore I want to develop the software in both languages: Dart and Javascript, so that I can eventually get to a solid decision whether it is better to use Dart or Javascript for this project.
Directory structure?
I want to subdivide the dart libraries in three main directories: effects, visualization and synthesis. But I don't know yet where to place those main directories. According to the Pub Package Layout Convention the libraries should be located in the lib directory. But since all libraries will strongly depend on the webaudio API, it will only run in a browser, and thus be web application. So my first question is: "Should I place my libraries in the package/libs directory or somewhere in the package/web directory?" And "Should I put the javascript counterparts in the same directory?" For example: both oscillator.js and oscillator.js in the synthesis folder.
Switch between Javascript and Dart?
Once that the directory structure is done I would like to be able to easily switch from the Dart version to the Javascript version and vice-versa, and since I need a browser with an embedded Dart VM that will be Dartium. So here goes my second question: "What would be the best way to easily switch between the Javascript and the Dart version?"
Thanks in advance!
PS: I know that I could just use the generated Javascript from dart2js, but I want actually readable Javascript. And the dart2js Javascript does not exactly meet that requirement. Furthermore I want to have good understanding on the differences between the two languages, and I think that the best way is to try them both.
Edit: I would like to clarify the idea of switching between Javascript and Dart on Günter's demand. I will make a Javascript port of every Dart file manually, just so that I can learn both. Since I will be developing both of them at the same time, I want to be able to test the site with the Dart version, but also with the Javascript version. So I want the HTML to load this if in Dartium:
<script type="application/dart" src="main.dart"></script>
But this if in any other browser:
<script src="main.js"></script>
I reccon that dart.js in the browser package does this to switch between *.dart and *.dart.js, depending on if the browser has a Dart VM or not. But I want it to switch between *.dart and *.js (my own js), without having to make two separate html files.
Question 1: All in lib/ except entry points is fine.
Question 2: You can use pub serve. This allows to access to the app from Dartium or any browser from the same url. Any update in a dart file will be compiled when a *.dart.js file is request instead of a *.dart file.
For your edit: you can have a look at the dart_to_js_script_rewriter package to do a transformer that will rewrite your <script type="application/dart" src="main.dart"></script> to <script src="main.js"></script>. Switching from JS to Dart will be done by adding/removing your created transformer to pubspec.yaml and restarting pub serve or pub build.
I came across a strange issue in my recent project.
I was using Trent Richardson's Timepicker control to avail time picker functionality in my MVC 4 application. I had relevant JQuery file bundled using MVC bundling feature. I found this working quite well in development environment (Visual Studio 2012).
But when I deployed the website on IIS, I started facing a strange issue, and there was a javascript error "function expected" in that particular bundle. I could see the bundle got loaded because developer tool was showing javascript code when that bundle was selected in "scripts" tab.
Finally, when I referenced the JQuery file directly instead of bundle, it started working fine on IIS. Though the problem got solved, I am now curious to know what was wrong with that particular file if bundled, and if MVC bundling was actually an issue, then why it was working well in development environment, but not in IIS?
Any lights on this much appreciated.
Minification is a complex process by making scripts/styles smaller using techniques such variable name shortening, white space elimination, comments removal, etc... It uses ASP.NET Web Optimization that depends on WebGrease for minification. Of course, there can have issues but I personnaly never noticed that.
Here are some situations, where you should not use bundling
There is only one file in your bundle. Why bundling ?
You are using only famous frameworks such as JQuery or jQuery UI. Do not redistribute scripts that are already served by someone else. Google/Microsoft/Amazon/... already provide CDN for the most popular, open-source JavaScript libraries.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Your bundle takes only a few Bytes. Web performance Optimization suggests to limit the number of web requests. Everything has a cost. Not very optimal, but sometimes it's better to put inline scripts in your page.
In some architectures. Bundles requests contains a unique identifier used for caching. If any file in the bundle changes, the ASP.NET optimization framework will generate a new token, guaranteeing that browser requests for the bundle will get the latest bundle. When working with some architectures, JS updates can be frequent and will invalidate all your bundles.
On Dev Environment. It's is really really painful to debug a bundle.
Along with Cybermaxs' reply, I have also received following response while posted on ASP.NET Forum In case, if that helps the visitors.
What bundling suppose to do is to put together the script/stylesheet files in a single bundle into a single request and send it to the client so that the browser has to make less calls to get those required script files.
In a development environment, when you do debugging in visual studio. It doesn't do the above process unless you specify it to do so. But in a production environment, when the debug is set to false in the web.config file. it will start to do the above process.
There can be some other reasons as well. such as the script might have two versions. one for debugging and one for production. I came across such a situation with knockout. in my development enviornment I had referenced the debug version of the script. But when I put it into the production enviornment, everything came to a hault. There was a release version for the knockout script file and I had to reference that to make everything work again.
I have some django apps for which I have some templates. I have some inline JS in the template and a lot of DOM manipulations.
I would like to test the JS parts. I don't particularly want to use selenium - mostly as I don't want to run a selenium server and want to make my tests slow.
So my question is:
Can I write these tests with Qunit/Jasmine et all?
Can I integrate them with a CI?
The main problem with javascript testing is compatbility of all that fancy browser features you may use. I am not sure about the capabilities of Jasmine, but I'd take a look at PhantomJS and CasperJS, which are headless WebKit based browser automation environments.
On a recent project I have been working on in C#/ASP.NET I have some fairly complicated JavaScript files and some nifty Style Sheets. As these script resources grow in size it is advisable to minify the resources and keep your web pages as light as possible, of course. I know many developers who hand-feed their JavaScript resources into compressors after debugging and then deploy their applications.
When it comes to source control and automated builds in the satisfying world of continuous integration (thank you CruiseControl.NET); hand compression will simply not do. The only way to maintain source control and offer compressed resources is to keep JS/CSS source & their minified brethren in a separate directory structure. Then register only one set of resources or the other in code-behind. However, if a developer makes a change to JS/CSS source and then fails to re-compact it and check in both versions, then you’re code-line is now out of sync. Not to mention inelegant.
I am thinking that it would be nice to write a custom executable (if one does not exist yet) for the CC.NET task block which would find and compress all JavaScript and CSS resources in the target directory after the build action but before the asp.net publish to target. This way, developers would only work on JS and CSS source and users would only get the minified resources.
Is there an application that already performs this task and if not, what kind of resource(s) should I look to install on the build server to have CC.NET execute?
(The closest question I could find here to this one required NAnt, which is not an option in my case.)
EDIT:
Dave Ward now has a great article on how to automatically minify in Visual Studio at his site.
The MSBuildCommunityTasks Project has a few MSBuild tasks that may do what you are looking for including Merge and JSCompress.
You could add these into your MSBuild project in the AfterBuild target to allow the project to perform this action every time the project is built and nothing would ever be out of sync. Your web application could then reference the compacted version for run but the developers would edit the full versions.
Nothing else would be needed on the server except the MSBuild community tasks assembly. You can put this assembly in your own source tree and reference from there and your CI build should get that assembly and everything it needs when it builds.
Another JS (and CSS!) compression library for MSBuild:
http://www.codeplex.com/YUICompressor
This is a .NET port of the java-based Yahoo! compressor.
Not a perfect answer, but if you're using MVC4 they've built this in as a new feature. When running a Debug configuration, it outputs individual files with comments and such but when you switch to Release, it will automatically bundle, minify, and change in page references to the minified files. You can setup separate bundles for, say, jquery and your own js. This works with CSS and JS files.
http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
If MVC4 doesn't work for you, you can also find packages on Nuget that can help such as this:
https://www.nuget.org/packages?q=minify