logo Typetron Beta

Using Typetron with your favorite frontend tools

Typetron provides tools for using backend code in your frontend applications: Models and Forms. This way you will be able to reuse some business logic without writing it twice: once on the backend side and once on the frontend side. Check out these tutorials on how to get started with Typetron and your favorite framework/library:

Angular

angular

Let's start

Vue

vuejs

In progress

React

reactjs

In progress

Example (with Angular)

Here is an example of a Form that is used on the backend side (with Typetron) and on the frontend side (with Angular). This form has some validation rules attached so its fields:

📁 LoginForm.ts

import { Field, Form, Rules } from '@Typetron/Forms'
import { Required } from '@Typetron/Validation'

export class LoginForm extends Form {

    @Field()
    @Rules(Required)
    username: string

    @Field()
    @Rules(Required)
    password: string
}

In the controller, when this form is used, Typetron will automatically validate the request. In case of invalid inputs, Typetron will throw some errors:

📁 AuthController.ts

import { Controller, Post } from '@Typetron/Router'
import { LoginForm } from 'App/Forms/LoginForm'
import { Inject } from '@Typetron/Container'
import { Auth } from '@Typetron/Framework/Auth'

@Controller()
export class AuthController {

    @Inject()
    auth: Auth

    @Post('login')
    async login(form: LoginForm) {
        return {
            token: await this.auth.login(form.username, form.password),
        }
    }
}

This form can also be used on the frontend side (in this case with Angular). Check the “before” section where you have to build the form manually using the Angular FormBuilder, and the “after” section where the form is built using Typetron frontend utilities. It will create the expected form, and it will also add the needed validations:

📁 login.component.ts (Before - using Angular Form Builder)

import { Component } from '@angular/core'
import { FormBuilder, Validators } from '@angular/forms'
import { AuthService } from '../../services/auth.service'
import { LoginForm } from '@Data/Forms/LoginForm'

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss']
})
export class LoginComponent {

    form = this.fb.group({
        username: ['', [Validators.required]],
        password: ['', [Validators.required]],
    })

    constructor(
        private fb: FormBuilder,
        private authService: AuthService
    ) {}

    async login(): Promise<void> {
        await this.authService.login(this.form.value)
    }
}

📁 login.component.ts (After - Using Typetron Form Builder)

import { Component } from '@angular/core'
import { FormBuilder } from '@Typetron/angular'
import { AuthService } from '../../services/auth.service'
import { LoginForm } from '@Data/Forms/LoginForm'

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss']
})
export class LoginComponent {

    form = FormBuilder.build(LoginForm)
    
    constructor(
        private authService: AuthService
    ) {}

    async login(): Promise<void> {
        await this.authService.login(this.form.value)
    }
}
Typetron