DEV Community: oppy_sb

Angular Beginner's guide - Passing data within an application

oppy_sb — Tue, 04 Apr 2023 11:57:09 +0000

Introduction

I started developing in Angular four years ago with my team. There are several concepts I wish I knew at the beginning. And this one is probably the main subject. I hope this can be helpful to anybody that would start working with angular.

What is it and why use Behaviour Subject

Behaviour subject is a component from the RxJx library. You can check the documentation here :
RxJs Behaviour Subject Documentation

A behaviour subject is basically an object that emits the current value to new subscribers.

So If you have a data structure, object or variable you want to share all the way through your application, this will be very useful.

Our Application example

So I created a new Angular project, and i added three components to create our main page.
It is a very simple application. So our page will have a header with a save button, a metadata part with an input text and a content part with a textarea. Of course this could be way more complex but the goal here is to show the principle of the behaviour subject.

What we would like to do is to disable the save button in the header when the metadata field and the content field are not filled.
All the source code can be found at this repository :
Source code in GitHub

Scafolding the components

For our page, we create a main component create-article, and inside this component we create our three components : header, metadata and content.

I created a common folder to put in the services and models and everything that could be common or shared between the different components.
We put a model Article and a service for the state of the article.

The Article and Article state

Our article interface, with the data from the metadata and content.

export interface Article {  

    /**  
     * the medata Infos     
     */    
     metadata?: string;  

    /**  
     * content field     
     */    
     content?: string;  

}

And our article state class will look like this :

import { Injectable } from '@angular/core';  
import { BehaviorSubject } from "rxjs";  
import { Article } from "../model/Article";  

@Injectable({  
    providedIn: 'root'  
})  
export class ArticleStateService {  

    public readonly selectedArticleState$ = new BehaviorSubject<Article>([] as Article);  
    private selectedArticleState: Article = {} as Article;  

    public constructor() {  
    }  

    /**  
     * set the current article     
     * @param value  
     */  
    public setSelectedArticleState(value: Article): void {  
        this.selectedArticleState = value;  
        this.selectedArticleState$.next(this.selectedArticleState);  
    }  

    /**  
     * Get the current article    
     */    
     public getSelectedArticleState(): Article {  
        return <Article>this.selectedArticleState;  
    }  
}

By convention, we suffix the behaviour Subject with a $. This behaviour subject is used to send the data to its subscribers. We use the selectedArticleState for storing the current Article value inside the class.
We also have a setter and a getter.

Let use our article state

So in the main component create-article, in the create-article-component.html, we use our 3 sub-components :

<app-header></app-header>  
<app-metadata></app-metadata>  
<app-content></app-content>

Our header component

import {Component, OnInit} from '@angular/core';  
import {ArticleStateService} from "../../common/service/article-state.service";  
import {Article} from "../../common/model/Article";  

@Component({  
    selector: 'app-header',  
    templateUrl: './header.component.html',  
    styleUrls: ['./header.component.scss']  
})  
export class HeaderComponent implements OnInit {  
    public disabled: boolean;  

    public constructor(public readonly articleStateService: ArticleStateService) {  
    }  

    public ngOnInit(): void {  
        this.disabled = true;  
        this.articleStateService.selectedArticleState$.subscribe((article: Article) => {  
            if (article.content && article.metadata) {  
                this.disabled = !(article.content.length > 0 && article.metadata.length > 0);  
            } else {  
                this.disabled = true;  
            }  
        });  
    }  
}

When the component is initialized, we subscribe to the behaviour subject, so anytime the article change, we will get here the current article.
For our application, we can set the disabled variable to the right value, depending on the content and the metadata values.

The setting of the article state

For example, in the metadata component we create a formGroup for the metadata field and when the value changes we set the current article from the state with its value.

import {Component, OnInit} from '@angular/core';  
import {FormControl, FormGroup, Validators} from "@angular/forms";  
import {Article} from "../../common/model/Article";  
import {ArticleStateService} from "../../common/service/article-state.service";  

