内容简介：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》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
游戏编程权威指南
Mike McShaffry 麦克沙福瑞、David “Rez” Graham 格雷海姆 / 师蓉、李静、李青翠 / 人民邮电 / 2016-3 / 99.00元
全书分为4个部分共24章。首部分是游戏编程基础，主要介绍了游戏编程的定义、游戏架构等基础知识。 第二部分是让游戏跑起来，主要介绍了初始化和关闭代码、主循环、游戏主题和用户界面等。 第三部分是核心游戏技术，主要介绍了一些*为复杂的代码 示例，如3D编程、游戏音频、物理和AI编程等。 第四部分是综合应用，主要介绍了网络编程、多道程序设计和用C#创建工具等，并利用前面所讲的 知识开发出......一起来看看 《游戏编程权威指南》 这本书的介绍吧!
