Welcome!

Industrial IoT Authors: Liz McMillan, Elizabeth White, Pat Romanski, Jeev Trika, Scott Allen

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
If you’re responsible for an application that depends on the data or functionality of various IoT endpoints – either sensors or devices – your brand reputation depends on the security, reliability, and compliance of its many integrated parts. If your application fails to deliver the expected business results, your customers and partners won't care if that failure stems from the code you developed or from a component that you integrated. What can you do to ensure that the endpoints work as expect...
In his keynote at 18th Cloud Expo, Andrew Keys, Co-Founder of ConsenSys Enterprise, provided an overview of the evolution of the Internet and the Database and the future of their combination – the Blockchain. Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life sett...
The Transparent Cloud-computing Consortium (abbreviation: T-Cloud Consortium) will conduct research activities into changes in the computing model as a result of collaboration between "device" and "cloud" and the creation of new value and markets through organic data processing High speed and high quality networks, and dramatic improvements in computer processing capabilities, have greatly changed the nature of applications and made the storing and processing of data on the network commonplace.
SYS-CON Events announced today that ReadyTalk, a leading provider of online conferencing and webinar services, has been named Vendor Presentation Sponsor at the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. ReadyTalk delivers audio and web conferencing services that inspire collaboration and enable the Future of Work for today’s increasingly digital and mobile workforce. By combining intuitive, innovative tec...
Cognitive Computing is becoming the foundation for a new generation of solutions that have the potential to transform business. Unlike traditional approaches to building solutions, a cognitive computing approach allows the data to help determine the way applications are designed. This contrasts with conventional software development that begins with defining logic based on the current way a business operates. In her session at 18th Cloud Expo, Judith S. Hurwitz, President and CEO of Hurwitz & ...
The vision of a connected smart home is becoming reality with the application of integrated wireless technologies in devices and appliances. The use of standardized and TCP/IP networked wireless technologies in line-powered and battery operated sensors and controls has led to the adoption of radios in the 2.4GHz band, including Wi-Fi, BT/BLE and 802.15.4 applied ZigBee and Thread. This is driving the need for robust wireless coexistence for multiple radios to ensure throughput performance and th...
Enterprise IT has been in the era of Hybrid Cloud for some time now. But it seems most conversations about Hybrid are focused on integrating AWS, Microsoft Azure, or Google ECM into existing on-premises systems. Where is all the Private Cloud? What do technology providers need to do to make their offerings more compelling? How should enterprise IT executives and buyers define their focus, needs, and roadmap, and communicate that clearly to the providers?
SYS-CON Events announced today that Commvault, a global leader in enterprise data protection and information management, has been named “Bronze Sponsor” of SYS-CON's 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. Commvault is a leading provider of data protection and information management solutions, helping companies worldwide activate their data to drive more value and business insight and to transform moder...
Fifty billion connected devices and still no winning protocols standards. HTTP, WebSockets, MQTT, and CoAP seem to be leading in the IoT protocol race at the moment but many more protocols are getting introduced on a regular basis. Each protocol has its pros and cons depending on the nature of the communications. Does there really need to be only one protocol to rule them all? Of course not. In his session at @ThingsExpo, Chris Matthieu, co-founder and CTO of Octoblu, walk you through how Oct...
The Internet of Things can drive efficiency for airlines and airports. In their session at @ThingsExpo, Shyam Varan Nath, Principal Architect with GE, and Sudip Majumder, senior director of development at Oracle, will discuss the technical details of the connected airline baggage and related social media solutions. These IoT applications will enhance travelers' journey experience and drive efficiency for the airlines and the airports. The session will include a working demo and a technical d...
There is little doubt that Big Data solutions will have an increasing role in the Enterprise IT mainstream over time. Big Data at Cloud Expo - to be held November 1-3, 2016, at the Santa Clara Convention Center in Santa Clara, CA - has announced its Call for Papers is open. Cloud computing is being adopted in one form or another by 94% of enterprises today. Tens of billions of new devices are being connected to The Internet of Things. And Big Data is driving this bus. An exponential increase is...
Digital innovation is the next big wave of business transformation based on digital technologies of which IoT and Big Data are key components, For example: Business boundary innovation is a challenge to excavate third-party business value using IoT and BigData, like Nest Business structure innovation may propose re-building business structure from scratch, as Uber does in the taxicab industry The social model innovation is also a big challenge to the new social architecture with the design fr...
The many IoT deployments around the world are busy integrating smart devices and sensors into their enterprise IT infrastructures. Yet all of this technology – and there are an amazing number of choices – is of no use without the software to gather, communicate, and analyze the new data flows. Without software, there is no IT. In this power panel at @ThingsExpo, moderated by Conference Chair Roger Strukhoff, panelists will look at the protocols that communicate data and the emerging data analy...
DevOps at Cloud Expo, taking place Nov 1-3, 2016, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 19th 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 no time to wait for long dev...
SYS-CON Events announced today that China Unicom will exhibit at the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. China United Network Communications Group Co. Ltd ("China Unicom") was officially established in 2009 on the basis of the merger of former China Netcom and former China Unicom. China Unicom mainly operates a full range of telecommunications services including mobile broadband (GSM, WCDMA, LTE F...
Data is an unusual currency; it is not restricted by the same transactional limitations as money or people. In fact, the more that you leverage your data across multiple business use cases, the more valuable it becomes to the organization. And the same can be said about the organization’s analytics. In his session at 19th Cloud Expo, Bill Schmarzo, CTO for the Big Data Practice at EMC, will introduce a methodology for capturing, enriching and sharing data (and analytics) across the organizati...
SYS-CON Events announced today the Enterprise IoT Bootcamp, being held November 1-2, 2016, in conjunction with 19th Cloud Expo | @ThingsExpo at the Santa Clara Convention Center in Santa Clara, CA. Combined with real-world scenarios and use cases, the Enterprise IoT Bootcamp is not just based on presentations but with hands-on demos and detailed walkthroughs. We will introduce you to a variety of real world use cases prototyped using Arduino, Raspberry Pi, BeagleBone, Spark, and Intel Edison. Y...
Major trends and emerging technologies – from virtual reality and IoT, to Big Data and algorithms – are helping organizations innovate in the digital era. However, to create real business value, IT must think beyond the ‘what’ of digital transformation to the ‘how’ to harness emerging trends, innovation and disruption. Architecture is the key that underpins and ties all these efforts together. In the digital age, it’s important to invest in architecture, extend the enterprise footprint to the cl...
Video experiences should be unique and exciting! But that doesn’t mean you need to patch all the pieces yourself. Users demand rich and engaging experiences and new ways to connect with you. But creating robust video applications at scale can be complicated, time-consuming and expensive. In his session at @ThingsExpo, Zohar Babin, Vice President of Platform, Ecosystem and Community at Kaltura, will discuss how VPaaS enables you to move fast, creating scalable video experiences that reach your...
SYS-CON Events announced today that SoftLayer, an IBM Company, has been named “Gold Sponsor” of SYS-CON's 18th Cloud Expo, which will take place on June 7-9, 2016, at the Javits Center in New York, New York. SoftLayer, an IBM Company, provides cloud infrastructure as a service from a growing number of data centers and network points of presence around the world. SoftLayer’s customers range from Web startups to global enterprises.