We Keep Coding

How to share libraries between two webpack-built applications?

I have two JavaScript single-page applications in two separate GIT repositories. I want to keep them separated as much as possible (different teams working on them etc.), but they are still very closely related and even co-exist within the context of the same web page as part of one large SPA. Naturally, these two applications share large amounts of library code and it is very wasteful to bundle each with its own copy of libraries.
Is there any way I can reuse the library code? What would be a possible approach?

What I am describing seems to be achievable using the DLL plugin. Basically, I create a vendor.js file, which requires all of the dependencies. Then, from that file generate a bundle of all the libraries and a manifest.json file. Then, using DllReferencePlugin it should be possible to tell webpack in each of my apps to take the dependency from the vendor bundle. Both apps can be built independently. As a last step, simply load of the three bundles on the page.

Bundling and minification technique

I have a question regarding JavaScript bundling methodology.
We have any existing Java Web application (A product) consisting of lot of jsps. We wanted to implement the bundling and minification methodology for the js and CSS files in order reduce the overhead(). As I mentioned this is a Product it comes with its traditional web folder structure
Is there any way (Any tool) through which we can have a dynamic bundling methodology without changing the syntax in jsp. If we change the syntax in jsps then this will increase our overhead during upgrade activities.

Jawr is a tunable packaging solution for Javascript and CSS which allows for rapid development of resources in separate module files. Developers can work with a large set of split javascript files in development mode, then Jawr bundles all together into one or several files in a configurable way.
By using a tag library, Jawr allows you to use the same, unchanged pages for development and production. Jawr also minifies and compresses the files, resulting in reduced page load times.
Jawr is configured using a simple .properties descriptor, and aside of standard java web applications it can also be used with Facelets, Grails, Wicket and Spring applications.
https://jawr.java.net

Requirejs implementation for JS optimization

I am new in requirejs .I don't have any knowledge about requireJs or other JS optimization techniques.
My requirement is , I have single page application developed in angularJs. Now the single page application will load all available Js for all modules.I need to reduce the number of loading js file(Need to load only needed js file for each module). What is the best method for this optimization. From my initial knowledge i only got the requireJS. Any other method availble for this.Please suggest the better method for JS loading optimization.

I am doing all this with requirejs and for me it is working great. Files get loaded on demand, the release version gets minified, it is working smoothly with angular and more. Have a look at the topic RequireJS Optimizer and for automatization have a look at the grunt support: grunt-contrib-requirejs.
At the first link you can read:
RequireJS has an optimization tool that does the following
Combines related scripts together into build layers and minifies them via UglifyJS (the default) or Closure Compiler (an option when using Java).
Optimizes CSS by inlining CSS files referenced by #import and removing comments.

Using a Helper in a Vendor - CakePHP

In my CakePHP app, I am defining a Wizard vendor that outputs the HTML for a multistep Wizard type plugin, along with its relevant Javascript code. I'm wanting to use the JsHelper so that I can buffer my code to the bottom of the page.
Everything else is working, including my Javascript code if I just output it directly with the HTML. I just can't quite figure out how to use the JsHelper. Do I use a App:Uses or App:Import statement? When using it in a View, I can just define it on the controller level, but that doesn't work here.
$this->Js->buffer("
$('.mws-wizard').wizard({
buttonContainerClass: 'mws-button-row',
orientation: '$orientation',
forwardOnly: $forwardOnly
});
");

If you are developing this 'vendor' package yourself, you should not develop it as a 'vendor', but as a plugin.
The vendor folders are meant for including third-party libraries that are not developed with CakePHP in mind (for example to use parts of the Zend Framework in your application).
From the manual:
Note: Loading vendors usually means you are loading packages that do not follow conventions. For most vendor packages using App::import() is recommended.
Create a plugin not a vendor
To develop re-usable code that can be used with different projects/applications, develop your code as a Plugin. Plugins are basically 'mini CakePHP applications'. Classes from a plugin can be used inside your application and vice-versa; a plugin can use CakePHP helpers the same way as you use them in your application.
See Creating Your Own Plugins
Regarding the JsHelper
Contrary to the comment placed by Sam Delaney, your usage of the JsHelper looks fine to me. Adding some script to the Js buffer to output it in the layout seems useful. Just don't try to use it for extended blocks of JavaScript; that should be put in external .js files.
I do recommend to write the JavaScript code yourself and not have the JsHelper generate the code for you (e.g. Don't use $this->Js->get('#foo')->event('click', $eventCode);). This may be personal, but IMO this makes it harder to track/debug your JavaScript and isn't any more readable than just $('#foo').click('event code');

I've personally never found any use for the JavaScript helper in CakePHP as if you're not careful, you end with getting <script> tags littering your markup, which sometimes makes it quite difficult to debug. From what you describe, you have the JavaScript aggregated and appended at the bottom of your HTML so it isn't as bad as the situation I highlight previously.
Is it not possible to relocate all your JavaScript to .js files to encapsulate all the function for your wizard plugin/vendor? If you could do this, it would be in keeping with MVC principles where you could logically separate the view markup and presentation logic.

Backbone.js micro templating

I have an application, that uses Backbone.js,Jquery,Mustache and PHP as backend.
I have implemented micro-templates from underscore.js, which I currently define in my header-page.
I'm a bit dubious as to how I should organise the templates. Is there any efficient way to organise all templates in files and load them as required?

I use the exact same setup as you. Backbone, jQuery, mustache (for initial page render), and PHP (are you a SlimPHP fan? :-) I'm sure there are many ways to do this but one really great tool you might consider using is require.js.
With require, basically you code your Backbone client-side app as a series of AMD modules. Models, Collections, Views are their own modules that define dependencies with one another. The nature of AMD modules is that all modules are loaded asynchronously. So when your first page loads, only the code necessary to get that page going executes. When you leave the page and go to another, then that code is executed including all the dependencies that code has defined.
The nice thing about require is that it has a plugin that allows you to separate all your HTML code into html files. You simply define which views need those files as dependencies and it imports them as text to be used in the underscore templates.
Once you're ready to go live, you can use require.js' optimize feature to minify and combine all your js scripts + html templates into one file. Bang.
For big projects, a tool like this is pretty nice.
RequireJS