RequireJS and Backbone on a Single Page Application - Part 2

Published on 2015-11-04

A Backbone app has three main pieces: routes, models/collections and views. In this part of the two posts I'm going to explain how to setup and use Backbone in a single page application while separating your code in a way that it will be simple to maintain and add new features.

The first part of this tutorial lives here. The code for this post lives in my Blog's GitHub repository under require-js-backbone.

RequireJS and Backbone on a Single Page Application - Part 1

Published on 2015-11-04

Building single page applications isn't easy. As the app grows and gets more complex your Javascript code gets harder to maintain and duplicate logic start spreading all over the place. Breaking your code in well defined and self contained small modules help to keep the complexity low and organize the logic in an encapsulated and predictable way. But to do that it means that you now need some kind of dependency management system in place.

RequireJS helps you with that. With it, creating new modules is as easy as calling a function and declaring dependency is as easy as passing an argument to that function.

But managing dependencies is just part of the problem. You still have a lot of code to make requests to your REST APIs, handle the rendering of the content on the page and user interactions.

Enter Backbone, a Javascript framework that has many of those basic features every app needs. It also helps with the task of organizing your code and keeping clear separation of concerns.

In these two blog posts (the one you're reading and this) I'm going to show a simple example of how to configure and use these two frameworks together in a way that makes it really easy to build well separated and reusable components. On the first post I'll talk about how RequireJS works and how to configure and use it. On the second post I'm going to show how to add backbone to the mix and how to organize the code in a way that it's easy to maintain and extend.

The code for this post lives in my Blog's GitHub repository under require-js-backbone.

Testing a web application with Gretty, Cucumber and Selenium

Published on 2014-09-03

The code used in this post is a complete web application built with Spring WebMVC, Spring Data and Spring Security. It contains a lot more than what is explained here and I hope to come back to it in later posts. The code can be found in my Github repository.

For this post I'll be focusing on how you can test a web application using Cucumber and Selenium. I'll be using the Gretty plugin to start a web container during the build. I've picked this plugin because of the built-in setup for integration tests.

Building with Gradle

Published on 2014-05-18

Gradle is a build system that was build from the lessons learned from Ant and Maven. Similarly with Ant, where you have a XML namespace to write build scripts, Gradle is a DSL on top of Groovy that helps you write build scripts. But it goes further with many plugins and conventions (like Maven) that make it possible to get a build up and running with just a few lines of Groovy.

A Gradle build starts with a build.gradle file. This file contains plugins that you apply to your build, dependencies that your project need to compile, package and run, repositories where your dependencies will be loaded from, plugin configurations and custom tasks. All those are written with a cleverly build model that makes your build scripts readable, maintainable and easy to extend.

In this post I'll cover the gradle build from the three sample projects that I worked on to compare the three mainstream Java build tools. The code for this post can be found in my github repository.

Building with Ant

Published on 2014-03-22

Ant has been around for a while now (first released in 2000) and it can be compared with a scripting language written in XML. XML tags are translated to Java objects and executed calling methods in the objects created. The following image illustrates the relationship between the XML and the Java objects:

Ant xml to java

A project built with Ant begins with a build.xml file where you describe all targets. A target is a set of tasks and can depend on other targets. When you run an Ant build, you tell it what target you want to execute. Ant then creates a target dependency tree for your project, calculates the least amount of targets necessary to get to the requested target and starts executing them from the target that has no dependencies. The build is considered finished when the requested target gets executed or some target failed.

In this post I'll explain the two things that I found not so well documented and lacking clear explanation on how to do it: dependency management and code coverage measurement with Jacoco. This was part of the project that I worked on to compare the three mainstream Java build tools. The code for this post can be found in my github repository.

Build tools for Java

Published on 2013-12-17

More than a year ago I wrote a post about how I started to use Maven to build my Java applications and how much I loved it! Things changed a lot since then and I, like many others, am moving my projects to Gradle. In this post - and a few more to come - I'll be talking about build tools for Java and make some comparisons and explain why I moved to Gradle.

This content started from a recent presentation that I gave at work about build tools. The idea was to make a comparison between the three most widespread build tools for Java: Ant, Maven and Gradle. I thought it would be cool to have a project - simple but with some complex dependencies - built using all three of them. With that it would be easy to compare, apples to apples, how each one works and what are the advantages and disadvantages of each one.

DAO, Repository and Service, digging deeper

Published on 2012-11-12

The first time I heard the term service layer I was intrigued by it because I always used a Data Access Object to access my data. I thought it was just a new way to refer to the same thing. Of course I was wrong. A couple of years later I started to use Spring Data and again I was confronted with the Repository a different name for the same thing, at least that was what I thought, and again, I was wrong.

I'm not the kind of person that settles down until I get a complete answer for the problem, I really hate when I don't have a precise and detailed answer. That's why I decided to take some time and research deeper and write down my findings for all of you that are thinking the same way and get lost every time you need to name your data access layer objects.

Some may say: How can you get confused about something that is clearly different? If you think that, then this post is not for you, unless you want to help me review my content (what I would appreciate). But if you're like me and have been writing small (10-15 model classes) web applications you're probably standing where I am: your data layer has some characteristics of all three patterns.

Simple web MVC with servlets and JSP

Published on 2012-08-05

A while ago a friend of mine that is starting with web development in Java asked me what is the best way to write a web application in Java if you can't understand a framework like Spring or JSF or if you just don't want to use them? Well, this project is a simple example on how to get a MVC working with a database using a singleton that will generate a data source for you.

As usual the code is in my github repository under simple-web-mvc.

OSGi Maven and Servlet

Published on 2012-07-31

I tried a few times before to start developing using OSGi but never had a chance to work with it in the real life so it's hard to get all the concepts to stick in my head. This post is my way to change that, meaning that I'm trying to learn OSGi deeper and start getting things done using this platform.

The first thing I wanted to do is to have a good experience with tooling and get Maven to work for me, not against me. This post is showing a simple example on how to configure Maven to generate an OSGi bundle and how to use Declarative Services and Apache Felix Http Whiteboard to quickly deploy a simple servlet.

The code for this post is in my git repository under the project osgi-maven-example.

Simple Caching with Spring

Published on 2012-07-22

This week an old friend contacted me because he was having memory problems in one of his applications. The problem was very simple: for each user logged in, all application menus and part of the list/combo values were being added to the user session (including some images). That was used to makes things faster, to avoid going to the database multiple times and loading the data all over again.

The problem with that approach is that each user will have a copy of the data in memory. And in this case, it's the same data, copied over and over again. After some time, if traffic increases, the JVM will run out of memory. And the situation gets worth when users don't click the logout button/link, meaning that the session will get stuck until the timeout period has finished.

To help him I wrote a simple example - that was extended in this post - to demonstrate one approach (there are certainly many others) to cache data in a Spring application. What this example will show is how you can use an extra bean to keep the data cached and up-to-date at the same time.

Source code for this example is in my github repository under the folder simple-cache.

This post is not about the new Cache Abstraction provided in Spring 3.1.

Older posts