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. Required fields are marked *

Related Blog Posts
Feature Flags in Terraform
Feature flagging any code can be useful to developers but many don’t know how to or even that you can do it in Terraform. Some benefits of Feature Flagging your code You can enable different […]
Infrastructure as Code – The Wrong Way
You are probably familiar with the term “infrastructure as code”. It’s a great concept, and it’s gaining steam in the industry. Unfortunately, just as we had a lot to learn about how to write clean […]
Snowflake CI/CD using Jenkins and Schemachange
CI/CD and Management of Data Warehouses can be a serious challenge. In this blog you will learn how to setup CI/CD for Snowflake using Schemachange, Github, and Jenkins. For access to the code check out […]
How to get your pull requests approved more quickly
TL;DR The fewer reviews necessary, the quicker your PR gets approved. Code reviews serve an essential function on any software codebase. Done right, they help ensure correctness, reliability, and maintainability of code. On many teams, […]