@Component({  
    selector: 'app-metadata',  
    templateUrl: './metadata.component.html',  
    styleUrls: ['./metadata.component.scss']  
})  
export class MetadataComponent implements OnInit {  
    public metadataForm: FormGroup;  

    constructor(public articleStateService: ArticleStateService) {  
        // We create a formGroup for the metadata field
        this.metadataForm = new FormGroup({  
            metadata: new FormControl(  
                '', [Validators.required])  
        });  
    }  

    public ngOnInit(): void {  
        this.metadataForm.valueChanges.subscribe(formGroup => {  
            // We get the current article with the article state service
            const article: Article = this.articleStateService.getSelectedArticleState();  
            // We set the metadata in the current article to the formGroup metadata value
            article.metadata = formGroup.metadata;  
            // We set it back in the state service as the current article
            this.articleStateService.setSelectedArticleState(article);  
        });  

    }  
}

The end

I hope this post can be useful to anybody, beginner or not in Angular. You can find the unit tests for the components and service in the github repository.
Please let me know what you think.
Do you use the behaviour subjects that way in your applications?
Do you have other ways of doing it ?

Introduction to GraphQL and implementation in Java

oppy_sb — Fri, 24 Mar 2023 10:48:58 +0000

Introduction

GraphQL is an open-source data query language and data manipulation language for Apis, and a query runtime engine.

GraphQL started GraphQL development in 2012 and released it in 2015 as an open source project.

GraphQL is a specification for communicating with a server. Communication is done by sending "Operations" requesting data or requesting an action to be done.

There are 3 types of Operations :

query retrieves data
mutation changes and retrieves data
subscription ask the server to send data when a certain event occurs

Why you should use it ?

It depends on your use case, but usually, GraphQL has features that stands out such as :

aggregate data from multiples interface components
create a natural data representation (a graph)
it reduces the need for update using its deprecation system
ensure data is righly typed
you have access to its ecosystem (code generation, linting, analitycs ...)

Does it replace Rest ? :

Schema from the official documentation :

It illustrate how GraphQL can limit API calls versus what does REST.
In the first case , with REST you need 3 calls. With GraphQL, you can do it with only one call.
It mean that the API user decide which data needs to be retrieved and in which form.

No. Not necessarilly. Both can manipulate APIs and serve a similar goal from a fonctional perspective.
GraphQL is often viewed as an alternative to Rest, but it is not a definitive replacement.

GraphQL an REST can coexist in the same stack. For example, it is possible to put REST APIs behind an abstraction GraphQL server.

Examples

Adding dependencies :

Multiples GraphQL implementations exist for most backend server languages. Here, for my example, i chose the DGS implementation from Netflix (thank you Netflix).

https://netflix.github.io/dgs

So i add the gradle dependencies :

Schema :

You will need first to create your schema configuration file :

Implementation :

We will create a "DgsComponent" as follows. This will allows the API to access the data (here a List od show, but we could access a database or any datasource), and filter the data as needed.

The class representing the data to retrieve :

Calling APIs with Insomnia :

**GUI :

A GUI is provided if you need it, it is very handy.

Adding Actors

We change the schema configuration to add our Actors :

In the DataFetcher

You should also check this :

GraphQL other features

I just showcase the basic case of retrieving data, but you can do so much more with GraphQL such as :

Mutation
aliases
fragments
variables
and so on ....

You can check the official doc here :
https://graphql.org/learn/queries/

And an awesome article about the GraphQL Semantic here :

https://blog.graphql.guide/the-graphql-spec-simplified-93005ce0671f

Security

A well put article about GraphQL security
https://dimitr.im/graphql-spring-security

Generate code

You can generate code from schema which is always good to take :
https://netflix.github.io/dgs/generating-code-from-schema/

Inconvenience of GraphQL

Developers learning curve
Can complexify back end developer work on the server side
Hosting costs can be higher, depending on the chosen strategy
Caching is more complexe than with REST

Performance can be worst than with REST if you compare one on one Request. But the bet is that you will do less call to the API and in the end it is still worth it. But it depends on the use cases.