DEV Community: Typetron

Typetron now has WebSockets

Ionel Cristian Lupu — Fri, 03 Dec 2021 20:16:52 +0000

Intro

Typetron aims to have one of the easiest and most intuitive developer experiences in a framework. That's why all of the Typetron's features merge seamlessly between each other offering your app a sense of belonging when you combine your business logic with the framework.

What's new

The last addition to the Typetron's toolbelt is the ability to create real-time, interactive applications using WebSockets in easy and simple way.

TLDR: Here is a repo with WebSockets examples using Typetron and different technologies: Angular, React, Vue or just a simple Webpack setup.

Configuring WebSockets

Typetron comes with the WebSocket server activated by default on port 8001. This setting is in the app/config.ts file:

import { AppConfig } from '@Typetron/Framework'
export default new AppConfig({
    // ...
    websocketsPort: 8001,
    // ...
})

If you want to remove the WebSocket feature from you app, just remove the port websocketsPort config line.

Once you start your Typetron app you will see a message in the command line saying that your WebSocket server started on that port:

Websocket server started on port 8001

Creating WebSockets events on the backend side

Now, you can start receiving and sending WebSocket messages from and to the server. All we have to do is to define what events our app will handle. You can add an event in any of your controllers by creating a method that has the @Event() decorator. Take a look at this example:

import { Controller, Event } from '@Typetron/Router'

@Controller()
export class MainController {

    @Event()
    welcome() {
        return 'Welcome to Websockets'
    }
}

Listening to WebSockets events - solution 1

Having this, we can now create a client that will send and receive WebSocket events. Typetron comes with a handy frontend package that will help you do just that. You can install it in your app (Angular, React, Vue, etc.) using this command:

$ npm install @typetron/websockets

After installing it, we can connect to our server and start sending and receiving events. Let's fire the welcome event and listen for a response back from the server:

import { Websocket } from '@typetron/websockets'

export const socket = new Websocket('ws://localhost:8001')

socket.on('welcome').subscribe(response => {
    console.log('Backend response', response)
})

socket.emit('welcome')

You should now see this message in the console:

Backend response Welcome to Websockets

Listening to WebSockets events - solution 2

If you don't want to use @typetron/websocket library in your frontend app, you can easily just connect to the WebSocket server using the built-in WebSocket API from Javascript but doing so, you will have to manually parse the Typetron WebSocket message on your frontend app. The format of the message is a simple JSON object that looks as follows:

// when sending a message
{
    "event": "event name",
    "message": { // optional
        "body": "content sent to the controllers",
        "parameters": ["param1","param1"] // controller method parameters (optional)
    }
}

// when receiving a message
{
    "event": "event name",
    "status": "OK" // or "Error",
    "message": "backend response" // optional
}

Having this in mind, let's connect to Typetron using the Javascript's built-in WebSocket API:

const socket = new WebSocket('ws://localhost:8001')

socket.onopen = () => {

    socket.onmessage = message => {
        const response = JSON.parse(message.data)
        console.log('Backend response', response.message )
    }

    socket.send(JSON.stringify({event: 'welcome'}))
}

Opening your frontend up should result in a console message similar to the one above:

Backend response Welcome to Websockets

Outro

And that's it. You can now build real-time apps using Typetron and WebSockets. Keep in mind that this feature is still in progress as many more functionalities will added.

Here is a repo with WebSockets examples using Typetron and different technologies: Angular, React, Vue or just a simple Webpack setup.

In the next articles in this "Typetron WebSockets" series we will build a "ToDo app" with Angular, React and Vue. Subscribe to the newsletter to be notified when we publish these articles.

Check the website typetron.org
Github repo
Let's talk on Discord
Typetron Twitter @Typetron_
My twitter @ionellupu_
Come and leave a question on Reddit
Join the Facebook group

Typetron has a CLI now

Ionel Cristian Lupu — Tue, 06 Apr 2021 21:13:37 +0000

A few months ago I released the Beta version of Typetron and since then I've made a few changes to it and added some new features. One of it is the CLI.

