内容简介：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》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
百度SEM竞价推广
马明泽 / 电子工业出版社 / 2017-5 / 59
竞价推广已成为企业昀主要的网络营销方式，《百度SEM竞价推广：策略、方法、技巧与实战》以百度竞价推广为基础，全面阐述了整个竞价推广过程中的重要环节，涉及大量账户操作实战技巧，以及解决各类难点的方法，其中包括搜索引擎营销基础、百度搜索推广介绍、账户结构搭建技巧、关键词与创意的使用技巧、质量度优化与提升、账户工具的使用、百度推广客户端的使用、企业搜索推广方案制作、百度网盟推广、着陆页分析、效果优化与数......一起来看看 《百度SEM竞价推广》 这本书的介绍吧!
