Javascript Buildmanagement - "Must have" tools? - javascript

Are there any must have tools for Java Script (RIA) development like maven, jUnit, Emma, link4j etc. for Javascript? What is the best way to set up a continous integration system for a bigger application or framework? How do projects like jQuery test their code? How to manage dependencies and different project configurations?
tools i know so far:
javascript-maven-tools (is maven the right choice?)
jslint
yuicompressor
sprockets (found it 5 mins ago)
jsunit
selenium

Hudson is a good tool for managing your build and test jobs. And it has a Selenium plugin.
Edited to provide a better answer:
Your question is quite broad, with few details about your situation or the actual problems that you've encountered, so I'll give you a quick overview based on my experience.
Build automation is a good thing. It's good to detect build failures and test failures as soon as possible. I recommend automating your tests in a standard environment so that they run as soon as possible after a commit. And I recommend making your release build as simple and reproducible as pushing a button.
Martin Fowler has a good list of recommended practices.
And a previous question contains a description of how to run javascript unit tests with CI.
Specifically regarding Hudson, we use Hudson because it's flexible, it allows a central server to manage builds on Windows and Linux slaves, and it's got plugins to support lots of different workflows and tools.
As for dependencies, Hudson allows you to trigger builds on the completion of other builds, which is good for firing off various tests after a successful product build. If you're asking how you should deal with external dependencies, you'll have to figure out what policy makes sense based on your application's design and requirements. I've seen a couple other javascript questions go by recently about how to handle such dependencies.

jQuery uses QUnit.
Another compressor is Crockfords JSMIN.

Related

How not to pointlessly rebuild dependancies during javascript developpement?

I am not a professional developer - I'm just a self-taught amateur in the field, and I followed the trends with quite some delay. My history with javascript goes back to when I was 14 years old and randomly opened files on my C:/Windows/ directory (it was Windows 98), until I found some intriguing .js files. I learned PHP, C and python, but came back to Javascript and follow his evolution from a scripting language to a full-stack tool - first, I played with Jquery a Jquery / XSLT stack, then made a little videogame using Websocket and Gulp and browserify , then recently learnt some Angular, Ionic and Vue, all based on Webpack.
I'm having though about what tool to use as a task manager. Especially, I tends to think most of the tools used these days are inefficient - hard to configure, needing a thousand plugins to work, which often create incompatibilities between versions,... And more importantly (I may be wrong here) but how come none of them are checking which dependencies need to be rebuild?
Last time, I was launching my test in a typescript project using npm test and got really frustrated. I realized the whole project was compiled every-time I changed a tiny detail in my test files. Having developed in C, I found that really inefficient and wrote a makefile to address that.
Now the bad side of make is that it's kinda hard to make it work with modern javascript tools (tsc explicitely adviced me to use a .tsconfig file instead of the CLI). Another example is there is no official CLI tool to compile a .vue file into a render() function.
Now my question is is there a modern tool that doesn't require me to rebuild, compile, minify, uglify my whole project and lose 30 seconds every time I add a commas in a file? and what's wrong with make?
I would take any idea or correction about that matter with gratitude :)
I don't know the exact nature of your project but I don't think there is a single tool for all the things you want to achieve. That's why we have the term "javascript fatigue".
Currently Webpack is the closest thing we have "one ring to rule them all" in terms of module management in development environments for javascript projects.
Now my question is is there a modern tool that doesn't require me to rebuild, compile, minify, uglify my whole project and lose 30 seconds every time I add a commas in a file? and what's wrong with make?
Since you mention you are familiar with webpack, maybe you can checkout its hot module replacement feature. Here is its description straight from the developers' website:
Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways:
Retain application state which is lost during a full reload.
Save valuable development time by only updating what's changed.
Tweak styling faster -- almost comparable to changing styles in the browser's debugger.
It is a sad fact that with each tool comes extra cognitive load. To reduce it, maybe you can:
follow certain patterns and habits in your workflow
have basic setups or boilerplate projects for frequent ones
check out the best practices
take advantage of cheat sheets and API docs
checkout source code before searching on the internet, It maybe less time consuming and less confusing than searching on the internet
try to master few vital tools for your projects
Following the works of developers who move the community forward maybe helpful for staying up to date with technologies, usually they gave speech and write articles.
It may look a lot of work when you see them listed one after the other but you will see it is more rewarding and less time consuming in the long run.
Please remember that, it is a common problem among developers, even the best ones suffer from it. That is why we have these tools in the first place. Good news is that, with every passing day dust is settling and tools are getting better, more mature and more stable.
For more on hot module replacement:
https://webpack.js.org/concepts/hot-module-replacement/

