Введение в Brisa: новый подход к веб-разработке21.11.2024 11:30

625a4e00a7d9d7a076e30fb080a87cc7.png

Brisa — это современный веб‑фреймворк, разработанный для создания высокопроизводительных веб‑приложений с минимальной загрузкой JavaScript на стороне клиента. Основное преимущество Brisa заключается в том, что он позволяет рендерить компоненты на стороне сервера, сохраняя при этом высокую производительность и снижая нагрузку на браузер. В этой статье мы подробно разберём, как начать работу с Brisa, изучим основные принципы и рассмотрим примеры кода.

Достоинства Brisa

Brisa — это инновационный веб-фреймворк, имеющий несколько ключевых преимуществ, которые делают его привлекательным для разработчиков, стремящихся создавать быстрые, лёгкие и эффективные веб-приложения. Вот основные причины, почему стоит рассмотреть использование Brisa:

1. Высокая производительность

Brisa сосредотачивается на минимизации передачи JavaScript в браузер. Вместо передачи больших объёмов клиентского кода фреймворк рендерит страницы на стороне сервера и передаёт в браузер только необходимый HTML и минимальный JavaScript. Это значительно ускоряет загрузку страниц, особенно на устройствах с низкой производительностью и в условиях медленного интернет-соединения.

2. Серверный рендеринг (SSR) компонентов

Brisa использует серверный рендеринг компонентов, что позволяет быстрее загружать и отображать контент для пользователей. Это особенно полезно для SEO, так как поисковые системы предпочитают быстро загружаемые и легко индексируемые страницы. Также пользователи получают мгновенно отрендеренный контент без необходимости ждать загрузки и выполнения большого объёма JavaScript.

3. Минимальная клиентская нагрузка

За счёт использования серверного рендеринга и нативных Web API, Brisa уменьшает объём кода, выполняемого на клиенте. Это делает веб-приложения менее зависимыми от производительности устройства пользователя и повышает стабильность работы. В результате приложения становятся более отзывчивыми и быстро реагируют на пользовательские действия.

4. Эффективная обработка событий на сервере

Brisa поддерживает обработку событий, таких как ввод данных, клики и формы, на стороне сервера. Это упрощает логику разработки, устраняя необходимость передачи сложного JavaScript в браузер и повышая безопасность обработки данных. Системы на стороне сервера легче масштабировать и контролировать, что важно для крупных проектов.

5. Поддержка веб-компонентов

Brisa позволяет разрабатывать и использовать веб-компоненты с поддержкой серверного рендеринга и гидрации на клиенте. Это означает, что вы можете создавать интерактивные и лёгкие компоненты, которые эффективно работают как на сервере, так и в браузере. Веб-компоненты позволяют улучшить пользовательский интерфейс и взаимодействие, сохраняя при этом высокую производительность.

6. Интеграция с Tauri для кроссплатформенной разработки

Brisa легко интегрируется с Tauri, что позволяет разрабатывать кроссплатформенные приложения для настольных и мобильных устройств. Это делает фреймворк отличным выбором для разработчиков, которым нужно создавать универсальные приложения, работающие на Windows, macOS, Linux, Android и iOS. Вы можете использовать один и тот же код как для веб-приложения, так и для нативных приложений.

7. Удобство настройки и гибкость

Brisa предлагает понятную и простую настройку, что делает его доступным даже для разработчиков, которые только начинают осваивать современные веб-фреймворки. Структура проекта организована таким образом, чтобы упростить разработку и поддержку кода. При этом Brisa сохраняет высокую гибкость, позволяя разработчикам настраивать и расширять функциональность в соответствии с потребностями проекта.

8. Поддержка интернационализации (i18n)

Встроенная поддержка интернационализации позволяет легко переводить интерфейс на разные языки и адаптировать приложение для международной аудитории. Brisa загружает только необходимый перевод для текущей страницы, что улучшает производительность и упрощает управление языковыми ресурсами.

9. Современный подход к разработке

Brisa использует современные технологии и подходы, такие как JSX, серверные компоненты и нативные Web API, что делает разработку удобной и эффективной. Этот фреймворк обеспечивает разработчикам знакомую и интуитивную среду, сохраняя при этом высокую производительность приложений.

Как начать: установка и настройка Brisa

Brisa легко устанавливается и быстро настраивается с помощью командной строки. Перед установкой убедитесь, что у вас установлен инструмент bun, который используется для управления зависимостями в проектах Brisa.

Выполните следующую команду для создания нового проекта Brisa: 

bun create brisa@latest

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

Структура проекта

После установки Brisa создаст проект с определённой структурой каталогов. Давайте разберёмся, как организованы файлы и папки: 

