Документация Mithril.js 2

Что такое Mithril.js?

Mithril.js — это современный клиентский JavaScript-фреймворк для создания одностраничных приложений (SPA). Он компактный (8.9 KiB в gzip), быстрый и предоставляет готовые инструменты для маршрутизации и XHR.

Размер загрузки

Mithril.js (8.9 KiB)

Vue + Vue-Router + Vuex + fetch (40 KiB)

React + React-Router + Redux + fetch (64 KiB)

Angular (135 KiB)

Производительность

Mithril.js (6.4 ms)

Vue (9.8 ms)

React (12.1 ms)

Angular (11.5 ms)

Mithril.js используется такими компаниями, как Vimeo и Nike, а также проектами с открытым исходным кодом, такими как Lichess.

Если вы опытный разработчик и хотите узнать, как Mithril.js соотносится с другими фреймворками, смотрите страницу сравнения фреймворков.

Mithril.js поддерживает IE11, Firefox ESR и последние две версии Firefox, Edge, Safari и Chrome. Полифилы не требуются.

Ищете документацию v1? Нажмите здесь.

С чего начать

Простой способ попробовать Mithril.js — это подключить его через CDN и следовать этому руководству. Оно охватывает большую часть API (включая маршрутизацию и XHR), но займет всего 10 минут.

Давайте создадим HTML-файл для выполнения инструкций:

html

<body>
  <script src="https://unpkg.com/mithril/mithril.js"></script>
  <script>
    var root = document.body;

    // Здесь будет ваш код!
  </script>
</body>

Чтобы упростить процесс, вы можете попробовать Mithril.js прямо здесь. Это живая песочница с предварительно загруженным Mithril.js, которая, кстати, тоже реализована на Mithril.

var root = document.body;

// Ваш код здесь

m.mount(root, {
  view: function () {
    return m('h1', 'Try me out');
  },
});

Нажмите здесь, чтобы открыть пример на flems.io

Hello world

Начнем с малого: выведем текст на экран. Напечатайте его вручную — так материал усвоится лучше.

javascript

var root = document.body;

m.render(root, 'Hello world');

Теперь давайте изменим текст на что-нибудь другое. Добавьте эту строку кода под предыдущей:

javascript

m.render(root, 'My first app');

Как видите, вы используете один и тот же код как для создания, так и для обновления HTML-кода. Mithril.js автоматически определяет наиболее эффективный способ обновления текста, а не слепо воссоздает его с нуля.

Живой пример

var root = document.body;

m.render(root, 'Hello World');

DOM-элементы

Давайте обернем текст в тег <h1>.

javascript

m.render(root, m('h1', 'My first app'));

Функция m() может использоваться для создания любой HTML-структуры, которую вы хотите. Итак, если вам нужно добавить класс к <h1>:

javascript

m('h1', { class: 'title' }, 'My first app');

Если вы хотите иметь несколько элементов:

javascript

[m('h1', { class: 'title' }, 'My first app'), m('button', 'A button')];

И так далее:

javascript

m('main', [
  m('h1', { class: 'title' }, 'My first app'),
  m('button', 'A button'),
]);

Живой пример

var root = document.body;

m.render(root, [
  m('main', [
    m('h1', { class: 'title' }, 'My first app'),
    m('button', 'A button'),
  ]),
]);

Примечание: Если вы предпочитаете синтаксис <html>, его можно использовать через плагин Babel.

jsx

// HTML синтаксис через JSX плагин Babel
<main>
  <h1 class="title">My first app</h1>
  <button>A button</button>
</main>

Компоненты

Компонент Mithril.js — это объект с функцией view. Вот код выше в виде компонента:

javascript

var Hello = {
  view: function () {
    return m('main', [
      m('h1', { class: 'title' }, 'My first app'),
      m('button', 'A button'),
    ]);
  },
};

Чтобы активировать компонент, мы используем m.mount.

javascript

m.mount(root, Hello);

Как и ожидалось, это создает следующую разметку:

html

<main>
  <h1 class="title">My first app</h1>
  <button>A button</button>
</main>

Функция m.mount похожа на m.render, но, в отличие от нее, она активирует систему автоматической перерисовки Mithril.js. Чтобы понять, что это значит, давайте добавим несколько событий:

javascript

var count = 0; // добавлена переменная

var Hello = {
  view: function () {
    return m('main', [
      m('h1', { class: 'title' }, 'My first app'),
      // изменена следующая строка
      m(
        'button',
        {
          onclick: function () {
            count++;
          },
        },
        count + ' clicks'
      ),
    ]);
  },
};

m.mount(root, Hello);

Мы определили событие onclick на кнопке, которое увеличивает значение переменной count. Теперь мы также отображаем значение этой переменной в тексте кнопки.

Теперь вы можете обновить текст кнопки, нажав на кнопку. Поскольку мы использовали m.mount, вам не нужно вручную вызывать m.render, чтобы применить изменения в переменной count к HTML; Mithril.js делает это за вас.

Если вам интересно узнать о производительности, то Mithril.js очень быстро выполняет обновления рендеринга, потому что он затрагивает только те части DOM, которые ему абсолютно необходимы. Итак, в нашем примере выше, когда вы нажимаете кнопку, текст в ней — это единственная часть DOM, которую Mithril.js фактически обновляет.

Живой пример

var root = document.body;
var count = 0; // добавлена переменная

var Hello = {
  view: function () {
    return m('main', [
      m(
        'h1',
        {
          class: 'title',
        },
        'My first app'
      ),
      m(
        'button',
        {
          onclick: function () {
            count++;
          },
        },
        count + ' clicks'
      ),
    ]);
  },
};

