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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921668/images/6426896/pasted-from-clipboard.png)
🚀 Typescript
Modern JS Development
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921668/images/7033168/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921668/images/7033736/pasted-from-clipboard.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921668/images/7033874/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921668/images/7033895/pasted-from-clipboard.png)
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
![](https://media0.giphy.com/media/l0JMrPWRQkTeg3jjO/giphy.gif)
@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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/908946/images/5147617/graphql.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/908946/images/5147628/websocket-1.png)
Websockets
![](https://s3.amazonaws.com/media-p.slid.es/uploads/908946/images/5147637/microservices.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/908946/images/5147658/logo-swagger-male.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/908946/images/5147669/mongoose-logo.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/603430/images/5237425/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/908946/images/5147651/P_JWT.jpeg)
Database
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921668/images/7033981/pasted-from-clipboard.png)
- 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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921668/images/7034020/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921668/images/7034021/pasted-from-clipboard.png)
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}`;
![](https://s3.amazonaws.com/media-p.slid.es/uploads/921668/images/7034179/pasted-from-clipboard.png)
Extensible dev tools for Monorepos
Demo ✨
Reference
Thank you !!!
Typescript - Fullstack
By Sivamuthu Kumar
Typescript - Fullstack
- 910