"BrisaDocsPlaygroundExamplesBlog0.1.0 网络平台框架：以速度和简洁构建Web应用开始🚀 快速打造高效应用Brisa页面是动态服务器渲染的JSX组件，无需向浏览器发送任何JavaScript。编写简单，运行快速。// src/pages/index.tsx
export default function HomePage() {
return <p>服务器渲染的Brisa页面</p>;
}
0字节🏝️ 基于Web组件的小岛式架构在Brisa中，默认所有功能都在服务器上运行，除非src/web-components文件夹，它也会在客户端运行。Web组件在服务器（SSR）上渲染，然后在客户端通过原生Web API进行 hydration，它们通过信号转换为真正的Web组件。// src/pages/index.tsx
export default function HomePage() {
return <custom-counter start={5} />;
}
// src/web-components/custom-counter.tsx
function CustomCounter(props, { state }) {
// ...
}
export default CustomCounter;
+3 KB📲 服务器上的浏览器事件Brisa融合了React的"服务器操作"和HTMX的理念。在Brisa中，你可以直接在服务器上处理所有浏览器事件，如表单、点击等。此外，我们还提供了一些额外的HTML属性来管理防抖、乐观更新等功能。这样，即使不使用Web组件，也能创建SPA，仅需Brisa的RPC连接服务器即可。更多关于服务器操作// src/pages/index.tsx
export default function HomePage() {
function handleInput(event) {
// 这个console.log会在服务器执行
console.log(event.target.value);
}
return (
<input
type="text"
onInput={handleInput}
debounceInput={400}
/>
);
}
+2 KB (RPC代码)🌐 全面的国际化支持Brisa内置了国际化的支持，可以轻松翻译页面和路由，只传输你实际使用的翻译内容。更多关于国际化// src/pages/index.tsx
export default function HomePage() {
return <I18nExample />;
}
function I18nExample({}, { i18n: { t, lang } }) {
console.log(lang); // en-US
return (
<p>
{/* 你好，Brisa！ */}
{t("hello-key", { name: "Brisa" })}
</p>
);
}
+0 B (服务器组件)+800 B (Web组件)📱 多平台支持Brisa让你能够轻松将Web应用转化为Android、iOS和桌面的原生应用。它与Tauri深度集成。// brisa.config.ts
import type { Configuration } from "brisa";
export default {
// bun, node, static, android, ios, desktop
output: "android",
} as Configuration;
思考：网络平台框架？Brisa的目标是利用网络平台统一服务器和客户端。关键特性之一是Web组件的无缝使用，通过声明式Shadow DOM和信号，结合服务器操作提升工作效率。我们将Web的理念带入服务器，捕捉浏览器事件，如表单、点击、Web组件事件等，并在服务器组件间传递。导航和服务器操作时，它还会通过HTTP原始设计的方式流式传输超媒体。这与Web组件紧密相关，因为它们是DOM的一部分，属性变化会触发信号响应。尽管支持Web组件，但你可以创建无Web组件的多页应用（MPA），就像SPA一样。只有在需要接触网络平台或用户交互不需要服务器时，才引入Web组件。Brisa的愿景是成为现代Web开发的标准，提供一个简化从服务器到客户端高性能应用创建的统一平台。我们专注于优化客户端性能，让开发者构建可扩展的跨平台应用，充分利用Web的原生能力。我们致力于降低开发者的门槛，让他们用Brisa轻松构建互动体验，推动网络平台作为未来开发的基础。v0.1版本发布🎁 贡献者礼物Brisa是一个开源项目，我们欢迎社区的贡献。我们将为帮助改进框架的第一批贡献者准备T恤礼品。GitHub📚 文档了解更多关于Brisa的信息，请阅读文档。💝 赞助商我们即将开启Open-Collective，订阅我们的新闻通讯以获取最新资讯。享受使用Brisa吧！保持联系请输入您的邮箱，获取Brisa的最新更新。订阅我们的新闻通讯内容DocsPlaygroundExamplesBlog社交Twitter (x)DiscordGitHub法律隐私政策服务条款MIT许可 © 2024 Brisa框架contact@brisa.build