Dokumentace Mithril.js 2

Co je Mithril.js?

Mithril.js je moderní klientský JavaScriptový framework pro tvorbu Single Page Applications (SPA). Je malý (8.9 KiB gzip), rychlý a poskytuje směrování a XHR utility přímo v základu.

Velikost ke stažení

Mithril.js (8.9 KiB)

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

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

Angular (135 KiB)

Výkon

Mithril.js (6.4 ms)

Vue (9.8 ms)

React (12.1 ms)

Angular (11.5 ms)

Mithril.js používají společnosti jako Vimeo a Nike a open source platformy jako Lichess.

Pokud jste zkušený vývojář a chcete vědět, jak si Mithril.js stojí v porovnání s jinými frameworky, podívejte se na stránku porovnání frameworků.

Mithril.js podporuje IE11, Firefox ESR a poslední dvě verze Firefoxu, Edge, Safari a Chrome. Nejsou vyžadovány žádné polyfilly.

Hledáte dokumentaci k v1? Klikněte zde.

Začínáme

Jednoduchý způsob, jak si vyzkoušet Mithril.js, je načíst ho z CDN a postupovat podle tohoto tutoriálu. Pokryje většinu API (včetně routingu a XHR), ale zabere to jen 10 minut.

Vytvořme HTML soubor, se kterým budeme pracovat:

html

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

    // Sem vložte svůj kód!
  </script>
</body>

Pro zjednodušení si můžete Mithril.js vyzkoušet přímo zde. Toto je živé hřiště s předinstalovaným Mithril.js, které je mimochodem také postaveno v Mithrilu.

var root = document.body;

// Váš kód zde

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

Klikněte zde pro otevření ukázky na flems.io

Hello world

Začněme co nejjednodušeji: vykreslíme nějaký text na obrazovku. Zkopírujte následující kód do svého souboru (a tím kopírováním myslím, že ho napište - lépe se to naučíte).

javascript

var root = document.body;

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

Nyní změňme text na jiný. Přidejte tento řádek kódu pod ten předchozí:

javascript

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

Jak vidíte, používáte stejný kód k vytvoření i aktualizaci HTML. Mithril.js automaticky zjistí nejefektivnější způsob aktualizace textu, místo aby jej slepě znovu vytvářel od začátku.

Příklad v reálném čase

var root = document.body;

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

DOM elementy

Zabalme náš text do elementu <h1>.

javascript

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

Funkci m() můžete použít k popisu jakékoli HTML struktury, kterou potřebujete. Takže pokud potřebujete přidat třídu do <h1>:

javascript

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

Pokud chcete mít více elementů:

javascript

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

A tak dále:

javascript

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

Příklad v reálném čase

var root = document.body;

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

Poznámka: Pokud preferujete syntaxi <html>, je možné ji použít prostřednictvím pluginu Babel.

jsx

// HTML syntaxe prostřednictvím JSX pluginu Babel
<main>
  <h1 class="title">My first app</h1>
  <button>A button</button>
</main>

Komponenty

Komponenta v Mithril.js je objekt s funkcí view. Zde je kód výše jako komponenta:

javascript

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

K aktivaci komponenty používáme m.mount.

javascript

m.mount(root, Hello);

Jak byste očekávali, vytvoří se tím tato značka:

html

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

Funkce m.mount je podobná funkci m.render, ale místo vykreslení HTML pouze jednou aktivuje systém automatického překreslování Mithril.js. Abychom pochopili, co to znamená, přidejme nějaké události:

javascript

var count = 0; // Přidána proměnná

var Hello = {
  view: function () {
    return m('main', [
      m('h1', { class: 'title' }, 'My first app'),
      // Změněn následující řádek
      m(
        'button',
        {
          onclick: function () {
            count++;
          },
        },
        count + ' clicks'
      ),
    ]);
  },
};

m.mount(root, Hello);

Definovali jsme událost onclick na tlačítku, která inkrementuje proměnnou count (která byla deklarována nahoře). Nyní také vykreslujeme hodnotu této proměnné v popisku tlačítka.

Nyní můžete aktualizovat popisek tlačítka kliknutím na tlačítko. Protože jsme použili m.mount, nemusíte ručně volat m.render k aplikaci změn v proměnné count do HTML; Mithril.js to udělá za vás.

