Skip to main content

Enabling performance feature in jMaki

Posted by carlavmott on October 22, 2008 at 8:48 PM PDT

Last spring we added performance enhancements to jMaki based on well known guidelines for improving page load times. The guidelines are from Yahoo and we have automated several of them. Now developers can combine JavaScript code and place it at the end of the page, place combine CSS code and place it at the beginning of the page, use minified resources and set the max age header by simply setting some properties in their web app. For more information about the performance enhancements and what is happening under the hood, see the jMaki performance page. This blog details how to take advantage of those performance enhancements in your application.

I used Netbeans to create the web application but you can use Eclispe or a plain editor. In this example, I have the jMaki menu, tag cloud and blocklist widgets. You can use any jMaki wrapped widgets or custom jMaki widgets that you have created to take advantage of this feature. The page looks like:

<%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
        <link rel="stylesheet" href="jmaki-2column-footer.css" type="text/css"></link>
        <title>Page Title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <a:page>
    </head>
    <body>
        <div id="border">
           
            <div id="header">
                <div id="banner">Application Name</div>
               
                <div id="subheader">
                   
                    <div>                     
<a:widget name="jmaki.menu"
      value="{menu : [
       {label: 'Links',
            menu: [
                { label : 'Sun.com',
                  href : 'http://www.sun.com'},
                { label : 'jMaki.com',
                  href : 'http://www.jmaki.com'}
                ]
       },
       {label: 'Actions',
            menu: [
                { label : 'Select',
                  action :{topic: '/foo/select',
                         message: { targetId : 'bar'}}
                },
                { label :'Set Content',
                  action :{topic: '/foo/setContent',
                         message: { value : 'test.jsp'}}
                }
                ]}
                ]
       }" />


                    </div>
                   
                </div> <!-- sub-header -->
            </div> <!-- header -->

            <div id="main">
                <div id="rightColumn" style="height:400px">

<a:widget name="jmaki.blockList" value="[
        {title : 'jMaki Project Home', link : 'https://ajax.dev.java.net', description : 'Where to go for the latest jMaki.' },
        {title : 'jMaki Widgets Home', link : 'https://widgets.dev.java.net', description : 'The source for the latest jMaki widgets.' },
        {title : 'jMaki-Charting Home', link : 'https://jmaki-charting.dev.java.net', description : 'Enables complex charts rendered on the client in any modern browser.' }
    ]"  />


                </div> <!-- end leftColumn -->

                <div id="leftColumn" style="height:400px">
<a:widget name="jmaki.tagcloud" value="{
  items : [
      { label : 'jMaki', weight : 70},
      { label : 'Web2.0', weight : 150},
      { label : 'JSON', weight : 80},
      { label : 'JavaScript', weight : 145},
      { label : 'Java', weight : 100},
      { label : 'RSS', weight : 85},
      { label : 'Autocomplete', weight : 75},
      { label : 'Sun', weight : 65, href : 'http://www.sun.com'},
      { label : 'jMaki', weight : 150},
      { label : 'Web3.0', weight : 70},
      { label : 'Phobos', weight : 105},
      { label : 'Glassfish', weight : 120},
      { label : 'RSS2.0', weight : 75},
      { label : 'Web1.0', weight : 50},
      { label : 'JavaEE', weight : 75},
      { label : 'Jersey', weight : 115},
      { label : 'Roller', weight : 150},
      { label : 'CSS', weight : 105},
      { label : 'DHTML', weight : 65},
      { label : 'Netbeans', weight : 115, href : 'http://www.netbeans.com'}
  ]
}" />

                </div> <!-- leftColumn -->

            </div> <!-- main -->
            <div id="footer">Footer</div>
        </div> <!-- border -->
        </a:page>
    </body>
</html>

This is a typical jMaki page expect I added 2 new tags. The tag at the beginning tells the jMaki performance code to drop the CSS code and should be in the header. The closing tag tells jMaki where to drop the combined JavaScript code and should be the last line in the body typically.

One other change required is to the web.xml file. You will need to set some properties to true and to configure the servlet that does the work. The following needs to be added to the web.xml file.

   <context-param>
        <param-name>jmaki-combinescripts</param-name>
        <param-value>true</param-value>
    </context-param>
    <context-param>
        <param-name>jmaki-combinestyles</param-name>
        <param-value>true</param-value>
    </context-param>

    <servlet>
        <servlet-name>Combined Resource Servlet</servlet-name>
        <servlet-class>jmaki.runtime.CombinedResourceServlet</servlet-class>
        <load-on-startup>2</load-on-startup>
        </servlet>
       
    <servlet-mapping>
        <servlet-name>Combined Resource Servlet</servlet-name>
        <url-pattern>/cr</url-pattern>
    </servlet-mapping>

That's it. Look at the page source of the deployed application and you will see that things have been moved around. One application reported a 30% improvement in page load time by simply setting these properties.

Try it out and let us know what improvements you see.

Related Topics >>

Comments

Thank you for providing this blog carla. This feature is one of the hidden gems in jMaki 1.8.x that really helps Ajax apps.