Test Driven JavaScript Development with Django vs Node.js

I have a web project coded 80% in JavaScript and 20% in Django without a single unit testing as I rushed for Minimum Marketing Features. Now that the project is getting funded, I decided to invest some time to introduce TDD. I had a great deal of inspiration from this KickStarter-funded tutorial.
http://www.letscodejavascript.com/
The author uses Node.js, Jake, Lint, Nodeunit, and Karma to simplify the whole integration process. The server/client tests in all major browsers is done in a single command and I was really hooked to this idea, but it requires switching to Node.js.
I've searched for TDD in Django and ran into this tutorial that makes use of Selenium.
http://www.tdd-django-tutorial.com/
However this TDD was primarily based on unit testing in server. Here are the questions.
Can multiple client JavaScript testing be done in Django/Python?
I assume the answer is no since js files are nothing more than static library in Django. Correct me if I'm wrong.
Is it worth using Node.js just for the sake of TDD Javascript?
My logic was either you use Python or Node.js for the server, but since tools like Karma and Buster.js requires Node.js, I was wondering whether setting up the Node.js alongside Django just for multiple client testing is plausible choice when considering lower cost of maintenance.
Thank you :D
You can take a look at using selenium in your django test suite. Django's official docs cover this in moderate detail
To answer your question about Node.js - I would say that it's probably not worth the complexity to add node.js SOLELY for the purpose of running unit tests. Also, since your javascript is likely built to run in a browser, it's less likely that things will break down if you use a tool like selenium (which runs the code in an actual browser, providing a python scripting interface).

