Skip to main content

Play Framework with RequireJS and YUI

I've concluded an older post with a promise to investigate the issues of integration of Play Framework with RequireJS and YUI. Finally I've got some time to resolve all issues so I'm going to showcase a working sample multi-page project in this article.
  1. Sample project.
  2. Issues.
Sample project
Play Framework offers a nice official tutorial for RequireJS-support. However, it appeared that not all RequireJS features are fully supported by Play Framework yet (see below in Issues section). So it required some tuning before everything started working. I've published a sample project on github so you're welcome to look into it. Some of the issues that I faced are described in the section below. Here I'm going to show a couple of screenshots of the sample application. This is how one page of the application looks like:
Below is the screenshot of the network tab of the Google Chrome developer tools showing all page resources in the production mode. You can see that the following resources are loaded:
  • require.js - its script tag is injected by Play Framework;
  • main1.js - custom JS resources that are combined, minified and loaded by RequireJS;
  • yui-min.js - pre-minified version of YUI that is only loaded by RequireJS without minification;
  • combo - YUI dependencies managed by YUI loader.

Issues
In order to save others' time I'm going to list and comment on the RequireJS issues that I faced. They only appeared while running Play in production mode (i.e. play start or play stage).
JavaException: java.io.FileNotFoundException: /appl/sample-application/target/scala-2.10/classes/public/javascripts-min/lib.js (No such file or directory)
In module tree:
    app/main1
Solution: I've removed an additional app directory and have put the main page resources under assets/javascripts/* while the dependent libraries can still be placed in child directories.
Explanation: It's appeared that baseUrl RequireJS config property leads to inconsistent behavior if compared between development and production modes. It looks like it's not properly used by Play Framework in production mode.
JavaException: java.io.FileNotFoundException: /appl/sample-application/target/scala-2.10/classes/public/javascripts-min/YUI.js (No such file or directory)
In module tree:
    main1
      lib/UseYUI
Solution: I've found a solution in baratox's project. I've created build.js file (see the code ) and have added it as a shim config in build.sbt.
Explanation: RequireJS fails to optimize YUI js so it should be prevented.
TypeError: YUI is not a function, it is undefined.
In module tree:
    main1
      lib/UseYUI
Solution: I've added load() invocation in UseYUI.js when YUI is undefined.
Explanation: As it worked fine in development mode, it's most likely caused by RequireJS attempt to optimize YUI in production mode that fails. So I believe load() invocation helps to ignore the YUI dependency during the optimization.

Comments

Post a Comment

Popular posts from this blog

DynamicReports and Spring MVC integration

This is a tutorial on how to exploit DynamicReports reporting library in an existing Spring MVC based web application. It's a continuation to the previous post where DynamicReports has been chosen as the most appropriate solution to implement an export feature in a web application (for my specific use case). The complete code won't be provided here but only the essential code snippets together with usage remarks. Also I've widely used this tutorial that describes a similar problem for an alternative reporting library.
So let's turn to the implementation description and start with a short plan of this how-to:
Adding project dependencies.Implementing the Controller part of the MVC pattern.Modifying the View part of the MVC pattern.Modifying web.xml.Adding project dependencies
I used to apply Maven Project Builder throughout my Java applications, thus the dependencies will be provided in the Maven format.

Maven project pom.xml file:
net.sourceforge.dynamicreportsdynamicrepo…

Choosing Java reporting tool - part 2

I've provided a general overview of possible solutions to get a reporting/exporting functionality in the previous post. This is the second overview of alternatives based on JasperReports reporting engine.

Since the previous part I've done the following:
Implemented a simple report using both DynamicJasper and DynamicReports to compare them from technical side.Investigated JasperServer features and tried to implement a simple report for JasperServer instance (it appeared we already have a ready licensed installation of JasperServer that makes it unreasonable to install a fresh one).
First, the comparison results of Java libraries (DynamicJasper and DynamicReports):
Both libraries suffer from poor-quality or missing Java docs but they look a bit better in DynamicJasper.Taking into account the point 1, a developer has to use online documentation and to review the code. Here the code looks definitely nicer and more readable for DynamicReports. With respect t…

Do It Yourself Java Profiling

This article is a free translation of the Russian one that is a transcript of the Russian video lecture done by Roman Elizarov at the Application Developer Days 2011 conference.
The lecturer talked about profiling of Java applications without any standalone tools. Instead, it's suggested to use internal JVM features (i.e. threaddumps, java agents, bytecode manipulation) to implement profiling quickly and efficiently. Moreover, it can be applied on Production environments with minimal overhead. This concept is called DIY or "Do It Yourself". Below the lecture's text and slides begin.
Today I'm giving a lecture "Do It Yourself Java Profiling". It's based on the real life experience that was gained during more than 10 years of developing high-loaded finance applications that work with huge amounts of data, millions currency rate changes per second and thousands of online users. As a result, we have to deal with profiling. Application profiling is an i…