M

MLOG

Русский

Изучите Marko, декларативный UI-фреймворк для высокопроизводительных веб-приложений, с акцентом на потоковую SSR.

Marko: Декларативный UI с потоковой серверной отрисовкой

В сегодняшнем стремительно меняющемся цифровом пространстве производительность веб-сайта имеет первостепенное значение. Медленно загружающийся или неотзывчивый веб-сайт может привести к разочарованию пользователей, увеличению показателей отказов и, в конечном итоге, к потере дохода. Marko, декларативный UI-фреймворк, решает эти проблемы, предлагая уникальный подход к созданию высокопроизводительных веб-приложений. В этой статье мы углубимся в основные возможности Marko, в частности, в его возможности потоковой серверной отрисовки (SSR), и объясним, почему это привлекательный выбор для разработчиков, создающих веб-сайты и веб-приложения для глобальной аудитории.

Что такое Marko?

Marko — это UI-фреймворк с открытым исходным кодом, созданный eBay, а теперь поддерживаемый командой Marko. Он отличает себя от других фреймворков фокусом на производительность, простоту и масштабируемость. В отличие от некоторых фреймворков, которые отдают приоритет клиентской отрисовке, Marko подчеркивает серверную отрисовку, особенно потоковую SSR. Это означает, что сервер предварительно отрисовывает HTML вашего приложения и отправляет его в браузер частями (потоками) по мере его готовности, что приводит к более быстрой отрисовке первого контента (FCP) и улучшенному пользовательскому опыту.

Ключевые особенности и преимущества Marko

Углубляемся в потоковую серверную отрисовку

Давайте подробнее рассмотрим преимущества потоковой SSR:

Улучшенный First Contentful Paint (FCP)

FCP — ключевой показатель для измерения производительности веб-сайта. Он представляет собой время, необходимое для появления первого контента (текст, изображение и т. д.) на экране. Потоковая SSR значительно сокращает FCP, поскольку браузер начинает получать и отрисовывать HTML гораздо раньше, чем при клиентской отрисовке. Вместо того чтобы ждать загрузки и выполнения всего пакета JavaScript, браузер может немедленно начать отображать первоначальный контент страницы. Представьте себе сайт электронной коммерции, демонстрирующий списки товаров. С потоковой SSR пользователь видит изображения и описания товаров почти мгновенно, даже до полной загрузки интерактивных элементов. Это создает гораздо более привлекательный и отзывчивый пользовательский опыт.

Лучший пользовательский опыт

Более быстрый FCP означает лучший пользовательский опыт. Пользователи с меньшей вероятностью покинут веб-сайт, если контент появляется быстро. Потоковая SSR обеспечивает более плавный и отзывчивый опыт, особенно в медленных сетях или на слабых устройствах. Это особенно важно для мобильных пользователей в развивающихся странах, где интернет-соединение может быть ненадежным. Например, новостной сайт, использующий потоковую SSR, может мгновенно доставлять заголовки и сводки последних новостей даже пользователям с ограниченной пропускной способностью.

SEO-преимущества

Боты поисковых систем полагаются на HTML-контент для понимания структуры и содержания веб-сайта. Серверная отрисовка предоставляет готовый HTML, что облегчает поисковым системам сканирование и индексацию вашего сайта. Это улучшает ваш рейтинг в поисковых системах и увеличивает органический трафик. Хотя Google стал лучше рендерить JavaScript, SSR по-прежнему обеспечивает значительное преимущество, особенно для веб-сайтов со сложными приложениями, интенсивно использующими JavaScript. Сайт туристического агентства, использующий SSR, будет иметь правильно проиндексированные страницы направлений, гарантируя их появление в релевантных результатах поиска.

Улучшенная доступность

SSR способствует лучшей доступности, предоставляя HTML-контент, который легко парсится программами чтения с экрана и другими вспомогательными технологиями. Это гарантирует, что ваш веб-сайт доступен для людей с ограниченными возможностями. Отрисовывая первоначальный контент на сервере, вы предоставляете прочную основу для доступности, даже до полной загрузки JavaScript. Например, правительственный веб-сайт, использующий SSR, гарантирует, что все граждане, независимо от их способностей, смогут получить доступ к важной информации.

