Lupine.js：轻量级前端与高效后端框架

Source: Dev.to

Introducing Lupine.js: The “Unreasonably” Efficient Web Framework

在一个被庞大元框架和复杂构建链主导的世界里，Lupine.js 提出了一个简单的问题：如果我们能够拥有现代全栈框架的强大功能，却没有臃肿的负担，会怎样？

Lupine.js 是一个轻量级（≈ 7 KB gzipped）的全栈 Web 框架，结合了类似 React 的前端和类似 Express 的后端。它从零开始构建，旨在实现速度、简洁和高效。

Frontend – lupine.web

• 超小体积（≈ 7 KB gzipped）。
• TSX 语法（React JSX）、组件和 Hook。
• 没有沉重的运行时 → 即使在慢速网络下页面也能瞬间加载。
• SSR 是一等公民；lupine.api 后端会自动在服务器上渲染前端页面。
• 没有 FOUC：关键 CSS 在服务器端注入。
• 零配置 SEO：在页面离开服务器前就已计算好 meta 标签（og:image、描述等）。
• 分享即用：链接在 Twitter/Facebook 上展示效果极佳。

Built‑in CSS‑in‑JS Engine

• 作用域样式：自动作用于每个组件。
• 支持嵌套（.parent & 语法）。
• 样式在 SSR 期间被提取并高效注入。

// Example component with CSS‑in‑JS
const Button = () => {
  const css = {
    backgroundColor: '#0ac92a',
    '&:hover': {
      backgroundColor: '#08a823',
    },
  };
  return Click Me;
};

Backend – lupine.api

• 极简的 Node.js 框架，类似 Express。
• 为在服务器上渲染前端进行优化。

Development Experience

• 一条命令同时运行前端和后端：npm run dev。
• 在同一个 VS Code 会话中调试前后端。

Getting Started

1. 使用 CLI 脚手架创建新项目：

   npx create-lupine@latest my-awesome-app

2. 安装依赖并启动开发服务器：

   cd my-awesome-app
   npm install
   npm run dev

3. 打开 http://localhost:11080 查看你的第一个 Lupine 应用运行情况。

Repository & Community

Lupine 正在积极开发中。查看代码提交频率、贡献者，并在 GitHub 上为项目点星：

https://github.com/uuware/lupine.js

Why Choose Lupine.js?

• Control – 了解你技术栈的每一部分。
• Speed – 为用户提供尽可能最快的体验。
• Simplicity – 没有隐藏的魔法，只有干净的代码。

在 GitHub 上为 Lupine.js 点星，并在你的下一个项目中尝试它吧！