Pokud vás zajímá výkon, ukazuje se, že Mithril.js je velmi rychlý při vykreslování aktualizací, protože se dotýká pouze těch částí DOM, které absolutně potřebuje. Takže v našem příkladu výše, když kliknete na tlačítko, text v něm je jediná část DOM, kterou Mithril.js skutečně aktualizuje.

Příklad v reálném čase

var root = document.body;
var count = 0; // Přidána proměnná

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

Směrování (Routing)

Směrování jednoduše znamená přechod z jedné obrazovky na druhou v aplikaci s několika obrazovkami.

Přidejme úvodní stránku, která se zobrazí před naším čítačem kliknutí. Nejprve pro ni vytvoříme komponentu:

javascript

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

Jak vidíte, tato komponenta jednoduše vykresluje odkaz na #!/hello. Část #! je známá jako hashbang a je to běžná konvence používaná v Single Page Applications (SPA) k označení, že to, co je za ní (část /hello), je cesta (route).

Nyní, když budeme mít více než jednu obrazovku, použijeme m.route místo m.mount.

javascript

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

Funkce m.route má stále stejnou funkci automatického překreslování jako m.mount a také umožňuje rozpoznávání URL; jinými slovy, umožňuje Mithril.js vědět, co má dělat, když v URL uvidí #!.

"/splash" hned za root znamená, že to je výchozí cesta, tj. pokud hashbang v URL neodkazuje na jednu z definovaných cest (/splash a /hello v našem případě), pak Mithril.js přesměruje na výchozí cestu. Takže pokud otevřete stránku v prohlížeči a vaše URL je https://localhost, pak budete přesměrováni na https://localhost/#!/splash.

Také, jak byste očekávali, kliknutí na odkaz na úvodní stránce vás zavede na obrazovku čítače kliknutí, kterou jsme vytvořili dříve. Všimněte si, že nyní bude vaše URL odkazovat na https://localhost/#!/hello. Můžete se pohybovat tam a zpět na úvodní stránku pomocí tlačítek zpět a vpřed v prohlížeči.

Příklad v reálném čase

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

V podstatě je XHR způsob, jak komunikovat se serverem.

Změňme náš počítadlo kliknutí tak, aby ukládalo data na server. Pro server použijeme REM, demonstrační REST API navržené pro ukázkové aplikace, jako je tento tutoriál.

Nejprve vytvoříme funkci, která volá m.request. url určuje endpoint, který představuje zdroj, method určuje typ akce, kterou provádíme (typicky metoda PUT upserts), body je payload, který odesíláme do endpointu, a withCredentials znamená povolit cookies (požadavek pro fungování 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);
  });
};

Volání funkce increment provede upsert objektu {count: 1} do endpointu /api/tutorial/1. Tento endpoint vrací objekt se stejnou hodnotou count, která mu byla odeslána. Všimněte si, že proměnná count je aktualizována až po dokončení požadavku a je aktualizována s hodnotou odezvy ze serveru.

Nahraďme obsluhu události v komponentě, abychom volali funkci increment místo přímého inkrementování proměnné count:

javascript

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

Kliknutím na tlačítko by se nyní měl aktualizovat počet.

Příklad v reálném čase

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

Probrali jsme, jak vytvářet a aktualizovat HTML, jak vytvářet komponenty, routy pro Single Page Application a jak interagovat se serverem prostřednictvím XHR.

To by mělo stačit k tomu, abyste mohli začít psát frontend pro skutečnou aplikaci. Teď, když znáte základy Mithril.js API, nezapomeňte se podívat na tutoriál jednoduché aplikace, který vás provede sestavením realistické aplikace.

Dokumentace Mithril.js 2 ​

Co je Mithril.js? ​

Velikost ke stažení

Výkon

Začínáme ​

Hello world ​

Příklad v reálném čase ​

DOM elementy ​

Příklad v reálném čase ​

Komponenty ​

Příklad v reálném čase ​

Směrování (Routing) ​

Příklad v reálném čase ​

XHR ​

Příklad v reálném čase ​

Dokumentace Mithril.js 2

Co je Mithril.js?

Začínáme

Hello world

Příklad v reálném čase

DOM elementy

Příklad v reálném čase

Komponenty

Příklad v reálném čase

Směrování (Routing)

Příklad v reálném čase

XHR

Příklad v reálném čase