Typescript

One coding language for any stack !!!

Agenda

Demo 

🚀 Typescript - Modern JS development

Stacks ⚡️ by Typescript

Fullstack Development 🎉

   Hello👋

I'm Siva

Architect @ Computer Enterprises Inc

#Mobile #IoT #Cloud

Orlando

@ksivamuthu

🚀 Typescript

Modern JS Development

What's wrong with Javascript in the application that scales?

We know less about our data

const { title, members } = this.request.body
  • What title means?
  • What members means?

🤔

interface Team {
    title: string;
    members: Person[]
}

const team: Team = this.request.body;
console.log(team.title);

😊

Typescript Benefits

  • Optional static typing
  • Type Inference - Benefits of the types, without actually using them
  • Access to ES6 & ES7 features
  • Finally compiled down to Javascript.
  • Great tooling support with Intellisense.
  • Community - Microsoft Open source, Google

Stacks ⚡️ by Typescript

What exactly is the

full-stack development?

  • Frontend

  • Backend

  • Database

It's a decade ago..

Now..

  • Frontend

  • Backend

  • Database

  • Cloud Infrastructure

  • Design

  • Development Tools

Can JS/TS do

Full-stack development?

Yes.

Is JS/TS right fit for

Full-stack development?

Architectural

Trade-offs

Pros

  • Common language, better team efficiency with fewer resources
  • Extensive Code reuse
  • High performance and speed
  • Huge talent pool
  • Extensive knowledge base
  • Opensource toolset with community support
 
 

Cons

  • Insufficiency with computation-heavy backend.
  • Relatively young technologies/tools.
  • Missing deep view on the particular stack.
  • The bottleneck of tools in any stack
 
 

Server Side

nestjs

A progressive Node.js framework for building efficient, reliable and scalable server-side applications.​

Reusability

uncoupled code blocks

Middlewares

Guards

Pipes

Interceptors

Filter Exception

@Controller()
@ApiUseTags('sessions')
@UseGuards(AuthGuard)
@UseInterceptors(LoggingInterceptor)
export class SessionController {
    constructor(private readonly sessionService: SessionService) {}

    @Get()
    public async findAll() {
        return this.sessionService.findAll();
    }

    @Get(':id')
    public async findById(@Param('id', new ParseIntPipe())id: number) {
        return this.sessionService.findById(id);
    }

    @Post()
    @UseGuards(RoleGuard)
    public async create(@Body() sessionDto: SessionDTO) {
        return this.sessionService.create(sessionDto);
    }
}

Dependency Injection

Use guards / interceptors at this route

Use guards / interceptors at all routes

Pipes

Decorators

Integration

Websockets

Database

  • Written in Typescript
  • Influenced by Hibernate and Entity Framework
  • Easy to learn
  • Easy to maintain
  • Typescript classes allow the extension for custom logic
  • Well documented
  • Built-in Cache (with a catch)
  • Amazing knex like query builder

Why TypeORM?

Cloud Infrastructure

const appService = new azure.appservice.AppService(customImage, {
    resourceGroupName: resourceGroup.name,
    appServicePlanId: appServicePlan.id,
    appSettings: {
      WEBSITES_ENABLE_APP_SERVICE_STORAGE: "false",
      DOCKER_REGISTRY_SERVER_URL: pulumi.interpolate`https://${registry.loginServer}`,
      DOCKER_REGISTRY_SERVER_USERNAME: registry.adminUsername,
      DOCKER_REGISTRY_SERVER_PASSWORD: registry.adminPassword,
      // Our custom image exposes port 9000.
      WEBSITES_PORT: "9000",
    },
    siteConfig: {
        alwaysOn: true,
        linuxFxVersion: pulumi.interpolate`DOCKER|${myImage.imageName}`,
    },
    httpsOnly: true,
});

export const appServiceEndpoint = pulumi.interpolate`https://${appService.defaultSiteHostname}`;

Extensible dev tools for Monorepos

Demo ✨

Reference

Thank you !!!

Typescript - Fullstack

By Sivamuthu Kumar

Typescript - Fullstack

  • 114
Loading comments...

More from Sivamuthu Kumar