JavaScript library development [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I am a java-programmer and a few months ago I discover frontend programming with javascript and html, and it is absolutely cool. So here is a js newbie's question.
Is there any IDE, default workflow or maybe best practices for javascript libs development? I didn't mean coverage and unit testing or something like this. I mean is there any tools or techniques which should I use while developing html control with some js-logic, for example? Should I write small test page in text editor and open it in dozen of browsers pressing F5 each minute and watching at browser's console or maybe there is some magic IDE which will on button press reload all browser instances and collect reports from browsers?
JavaScript Fundamentals
Be sure that you know the language. JavaScript is a bit tricky in this regard: you can easily think that you understand the language, but there are weird things that can sneak up on you. I highly recommend JavaScript: The Good Parts by Douglas Crockford. He also has some talks on Youtube with the same name that are definitively worth watching.
JSLint
Integrate JSLint or a similar tool in your workflow. It is a style checker and static analysis tool for Javascript and helps catching subtle bugs.
Avoiding F5
Check out live.js:
Just include Live.js and it will monitor the current page including
local CSS and Javascript by sending consecutive HEAD requests to the
server. Changes to CSS will be applied dynamically and HTML or
Javascript changes will reload the page. Try it!
Browser Developer Tools
Get familiar with them. I personally strongly prefer Chrome's developer tools over Firefox/Firebug, but regardless which one you choose, learn how to use the debugger.
Node.js
You should also be aware that you don't have to test Javascript logic in your browser: you can use it as any other scripting language using node.js.
As a seasoned programmer here are the steps you should follow for JS lib production.
Separate the UI from the application logic. In this case create one component for the application logic that is completely separated from all API access. API access, which means DOM and WSH and Node.js, should be separated out. I go so far as to use different files to force and ensure separation.
Create UI environments to access your logic. Have a production UI control for access by your audience and also a separate internal UI control for your sandboxed development. For example I have written my application at http://prettydiff.com/ to work from commandline, and from a browser. I have also written access methods to the application access similar to the published HTML but different for my own development for more rapid unit testing. In a sandboxed UI can use a recursive setTimeout to refresh the page in intervals for automated test plan verification as you are writing and saving code.
Focus on availability and distribution. People can get my libraries directly from my website, Github, and NPM for Node. I have a regimented process where by I upload code to the site during a production release and then perform a quick verification in the browser. If the release did not break the application then push to Github and then push this exact same location to NPM.
Distributed access to code operation is even better. Its nice having rapid and even automated access to libraries online, but being able to access unit testing via request is even better. I can remotely unit test my application's code by accessing code samples online directly by telling my application request a code sample via URI. This means that not only is my static code available for distribution and testing, but so is its operation.
Good documentation is everything. I will never even bother to examine a lib if the documentation is weak. I am not talking about code comments, though these are important. I am talking about end user documentation. I want to be able to read documentation and know everything about the subject. Node.js became popular because even before the codebase was stable it's documentation kicked ass. Get other people to QA your documentation before they QA your code. Without stunning documentation your lib is less than worthless to me.
Know your mission. Each and every lib should have a clear, simple, and well stated purpose. If this is not established then the lib is not ready for release. If an enhancement confuses the lib's purpose then it may be time to divide one library into multiple smaller libraries. Focus on precision, clarity, directness, and only the sole stated mission of the lib.
Independence is vital to adoption. I don't like libs dependent upon other libraries or frameworks. Its great that your jQuery library may be the best thing since slice bread, but I won't be looking at it. Independence means greater portability and freedom it mix and match it with other libraries that you are not aware of.
Style is important. This is touchy subject, but style is important. Keep the logic in your lib as simple and declarative as possible. If your code is absolutely declarative in nature then your algorithmic patterns are awesome. Avoid use of the new keyword unless you are an experienced JavaScript badass and severely limit use of this keyword as it will fail you in future maintenance operations. Do not algorithmically build out large strings with concatenation and continually watch the execution speeds of your code. Because even trivial changes to style or seemingly minor enhancements to the logic can destroy execution efficiency I put a timer on all my UI controls. In your development use profilers, such as Chrome's web tools to track down long operations in JS execution.
Be open about your failures. Software is never perfect and other developers will always respect this. If you encounter a bug before anybody else then be open about the existence of the bug. If it will take more than a week to get the solution out then don't delay notification. Notify your users immediately so that they are aware. I recently rolled back a major enhancement to the logic of my diff algorithm because additional unit testing showed heavy slippage. I rolled back the same day I made a decision the prior release or two was flawed and was open about the rollback. If you want people to contribute to your code base or provide bug reports then openness is critical.
I know you may have explicitly said that you didn't mean unit testing, but that is precisely the way I recommend you write javascript libraries.
If you're a Java developer, you may be familiar with jUnit. If so, qUnit may be more natural to you. Otherwise, I recommend you take a look at Jasmine or Mocha. While I prefer Mocha, my experience with Jasmine has generally been better for in-browser development thanks to the awesome Jasmine-Jquery plugin.
If you're writing qUnit tests, take a look at IntelliJ IDE which allows you to execute tests in addition to providing code coverage.
If you're developing on the browser, take a look at LiveReload. It'll watch files for you and auto-refresh your browser - great for instant feedback.
For browser compatibility, I would recommend you just get it to work on one first reasonably before worrying about the others. Check in from time to time to see if you find issues. See if jQuery can abstract some of that mess for you. Otherwise, take a look at Adobes BrowserLab.

Node.js unit testing [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
Are there any good Node.js (server-side JavaScript) unit testing frameworks currently out there?
I'm looking for something a little deeper than the provided Assert module.
I ended up using Nodeunit and am really happy with it.
I was using Expresso originally, but the fact that it runs tests in parallel caused a few problems. (For example, using database fixtures doesn't work well in this situation.)
I was also looking for a decent test framework for node and found Mocha. It is the official successor to Expresso and seems very mature.
It allows to plug-in different assertion libraries, it offers reporters for code coverage and other things (you can plug-in your own). It can run synchronously or asynchronously and it has a concise API.
I will give it a try and report back...
EDIT:
After an incredible amount of time dedicated to other projects I finally came back to a JavaScript project and had time to play around with mocha. I can seriously recommend using it. The tests read very nicely, integration with Gulp.js is great and tests run very fast. I was able to setup automatic standalone as well as in-browser (Browserify) test runs and corresponding code coverage reports in about half a day (most of the time spent on understanding how to use Browserify from Gulp.js). To me, Mocha seems a very good choice for a testing framework.
UPDATE:
I am still very convinced about Mocha. Integration with Chai allows to plugin different assertion styles. You can checkout a working setup in this GitHub project. I am using it with karma now, integrating code coverage report, automatic watchers and good integration with IntelliJ IDEA.
Personally I've stuck with Expresso, but there are a bunch of different frameworks out there, accommodating most testing styles.
Joyent has an extensive list; give that a go.
I've personally only used the assert module, but I also find myself wanting more. I've looked through many Node.js modules and popular unit testing frameworks are Nodeunit and should (which is made by the same guy as Espresso (maybe an updated name?)
Vows also looks promising.
vows is a solid unit testing library for Node.js, but the syntax is tedious.
I've written a thin abstraction called vows-fluent which makes the API chainable.
And I've written another abstraction, [vows-is] which builds on vows-fluent and exposes a BDD style syntax.
An example would be
var is = require("vows-is");
is.suite("testing is fun").batch()
.context("is testing fun?")
.topic.is("yes")
.vow.it.should.equal("yes")
.suite().run({
reporter: is.reporter
});
More examples.
I think among various testing frameworks available, Mocha is the most latest, and very simple to implement. Here is a wonderful tutorial about how to use it:
How to build and test your Rest API with Node.js, Express and Mocha
If you are familiar with QUnit, you could use node-qunit which is a sort of a node wrapper around QUnit's existing framework.
test-studio is an npm package that provides a powerful, web based front end for unit testing. It supports things like executing individual or groups of tests and stepping node-inspector into individual tests. It currently supports mocha and more frameworks will be supported in future given demand.
Read more about it here.
Disclaimer: I am the author.
Originally made for Node.js, deadunit is a JavaScript unit testing library for Node.js and the browser. Some of its unique attributes:
Easy learning curve
Can output test results on the command line (colored or plain-text) or as HTML
It prints out the actual lines of code where your assertions are, so your output makes sense even if you don't spend a lot of time writing test commentary
It has a simple count assertion that makes dealing with expected exceptions and asynchronous asserts easy
it prints out exception and any attached data they have
it'll let you know if your code is hanging (something you don't want, but usually goes unnoticed)
Has an event driven API enables streaming test results across a network, or in any way you want.
Supports testing with node-fibers
I just uploaded a project I am using to unit test Node.js with Karma and Jasmine: Narma.
Your Node.js modules get loaded into a node-webkit browser, so you can execute Node.js modules and use libraries like jQuery in the same heap.

Build automation and deployment for Javascript

i work at the digital department of a public broadcaster, together with two other frontend developers. We're currently looking into improving our Javascript workflow and build processes. Stuff like packaging, minifying, versioning, etcetera.
In an ideal scenario, we would have a global repository for all Javascript-related libraries (like jQuery) and stuff we build ourselves, that can be easily included in lots of projects and versioned.
All of our backend developers use Maven for this process with their Java code. I'm wondering if people have experience with Maven and Javascript, or maybe with other tools that might be good (or better) for the job. And in general if people have good resources about setting up workflow / build processes for frontend and javascript development.
We use Hudson (http://hudson-ci.org/) to continuously build/integrate our Python (Django via zc.buildout), R and several other types of projects. Whenever someone checks in code to the central VCS, a build is triggered and the test suite(s) will run. The build and test status is shown on a central screen in the office.
Hudson not only builds and tests, but also checks for coding style and syntax errors using pep8 and pyflakes, amongst others. Javascript is only checked with jslint at this point, but we may unit-test that in the future using something like xpcshell (more info).
** edit **
Go straight for Jawr, keeping rest in answer for alternatives
** edit **
First of all there's Ruby's rake which in theory can be used through jruby and in theory can be configured and run in the POM.
There's also Jake, but not sure if the latest Rhino supports CommonJS.
Whilst writing this awnser, I just came across Jawr which looks really interresting and there seems to be maven support/plugins.
The last option you already know about is dynamic loading using for example RequireJS or LABJS.

Categories

Resources