Welcome!

Blog Feed Post

Modularized JavaScript with JBoss Portal Platform 6 – Avoid Conflicts, Promote Re-usability

JBoss Portal Platform 6

JBoss Portal Platform 6 Beta is now available.
http://www.redhat.com/promo/jpp6/

Many new features are documented there:

  • Built on blazingly fast, lightweight JBoss Enterprise Application Platform 6 technology
  • Develop with JSF2 and Rich Faces 4 in portlets, via Portlet Bridge
  • Implement single sign-on (SSO) using SAML 2.0
  • Launch fast with Maven quick starts

Portlet and JavaScript

However, to developers and architects, one of the first issues and most difficult issue we face in any portal implementation is – what are the best practices to use JavaScripts in a portal platform?

Imagine if you have 2 portlets both using a shared JavaScript, such as jQuery – how would you share the JavaScript between the 2 portlets?

  • Each Portlet include its own
    • This is largely a no-no.  If each portlet include its own jQuery in a <script> tag, they’ll most likely run into conflicts or unnecessarily reload a script already loaded.
  • Deploy a single version
    • Then what if you need multiple versions?
    • What if some portlets needs a different version of the JavaScript library?

Now, expand this dilemma to not just common JavaScripts libraries, but to all of your application’s JavaScripts!

Oh, and don’t forget, you may also want to minify and combine scripts to reduce latency, to be Content Delivery Network (CDN) friendly, and ultimately, to improve your customer’s browsing  experience.

How JBoss Portal Platform 6 Helps

JBoss Portal Platform 6 has an exciting new feature to deal with the age old question of how to best deal with JavaScripts in Portlets.

  • JavaScript should be modular and re-usable
  • Dependency management – if a JavaScript depends on another JavaScript, it should load it automatically
  • Each portlet should be able to specify what JavaScript it needs to use
  • If the Portal Platform already provides certain JavaScript libraries, your portlet should still be able to use other versions.  Multiple versions should not cause issues.
  • Work with JavaScripts you already have

All of the above can be accomplished with JBoss Portal Platform 6!  Best of all, it can be achieved using XML-based configurations as well as using JavaScripts to load JavaScript modules.

JavaScript Modules

JBoss Portal Platform 6 fully embraces the concept of JavaScript modules.  For example, you can define a module named “jquery-1.9.0″ to be associated with jquery-1.9.0.js.

Each module definition contains a name, and JavaScript multiple JavaScript files.  For example:

<module>
    <name>jquery-1.9.0</name>
    <script>/javascript/jquery-1.9.0.js</script>
</module>

Note that, JBoss Portal Platform 6 already ships with a module named “jquery” that provides jQuery 1.7.1.  But it’s OK to define another module using a different name.

Dependencies

A JavaScript module can have dependencies to another JavaScript module.  For example, if your application JavaScript “version.js” depends on jQuery:

(function($) {
    alert($().jquery); // Display jQuery version in an alert window.
})($);

First, we can associate the JavaScript with the portlet, so that JBoss Portal Platform 6 can load “version.js” only if the portlet is also on the page, and then specify the dependency:

<portlet>
    <name>jquery-version</name>
    <module>
        <script>
            <path>/javascript/version.js</path>
        </script>
        <depends>
            <module>jquery</module>
        </depends>
    </module>
</portlet>

* JBoss Portal Platform 6 provides jQuery 1.7.1 as a module.  It can be referenced and re-used by any portlet.

You can, of course, specify multiple dependencies.

Multiple Versions?  No Problem!

What if your portlet needs newest jQuery 1.9.0, even though JBoss Portal Platform already has jQuery 1.7.1?  Not to worry – it’s as easy as changing out the dependency!

<portlet>
    <name>jquery-version</name>
    <module>
        <script>
            <path>/javascript/version.js</path>
        </script>
        <depends>
            <module>jquery-1.9.0</module>
        </depends>
    </module>
</portlet>

In fact, you can even use both versions at the same time.

<portlet>
    <name>jquery-version</name>
    <module>
        <script>
            <path>/javascript/version-both.js</path>
        </script>
        <depends>
            <module>jquery</module>
            <as>jq17</as>
        </depends>
        <depends>
            <module>jquery-1.9.0</module>
            <as>jq19</as>
        </depends>
    </module>
