Introducing the MyFaces jsf.js Modular Includes

Introduction:

Why modular jsf.js includes, there is one jsf.js file, right?

Since the beginning of the introduction of jsf.js in JSF there has been only one jsf.js file which serves all Ajax needs.
However, at least for Apache MyFaces there have been a lot of extensions added such as:

• iframe ajax fileupload
• html5 form detection
• client side i18n message support for various languages (including chinese)
• legacy browser support down to blackberry 4.7 and winmobile 6.5 and ie6
• browser optimisations for browsers supporting dom level3
• queue control for the ajax request queue
• timeout handling
• better error handling
• delay handling
• modular structure which can be changed at runtime to replace it with your own  implementation of subparts
• clear distinction between api and impl on codelevel

(More info on many of those extended features see following Link)

Most of those extensions will make it one way or the other into the official jsf spec. However different scenarii have different needs.
While most legacy mobile browsers are now slowly phased out (and is seen as deprecated) ie6 for the time being is still supported with a burden of legacy code.
However in a pure modern mobile environment for instance you need smaller files and no legacy code at all. Many users are also perfectly happy with a pure implementation of jsf.js according to the spec without any extra features. Other users only need a subset of those features and want to leave out the other (i18n support for instance)

The advantage of dropping code is smaller filesizes, faster code due to less lines which have to be processed and less fallbacks which have to be prechecked. Something worthwhile to explore given modern mobile browser environments and situations where you simply want to be as lean as possible.

So what is the solution for all this

The MyFaces jsf.js Modular Includes

As of MyFaces 2.1.4 a modular include system will be added. Simply by adding following parameter to your web.xml you will be able to determine what will be included


With the parameter

org.apache.myfaces.JSF_JS_MODE

and the allowed values of

• normal
• modern
• minimal-modern

you will be able to adjust which version of jsf.js is included. If you need extra functionality you can include the subparts excluded from your version as separate Javascript resources via normal jsf mechanisms.

Following image shows the version of each file and the extra functionality:

Modular include parts

As you you can see you can stack and mix all the modules you need by simply choosing a base jsf.js and then you are able to stack the extra functionality needed by adding a separate include.

That way you have the choice between filesize, number of includes and features according to your needs.













Example on how to Enable the Modular Includes with Additional Features

The following example will include the minimal-modern jsf.js and will stack all the extra functionality on top of it.

web.xml



in your page template



As you can see all you need to to is to reference the correct js file additionally which is hosted under the resource module myfaces and you are ready to go.