Angular + Spring WebFlux + Spring Data Reactive Cassandra example | Full-Reactive Angular Http Client – Spring Boot RestApi Server

In this tutorial, we’re gonna build a full Reactive Application in which, Spring WebFlux, Spring Data Reactive Cassandra are used for backend, and Angular, RxJS, EventSource are on client side.

Related Posts:
SpringData Reactive Cassandra Repositories | SpringBoot
Introduction to RxJS – Extensions for JavaScript Reactive Streams
Angular 4 + Spring Boot + Cassandra CRUD example

I. Technologies

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite 3.9.0.RELEASE
– Spring Boot 2.0.0.RELEASE
– Angular 5
– RxJS 5.1.0
– Cassandra 3.9.0

II. Overview

1. Full Stack Architecture

angular-spring-webflux-spring-data-cassandra-reactive-architecture

2. Reactive Spring Boot Server

2.1 Dependency

2.2 Reactive Repository

We just need to create an interface that extends ReactiveCrudRepository to do CRUD operations for a specific type. This repository follows reactive paradigms and uses Project Reactor types (Flux, Mono) which are built on top of Reactive Streams.

2.3 Activate reactive Spring Data Cassandra

Support for reactive Spring Data is activated through an @EnableReactiveCassandraRepositories annotation:

2.4 Call Reactive Repository

We can forward the reactive parameters provided by Spring Web Reactive, pipe them into the repository, get back a Flux/Mono and then work with result in reactive way.

In the rest controller methods which are annotated by @RequestMapping, we have used some methods of autowired repository which are implemented interface ReactiveCrudRepository:

And findByAge method that we create in our interface ReactiveCustomerRepository:

Remember that we want to connect to backend from a client application deployed in a different port, so we must enable CORS using @CrossOrigin annotation.

3. Reactive Angular Client

3.1 Reactive Service

This service interacts with the backend using Server-Sent Events.

Whenever we receive an event through the EventSource object, onmessage() is invoked. That’s where we parse data and update item list.

Using RxJS Observable object, any Observer that subscribed to the Observable we created can receive events when the item list gets updated (when calling observer.next(...)).

We have to instantiate a NgZone and call zone.run(callback) to help Angular notify when change happens.

For more details about RxJS, please visit:
Introduction to RxJS – Extensions for JavaScript Reactive Streams
3.2 Reactive Component

This Component calls Service above and keep result inside an Observable object:

In HTML template, we add async pipe that subscribes to the Observable and update component whenever a new event comes:

III. Practice

0. Set up Cassandra

Open Cassandra CQL Shell:

– Create Cassandra keyspace with name javasampleapproach:

– Create customer table for javasampleapproach keyspace:

– Because we use repository finder method on age field, so we need to create an index on age column:

1. Reactive Spring Boot Server

1.1 Project Structure

angular-spring-webflux-spring-data-cassandra-reactive-server-structure

– Class Customer corresponds to document in customer collection.
ReactiveCustomerRepository is an interface extends ReactiveCrudRepository, will be autowired in CustomerController for implementing repository methods.
CustomerController is a REST Controller which has request mapping methods for RESTful requests such as: getAll, create, update, delete Customers.
– Dependencies for Spring Boot WebFlux and Spring Data Cassandra in pom.xml.

1.2 Dependency

1.3 Data Model

1.4 Reactive Repository

1.5 Enable reactive Spring Data Cassandra

1.6 REST Controller

To make the result live, we use delayElements(). It causes a delayed time between 2 events.

2. Reactive Angular Client

2.1 User Interface

angular-spring-webflux-spring-data-cassandra-reactive-client-ui

2.2 Project Structure

angular-spring-webflux-spring-data-cassandra-reactive-client-structure

In this example, we have:
– 4 components: customers-list, customer-details, create-customer, search-customers.
– 4 modules: FormsModule, HttpClientModule, AppRoutingModule.
customer.ts: class Customer (id, name, age, active).
customer.service.ts: Service for HttpClient methods.

2.3 AppModule

app.module.ts

2.4 Model

customer.ts

2.5 Service

customer.service.ts

2.6 Components
2.6.1 CustomerDetailsComponent

customer-details.component.ts

customer-details.component.html

2.6.2 CustomersListComponent

customers-list.component.ts

customers-list.component.html

2.6.3 CreateCustomerComponent

create-customer.component.ts

create-customer.component.html

2.6.4 SearchCustomersComponent

search-customers.component.ts

search-customers.component.html

2.7 AppRoutingModule

app-routing.module.ts

2.8 App Component

app.component.ts

app.component.html

3. Run & Check Result

Build and Run Spring Boot project with commandlines: mvn clean install and mvn spring-boot:run.
– Run the Angular App with command: npm start.

– Open browser with url http://localhost:4200/, add some Customers.
– Click on Customers tab, each Customer displays one after another with 1s delayed time.

angular-spring-webflux-spring-data-cassandra-reactive-client-result

– Click on Search tab, search ’27’, the result shows each Customer one after another with 1s delayed time.

angular-spring-webflux-spring-data-cassandra-reactive-client-result-search

IV. Source Code

SpringDataReactiveCassandra
ReactiveAngularCassandra

By grokonez | March 17, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*