Subscribe / Unsubscribe Enewsletters | Login | Register

Pencil Banner

Jump into Java microframeworks, Part 3: Spark

Matthew Tyson | Jan. 8, 2016
An extra lightweight, flexible, and scalable architecture for single-page web apps.

Listing 19 includes the JavaScript resources that we mapped in Listing 14, and uses the methods from our JavaScript main object, App, which we defined in Listing 13. When the page first loads, our jQuery onload handler will display all Persons in the database. The form fields will be sent in a JSON body to the addPerson service that we tested with Postman. Upon returning, the form will automatically refresh the person list.

Spark's RESTful architecture

Our example application is based on a single-page, REST-style architecture, resulting in a lightweight, versatile web application without page loads. We've essentially used Spark as a request-processing microengine, attaching whatever tooling we required to support features like persistence and JavaScript.

While Spark doesn't provide many features out of the box, it also doesn't present any roadblocks to integrating them from other open source projects. Using Spark, we can easily define a multitier architecture, then scale it as needed. Thus Spark achieves its core mission, of defining and handling request endpoints, with a minimum of overhead, leaving us free to build on top of it whatever we want.

Authenticate and authorize

We've covered a lot of ground, and have the basics in place for a Person application with persistence and a functional UI. In addition to Spark's core infrastructure, we've used DBUtils, Boon, and jQuery to wire together the application's data layer and UI.

For our last experiment with Spark, let's add login support to the Person app. This will let a user login, save their session info, and check for authorization; all important steps toward a more secure app.

Listing 20 shows the initial updates to the template.html file. The new loginForm will allow the user to enter his or her username and password and use buttons to login or logout. We'll use jQuery to submit the login data via Ajax.

Listing 20. Adding a loginForm to template.html



<form id="loginForm">

		User Name: <input type="text" name="username" id="username"></input><br></br>

		Password: <input type="text" name="password" id="password"></input><br></br>

		<button id="loginButton">Login</button>

		<button id="logoutButton">Logout</button>

	</form>



We add the login functionality to app.js similarly to how we added the addPerson feature in Listing 13. We'll just use a serializeObject to pull the fields from the loginForm and submit them as JSON.

Listing 21 shows the App object methods that have been updated from Listing 13. Note that in the startup method, we add a click-event handler for the login button and introduce the login() method to handle the click.

Listing 21. Adding login to app.js



startup: function(){

			$("#addPersonButton").click(App.addPerson);

			$("#loginButton").click(App.login);

			App.loadPeople();

		}

		//...

		login: function(){

			var login = $('#loginForm').serializeObject();

			$.ajax({

		        url: '/login',

		        type: 'POST',

		        contentType: 'application/json',

		        data: JSON.stringify(login),

		        success: function(data){

		        	alert("You are now logged in: " + data)

		        },

		        error: function(x){

		        	console.error("encountered a problem: ", x);

		        }

		    });

			return false;

		}



 

Previous Page  1  2  3  4  5  6  7  8  Next Page 

Sign up for CIO Asia eNewsletters.