Проект на фреймворке Marko состоит из нескольких ключевых компонентов, которые помогают организовать и управлять разработкой веб-приложений. Важным аспектом является правильная структура файлов, которая обеспечивает удобство работы и упрощает масштабируемость.
src/ – каталог исходных файлов, в
котором находится вся логика и структура приложения. Все основные
компоненты, шаблоны, стили и JavaScript-код размещаются здесь.
components/ – здесь находятся все
компоненты, написанные с использованием Marko. Каждый компонент
представляет собой набор шаблонов и логики, и обычно хранится в
отдельной папке.layouts/ – папка для размещения
шаблонов макетов. Макеты — это компоненты, которые обычно используют
другие компоненты для создания основной структуры страницы.views/ – файлы, отвечающие за
представление и обработку данных, передаваемых в шаблоны.assets/ – статичные ресурсы, такие как
изображения, стили, шрифты и другие файлы, доступные для загрузки на
клиенте.public/ – каталог для публичных
файлов, которые могут быть доступными через URL, например, изображения,
шрифты или другие статические ресурсы, которые не нуждаются в обработке
со стороны сервера.
node_modules/ – стандартная папка
для всех зависимостей проекта. Здесь хранятся библиотеки и модули,
установленные через менеджер пакетов npm.
build/ – каталог, в который
помещаются скомпилированные файлы для финальной сборки проекта. Эти
файлы готовы к развертыванию на сервере или в продакшн-среде.
config/ – конфигурационные файлы
проекта. Здесь могут находиться настройки сборщика, параметры сервера, а
также другие конфигурации, которые управляют поведением
приложения.
tests/ – папка с тестами, которая
содержит юнит-тесты и интеграционные тесты для компонентов и функционала
проекта.
Каждый компонент Marko состоит из нескольких файлов, которые
обеспечивают его работоспособность. Основной компонент представляет
собой файл с расширением .marko. Вот как выглядит типичная
структура компонента:
component/
├── component.marko // основной шаблон компонента
├── component.js // файл с логикой компонента (optional)
├── component.css // стили компонента (optional)
└── component.test.js // тесты для компонента (optional)component.marko – основной файл
компонента, содержащий шаблон, который Marko компилирует в HTML. Шаблон
может содержать как статическую разметку, так и динамическую логику,
такую как условные конструкции, циклы, передача параметров и т. д.
Пример:
<div>
<h1>Hello, ${input.name}!</h1>
</div>component.js – файл с
JavaScript-кодом, который содержит логику компонента, например,
обработчики событий, методы и жизненный цикл компонента. Этот файл не
обязателен, если компонент не требует дополнительной логики.
Пример:
module.exports = {
onInput(input) {
this.name = input.name || 'World';
}
};component.css – файл стилей,
применяемых к компоненту. Это не обязательный файл, но он полезен, если
компонент требует специфичных стилей. В Marko поддерживаются как обычные
CSS, так и предобработанные стили (например, SCSS).
component.test.js – файл с тестами
для компонента. Это optional, но рекомендуется создавать тесты для
проверки корректности работы компонентов.
Marko поддерживает разделение логики и представления. Логика компонента находится в JavaScript-файле, а разметка — в шаблонном файле. Это позволяет поддерживать чистоту и разделение ответственности в проекте, а также упростить тестирование, так как логику можно протестировать отдельно от разметки.
Marko обычно используется в качестве фреймворка для рендеринга на сервере. В таких проектах серверная логика обычно разделяется на два типа:
Серверная логика — обрабатывает запросы и рендерит компоненты на сервере. Это может быть сделано через Express, Koa или другие серверные фреймворки.
Клиентская логика — после рендеринга страницы на сервере, данные могут быть переданы на клиентскую сторону для интерактивности и обновлений без полной перезагрузки страницы (используется реактивность Marko). В Marko поддерживаются как серверный, так и клиентский рендеринг компонентов.
В некоторых проектах на Marko удобно выделять страницы, которые являются контейнерами для компонентов. Эти страницы могут использоваться как роуты, отвечающие за различные части приложения. Каждая страница может включать в себя несколько компонентов, создавая таким образом модульную структуру.
Пример:
pages/
├── home.marko // страница "домашняя"
├── about.marko // страница "о нас"
├── contact.marko // страница "контакты"
└── page.js // общая логика для страницВ Marko макеты предоставляют общий каркас для страниц. Это позволяет повторно использовать общие элементы на разных страницах, например, хедеры, футеры или навигацию. Макет может быть использован в каждом компоненте, который наследует от базового шаблона.
Пример:
<layout>
<header>Header content</header>
<main>${input.content}</main>
<footer>Footer content</footer>
</layout>Стили в Marko могут быть разделены на два типа: глобальные и локальные. Глобальные стили применяются ко всему приложению, а локальные — только к отдельным компонентам. Для организации стилей рекомендуется использовать CSS-модули или аналогичные технологии, чтобы избежать конфликтов стилей между компонентами.
При разработке на Marko важно соблюдать принцип разделения логики и представления. Это позволяет поддерживать структуру проекта в чистоте и упростить его развитие. Шаблоны и JavaScript-код должны быть как можно более изолированы, что поможет легче масштабировать проект, а также упростит тестирование отдельных частей системы.
Одной из лучших практик является создание тестов для компонентов. Это позволяет убедиться в правильности работы каждого отдельного компонента и всей системы в целом. В Marko можно использовать стандартные библиотеки для тестирования, такие как Jest или Mocha, в сочетании с инструментами для рендеринга шаблонов.
Правильная организация структуры файлов в проекте на Marko помогает не только в разработке, но и в масштабировании приложения, обеспечивая чистоту и поддерживаемость кода. Разделение компонентов, стилей и логики позволяет эффективно работать над проектом в команде и интегрировать новые функции без ущерба для производительности и качества кода.