Vojtech Mašek vmasek

Putting struggles with APIs to the REST

A talk proposal for the ReactiveConf

In today's world where the GraphGL hype is on and a lot of developers are stuck with dust covered REST, I will present an easy and sustainable solution for making the classic REST API feel like you wish it has felt in TypeScript.

It starts by having the same data models at front-end and back-end, then continues with API client interface in form of service build on Angular HTTP client. Everything is typed and described in the way developer don't even need to study the API endpoints.

All you need to set it up is an up to date swagger file and Angular project.

How is your talk relevant to this audience?

FlowUp Software Grant and Corporate Contributor License Agreement

In order to clarify the intellectual property license granted with Contributions from any person or entity, FlowUp, s.r.o. ("FlowUp") must have a Contributor License Agreement (CLA) on file that has been signed by each Contributor, indicating agreement to the license terms below. This license is for your protection as a Contributor as well as the protection of FlowUp and its users; it does not change your rights to use your own Contributions for any other purpose.

This version of the Agreement allows an entity (the "Corporation") to submit Contributions to FlowUp, to authorize Contributions submitted by its designated employees to FlowUp, and to grant copyright and patent licenses thereto.

You accept and agree to the following terms and conditions for Your present and future Contributions submitted to FlowUp. Except for the license granted herein to FlowUp and recipients of software distributed by FlowUp, You reserve all right, title, and i

title

	/**
	* Specific i18n site routes prefixed by i18n variation
	*/
	const routes: Routes = [
	{path: WebsiteLanguage.English, loadChildren: './site/site.en.module#SiteEnModule'}, // lazy loading the English site module
	{path: WebsiteLanguage.Czech, loadChildren: './site/site.cs.module#SiteCsModule'}, // lazy loading the Czech site module

	{path: '**', redirectTo: WebsiteLanguage.English}, // redirecting to default route in case of any other prefix
	];

	export const en = {
	language: 'English',
	home: { // object containing multiple translations
	title: 'Home works!', // plain string translation
	desc: 'This is description',
	},

	// simple function using string literal and interpolation
	// see the cs.translation.ts for another example
	langsSupported: (n: number) => `This demo supports ${n} language${n === 1 ? '' : 's'}.`,

	@Component(
	selector: 'app-example',
	template: `<h2>{{lang.language}}</h2>`,
	)
	export class ExampleComponent {
	constructor(@Inject(TRANSLATION) public lang: Translation) {
	console.log('current language is', lang.language);
	}
	}

	/**
	* This interface represents context of the directive
	*/
	interface RangeContext {
	$implicit: number; // current item exposed as implicit value, enables declaring in template variable via let keyword
	index: number; // current index of the item
	first: boolean; // indicates if the item is first in the collection
	last: boolean; // indicates if the item is last in the collection
	}

	/**
	* This interface represents context of the directive.
	*
	* It defines two properties ($implicit and appLet) which enables same behavior with different syntax.
	* It is not required to have both, it is just a way to provide support for both syntax.
	*/
	interface LetContext<T> {
	/**
	* Current item exposed in implicit value variable.
	* This enables us to use the let syntax

	interface DummyContext {
	/* ... */
	}

	@Directive({
	selector: '[appDummy]'
	})
	export class DummyDirective {
	@Input()
	set appDummy(value: string) {


	@Injectable()
	export class ProductsService {

	private readonly stuff$ = new ReplaySubject<Stuff[]>();
	readonly stuff = this.stuff$.asObservable();

	constructor(private readonly fire: Fire) {
	this.fire.getTheStuff().subscribe(
	(stuff) => this.stuff$.next(stuff)