</portlet>

The “<as/>” tag will create an alias for the JavaScript so that it can be referred to by the consuming script.  In the above example, out-of-the-box jQuery is now aliased as “jq17″, and our own version is aliased as “jq19″.  These will then be accessible by the consuming script as variables with those names.

And for “version-both.js”:

(function(jq17, jq19) {
    alert(jq17().jquery); // Display jQuery version in an alert window.
    alert(jq19().jquery);
})(jq17, jq19);

Adapter

What if the JavaScript is not already wrapped by a factory function, e.g. (function(…) { … })(…);

E.g., “version-legacy.js”:

alert($().jquery);

With Adapter, you can wrap existing JavaScripts files with any JavaScript fragments before and after the file:

<portlet>
    <name>jquery-version-legacy</name>
    <module>
        <script>
            <adapter>
                (function($){
                <include>/javascript/version-legacy.js</include>
                })(jq19);
            </adapter>
        </script>
        <depends>
            <module>jquery-1.9.0</module>
            <as>jq19</as>
        </depends>
    </module>
</portlet>

In case you already have many JavaScript files you want to re-use and don’t want to make extensive changes, or if a third-party library needs to be re-wrapped with JavaScript best practices, then Adapter is your friend.

Magic Behind the Scene

How can JBoss Portal Platform 6 accomplish all this?  The magic behind the scene is that JBoss Portal Platform 6 fully embraces Asynchronous Module Definition (AMD).  Behind the scenes, JBoss Portal Platform 6 translates the XML configurations into AMD friendly JavaScript.  For example, when loading both jQuery versions, JBoss Portal Platform 6 will generate the following JavaScript fragment:

