---
# System prepended metadata

title: Introduction

---

# 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). 

![](https://i.imgur.com/LiHhviZ.png)



## Что такое 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.

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

![](https://i.imgur.com/5Z1pKVN.png)

Блок имеет дополнительные вкладки.
1. page - Это JSON описание страницы. (Эта вкладки используется только для блоков с типом `page`)
![](https://i.imgur.com/bhcTyY0.png)

2. props - Это JSON описание формы. (Эта вкладки используется только для блоков с типом `model`)
![](https://i.imgur.com/EnlWgjr.png)


3. server - Это код который будет выполняться когда сервер будет вызывать этот блок.
![](https://i.imgur.com/gVgpEYu.png)

4. jsx - Это код пользовательского интерфейса в формате JSX. На стороне сервера он рендериться в чистый html.
![](https://i.imgur.com/YhA6wz1.png)

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

    ![](https://i.imgur.com/WcY38wt.png)

6. client - Это просто код который будет рабоать на клиенте. И тут мы инициализируем Vue компонент.
![](https://i.imgur.com/npfe64Q.png)

7. css - Это место где можно добавить кастомные стили для текущего блока.
![](https://i.imgur.com/w8Q6TCT.png)

Так же, каждый блок имеет 2 дополнительные вкладки:
1. tests - тут можно добавть свои тесты для этого блока. Мы можем использовать всю мощь jest.
    > Что бы запустить тесты надо нажать на кнопку test справа.
    ![](https://i.imgur.com/5QeXvzt.png)

2. demo - тут можно писать JSX код который запускает этот блок с тестовыми данныи. Это упрощает тестирование и дебаг блоков. И не обязательно открывать веб приложение что бы увидить как отработает этот блок.
![](https://i.imgur.com/t8eQLdp.png)


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

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


