Build website & native Flutter app with Typescript on backend Frontless is a backend web framework that aims to save you time during development. You write only backend code with Typescript, and get Web and native Flutter UI.
Your TS code
Frontless framework
HTML&js&css
Web UI
JSON API
Frontless Flutter Framework
Flutter UI
Your code:
// pages/index.ts
import {text} from "frontlessjs/material"
export default ()=> {
    text("Hello World!",{size:20})
}
Generated HTML:
<span style="font-size:25">Hello World!</span>
Generated Flutter:
Text('Hello World', style: TextStyle(fontSize: 25))
Result: Hello World!
Examples (you can refresh page to see your changes)
export default Component(async function counter() {
    const { action } = useAction()
    let c
    switch (action) {
        case 'inc':
            c = await db.counters.query_one("update counters set num=num+1 where name=$1 returning *", [getCtx().ipAddress])
            break;
        case 'dec':
            c = await db.counters.query_one("update counters set num=num-1 where name=$1 returning *", [getCtx().ipAddress])
            break;
    }
    c = await db.counters.find_one({ name: getCtx().ipAddress })
    return row([
        iconButton("arrow-down", { action: 'dec' }),
        text(c.num),
        iconButton("arrow-up", { action: 'inc' })
    ])
})
10000
export default Component(async function todolist() {
    const { action } = useAction()
    const { body, err, ipAddress } = getCtx()
    switch (action) {
        case 'add':
            let newTodo = (await db.query("insert into todos (client_id,content) values($1,$2) returning *", [ipAddress, body.content]))[0]
            break;
        case 'remove':
            await db.query("delete from todos where id=$1 and client_id=$2", [body.itemId, getCtx().ipAddress])
            break;
    }
    let todoList = await db.query("select * from todos where client_id=$1 order by id desc", [getCtx().ipAddress])
    let elements = [
        form('add', [
            row([
                expended(input({ name: 'content' })),
                textButton('ADD', { type: "submit" })
            ]),
            formErrBox(),
        ])
    ]
    for (let item of todoList) {
        elements.push(row([
            text(item.content),
            iconButton("trash", { action: "remove", data: { itemId: item.id } })
        ])
    }
    return column(elements)
})
sample item 3
sample item 2
sample item 1
Benefits
  • Fast and easy development.
  • Fast web browser load speed.
  • Web pages are SEO friendly.
  • Flutter app hot update.
  • Fast server performance.
Github