3 simple optimisations for AngularJS + Java architectures

base-arch

Nowadays, web app architectures are including an AngularJS layer for user interface and a Spring Boot for REST services. As in the popular JHipster, which is selecting this kind of architecture.

In this post, taking above image architecture as reference, a performance optimization based in 3 simple actions is analysed.

These tests have been performed on a custom lab configured in my own developing laptop by using Docker Compose.

We are starting with a findAll method which is returning all the rows stored on a big database table.

  • Time: 47,47 seconds
  • Size: 21,6 MB

1. Adding database indexes

It happens that JPA abstraction hides that real Java objects are performing SQL sentences on a real database. And this database always need help to improve response times.

Using indexes in JPA annotations

@Entity
@Table(name = "element")
public class ElementEntity {

	@ManyToOne(optional = false)
	@JoinColumn(name = "category", foreignKey = @ForeignKey(name = "FK_CATEGORY_ELEMENT"))
    @Indexed
	private CategoryEntity category;

}

Using indexes in database

CREATE INDEX element_category ON ELEMENT(CATEGORY);

After including indexes, we can see how time is reduced.

  • Time: 40,88 seconds
  • Size: 21,6 MB

2. Using cache in service layer

Many web apps services are accessed mainly in read mode. For these scenarios, using Spring Cache with a third party product like Hazelcast provides faster results, as database layer is not used while cache is active.

Using Spring Cache

@Service
public class ElementServiceImpl {
	
    @Cacheable("elementService.findAll")
    @Transactional
    public List<ElementDto> findAll() {
    }

    @CacheEvict(value = { "elementService.findAll" }, allEntries = true)
    @Transactional
    public void delete(Long id) {
    }

    @CacheEvict(value = { "elementService.findAll" }, allEntries = true)
    @Transactional
    public ElementEntity save(ElementDto elementUpdated) {
    }

}

After this second optimization, it can be seen that time is also lower than before.

  • Time: 13,84 seconds
  • Size: 21,6 MB

3. Compressing JSON responses

Anyway, we can do it better. This kind of architectures are sending big JSON data objects to AngularJS layer, as web interfaces are complex and they need to provide different options to user. In our sample, 21,6 MB are sent to client.

Including an Apache HTTPd directive, we can compress JSON data before sending it.

Declaring compression for JSON responses

AddOutputFilterByType DEFLATE application/json
DeflateCompressionLevel 7
DeflateMemLevel 8
DeflateWindowSize 10

As it can be seen, time is now lower again.

  • Time: 6,49 seconds
  • Size: 4,5 MB

Final words

In our tests, we have optimized a REST service also in time as in network bandwidth.

  • From 47,47 seconds to 6,49 seconds
  • From 21,6 MB to 4,5 MB

We have used just only three simple techniques:

  • Indexing database and JPA layer
  • Caching service layer
  • Compressing web layer

Any other optimization techniques can be used, but don’t forget to use ever the simple ones.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s