# Introduction

## What is Mars.js?

Mars — **полноценный фреймворков-монолит** для создания веб и мобильных приложений. В отличие от остальных фреймворков (таких как Vue, React, Angular), Mars предоставляет полный инструментарий для создания серверной части и пользовательских интерфейсов. Архитектура Mars постороена на создании независимых самодостаточных блоков, упрощает создание приложений и позволяет взаимсвовать блоки из других существующих Mars проектов. Mars полностью подходит для разработки сложных приложений с рендерингом на стороне сервера (SSR, Server Side Rendering), так и для сложных одностраничных приложений с рендерингом на стороне клиента (SPA, Single-Page Applications) благодаря интегрированному в Mars Vue V2.

## Начало работы

> В руководстве предполагаются знания HTML, CSS, JavaScript, NodeJs, MongoDb и Vue V2 на среднем уровне. Наличие опыта работы с другими фреймворками может помочь, но не является обязательным.

Основная особенность Mars в том что он имеет соственную IDE. Она очень похожа на VSCode (в дальнейшем планируется полная интеграция VSCode).


## Что такое Mars Block?

Тут важно понимать что Mars блок это полностью независимая единица. Для эпрощения понимая можно представлять что **Mars Block это Component** как в других фреймворках.

В Mars блок может быть разных типов:
1. UI блок - Блок который описывает некий пользовательский интерфейс. Он может сосотоять из JSX кода, который преобразовывается в готовый html на сервере. И может содержать Vue код, который начинает работать только на клиенте. [ссылка на документацию](https://)
2. Service - Это блок который выполняет опредленную функционалльность. Его можно воспринимать как отедльная функция или апи метод. [ссылка на документацию](https://)
3. Page - Это блок описывающий страницу. Он имеет дополнительные настройки, по которым определяется url адресс и тайтл страницы, и еще дополнительные свободные параметры. [ссылка на документацию](https://)
4. Model - Это блок который выводит некую структуру данных в виде формы. И имеет серверный код который обробатывает submit формы и сохраняет данные в нужной коллекции. [ссылка на документацию](https://)
5. Setting - Это блок в формате JSON который предназначен что бы хранить свободные данные которые являются настройками чего либо. [ссылка на документацию](https://)

> Важно учитывать что один и тот же блок может реализовывать несколько типов, кроме Settings.

А теперь не много о том как это выглядит с точки зрения кода.


Блок имеет дополнительные вкладки.
1. page - Это JSON описание страницы. (Эта вкладки используется только для блоков с типом `page`)

2. props - Это JSON описание формы. (Эта вкладки используется только для блоков с типом `model`)

3. server - Это код который будет выполняться когда сервер будет вызывать этот блок.

4. jsx - Это код пользовательского интерфейса в формате JSX. На стороне сервера он рендериться в чистый html.

5. html - Это обычный html код, который просто встраивается в JSX. Так же тут может быть код Vue шаблона.
> На сервере html код кладется в JS интерполяцию `` это позволяет нам вставлять какой-то динамический контент через ${}.


6. client - Это просто код который будет рабоать на клиенте. И тут мы инициализируем Vue компонент.

7. css - Это место где можно добавить кастомные стили для текущего блока.

Так же, каждый блок имеет 2 дополнительные вкладки:
1. tests - тут можно добавть свои тесты для этого блока. Мы можем использовать всю мощь jest.
> Что бы запустить тесты надо нажать на кнопку test справа.

2. demo - тут можно писать JSX код который запускает этот блок с тестовыми данныи. Это упрощает тестирование и дебаг блоков. И не обязательно открывать веб приложение что бы увидить как отработает этот блок.

## Композиция приложения из блоков

> Блоки могут взаимодействовать с другими блоками и при этом быть не зависимы от них. Если сломается используемый блок то использующий не сломается.