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.

About the Author

Object Partners profile.
Leave a Reply

Your email address will not be published.

Related Blog Posts
Building Better Data Visualization Experiences: Part 1 of 2
Through direct experience with data scientists, business analysts, lab technicians, as well as other UX professionals, I have found that we need a better understanding of the people who will be using our data visualization products in order to build them. Creating a product utilizing data with the goal of providing insight is fundamentally different from a typical user-centric web experience, although traditional UX process methods can help.
Kafka Schema Evolution With Java Spring Boot and Protobuf
In this blog I will be demonstrating Kafka schema evolution with Java, Spring Boot and Protobuf.  This app is for tutorial purposes, so there will be instances where a refactor could happen. I tried to […]
Redis Bitmaps: Storing state in small places
Redis is a popular open source in-memory data store that supports all kinds of abstract data structures. In this post and in an accompanying example Java project, I am going to explore two great use […]
Let’s build a WordPress & Kernel updated AMI with Packer
First, let’s start with What is an AMI? An Amazon Machine Image (AMI) is a master image for the creation of virtual servers in an AWS environment. The machine images are like templates that are configured with […]