内容简介：Caldera is a server-side execution environment for React. Think of it as the Node.js analog to Phoenix LiveView —This allows developers to rapidly build interactive and multiplayer applications without developing boilerplate around RPC layers (REST/GraphQL
:volcano:
Caldera is a server-side execution environment for React. Think of it as the Node.js analog to Phoenix LiveView — all of the application logic (including rendering) runs on the server, and DOM updates are sent to the client in real-time.
This allows developers to rapidly build interactive and multiplayer applications without developing boilerplate around RPC layers (REST/GraphQL/gRPC) and messaging primitives (WebSockets/subscriptions/etc).
Because it's built on top of the React reconciler, it's compatible with (currently, a reasonably useful subset of) the existing React API. Seewhat's currently includedandfor updates.
Installation
Run npm install caldera
to install Caldera.
Examples
A simple example (chat room) to get started:
import React, { useState } from "react";
import { renderCalderaApp, makeSharedResource, useSharedState } from "caldera";
import fs from "fs";
const DATA_PATH = "messages.json";
const messagesResource = makeSharedResource(
// Load initial messages
fs.existsSync(DATA_PATH)
? JSON.parse(fs.readFileSync(DATA_PATH, "utf-8"))
: []
);
const usePersistedMessages = () => {
// Basic shared state, synced with all clients
const [messages, setMessages] = useSharedState(messagesResource);
return [
messages,
// Persist to disk (in prod, use a database)
(newMessages) => {
setMessages(newMessages);
fs.writeFileSync(DATA_PATH, JSON.stringify(newMessages));
},
];
};
const App = () => {
const [messages, setMessages] = usePersistedMessages();
// local state, persisted across client reconnects
const [draftMsg, setDraftMsg] = useState("");
return (
<>
<h1>Chat Room!</h1>
{messages.map((message, i) => (
<div key={i}>{message}</div>
))}
<form
onSubmit={(e) => {
e.preventDefault();
setMessages([...messages, draftMsg]);
setDraftMsg("");
}}
>
<input
type="text"
value={draftMsg}
onChange={(e) => setDraftMsg(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
</>
);
};
renderCalderaApp(<App />, { port: 4000 });
Install Babel by running npm install @babel/core @babel/node @babel/preset-react
.
Then, run the app using babel-node --presets @babel/preset-react index.jsx
. For a runnable version, check the basic-example
folder.
A few other examples here demonstrate features like shared state, database usage, and session persistence.
API/Documentation
[Work in progress]
The caldera
package provides the following top-level exports:
-
Head: A React component that renders its children into the page's<head /> -
renderCalderaApp: A function that takes in a React element, and runs the Caldera server on port 8080 -
makeSharedResource: Creates a shared resource suitable for use inuseSharedStateanduseSharedReducer -
useSharedState/useSharedReducer: Shared equivalents to theuseStateanduseReducerhooks that are initialized with the current value of the passed in resource, and trigger rerenders in all other call sites upon updating -
useHistory/useLocation- hooks that enable routing functionality
What works
<Head />
What's being worked on
<input type="file">
Future plans
-
Proper versioning for state serialization
- This will allow support for upgrading the server in-place, while retaining certain parts of the client state
- Support for selectively rendering arbitrary React components on the client
以上所述就是小编给大家介绍的《Caldera – Phoenix LiveView for Node and React》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
企业应用架构模式
Martin Fowler / 王怀民、周斌 / 机械工业出版社 / 2010-4 / 59.00元
《企业应用架构模式》作者是当今面向对象软件开发的权威，他在一组专家级合作者的帮助下，将40多种经常出现的解决方案转化成模式，最终写成这本能够应用于任何一种企业应用平台的、关于解决方案的、不可或缺的手册。《企业应用架构模式》获得了2003年度美国软件开发杂志图书类的生产效率奖和读者选择奖。《企业应用架构模式》分为两大部分。第一部分是关于如何开发企业应用的简单介绍。第二部分是《企业应用架构模式》的主体......一起来看看 《企业应用架构模式》 这本书的介绍吧!
