JS Compiler / Package Manager for use with version control - javascript

I'm trying to grasp a bit of an idea here. And hoping someone can help clarify the best practice.
How do teams or pairs approach using a build system for javascript like grunt.js ?
I really want to break our large javascript files into smaller pieces and converting to AMD/Require isn't an option right now.
It seems the easiest way is to concatenate and minify to a master file. And we are using version control (SVN).
So I'm wondering what the best practice is here?
Are we asking for constant conflicts with the production file? How do other teams approach this?
Hope i made my question clear enough.
thanks in advance...

We recently faced a similar dilemma at my organization. Using AMD or RequireJS wasn't an option due the the sheer amount of legacy JavaScript code we have.
We ultimately went with grunt and came up with a "build" task that concatenates and minifies. Then, there's a completely separate "deploy" task that gzip's the files and uploads to Amazon S3.
We don't check in our concatenated/minified code to source control. In general, it's a good operational practice to have separate build and deploy tasks for your source code. For larger development teams, the deploy/build process would traditionally be done in a CI tool that runs whenever someone commits to SVN/git.
In your case, a simpler arrangement would be if you just manually deployed code from your development machine instead of have it automated from a CI tool. The problem with this setup is it's easy to run into conflicts with other team members.
That said, there is a growing number of open-source (Jenkins) or cloud-hosted (CircleCI) tools that might be worthwhile for you to look into.

Do not commit the output. Use a ci tool like teamcity to build and deploy. Only commit source files to source control.

Related

What's the best way to create a local server in order to use all the dependencies installed through NPM?

I've been struggling recently finding a fast and swift solution in order to create a local server and run my JavaScript project (with all the dependencies) in a browser. I've used WebPack in the past, despite is reliable and the local-server reflects immediately all the changes I make to the code, implementing it is cumbersome e requires a lot of time. Moreover creates a few compressed files that requires a bit to load. What are the alternatives or, more in general what it's used by developers to create projects and run it in a local server ? It's difficult once the project is complete to deploy it ?
I'm sorry if the question seem stupid, but I searched over and over, on YT, here on stack overflow, and I haven't found anything useful. I bet other junior devs stumped in a similar situation.

Cross domain source-maps (javascript)

Let's take the following concrete example:
A Javascript "kernel" providing some super nice service to third-part applications is "distributed" (as a JS bundle) at : http://myJSKernel.com
domain-specific applications can download, configure and use the kernel's service from http://myJSKernel.com. Custom domains could be anything like: (http://consumer1.com, http://consumer2.org...)
On the basis of this scenario, while developing, I never execute the kernel alone, but I build smaller "domain-specific test applications" that are depend on and make use of the kernel.
The kernel being a JS "bundle" which is "babelified", "uglified", and "transfromed" in all the possible ways you can imagine, it is extremely hard to debug since the error messages do not point to the correct line numbers and so on...
Therefore I asked Webpack to also generate a source-map along with the kernel's bundle. So I have: "kernel.js" and "kernel.js.map", both available at http://myJSKernel.com
Now, I'm not sure about how the domain-specific applications (http://consumer1.com, http://consumer2.org...) can load the "kernel.js.map" when there is an error in the kernel ("kernel.js").
I hope my question is clear enough.
Thanks in advance for the help.

Javascript compiler / compactor (Windows GUI)

I need to compile / compact an "ever-growing" javascript app (round abouts 40k LoC, currently).
I don't have the time to integrate the "appropriate" tool for what I'm trying to do, something like require.js, as it requires modification of said code.
I was planning to just manually pile everything together to do a compact/compile routine, but at this point, I think that will make it quite difficult to maintain. (Ultimately, I'd like to keep the file structure broken down into its current hierarchy.)
That being said, I've been using a tool called Winless for .less compilation, andI really like its functionality:
add a folder set
note the files you want to include
watch for changes in those files and recompile when that happens
I'm wondering if an analogous tool exists for js?
The Closure Compiler does a top notch job, and I hear that Uglifyjs is good too. I might end up using Closure's REST api to manually manage file sets, but I'm wondering if anything exists that abstracts the process a little bit - into a standalone windows gui?
I've been poking around for a couple weeks, but have not come up with anything solid.
Cheers -
Have a look at http://gruntjs.com/ - "The JavaScript Task Runner". It becomes dead easy to script tasks, which would be along the lines of
a) run JSHint (for spotting errors in your code)
b) Run any QUnit tests
c) and finally call Uglify.js to compress your source in to a compressed, deployable file (I include a version number in mine to avoid caching issues).

What build systems exist for purely front-end code?

I'm looking to implement a build system that will run unit tests and JSLint on the Javascript, generate documentation and compress JavaScript and CSS into minified packages.
I might also add an integration step, which automatically uploads the code to a server on each build.
I feel overwhelmed by all the choices in build systems - some targeted toward .NET, others to Java.
What's the best system for my requirement, considering that the choice back-end is irrelevant?
Any build system would work, but there are none specifically designed for it. I would recommend either Ant or NAnt depending on if you're more comfortable with using Java or .NET. Either would work well for your purposes, running command line tools for the actions you want as part of your build.
You can also find 3rd party tasks specific to your tasks to make it easier:
Ant JSLint
http://jslint4java.googlecode.com/svn/docs/1.3.1/ant.html
For continuous integration I would recommend TeamCity. It will work well with any build system, provides a great interface, and is free for up to 20 projects.
http://www.jetbrains.com/teamcity/

Javascript Git client

Is there a Javascript implementation of Git?
I'm wanting to use HTML5 to create a rich Javascript application and have the idea that I could use git to track changes to the data. So, I'm wondering if there is a javascript implementation of a git client, or maybe some way of controlling a git repository by making POST requests.
Check out: https://github.com/danlucraft/git.js
A pure js implementation of git in javascript.
This https://github.com/creationix/js-git is and will be the future!
It is backed by a kickstarter campaign and has a very sound software design.
Many of the client use-cases such as git clone have been implemented
According the answer to my question on the issue tracker [1]. The author also plans to implement parts of the server side stuff to allow you to build a server with it.
https://github.com/creationix/js-git/issues/33
You can use https://github.com/isomorphic-git/isomorphic-git
isomorphic-git is a pure JavaScript reimplementation of git that works in both Node.js and browser JavaScript environments. It can read and write to git repositories, fetch from and push to git remotes (such as GitHub), all without any native C++ module
isomorphic-git is a continuation of https://github.com/creationix/js-git
isomorphic-git would not have been possible without the pioneering work by
#creationix and #chrisdickinson. Git is a tricky binary mess, and without
their examples (and their modules!) I would not have been able to come even
close to finishing this. They are geniuses ahead of their time.
Related questions:
Run git push from javascript hosted in static site
How to implement Git in pure Javascript to create a GUI?
I guess it depends on what you need, but there's a few related projects out there.
The most "robust" implementation I can think of is this one by the 280North crew (of Cappuccino fame).
There's also some server-side JavaScript projects underway (e.g., http://github.com/ajaxorg/node-github), but that won't run entirely within a browser client.
Update (for anyone else who comes across this):
Please be sure to check out vanthome's answer. Tim Caswell's js-git project is well funded and undoubtedly the best answer here at this time.
I just recently wrote a Git client called Nougit. Maybe this resembles something you are looking for?
$ npm install nougit
https://github.com/gordonwritescode/nougit
This is a full GUI, but the module inside named "git.js" is an API I wrote specifically to do what you are describing. Yank out the file, and you can use express to handle the http routes.

Categories