M

MLOG

中文

探索 Marko，一个专为高性能 Web 应用设计的声明式 UI 框架，重点介绍其流式服务器端渲染能力及其对全球用户的优势。

Marko：声明式 UI 与流式服务器端渲染

在当今快节奏的数字环境中，网站性能至关重要。加载缓慢或无响应的网站会导致用户沮丧、跳出率增高，并最终造成收入损失。Marko，一个声明式的 UI 框架，通过提供一种独特的方法来构建高性能的 Web 应用程序，从而解决了这些问题。本文将深入探讨 Marko 的核心功能，特别是其流式服务器端渲染 (SSR) 能力，并解释为什么它对于为全球用户构建网站和 Web 应用程序的开发人员来说是一个引人注目的选择。

什么是 Marko？

Marko 是一个由 eBay 创建并现由 Marko 团队维护的开源 UI 框架。它通过专注于性能、简单性和可扩展性而与其他框架区别开来。与一些优先考虑客户端渲染的框架不同，Marko 强调服务器端渲染，尤其是流式 SSR。这意味着服务器会预先渲染应用程序的 HTML，并在其可用时以数据块（流）的形式发送到浏览器，从而实现更快的首次内容绘制 (FCP) 并改善用户体验。

Marko 的主要特性与优势

深入了解流式服务器端渲染

让我们更详细地探讨流式 SSR 的好处：

改善首次内容绘制 (FCP)

FCP 是衡量网站性能的关键指标。它代表了屏幕上出现第一个内容（文本、图像等）所需的时间。流式 SSR 显著减少了 FCP，因为浏览器开始接收和渲染 HTML 的时间远早于客户端渲染。浏览器无需等待整个 JavaScript 包下载和执行，而是可以立即开始显示页面的初始内容。想象一个展示产品列表的电子商务网站。通过流式 SSR，即使用户在交互元素完全加载之前，也能几乎立即看到产品图片和描述。这创造了更具吸引力和响应性的用户体验。

更好的用户体验

更快的 FCP 意味着更好的用户体验。如果用户能快速看到内容，他们就不太可能放弃一个网站。流式 SSR 提供了更流畅和响应迅速的体验，尤其是在较慢的网络或设备上。这对于发展中国家的移动用户尤其重要，因为这些地方的互联网连接可能不稳定。例如，一个使用流式 SSR 的新闻网站可以即时传递突发新闻标题和摘要，即使对于带宽有限的用户也是如此。

SEO 优势

搜索引擎机器人依赖 HTML 内容来理解网站的结构和内容。服务器端渲染提供了现成的 HTML，使搜索引擎更容易抓取和索引您的网站。这可以提高您的搜索引擎排名并增加自然流量。虽然 Google 在渲染 JavaScript 方面已经做得越来越好，但 SSR 仍然提供了一个显著的优势，特别是对于具有复杂 JavaScript 密集型应用的网站。一个使用 SSR 的旅行社网站，其目的地页面将被正确索引，确保它们出现在相关的搜索结果中。

增强的可访问性

SSR 通过提供可以被屏幕阅读器和其他辅助技术轻松解析的 HTML 内容，有助于提高可访问性。这确保了残障人士也能使用您的网站。通过在服务器上渲染初始内容，您为可访问性提供了坚实的基础，即使在 JavaScript 完全加载之前也是如此。例如，一个使用 SSR 的政府网站将确保所有公民，无论其能力如何，都能访问重要信息。

Marko 与其他框架的比较

与 React、Vue 和 Angular 等其他流行的 UI 框架相比，Marko 的表现如何？

Marko vs. React

React 是一个广泛用于构建用户界面的库。虽然 React 可以与服务器端渲染一起使用（使用 Next.js 或类似框架），但它通常默认依赖于客户端渲染。Marko 的流式 SSR 在性能上优于 React 的传统 SSR 方法。React 的生态系统非常庞大，提供了许多库和工具，但这也可能导致复杂性。Marko 则专注于简单性和性能，提供了更精简的开发体验。考虑一个复杂的仪表板应用程序。虽然 React 提供了基于组件的方法，但 Marko 的流式 SSR 可能会在初始页面加载时提供性能提升，尤其是在显示大型数据集时。

