Welcome!

Industrial IoT Authors: Pat Romanski, Jason Bloomberg, Elizabeth White, Derek Weeks, Harry Trott

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
Whether your IoT service is connecting cars, homes, appliances, wearable, cameras or other devices, one question hangs in the balance – how do you actually make money from this service? The ability to turn your IoT service into profit requires the ability to create a monetization strategy that is flexible, scalable and working for you in real-time. It must be a transparent, smoothly implemented strategy that all stakeholders – from customers to the board – will be able to understand and comprehe...
In his session at @ThingsExpo, Chris Klein, CEO and Co-founder of Rachio, will discuss next generation communities that are using IoT to create more sustainable, intelligent communities. One example is Sterling Ranch, a 10,000 home development that – with the help of Siemens – will integrate IoT technology into the community to provide residents with energy and water savings as well as intelligent security. Everything from stop lights to sprinkler systems to building infrastructures will run ef...
So, you bought into the current machine learning craze and went on to collect millions/billions of records from this promising new data source. Now, what do you do with them? Too often, the abundance of data quickly turns into an abundance of problems. How do you extract that "magic essence" from your data without falling into the common pitfalls? In her session at @ThingsExpo, Natalia Ponomareva, Software Engineer at Google, will provide tips on how to be successful in large scale machine lear...
You think you know what’s in your data. But do you? Most organizations are now aware of the business intelligence represented by their data. Data science stands to take this to a level you never thought of – literally. The techniques of data science, when used with the capabilities of Big Data technologies, can make connections you had not yet imagined, helping you discover new insights and ask new questions of your data. In his session at @ThingsExpo, Sarbjit Sarkaria, data science team lead ...
Increasing IoT connectivity is forcing enterprises to find elegant solutions to organize and visualize all incoming data from these connected devices with re-configurable dashboard widgets to effectively allow rapid decision-making for everything from immediate actions in tactical situations to strategic analysis and reporting. In his session at 18th Cloud Expo, Shikhir Singh, Senior Developer Relations Manager at Sencha, will discuss how to create HTML5 dashboards that interact with IoT devic...
Artificial Intelligence has the potential to massively disrupt IoT. In his session at 18th Cloud Expo, AJ Abdallat, CEO of Beyond AI, will discuss what the five main drivers are in Artificial Intelligence that could shape the future of the Internet of Things. AJ Abdallat is CEO of Beyond AI. He has over 20 years of management experience in the fields of artificial intelligence, sensors, instruments, devices and software for telecommunications, life sciences, environmental monitoring, process...
SYS-CON Events announced today that Peak 10, Inc., a national IT infrastructure and cloud services provider, will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. Peak 10 provides reliable, tailored data center and network services, cloud and managed services. Its solutions are designed to scale and adapt to customers’ changing business needs, enabling them to lower costs, improve performance and focus inter...
SYS-CON Events announced today that Ericsson has been named “Gold Sponsor” of SYS-CON's @ThingsExpo, which will take place on June 7-9, 2016, at the Javits Center in New York, New York. Ericsson is a world leader in the rapidly changing environment of communications technology – providing equipment, software and services to enable transformation through mobility. Some 40 percent of global mobile traffic runs through networks we have supplied. More than 1 billion subscribers around the world re...
There is an ever-growing explosion of new devices that are connected to the Internet using “cloud” solutions. This rapid growth is creating a massive new demand for efficient access to data. And it’s not just about connecting to that data anymore. This new demand is bringing new issues and challenges and it is important for companies to scale for the coming growth. And with that scaling comes the need for greater security, gathering and data analysis, storage, connectivity and, of course, the...
SYS-CON Events announced today that DatacenterDynamics has been named “Media Sponsor” of SYS-CON's 18th International Cloud Expo, which will take place on June 7–9, 2016, at the Javits Center in New York City, NY. DatacenterDynamics is a brand of DCD Group, a global B2B media and publishing company that develops products to help senior professionals in the world's most ICT dependent organizations make risk-based infrastructure and capacity decisions.
Machine Learning helps make complex systems more efficient. By applying advanced Machine Learning techniques such as Cognitive Fingerprinting, wind project operators can utilize these tools to learn from collected data, detect regular patterns, and optimize their own operations. In his session at 18th Cloud Expo, Stuart Gillen, Director of Business Development at SparkCognition, will discuss how research has demonstrated the value of Machine Learning in delivering next generation analytics to im...
This is not a small hotel event. It is also not a big vendor party where politicians and entertainers are more important than real content. This is Cloud Expo, the world's longest-running conference and exhibition focused on Cloud Computing and all that it entails. If you want serious presentations and valuable insight about Cloud Computing for three straight days, then register now for Cloud Expo.
IoT device adoption is growing at staggering rates, and with it comes opportunity for developers to meet consumer demand for an ever more connected world. Wireless communication is the key part of the encompassing components of any IoT device. Wireless connectivity enhances the device utility at the expense of ease of use and deployment challenges. Since connectivity is fundamental for IoT device development, engineers must understand how to overcome the hurdles inherent in incorporating multipl...
The increasing popularity of the Internet of Things necessitates that our physical and cognitive relationship with wearable technology will change rapidly in the near future. This advent means logging has become a thing of the past. Before, it was on us to track our own data, but now that data is automatically available. What does this mean for mHealth and the "connected" body? In her session at @ThingsExpo, Lisa Calkins, CEO and co-founder of Amadeus Consulting, will discuss the impact of wea...
SYS-CON Events announced today that Stratoscale, the software company developing the next generation data center operating system, will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. Stratoscale is revolutionizing the data center with a zero-to-cloud-in-minutes solution. With Stratoscale’s hardware-agnostic, Software Defined Data Center (SDDC) solution to store everything, run anything and scale everywhere...
Angular 2 is a complete re-write of the popular framework AngularJS. Programming in Angular 2 is greatly simplified – now it's a component-based well-performing framework. This immersive one-day workshop at 18th Cloud Expo, led by Yakov Fain, a Java Champion and a co-founder of the IT consultancy Farata Systems and the product company SuranceBay, will provide you with everything you wanted to know about Angular 2.
SYS-CON Events announced today that Men & Mice, the leading global provider of DNS, DHCP and IP address management overlay solutions, will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. The Men & Mice Suite overlay solution is already known for its powerful application in heterogeneous operating environments, enabling enterprises to scale without fuss. Building on a solid range of diverse platform support,...
You deployed your app with the Bluemix PaaS and it's gaining some serious traction, so it's time to make some tweaks. Did you design your application in a way that it can scale in the cloud? Were you even thinking about the cloud when you built the app? If not, chances are your app is going to break. Check out this webcast to learn various techniques for designing applications that will scale successfully in Bluemix, for the confidence you need to take your apps to the next level and beyond.
We’ve worked with dozens of early adopters across numerous industries and will debunk common misperceptions, which starts with understanding that many of the connected products we’ll use over the next 5 years are already products, they’re just not yet connected. With an IoT product, time-in-market provides much more essential feedback than ever before. Innovation comes from what you do with the data that the connected product provides in order to enhance the customer experience and optimize busi...
Digital payments using wearable devices such as smart watches, fitness trackers, and payment wristbands are an increasing area of focus for industry participants, and consumer acceptance from early trials and deployments has encouraged some of the biggest names in technology and banking to continue their push to drive growth in this nascent market. Wearable payment systems may utilize near field communication (NFC), radio frequency identification (RFID), or quick response (QR) codes and barcodes...