Documentação do Mithril.js 2

O que é Mithril.js?

Mithril.js é um framework JavaScript moderno para o lado do cliente, utilizado para construir Aplicações de Página Única (SPAs). É leve (8.9 KiB gzip), rápido e oferece utilitários de roteamento e XHR (XMLHttpRequest) out of the box.

Tamanho de download

Mithril.js (8.9 KiB)

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

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

Angular (135 KiB)

Desempenho

Mithril.js (6.4 ms)

Vue (9.8 ms)

React (12.1 ms)

Angular (11.5 ms)

Mithril.js é utilizado por empresas como Vimeo e Nike, além de plataformas de código aberto como Lichess.

Se você é um desenvolvedor experiente e deseja saber como o Mithril.js se compara a outros frameworks, consulte a página de comparação de frameworks.

Mithril.js suporta IE11, Firefox ESR e as duas últimas versões de Firefox, Edge, Safari e Chrome. Não são necessários polyfills.

Procurando pela documentação da v1? Clique aqui.

Introdução

Uma maneira simples de experimentar o Mithril.js é incluí-lo a partir de um CDN e seguir este tutorial. Ele abordará a maior parte das funcionalidades da API (incluindo roteamento e XHR) e levará apenas 10 minutos.

Vamos criar um arquivo HTML para acompanhar o tutorial:

html

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

    // Seu código vai aqui!
  </script>
</body>

Para facilitar, você pode experimentar o Mithril.js aqui mesmo. Este é um ambiente interativo com o Mithril.js pré-carregado, que, a propósito, também foi construído com Mithril.

var root = document.body;

// Seu código aqui

m.mount(root, {
  view: function () {
    return m('h1', 'Teste agora');
  },
});

Clique aqui para abrir o exemplo no flems.io

Olá mundo

Vamos começar com o mínimo: renderizar um texto na tela. Copie o código abaixo para o seu arquivo (e, por copiar, quero dizer, digite-o – você aprenderá melhor).

javascript

var root = document.body;

m.render(root, 'Olá mundo');

Agora, vamos mudar o texto para outra coisa. Adicione esta linha de código abaixo da anterior:

javascript

m.render(root, 'Meu primeiro aplicativo');

Como você pode notar, utiliza-se o mesmo código para criar e atualizar o HTML. O Mithril.js descobre automaticamente a maneira mais eficiente de atualizar o texto, em vez de recriá-lo do zero.

Exemplo ao vivo

var root = document.body;

m.render(root, 'Olá Mundo');

Elementos DOM

Vamos inserir nosso texto em uma tag <h1>.

javascript

m.render(root, m('h1', 'Meu primeiro aplicativo'));

A função m() pode ser usada para descrever qualquer estrutura HTML que você desejar. Então, se você precisar adicionar uma classe ao <h1>:

javascript

m('h1', { class: 'title' }, 'Meu primeiro aplicativo');

Se você quiser ter múltiplos elementos:

javascript

[m('h1', { class: 'title' }, 'Meu primeiro aplicativo'), m('button', 'Um botão')];

E assim por diante:

javascript

m('main', [
  m('h1', { class: 'title' }, 'Meu primeiro aplicativo'),
  m('button', 'Um botão'),
]);

Exemplo ao vivo

var root = document.body;

m.render(root, [
  m('main', [
    m('h1', { class: 'title' }, 'Meu primeiro aplicativo'),
    m('button', 'Um botão'),
  ]),
]);

Nota: Se você preferir a sintaxe <html>, é possível usá-la através de um plugin Babel.

jsx

// Sintaxe HTML via plugin JSX do Babel
<main>
  <h1 class="title">Meu primeiro aplicativo</h1>
  <button>Um botão</button>
</main>

Componentes

Um componente do Mithril.js é um objeto com uma função view. Aqui está o código acima como um componente:

javascript

var Hello = {
  view: function () {
    return m('main', [
      m('h1', { class: 'title' }, 'Meu primeiro aplicativo'),
      m('button', 'Um botão'),
    ]);
  },
};

Para ativar o componente, usamos m.mount.

javascript

m.mount(root, Hello);

Como você esperaria, fazer isso cria esta marcação:

html

<main>
  <h1 class="title">Meu primeiro aplicativo</h1>
  <button>Um botão</button>
</main>

A função m.mount é semelhante a m.render, mas, em vez de renderizar HTML apenas uma vez, ela ativa o sistema de redesenho automático do Mithril.js. Para entender o que isso significa, vamos adicionar alguns eventos:

javascript

var count = 0; // adicionada uma variável

var Hello = {
  view: function () {
    return m('main', [
      m('h1', { class: 'title' }, 'Meu primeiro aplicativo'),
      // mudou a próxima linha
      m(
        'button',
        {
          onclick: function () {
            count++;
          },
        },
        count + ' cliques'
      ),
    ]);
  },
};

m.mount(root, Hello);

Nós definimos um evento onclick no botão, que incrementa uma variável count (que foi declarada no topo). Agora também estamos renderizando o valor dessa variável no texto do botão.

Você pode agora atualizar o texto do botão clicando no botão. Já que usamos m.mount, você não precisa chamar m.render manualmente para aplicar as alterações da variável count ao HTML; o Mithril.js faz isso automaticamente.