m.mount(root, Hello);

Маршрутизация

Маршрутизация — это просто переход между экранами в приложении с несколькими экранами.

Давайте добавим заставку, которая появляется перед нашим счетчиком кликов. Сначала мы создадим компонент для нее:

javascript

var Splash = {
  view: function () {
    return m('a', { href: '#!/hello' }, 'Enter!');
  },
};

Как видите, этот компонент просто отображает ссылку на #!/hello. Символ #! называется hashbang и часто используется в одностраничных приложениях для обозначения пути маршрута (например, /hello).

Теперь, когда у нас будет несколько экранов, мы будем использовать m.route вместо m.mount.

javascript

m.route(root, '/splash', {
  '/splash': Splash,
  '/hello': Hello,
});

Функция m.route по-прежнему обладает той же функциональностью автоматической перерисовки, что и m.mount, а также включает в себя отслеживание URL-адреса; другими словами, она позволяет Mithril.js знать, что делать, когда он видит #! в URL-адресе.

"/splash" сразу после root означает, что это маршрут по умолчанию, то есть если хеш-банг в URL-адресе не указывает на один из определенных маршрутов (/splash и /hello в нашем случае), то Mithril.js перенаправляет на маршрут по умолчанию. Итак, если вы откроете страницу в браузере и ваш URL-адрес будет https://localhost, то вы будете перенаправлены на https://localhost/#!/splash.

Кроме того, как и следовало ожидать, нажатие на ссылку на заставке перенесет вас на экран счетчика кликов, который мы создали ранее. Обратите внимание, что теперь ваш URL-адрес будет указывать на https://localhost/#!/hello. Вы можете перемещаться вперед и назад к заставке, используя кнопки "назад" и "вперед" в браузере.

Живой пример

var root = document.body;
var count = 0;

var Hello = {
  view: function () {
    return m('main', [
      m(
        'h1',
        {
          class: 'title',
        },
        'My first app'
      ),
      m(
        'button',
        {
          onclick: function () {
            count++;
          },
        },
        count + ' clicks'
      ),
    ]);
  },
};

var Splash = {
  view: function () {
    return m(
      'a',
      {
        href: '#!/hello',
      },
      'Enter!'
    );
  },
};

m.route(root, '/splash', {
  '/splash': Splash,
  '/hello': Hello,
});

XHR

По сути, XHR — это просто метод взаимодействия с сервером.

Давайте изменим наш счетчик кликов, чтобы он сохранял данные на сервере. В качестве сервера мы будем использовать REM, mock REST API, разработанный для игрушечных приложений, таких как этот учебник.

Сначала мы создадим функцию, которая вызывает m.request. url указывает эндпоинт, который представляет ресурс, method указывает тип действия, которое мы выполняем (обычно метод PUT upserts), body — это данные, которые мы отправляем в эндпоинт, а withCredentials означает включить cookies (требование для работы REM API).

javascript

var count = 0;
var increment = function () {
  m.request({
    method: 'PUT',
    url: '//mithril-rem.fly.dev/api/tutorial/1',
    body: { count: count + 1 },
    withCredentials: true,
  }).then(function (data) {
    count = parseInt(data.count);
  });
};

Вызов функции increment upserts объект {count: 1} в эндпоинт /api/tutorial/1. Эта конечная точка возвращает объект с тем же значением count. Обратите внимание, что переменная count обновляется только после завершения запроса и обновляется значением ответа с сервера.

Давайте заменим обработчик событий в компоненте, чтобы вызывать функцию increment вместо непосредственного увеличения переменной count:

javascript

var Hello = {
  view: function () {
    return m('main', [
      m('h1', { class: 'title' }, 'My first app'),
      m('button', { onclick: increment }, count + ' clicks'),
    ]);
  },
};

Нажатие кнопки теперь должно обновить счетчик.

Живой пример

var root = document.body;
var count = 0;

var increment = function () {
  m.request({
    method: 'PUT',
    url: '//mithril-rem.fly.dev/api/tutorial/1',
    body: { count: count + 1 },
    withCredentials: true,
  }).then(function (data) {
    count = parseInt(data.count);
  });
};

var Hello = {
  view: function () {
    return m('main', [
      m(
        'h1',
        {
          class: 'title',
        },
        'My first app'
      ),
      m(
        'button',
        {
          onclick: increment,
        },
        count + ' clicks'
      ),
    ]);
  },
};

m.mount(root, Hello);

Мы рассмотрели, как создавать и обновлять HTML, как создавать компоненты, маршруты для одностраничного приложения и взаимодействовать с сервером через XHR.

Этого должно быть достаточно, чтобы начать писать клиентскую часть реального приложения. Теперь, когда вы освоились с основами API Mithril.js, обязательно ознакомьтесь с учебником по простому приложению, который проведет вас через создание реалистичного приложения.

Документация Mithril.js 2 ​

Что такое Mithril.js? ​

Размер загрузки

Производительность

С чего начать ​

Hello world ​

Живой пример ​

DOM-элементы ​

Живой пример ​

Компоненты ​

Живой пример ​

Маршрутизация ​

Живой пример ​

XHR ​

Живой пример ​

Документация Mithril.js 2

Что такое Mithril.js?

С чего начать

Hello world

Живой пример

DOM-элементы

Живой пример

Компоненты

Живой пример

Маршрутизация

Живой пример

XHR

Живой пример