/my-brisa-app
  ├── src                 # Исходный код вашего приложения
  │   ├── components      # Папка общих компонентов
  │   ├── pages           # Маршрутизатор страниц
  |   ├── layout          # Папка для страниц приложения
  |   ├── public          # Статические файлы, такие как изображения и стили
  |   ├── styles          # Файлы стилей
  │   └── web-components  # Клиентские компоненты
  |   
  ├── package.json        # Файл конфигурации проекта с зависимостями
  └── brisa.config.js     # Конфигурационный файл для Brisa

Эта структура организует проект так, чтобы он был лёгким в навигации и сопровождении. Давайте теперь рассмотрим, как создаются основные элементы приложения.

Работа с веб-компонентами

Веб-компоненты в Brisa — это переиспользуемые и изолированные элементы пользовательского интерфейса, которые рендерятся на стороне сервера и могут быть гидратированы на клиенте для обеспечения интерактивности. Это позволяет создавать мощные и лёгкие приложения.

Создание веб-компонента

Рассмотрим пример создания простого компонента-счётчика: 

// src/web-components/counter-component.tsx

import { WebContext } from "brisa";

export default function Counter({}, { state }: WebContext) {
  // Инициализация состояния
  const count = state(0);

  // Обработчики событий:
  const inc = () => count.value++;
  const dec = () => count.value--;

  return (
    <>
      
      {/* Вывод состояния счетчика: */}
       Counter: {count.value} 
      
    
  );
}

Всякий раз, когда состояние мутирует (изменяется .value), происходит реактивное обновление тех частей DOM, где был установлен сигнал.

Использование на странице: 

// src/pages/index.tsx

export default function HomePage() {
  return ;
}

Brisa рендерит этот компонент на стороне сервера и отправляет его в браузер, обеспечивая быструю загрузку и высокую производительность.

Обработка событий на сервере

Brisa позволяет обрабатывать события, такие как ввод данных, на стороне сервера, упрощая логику приложения и повышая безопасность. Пример обработки события: 

export default function Password({ onValidatePassword }) {
  return (
    

       {
          console.log("Этот код выполнится на сервере Brisa");
          // Отправка данных на другой сервер:
          onValidatePassword(e.target.value)
        }}
        // Задержка
        debounceInput={300}
      />
    

  );
}

В компонентах Brisa существует соглашение, что события должны начинаться с префикса on. Например:  onNext,  onPrev. После соблюдения этого соглашения вы можете использовать события в компонентах сервера как события браузера, с некоторыми отличиями:

  • Server Actions сериализуют событие для дальнейшего доступа к нему;

  • код выполняется на сервере;

  • не добавляется клиентский JavaScript.

Интернационализация (i18n)

Brisa имеет встроенную поддержку интернационализации, которая позволяет вам переводить ваши страницы и маршруты, загружая при этом только используемые переводы. Пример использования: 

// src/pages/index.tsx
export default function HomePage() {
  return ;
}

function I18nExample({}, { i18n: { t, lang } }) {
  console.log(lang); // Вывод текущего языка, например, "en-US"
  return (
    

      {t("hello-key", { name: "Brisa" })} {/* Привет, Brisa! */}
    

  );
}

Когда пользователь посещает корневой каталог приложения (как правило,  /), Brisa пытается автоматически определить, какую локаль предпочитает пользователь, на основе Accept-Languageзаголовка и текущего домена. Если обнаружена локаль, отличная от локали по умолчанию, пользователь будет перенаправлен.

Создание кроссплатформенных приложений с Tauri

Brisa легко интегрируется с Tauri, что позволяет создавать кроссплатформенные нативные приложения для настольных и мобильных устройств.

Пример настройки для Android

Чтобы собрать приложение для Android, обновите файл конфигурации: 

// brisa.config.ts
import type { Configuration } from "brisa";

export default {
  output: "android",
} satisfies Configuration;

Эта настройка позволяет создать .apk для Android. Tauri также поддерживает сборку для Windows, macOS и Linux, что делает Brisa универсальным инструментом для мультиплатформенной разработки.

Заключение

Brisa — это мощный инструмент для разработки современных, производительных и легковесных веб-приложений. Его возможности, такие как серверный рендеринг, минимальная клиентская загрузка, поддержка веб-компонентов и интеграция с Tauri, открывают широкие перспективы для создания приложений любого уровня сложности.

Если вы хотите узнать больше и глубже изучить возможности этого фреймворка, обязательно обратитесь к официальной документации Brisa. В ней вы найдёте подробные руководства, примеры кода и технические советы, которые помогут вам максимально эффективно использовать все преимущества Brisa в ваших проектах.

© Habrahabr.ru