Marko против других фреймворков

Как Marko выглядит на фоне других популярных UI-фреймворков, таких как React, Vue и Angular?

Marko против React

React — широко используемая библиотека для создания пользовательских интерфейсов. Хотя React можно использовать с серверной отрисовкой (используя Next.js или аналогичные фреймворки), по умолчанию он обычно полагается на клиентскую отрисовку. Потоковая SSR Marko обеспечивает преимущество в производительности по сравнению с традиционным подходом SSR в React. Экосистема React обширна, предлагая множество библиотек и инструментов, но это также может привести к сложности. Marko фокусируется на простоте и производительности, предлагая более оптимизированный опыт разработки. Рассмотрите сложное приложение-панель управления. Хотя React предлагает компонентный подход, потоковая SSR Marko может обеспечить прирост производительности при первоначальной загрузке страницы, особенно при отображении больших наборов данных.

Marko против Vue

Vue — еще один популярный фреймворк, известный своей простотой использования и прогрессивным подходом. Vue также поддерживает серверную отрисовку (используя Nuxt.js). Marko и Vue имеют некоторые сходства в плане простоты и компонентной архитектуры. Однако потоковая SSR Marko предлагает явное преимущество в производительности, особенно для веб-сайтов с высокой посещаемостью или сложными UI. Vue часто требует более ручной оптимизации для серверной отрисовки для достижения оптимальной производительности. Например, сайт социальной сети может выиграть от потоковой SSR Marko для быстрого отображения лент и обновлений пользователей.

Marko против Angular

Angular — полнофункциональный фреймворк, который предоставляет комплексное решение для создания сложных веб-приложений. Angular поддерживает серверную отрисовку через Angular Universal. Однако Angular может быть сложнее для изучения и использования по сравнению с Marko и Vue. Простота Marko и фокус на производительности делают его привлекательной альтернативой для проектов, где производительность является главным приоритетом. Крупное корпоративное приложение может выбрать Angular из-за его надежных функций и масштабируемости, но стартап поменьше может выбрать скорость и простоту разработки Marko.

В итоге: Хотя React, Vue и Angular поддерживают серверную отрисовку, встроенная потоковая SSR Marko обеспечивает значительное преимущество в производительности. 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="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Marko Example</title>
  <!MARKUPROCESSED>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a simple Marko component.</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('Server started on port 3000');
});

Это всего лишь базовые примеры для начала работы. Marko предлагает множество функций и опций для создания сложных веб-приложений. Обратитесь к официальной документации Marko для получения более подробной информации.

Примеры использования Marko в реальных проектах

Хотя Marko изначально был разработан eBay, сейчас он используется различными компаниями в разных отраслях:

Эти примеры демонстрируют универсальность Marko и его пригодность для широкого спектра веб-приложений.

Лучшие практики использования Marko

Чтобы получить максимальную отдачу от Marko, рассмотрите следующие лучшие практики:

Заключение: Marko – мощный выбор для современной веб-разработки

Marko — это мощный и универсальный UI-фреймворк, который предлагает привлекательное решение для создания высокопроизводительных веб-приложений. Его декларативный синтаксис, возможности потоковой SSR и фокус на простоте делают его отличным выбором для разработчиков, стремящихся улучшить производительность веб-сайта, повысить пользовательский опыт и увеличить SEO. Используя Marko, разработчики могут создавать веб-сайты и веб-приложения, которые быстры, отзывчивы и доступны для пользователей по всему миру. Независимо от того, создаете ли вы небольшой личный веб-сайт или крупное корпоративное приложение, Marko стоит рассмотреть в качестве вашего предпочтительного UI-фреймворка. Его акцент на быстрой и эффективной доставке контента делает его особенно актуальным в современном глобализованном и ориентированном на производительность цифровом ландшафте.

Дополнительные ресурсы: