Embrace JavaScript Frameworks

Sep 12, 2012

Embrace JavaScript Frameworks

When developing web applications, it’s very common for a confusing blend of JavaScript and framework code to make its way into the code. This can result in difficulty maintaining or debugging the application, especially when the application is more sophisticated or the scripts aren’t contained in-line.

Consider this simple HTML page, that displays a link which will insert the time into an initially empty div.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
<title>Example</title>
<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function setTime(){
 $("#time").html(new Date().toLocaleTimeString());
}
</script>
</head>
<body> 
<div> 
 <a href="javascript:setTime();">Click</a> 
</div> 
<div id="time"></div>
</body>
</html>

The anchor tag uses a javascript: notation to do its work, while the called function uses a JavaScript framework (in this case jQuery) to do its work. This may have been the result of an iterative development effort, perhaps where the framework was added after the page already worked, with the jQuery selector replacing other JavaScript syntax.

Consider these few little changes to the same HTML.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
<title>Example</title>
<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function setTime(){
 $("#time").html(new Date().toLocaleTimeString());
}
$(function() {
 $("#clickToSetTime").click(function(event){
  event.preventDefault();
  setTime();
 });
});
</script>
</head>
<body> 
<div> 
 <a href="setTime" id="clickToSetTime">Click</a> 
</div> 
<div id="time"></div>
</body>
</html>

Here we’ve removed the javascript: notation from the anchor tag, and given it an identifier. We also added a little bit of jQuery to bind a click event to the anchor. When the anchor is clicked, the jQuery event will fire, and the same function is called. We may have wanted to move the function’s work into our new method, but that nuance isn’t important here; it could be that the function is used elsewhere, and we wouldn’t want to break that. Also, the jQuery function inhibits the anchor from performing its action, so we won’t result in changing our page content and then navigating away to follow the anchor’s link.

If we go one step further, we can change the anchor to call an action within our application. Presumably that action would render the time for us, and return the proper complete HTML.

<a href="setTime.jsp" id="clickToSetTime">Click</a>

This gives us an additional benefit of having a functioning web application if the user has a browser without JavaScript enabled (or one without JavaScript support). In this case, if JavaScript is unavailable or jQuery isn’t loaded, the event isn’t added to our anchor, so the anchor’s original action would occur. In our enhanced example, this would call a JSP in our application.

This, of course, requires us to have other resources in our application. This can also be accomplished by making our simple page “smarter” so it will have this dual functionality. Consider this final change to our original page (which now must be a JSP instead of possibly a static HTML page):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
<title>Example</title>
<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function setTime(){
 $("#time").html(new Date().toLocaleTimeString());
}
$(function() {
 $("#clickToSetTime").click(function(event){
  event.preventDefault();
  setTime();
 });
});
</script>
</head>
<body> 
<div> 
 <a href="setTime.jsp" id="clickToSetTime">Click</a> 
</div> 
<div id="time"> 
 <%= new java.text.SimpleDateFormat("HH:mm:ss").format(new java.util.Date()) %>
</div>
</body>
</html>

Savvy readers will note that this changes from our original example by injecting a time into our application on the first call, which doesn’t match our original noted intent. This argument is outside of the scope of this short discussion. There are many methods that can be used to determine if the page is being requested because of the click of the anchor.

Embrace JavaScript Frameworks

About the Author

Object Partners

Leave a Reply Cancel reply