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
An Exploration in Rust: Musings From a Java/C++ Developer
Why Rust? It’s fast (runtime performance) It’s small (binary size) It’s safe (no memory leaks) It’s modern (build system, language features, etc) When Is It Worth It? Embedded systems (where it is implied that interpreted […]
Getting Started with CSS Container Queries
For as long as I’ve been working full-time on the front-end, I’ve heard about the promise of container queries and their potential to solve the majority of our responsive web design needs. And, for as […]
Simple improvements to making decisions in teams
Software development teams need to make a lot of decisions. Functional requirements, non-functional requirements, user experience, API contracts, tech stack, architecture, database schemas, cloud providers, deployment strategy, test strategy, security, and the list goes on. […]
JavaScript Bundle Optimization – Polyfills
If you are lucky enough to only support a small subset of browsers (for example, you are targeting a controlled set of users), feel free to move along. However, if your website is open to […]