内容简介：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》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
计算机科学概论（第12版）
[美] J.Glenn Brookshear、[美] Dennis Brylow / 刘艺、吴英、毛倩倩 / 人民邮电出版社 / 2017-1 / 69.00
《计算机科学概论》是计算机科学概论课程的经典教材，全书对计算机科学做了百科全书式的精彩阐述，充分展现了计算机科学的历史背景、发展历程和新的技术趋势。《计算机科学概论》首先介绍的是信息编码及计算机体系结构的基本原理，进而讲述操作系统和组网及因特网，接着探讨算法、程序设计语言及软件工程，然后讨论数据抽象和数据库方面的问题，讲述图形学的一些主要应用以及人工智能，以计算理论的介绍结束全书。《计算机科学概论......一起来看看 《计算机科学概论（第12版）》 这本书的介绍吧!