The CLI was created to make dev's life easier by giving them a set of tools to automate some parts of the development process.

Installation

Installing Typetron's CLI is easy enough, as you would already expect:

$ npm install -g typetron

This will create a global command called, well, typetron.

This command line tool has a few sub-commands that you can use. Here is a list of them:

The new command

$ typetron new MyProject

As you are already used to in CLIs, the new command creates a new Typetron project with a basic scaffolding and installs its dependecies.

The routes command

$ typetron routes

Tis command will print out all the routes in your Typetron project together with some information about them. It comes in handy when you have a lot of them in a big project.

The migrate, migrate:rollback and migrate:reset commads

$ typetron migrate
Migrating...
Migrating 'CreateUsersTable'
Migrated 'CreateUsersTable'

$ typetron migrate:rollback
Rolling back...
Rolling back the 'CreateUsersTable' migration.
Reverted 'CreateUsersTable' migration.

$ typetron migrate:reset
Resetting database...

These commands are used to manage your Typetron app migrations

Check the website typetron.org
Typetron Twitter @Typetron_
My twitter @ionellupu_
Come and leave a question on Reddit
Join the Facebook group
Let's talk on Slack

Typetron Beta is here: typetron.org

Ionel Cristian Lupu — Wed, 10 Feb 2021 15:29:17 +0000

Since my last post about Typetron there have been some crazy months but it is finally here.

Typetron BETA is here!

Typetron is a Node.js web framework used for creating backend services. I demonstrate this in two of the available tutorials:

How does it look like in code?

Controlers

import { Controller, Delete, Get, Put, Post } from '@Typetron/Router'
import { Article } from 'App/Entities/Article'
import { ArticleForm } from 'App/Forms/ArticleForm'

@Controller('articles')
export class ArticleController {
    @Get()
    all() {
        return Article.get()
    }

    @Post()
    add(form: ArticleForm) {
        return Article.create(form)
    }

    @Put(':Article')
    update(article: Article, form: ArticleForm) {
        return article.fill(form).save()
    }

    @Delete(':Article')
    async delete(article: Article) {
        await article.delete()
    }
}

Entities

import { Column, Entity, ID, HasMany, Relation } from '@Typetron/Database'
import { Comment } from 'App/Entities/Comment'

export class Article extends Entity {
    @Column()
    id: ID

    @Column()
    title: string

    @Column()
    content: string

    @Column()
    createdAt: Date

    @Column()
    updatedAt: Date

    @Relation(() => Comment, 'article')
    comments: HasMany<Comment>
}

If you don't know anything about Javascript or Typetron, you can find some great FREE courses here that I recommend you to watch

It would be great to see your feedback and what features you would like to see in a framework like this. Take the tutorials and see what's missing 😄.

Check the website typetron.org
Twitter at @Typetron_
My Twitter @ionellupu_
Come and leave a question on Reddit
Join the Facebook group
Let's talk on Slack
Linkedin - Typetron

🚀 Typetron alpha is officially out: typetron.org

Ionel Cristian Lupu — Thu, 23 Apr 2020 14:56:46 +0000

I've been working on a Node.js framework for building REST APIs lately called Typetron and I wanted to announce it's alpha release together with its first tutorial where I show you how to build a simple backend for a personal blog. 🔥🔥🔥

I know, I know, another Javascript framework. Even tho' Typetron can't promise you now that is a great framework, I hope it will blow you away with the version 1.0 release (which I hope I can get out at the end of summer).

After this announcement, I will start working on its second tutorial that will mark the Beta release, where I will show you how you can make a DEV.to clone. I hope I can get the frontend tutorials ready also. Typetron will have support utilities to play seamlessly with your frontend app.

It would be great to see your feedback and what features you would like to see in a framework like this. Take the first tutorial and see what's missing 😄.

Check the website typetron.org
Twitter at @Typetron_
My Twitter @ionellupu_
Come and leave a question on Reddit
Join the Facebook group
Let's talk on Slack
Linkedin - Typetron