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.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s