:octopus: Resumable SSR framework.
:dart: Asta is a highly specialized full stack framework for SSR. It has no vdom on the server side and 0 js on the client side. Finally, it gets best QPS and Google scores.
Note this is early Development! It is not recommended to use this for anything serious yet.
yarn start
input:
const addCount = $import('./action.js#addCount')
// state: will run in server and inject to client
export const loader = async (req) => {
return {
count: req.query.count,
}
}
// view: will run in both client and server, but s() in server h() in client
export default ({ count }) => {
return (
<main>
<button onclick={addCount}>{count}</button>
</main>
)
}
output:
<main><button $onclick="./action/count.js?mod=addCount">0</button></main>
Jointing on server, Resumable on client
// jsx input
const view = ({list}) => <div>{list.map(i=><i>{i}</i>)}</div>
// server output
const view = ({list}) => s.openTag('div')+s.expression(list.map(i=>s.openTag('i')+s.text(i)+s.closeTag('i')))+s.closeTag('div')
// client output
const view = ({list}) => h('div',{children:[list.map(i=>h('i',{children:[i]}))]})
There are two biggest differences.
First, the server side. Asta does not run any VDOM-based framework runtime. It generates the s function
through the compiler, which is only used for string splicing. At this point, it is a little like Marko.js.
Second, on the client side, Asta is 0 javascript, and it does not require any hydration. This is a new concept, called Resumable, a little like qwik.js.
So, Asta ≈ Marko + Qwik
.
Because there is no Vdom overhead on the server side, Asta can get super high QPS and throughput.
Then because the client side is 0 js, it can continuously get a high Google score, and the score will not decrease with the increase of components.
In principle, asta is the sum of them, Asta is a double optimization, but the implementation details are quite different.
At the same time, Asta attempts to migrate Elm's mental model to SSR.
There is only a single state tree, and components are pure functions without states or any overhead.
These helps to completely solve performance problems.
Although JSX of fre can also be optimized at compile time, and the client side can also be selective hydrated, it is important that Fre or other Vdom-based framework components are not completely cost free.
Asta 的核心是根治性能问题,已知的 SSR 框架有几个性能瓶颈:
server 端生成和遍历 vdom 成本是巨大的,Asta 在 server 端没有 vdom,它通过一个特殊的编译器将 jsx 编译成 s 函数,只用来拼接字符串
server 端组件的初始化,状态更新,生命周期的开销,也是巨大的,Asta 也有组件,但它的组件是纯函数,也只用来拼接字符串,没有任何私有状态和生命周期,这得益于 Elm 的心智模型,单 state tree,组件是纯函数
Asta 双重优化,彻底根除 SSR 的性能瓶颈