Se você está se perguntando sobre o desempenho, acontece que o Mithril.js é muito rápido em renderizar atualizações, porque ele só toca nas partes do DOM que ele absolutamente precisa. Então, em nosso exemplo acima, quando você clica no botão, o texto nele é a única parte do DOM que o Mithril.js realmente atualiza.

Exemplo ao vivo

var root = document.body;
var count = 0; // adicionada uma variável

var Hello = {
  view: function () {
    return m('main', [
      m(
        'h1',
        {
          class: 'title',
        },
        'Meu primeiro aplicativo'
      ),
      m(
        'button',
        {
          onclick: function () {
            count++;
          },
        },
        count + ' cliques'
      ),
    ]);
  },
};

m.mount(root, Hello);

Roteamento

Roteamento (routing) refere-se à navegação entre diferentes telas em uma aplicação.

Vamos adicionar uma página inicial que aparece antes do nosso contador de cliques. Primeiro, criamos um componente para ela:

javascript

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

Como você pode ver, este componente simplesmente renderiza um link para #!/hello. A parte #! é conhecida como hashbang e é uma convenção comum em Aplicações de Página Única para indicar que o conteúdo subsequente (a parte /hello) representa um caminho de rota.

Agora que vamos ter mais de uma tela, usamos m.route em vez de m.mount.

javascript

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

A função m.route ainda tem a mesma funcionalidade de redesenho automático que m.mount tem, e também habilita o reconhecimento de URL; em outras palavras, ela permite que o Mithril.js saiba o que fazer quando ele vê um #! na URL.

O "/splash" após root define a rota padrão (default route), ou seja, se o hashbang na URL não corresponder a uma das rotas definidas (/splash e /hello, neste caso), o Mithril.js redirecionará para a rota padrão. Então, se você abrir a página em um navegador e sua URL for https://localhost, então você será redirecionado para https://localhost/#!/splash.

Além disso, como você esperaria, clicar no link na página inicial leva você para a tela do contador de cliques que criamos anteriormente. Note que agora sua URL apontará para https://localhost/#!/hello. Você pode navegar para frente e para trás para a página inicial usando os botões de voltar e avançar do navegador.

Exemplo ao vivo

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

var Hello = {
  view: function () {
    return m('main', [
      m(
        'h1',
        {
          class: 'title',
        },
        'Meu primeiro aplicativo'
      ),
      m(
        'button',
        {
          onclick: function () {
            count++;
          },
        },
        count + ' cliques'
      ),
    ]);
  },
};

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

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

XHR

Basicamente, XHR (XMLHttpRequest) é uma forma de comunicação com um servidor.

Vamos mudar nosso contador de cliques para fazê-lo salvar dados em um servidor. Para o servidor, usaremos REM, uma API REST mock projetada para aplicativos de exemplo como este tutorial.

Primeiro, criamos uma função que chama m.request. A url especifica um endpoint que representa um recurso, o method especifica o tipo de ação que estamos tomando (tipicamente o método PUT upserts), body é a carga que estamos enviando para o endpoint e withCredentials significa habilitar cookies (um requisito para a API REM funcionar).

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);
  });
};

Chamar a função increment upserts um objeto {count: 1} para o endpoint /api/tutorial/1. Este endpoint retorna um objeto com o mesmo valor de count que foi enviado para ele. Note que a variável count só é atualizada após a requisição ser completada, e é atualizada com o valor de resposta do servidor agora.

Vamos substituir o event handler no componente para chamar a função increment em vez de incrementar diretamente a variável count:

javascript

var Hello = {
  view: function () {
    return m('main', [
      m('h1', { class: 'title' }, 'Meu primeiro aplicativo'),
      m('button', { onclick: increment }, count + ' cliques'),
    ]);
  },
};

Clicar no botão agora deve atualizar a contagem.

Exemplo ao vivo

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',
        },
        'Meu primeiro aplicativo'
      ),
      m(
        'button',
        {
          onclick: increment,
        },
        count + ' cliques'
      ),
    ]);
  },
};

m.mount(root, Hello);

Nós cobrimos como criar e atualizar HTML, como criar componentes, rotas para uma Aplicação de Página Única e como interagir com um servidor via XHR.

Isto deve ser suficiente para você começar a desenvolver o frontend de uma aplicação real. Agora que você está familiarizado com os fundamentos da API do Mithril.js, certifique-se de consultar o tutorial de aplicação simples, que o guiará na construção de uma aplicação realista.

Documentação do Mithril.js 2 ​

O que é Mithril.js? ​

Tamanho de download

Desempenho

Introdução ​

Olá mundo ​

Exemplo ao vivo ​

Elementos DOM ​

Exemplo ao vivo ​

Componentes ​

Exemplo ao vivo ​

Roteamento ​

Exemplo ao vivo ​

XHR ​

Exemplo ao vivo ​

Documentação do Mithril.js 2

O que é Mithril.js?

Introdução

Olá mundo

Exemplo ao vivo

Elementos DOM

Exemplo ao vivo

Componentes

Exemplo ao vivo

Roteamento

Exemplo ao vivo

XHR

Exemplo ao vivo