define('PORTLET/jquery-portlet/jquery-portlet', ["SHARED/jquery","SHARED/jquery-1.9.0"], function(jq17,jq19) {
    var require = eXo.require, requirejs = eXo.require,define = eXo.define;
    eXo.define.names=["jq17","jq19"];
    eXo.define.deps=[jq17,jq19];
    return (function() {
        alert("jq17().jquery);
        alert("jq19().jquery)
    })(jq17, jq19);
});

Minify, Last-Modified

Last, if not least, JBoss Portal Platform 6 will automatically combine all of the JavaScripts in a single module and then minify the script.  This will not only reduce the size of the JavaScript, it will also reduce the number of files the user’s browser will need to download!  The minified resource will also have proper cache headers, such as Cache-Control and Last-Modified headers to reduce unnecessary re-download of the script and making it more CDN friendly.

Architecting Your Portal with JavaScript in Mind

With these enhancements to JBoss Portal Platform 6, it’s now possible to modularize your JavaScripts, apply dependency management, promote re-usability, and not to worry about the nitty gritty details behind the scenes.  It also opens up a number of possibilities such as deploying JavaScript libraries in a dedicated archive (.war), and portlets packaged in other archives can also reference and re-use the JavaScript.  If you need to upgrade the shared JavaScript code, you can simply deploy the archive containing the new script.

The Code

The examples in this article can be found on github.
https://github.com/saturnism/code-in-blogs/tree/master/jpp6-js-example

There are also plenty more examples in GateIn Community Project.
https://github.com/gatein/gatein-portal/tree/master/examples/portlets
(amd-js, jquery, and todomvc)


Read the original blog entry...

More Stories By Daniel Thompson

I curate the content on this page, but the credit goes to my talented colleagues for the posts that you see here. Much of what you read on this page is the work of friends at How to JBoss, and I encourage you to drop by the site at http://www.howtojboss.com for some of the best JBoss technical and non-technical content for developers, architects and technology executives on the Web.

Latest Stories
Cloud promises the agility required by today’s digital businesses. As organizations adopt cloud based infrastructures and services, their IT resources become increasingly dynamic and hybrid in nature. Managing these require modern IT operations and tools. In his session at 20th Cloud Expo, Raj Sundaram, Senior Principal Product Manager at CA Technologies, will discuss how to modernize your IT operations in order to proactively manage your hybrid cloud and IT environments. He will be sharing bes...
After more than five years of DevOps, definitions are evolving, boundaries are expanding, ‘unicorns’ are no longer rare, enterprises are on board, and pundits are moving on. Can we now look at an evolution of DevOps? Should we? Is the foundation of DevOps ‘done’, or is there still too much left to do? What is mature, and what is still missing? What does the next 5 years of DevOps look like? In this Power Panel at DevOps Summit, moderated by DevOps Summit Conference Chair Andi Mann, panelists loo...
Cloud applications are seeing a deluge of requests to support the exploding advanced analytics market. “Open analytics” is the emerging strategy to deliver that data through an open data access layer, in the cloud, to be directly consumed by external analytics tools and popular programming languages. An increasing number of data engineers and data scientists use a variety of platforms and advanced analytics languages such as SAS, R, Python and Java, as well as frameworks such as Hadoop and Spark...
Automation is enabling enterprises to design, deploy, and manage more complex, hybrid cloud environments. Yet the people who manage these environments must be trained in and understanding these environments better than ever before. A new era of analytics and cognitive computing is adding intelligence, but also more complexity, to these cloud environments. How smart is your cloud? How smart should it be? In this power panel at 20th Cloud Expo, moderated by Conference Chair Roger Strukhoff, paneli...
"Loom is applying artificial intelligence and machine learning into the entire log analysis process, from start to finish and at the end you will get a human touch,” explained Sabo Taylor Diab, Vice President, Marketing at Loom Systems, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
The current age of digital transformation means that IT organizations must adapt their toolset to cover all digital experiences, beyond just the end users’. Today’s businesses can no longer focus solely on the digital interactions they manage with employees or customers; they must now contend with non-traditional factors. Whether it's the power of brand to make or break a company, the need to monitor across all locations 24/7, or the ability to proactively resolve issues, companies must adapt to...
A look across the tech landscape at the disruptive technologies that are increasing in prominence and speculate as to which will be most impactful for communications – namely, AI and Cloud Computing. In his session at 20th Cloud Expo, Curtis Peterson, VP of Operations at RingCentral, highlighted the current challenges of these transformative technologies and shared strategies for preparing your organization for these changes. This “view from the top” outlined the latest trends and developments i...
With major technology companies and startups seriously embracing Cloud strategies, now is the perfect time to attend 21st Cloud Expo October 31 - November 2, 2017, at the Santa Clara Convention Center, CA, and June 12-14, 2018, at the Javits Center in New York City, NY, and learn what is going on, contribute to the discussions, and ensure that your enterprise is on the right path to Digital Transformation.
@DevOpsSummit at Cloud Expo taking place Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center, Santa Clara, CA, is co-located with the 21st International Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is ...
"We are a monitoring company. We work with Salesforce, BBC, and quite a few other big logos. We basically provide monitoring for them, structure for their cloud services and we fit into the DevOps world" explained David Gildeh, Co-founder and CEO of Outlyer, in this SYS-CON.tv interview at DevOps Summit at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
Join us at Cloud Expo June 6-8 to find out how to securely connect your cloud app to any cloud or on-premises data source – without complex firewall changes. More users are demanding access to on-premises data from their cloud applications. It’s no longer a “nice-to-have” but an important differentiator that drives competitive advantages. It’s the new “must have” in the hybrid era. Users want capabilities that give them a unified view of the data to get closer to customers and grow business. The...
For organizations that have amassed large sums of software complexity, taking a microservices approach is the first step toward DevOps and continuous improvement / development. Integrating system-level analysis with microservices makes it easier to change and add functionality to applications at any time without the increase of risk. Before you start big transformation projects or a cloud migration, make sure these changes won’t take down your entire organization.
Artificial intelligence, machine learning, neural networks. We’re in the midst of a wave of excitement around AI such as hasn’t been seen for a few decades. But those previous periods of inflated expectations led to troughs of disappointment. Will this time be different? Most likely. Applications of AI such as predictive analytics are already decreasing costs and improving reliability of industrial machinery. Furthermore, the funding and research going into AI now comes from a wide range of com...
"When we talk about cloud without compromise what we're talking about is that when people think about 'I need the flexibility of the cloud' - it's the ability to create applications and run them in a cloud environment that's far more flexible,” explained Matthew Finnie, CTO of Interoute, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
Internet of @ThingsExpo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 21st Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The Internet of Things (IoT) is the most profound change in personal and enterprise IT since the creation of the Worldwide Web more than 20 years ago. All major researchers estimate there will be tens of billions devic...