Marko vs. Vue

Vue 是另一个以其易用性和渐进式方法而闻名的流行框架。Vue 也支持服务器端渲染（使用 Nuxt.js）。Marko 和 Vue 在简单性和基于组件的架构方面有一些相似之处。然而，Marko 的流式 SSR 提供了独特的性能优势，特别是对于高流量或复杂 UI 的网站。Vue 通常需要更多的手动优化才能在服务器端渲染中实现最佳性能。例如，社交媒体网站可能会受益于 Marko 的流式 SSR，以快速显示用户动态和更新。

Marko vs. Angular

Angular 是一个功能齐全的框架，为构建复杂的 Web 应用程序提供了全面的解决方案。Angular 通过 Angular Universal 支持服务器端渲染。然而，与 Marko 和 Vue 相比，Angular 的学习和使用可能更复杂。Marko 的简单性和对性能的关注使其成为那些将性能视为首要任务的项目的有力替代方案。大型企业应用程序可能会选择 Angular，因其强大的功能和可扩展性，但小型初创公司可能会选择 Marko 的速度和易于开发的特点。

总结： 虽然 React、Vue 和 Angular 都支持服务器端渲染，但 Marko 内置的流式 SSR 提供了显著的性能优势。Marko 优先考虑性能和简单性，使其成为这些因素至关重要的项目的绝佳选择。

开始使用 Marko

开始使用 Marko 相对简单。以下是一个基本大纲：

  1. 安装 Node.js： 确保您的系统上已安装 Node.js。
  2. 安装 Marko CLI： 运行 `npm install -g marko-cli` 以全局安装 Marko 命令行界面。
  3. 创建一个新的 Marko 项目： 使用命令 `marko create my-project` 来创建一个新的 Marko 项目。
  4. 探索项目结构： 项目将包含 `index.marko`（您的主组件）、`server.js`（您的服务器端入口点）和 `marko.json`（您的项目配置）等文件。
  5. 运行开发服务器： 使用命令 `npm start` 来启动开发服务器。
  6. 开始构建您的组件： 为您的组件创建新的 `.marko` 文件，并将它们导入到您的主组件中。

Marko 组件示例 (index.marko)：


<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Marko 示例</title>
  <!MARKUPROCESSED>
</head>
<body>
  <h1>你好，世界！</h1>
  <p>这是一个简单的 Marko 组件。</p>
</body>
</html>

服务器端渲染示例 (server.js)：


require('marko/node-require').install();
require('marko/compiler').configure({
  resolveCssUrls: true,
  cache: true
});

const express = require('express');
const marko = require('marko');
const template = marko.load(require.resolve('./index.marko'));

const app = express();

app.get('/', (req, res) => {
  template.render({}, res);
});

app.listen(3000, () => {
  console.log('服务器已在端口 3000 启动');
});

这些只是帮助您入门的基本示例。Marko 提供了丰富的功能和选项来构建复杂的 Web 应用程序。请参阅官方 Marko 文档以获取更详细的信息。

Marko 的真实世界应用案例

虽然 Marko 最初由 eBay 开发，但现在它正被不同行业的各种公司使用：

这些例子展示了 Marko 的多功能性及其对广泛 Web 应用程序的适用性。

使用 Marko 的最佳实践

要充分利用 Marko，请考虑以下最佳实践：

结论：Marko – 现代 Web 开发的强大选择

Marko 是一个功能强大且用途广泛的 UI 框架，为构建高性能 Web 应用程序提供了引人注目的解决方案。其声明式语法、流式 SSR 功能以及对简单性的关注，使其成为希望提高网站性能、增强用户体验和提升 SEO 的开发人员的绝佳选择。通过采用 Marko，开发人员可以创建快速、响应迅速且可供全球用户访问的网站和 Web 应用程序。无论您是在构建一个小型个人网站还是大型企业应用程序，Marko 都值得作为您的 UI 框架首选。它强调快速高效地交付内容，使其在当今全球化和性能驱动的数字环境中尤为重要。

更多资源：