How to pass models from API to components

Question

What's the best way for transferring models between backend and frontend.

Is it better to clone the backend ones in frontend even if not all properties are used ?
Or use DTOs to transfer only necessary properties for each use-case ?

If there is a best practice, design-pattern or any other suggestion I'm interested to know.

For information my stack is Spring Boot and Angular 6.

score 1 · Answer 1 · answered Oct 28 '18 at 15:09

1

If there is no need to convert incoming data for frontend, you can use backend model, in java you can generate typescript models, from java models by using bundle: https://github.com/vojtechhabarta/typescript-generator

answered Oct 28 '18 at 15:09

Jake11

801
2
11
24

score 1 · Accepted Answer · answered Oct 28 '18 at 15:22

1

try to use swagger mate

https://dzone.com/articles/using-swagger-to-connect-a-backend-to-an-angular-f

hope this helps

answered Oct 28 '18 at 15:22

vikvincer

639
6
10

JBoothUA · Answer 3 · 2018-10-28T17:29:11.077

I strongly recommend DTOs, and we have been using DTOs with this Typewriter extension for Visual Studio to keep the .ts files in sync with the .cs files.

Maybe you could do something similar.

https://frhagn.github.io/Typewriter/

The Angular front end uses the .ts version and the C# backend uses the .cs version. You can edit the .tst (typescript template file) in order to pull off a lot of customization if you need any differences between your .ts and .cs version.

This is the best pattern I've came up with below, which allows us to nest Enums and other Dto classes:

${ 
    // Enable extension methods by adding using Typewriter.Extensions.*
    using Typewriter.Extensions.Types;
    string TypeWithNoArray(Type t) => t.Name.TrimEnd('[', ']');
}
/* DO NOT EDIT ANY .TS FILES WITH THIS COMMENT
    THESE .TS FILES ARE GENERATED BY A CORRESPONDING .CS FILE AND A .TST FILE
    BY USING THE TYPEWRITER EXTENSION:
    https://frhagn.github.io/Typewriter */
$Classes(*Dto*)[
$Properties(x => !x.Type.IsPrimitive || x.Type.IsEnum)[$Type[import { $TypeWithNoArray } from './$TypeWithNoArray';
]]
export class $Name {
    $Properties[public $name: $Type = $Type[$Default];
    ]$BaseClass[$Properties[public $name: $Type = $Type[$Default];]]
}
]
$Enums(*Dto*)[
export enum $Name {$Values[
    $name = $Value][,]
}
]

Is there a way to use this tool with Java please ? – Ghassen Oct 28 '18 at 18:40 — Ghassen, Oct 28 '18 at 18:40

How to pass models from API to components

3 Answers3