Click here to close now.

Welcome!

XML Authors: Navrup Johal, AppDynamics Blog, Jayaram Krishnaswamy, Cloud Best Practices Network, Jnan Dash

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
“In the past year we've seen a lot of stabilization of WebRTC. You can now use it in production with a far greater degree of certainty. A lot of the real developments in the past year have been in things like the data channel, which will enable a whole new type of application," explained Peter Dunkley, Technical Director at Acision, in this SYS-CON.tv interview at @ThingsExpo, held Nov 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
SYS-CON Events announced today that Ciqada will exhibit at SYS-CON's @ThingsExpo, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Ciqada™ makes it easy to connect your products to the Internet. By integrating key components - hardware, servers, dashboards, and mobile apps - into an easy-to-use, configurable system, your products can quickly and securely join the internet of things. With remote monitoring, control, and alert messaging capability, you will meet your customers' needs of tomorrow - today! Ciqada. Let your products take flight. For more inform...
Health care systems across the globe are under enormous strain, as facilities reach capacity and costs continue to rise. M2M and the Internet of Things have the potential to transform the industry through connected health solutions that can make care more efficient while reducing costs. In fact, Vodafone's annual M2M Barometer Report forecasts M2M applications rising to 57 percent in health care and life sciences by 2016. Lively is one of Vodafone's health care partners, whose solutions enable older adults to live independent lives while staying connected to loved ones. M2M will continue to gr...
SYS-CON Media announced today that @WebRTCSummit Blog, the largest WebRTC resource in the world, has been launched. @WebRTCSummit Blog offers top articles, news stories, and blog posts from the world's well-known experts and guarantees better exposure for its authors than any other publication. @WebRTCSummit Blog can be bookmarked ▸ Here @WebRTCSummit conference site can be bookmarked ▸ Here
SYS-CON Events announced today that GENBAND, a leading developer of real time communications software solutions, has been named “Silver Sponsor” of SYS-CON's WebRTC Summit, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. The GENBAND team will be on hand to demonstrate their newest product, Kandy. Kandy is a communications Platform-as-a-Service (PaaS) that enables companies to seamlessly integrate more human communications into their Web and mobile applications - creating more engaging experiences for their customers and boosting collaboration and productiv...
Dave will share his insights on how Internet of Things for Enterprises are transforming and making more productive and efficient operations and maintenance (O&M) procedures in the cleantech industry and beyond. Speaker Bio: Dave Landa is chief operating officer of Cybozu Corp (kintone US). Based in the San Francisco Bay Area, Dave has been on the forefront of the Cloud revolution driving strategic business development on the executive teams of multiple leading Software as a Services (SaaS) application providers dating back to 2004. Cybozu's kintone.com is a leading global BYOA (Build Your O...
The best mobile applications are augmented by dedicated servers, the Internet and Cloud services. Mobile developers should focus on one thing: writing the next socially disruptive viral app. Thanks to the cloud, they can focus on the overall solution, not the underlying plumbing. From iOS to Android and Windows, developers can leverage cloud services to create a common cross-platform backend to persist user settings, app data, broadcast notifications, run jobs, etc. This session provides a high level technical overview of many cloud services available to mobile app developers, includi...
SYS-CON Events announced today that BroadSoft, the leading global provider of Unified Communications and Collaboration (UCC) services to operators worldwide, has been named “Gold Sponsor” of SYS-CON's WebRTC Summit, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. BroadSoft is the leading provider of software and services that enable mobile, fixed-line and cable service providers to offer Unified Communications over their Internet Protocol networks. The Company’s core communications platform enables the delivery of a range of enterprise and consumer calling...
While not quite mainstream yet, WebRTC is starting to gain ground with Carriers, Enterprises and Independent Software Vendors (ISV’s) alike. WebRTC makes it easy for developers to add audio and video communications into their applications by using Web browsers as their platform. But like any market, every customer engagement has unique requirements, as well as constraints. And of course, one size does not fit all. In her session at WebRTC Summit, Dr. Natasha Tamaskar, Vice President, Head of Cloud and Mobile Strategy at GENBAND, will explore what is needed to take a real time communications ...
What exactly is a cognitive application? In her session at 16th Cloud Expo, Ashley Hathaway, Product Manager at IBM Watson, will look at the services being offered by the IBM Watson Developer Cloud and what that means for developers and Big Data. She'll explore how IBM Watson and its partnerships will continue to grow and help define what it means to be a cognitive service, as well as take a look at the offerings on Bluemix. She will also check out how Watson and the Alchemy API team up to offer disruptive APIs to developers.
The IoT Bootcamp is coming to Cloud Expo | @ThingsExpo on June 9-10 at the Javits Center in New York. Instructor. Registration is now available at http://iotbootcamp.sys-con.com/ Instructor Janakiram MSV previously taught the famously successful Multi-Cloud Bootcamp at Cloud Expo | @ThingsExpo in November in Santa Clara. Now he is expanding the focus to Janakiram is the founder and CTO of Get Cloud Ready Consulting, a niche Cloud Migration and Cloud Operations firm that recently got acquired by Aditi Technologies. He is a Microsoft Regional Director for Hyderabad, India, and one of the f...
The 17th International Cloud Expo has announced that its Call for Papers is open. 17th International Cloud Expo, to be held November 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA, brings together Cloud Computing, APM, APIs, Microservices, Security, Big Data, Internet of Things, DevOps and WebRTC to one location. With cloud computing driving a higher percentage of enterprise IT budgets every year, it becomes increasingly important to plant your flag in this fast-expanding business opportunity. Submit your speaking proposal today!
WebRTC is an up-and-coming standard that enables real-time voice and video to be directly embedded into browsers making the browser a primary user interface for communications and collaboration. WebRTC runs in a number of browsers today and is currently supported in over a billion installed browsers globally, across a range of platform OS and devices. Today, organizations that choose to deploy WebRTC applications and use a host machine that supports audio through USB or Bluetooth can use Plantronics products to connect and transit or receive the audio associated with the WebRTC session.
As enterprises move to all-IP networks and cloud-based applications, communications service providers (CSPs) – facing increased competition from over-the-top providers delivering content via the Internet and independently of CSPs – must be able to offer seamless cloud-based communication and collaboration solutions that can scale for small, midsize, and large enterprises, as well as public sector organizations, in order to keep and grow market share. The latest version of Oracle Communications Unified Communications Suite gives CSPs the capability to do just that. In addition, its integration ...
SYS-CON Media announced today that @ThingsExpo Blog launched with 7,788 original stories. @ThingsExpo Blog offers top articles, news stories, and blog posts from the world's well-known experts and guarantees better exposure for its authors than any other publication. @ThingsExpo Blog can be bookmarked. 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.
The world's leading Cloud event, Cloud Expo has launched Microservices Journal on the SYS-CON.com portal, featuring over 19,000 original articles, news stories, features, and blog entries. DevOps Journal is focused on this critical enterprise IT topic in the world of cloud computing. Microservices Journal offers top articles, news stories, and blog posts from the world's well-known experts and guarantees better exposure for its authors than any other publication. Follow new article posts on Twitter at @MicroservicesE
SYS-CON Events announced today that robomq.io will exhibit at SYS-CON's @ThingsExpo, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. robomq.io is an interoperable and composable platform that connects any device to any application. It helps systems integrators and the solution providers build new and innovative products and service for industries requiring monitoring or intelligence from devices and sensors.
Wearable technology was dominant at this year’s International Consumer Electronics Show (CES) , and MWC was no exception to this trend. New versions of favorites, such as the Samsung Gear (three new products were released: the Gear 2, the Gear 2 Neo and the Gear Fit), shared the limelight with new wearables like Pebble Time Steel (the new premium version of the company’s previously released smartwatch) and the LG Watch Urbane. The most dramatic difference at MWC was an emphasis on presenting wearables as fashion accessories and moving away from the original clunky technology associated with t...
SYS-CON Events announced today that Litmus Automation 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. Litmus Automation’s vision is to provide a solution for companies that are in a rush to embrace the disruptive Internet of Things technology and leverage it for real business challenges. Litmus Automation simplifies the complexity of connected devices applications with Loop, a secure and scalable cloud platform.
In 2015, 4.9 billion connected "things" will be in use. By 2020, Gartner forecasts this amount to be 25 billion, a 410 percent increase in just five years. How will businesses handle this rapid growth of data? Hadoop will continue to improve its technology to meet business demands, by enabling businesses to access/analyze data in real time, when and where they need it. Cloudera's Chief Technologist, Eli Collins, will discuss how Big Data is keeping up with today's data demands and how in the future, data and analytics will be pervasive, embedded into every workflow, application and infra...