Welcome!

XML Authors: Nikita Ivanov, Carmen Gonzalez, Jim Kaskade, Gilad Parann-Nissany, Yeshim Deniz

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.

@ThingsExpo Stories
SYS-CON Events announced today that Gridstore™, the leader in hyper-converged infrastructure purpose-built to optimize Microsoft workloads, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Gridstore™ is the leader in hyper-converged infrastructure purpose-built for Microsoft workloads and designed to accelerate applications in virtualized environments. Gridstore’s hyper-converged infrastructure is the industry’s first all flash version of HyperConverged Appliances that include both compute and storag...
WebRTC defines no default signaling protocol, causing fragmentation between WebRTC silos. SIP and XMPP provide possibilities, but come with considerable complexity and are not designed for use in a web environment. In his session at @ThingsExpo, Matthew Hodgson, technical co-founder of the Matrix.org, discussed how Matrix is a new non-profit Open Source Project that defines both a new HTTP-based standard for VoIP & IM signaling and provides reference implementations.
Connected devices and the Internet of Things are getting significant momentum in 2014. In his session at Internet of @ThingsExpo, Jim Hunter, Chief Scientist & Technology Evangelist at Greenwave Systems, examined three key elements that together will drive mass adoption of the IoT before the end of 2015. The first element is the recent advent of robust open source protocols (like AllJoyn and WebRTC) that facilitate M2M communication. The second is broad availability of flexible, cost-effective storage designed to handle the massive surge in back-end data in a world where timely analytics is e...
There's Big Data, then there's really Big Data from the Internet of Things. IoT is evolving to include many data possibilities like new types of event, log and network data. The volumes are enormous, generating tens of billions of logs per day, which raise data challenges. Early IoT deployments are relying heavily on both the cloud and managed service providers to navigate these challenges. In her session at Big Data Expo®, Hannah Smalltree, Director at Treasure Data, discussed how IoT, Big Data and deployments are processing massive data volumes from wearables, utilities and other machines...
Scott Jenson leads a project called The Physical Web within the Chrome team at Google. Project members are working to take the scalability and openness of the web and use it to talk to the exponentially exploding range of smart devices. Nearly every company today working on the IoT comes up with the same basic solution: use my server and you'll be fine. But if we really believe there will be trillions of these devices, that just can't scale. We need a system that is open a scalable and by using the URL as a basic building block, we open this up and get the same resilience that the web enjoys.
DevOps Summit 2015 New York, co-located with the 16th International Cloud Expo - to be held June 9-11, 2015, at the Javits Center in New York City, NY - announces that it is now accepting Keynote Proposals. 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 no time to wait for long development cycles that produce software that is obsolete at launch. DevOps may be disruptive, but it is essential.
Explosive growth in connected devices. Enormous amounts of data for collection and analysis. Critical use of data for split-second decision making and actionable information. All three are factors in making the Internet of Things a reality. Yet, any one factor would have an IT organization pondering its infrastructure strategy. How should your organization enhance its IT framework to enable an Internet of Things implementation? In his session at Internet of @ThingsExpo, James Kirkland, Chief Architect for the Internet of Things and Intelligent Systems at Red Hat, described how to revolutioniz...
The 3rd International Internet of @ThingsExpo, co-located with the 16th International Cloud Expo - to be held June 9-11, 2015, at the Javits Center in New York City, NY - announces that its Call for Papers is now open. The Internet of Things (IoT) is the biggest idea since the creation of the Worldwide Web more than 20 years ago.
The security devil is always in the details of the attack: the ones you've endured, the ones you prepare yourself to fend off, and the ones that, you fear, will catch you completely unaware and defenseless. The Internet of Things (IoT) is nothing if not an endless proliferation of details. It's the vision of a world in which continuous Internet connectivity and addressability is embedded into a growing range of human artifacts, into the natural world, and even into our smartphones, appliances, and physical persons. In the IoT vision, every new "thing" - sensor, actuator, data source, data con...
"Matrix is an ambitious open standard and implementation that's set up to break down the fragmentation problems that exist in IP messaging and VoIP communication," explained John Woolf, Technical Evangelist at Matrix, in this SYS-CON.tv interview at @ThingsExpo, held Nov 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
How do APIs and IoT relate? The answer is not as simple as merely adding an API on top of a dumb device, but rather about understanding the architectural patterns for implementing an IoT fabric. There are typically two or three trends: Exposing the device to a management framework Exposing that management framework to a business centric logic Exposing that business layer and data to end users. This last trend is the IoT stack, which involves a new shift in the separation of what stuff happens, where data lives and where the interface lies. For instance, it's a mix of architectural styles ...
The Internet of Things will put IT to its ultimate test by creating infinite new opportunities to digitize products and services, generate and analyze new data to improve customer satisfaction, and discover new ways to gain a competitive advantage across nearly every industry. In order to help corporate business units to capitalize on the rapidly evolving IoT opportunities, IT must stand up to a new set of challenges. In his session at @ThingsExpo, Jeff Kaplan, Managing Director of THINKstrategies, will examine why IT must finally fulfill its role in support of its SBUs or face a new round of...
The Internet of Things promises to transform businesses (and lives), but navigating the business and technical path to success can be difficult to understand. In his session at @ThingsExpo, Sean Lorenz, Technical Product Manager for Xively at LogMeIn, demonstrated how to approach creating broadly successful connected customer solutions using real world business transformation studies including New England BioLabs and more.
An entirely new security model is needed for the Internet of Things, or is it? Can we save some old and tested controls for this new and different environment? In his session at @ThingsExpo, New York's at the Javits Center, Davi Ottenheimer, EMC Senior Director of Trust, reviewed hands-on lessons with IoT devices and reveal a new risk balance you might not expect. Davi Ottenheimer, EMC Senior Director of Trust, has more than nineteen years' experience managing global security operations and assessments, including a decade of leading incident response and digital forensics. He is co-author of t...
P2P RTC will impact the landscape of communications, shifting from traditional telephony style communications models to OTT (Over-The-Top) cloud assisted & PaaS (Platform as a Service) communication services. The P2P shift will impact many areas of our lives, from mobile communication, human interactive web services, RTC and telephony infrastructure, user federation, security and privacy implications, business costs, and scalability. In his session at @ThingsExpo, Robin Raymond, Chief Architect at Hookflash, will walk through the shifting landscape of traditional telephone and voice services ...
The definition of IoT is not new, in fact it’s been around for over a decade. What has changed is the public's awareness that the technology we use on a daily basis has caught up on the vision of an always on, always connected world. If you look into the details of what comprises the IoT, you’ll see that it includes everything from cloud computing, Big Data analytics, “Things,” Web communication, applications, network, storage, etc. It is essentially including everything connected online from hardware to software, or as we like to say, it’s an Internet of many different things. The difference ...
The 3rd International @ThingsExpo, co-located with the 16th International Cloud Expo - to be held June 9-11, 2015, at the Javits Center in New York City, NY - announces that it is now accepting Keynote Proposals. 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 devices - computers, smartphones, tablets, and sensors - connected to the Internet by 2020. This number will continue to grow at a rapid pace for the next several decades.
The 3rd International Internet of @ThingsExpo, co-located with the 16th International Cloud Expo - to be held June 9-11, 2015, at the Javits Center in New York City, NY - announces that its Call for Papers is now open. The Internet of Things (IoT) is the biggest idea since the creation of the Worldwide Web more than 20 years ago.
We are reaching the end of the beginning with WebRTC, and real systems using this technology have begun to appear. One challenge that faces every WebRTC deployment (in some form or another) is identity management. For example, if you have an existing service – possibly built on a variety of different PaaS/SaaS offerings – and you want to add real-time communications you are faced with a challenge relating to user management, authentication, authorization, and validation. Service providers will want to use their existing identities, but these will have credentials already that are (hopefully) i...
The Internet of Things will greatly expand the opportunities for data collection and new business models driven off of that data. In her session at @ThingsExpo, Esmeralda Swartz, CMO of MetraTech, discussed how for this to be effective you not only need to have infrastructure and operational models capable of utilizing this new phenomenon, but increasingly service providers will need to convince a skeptical public to participate. Get ready to show them the money!