Documentation de Mithril.js 2

Qu'est-ce que Mithril.js ?

Mithril.js est un framework JavaScript moderne côté client, conçu pour construire des applications monopages (Single Page Applications ou SPA). Il est léger (8.9 KiB gzip), rapide et fournit des utilitaires de routage et XHR intégrés.

Taille du téléchargement

Mithril.js (8.9 KiB)

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

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

Angular (135 KiB)

Performances

Mithril.js (6.4 ms)

Vue (9.8 ms)

React (12.1 ms)

Angular (11.5 ms)

Mithril.js est utilisé par des entreprises comme Vimeo et Nike, et des plateformes open source comme Lichess.

Vous êtes un développeur expérimenté ? Comparez Mithril.js à d'autres frameworks : comparaison des frameworks.

Mithril.js prend en charge IE11, Firefox ESR et les deux dernières versions de Firefox, Edge, Safari et Chrome. Aucun polyfill n'est requis.

Vous cherchez la documentation v1 ? Cliquez ici.

Pour commencer

Pour essayer Mithril.js facilement, incluez-le depuis un CDN et suivez ce tutoriel. Ce tutoriel couvre la majorité des fonctionnalités de l'API (routage et XHR inclus) en seulement 10 minutes.

Commençons par créer un fichier HTML :

html

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

    // Votre code ici !
  </script>
</body>

Pour simplifier, essayez Mithril.js directement ici. Ce terrain de jeu interactif, préchargé avec Mithril.js, est d'ailleurs développé avec Mithril lui-même.

var root = document.body;

// Votre code ici

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

Cliquez ici pour ouvrir l'exemple sur flems.io

Hello world

Commençons par le plus simple : afficher du texte à l'écran. Copiez le code ci-dessous dans votre fichier (mais pour mieux apprendre, tapez-le plutôt que de le copier-coller).

javascript

var root = document.body;

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

Maintenant, changeons le texte. Ajoutez cette ligne de code sous la précédente :

javascript

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

Comme vous pouvez le constater, vous utilisez le même code pour créer et mettre à jour le HTML. Mithril.js met à jour le texte de la manière la plus efficace, sans le recréer entièrement.

Exemple en direct

var root = document.body;

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

Éléments DOM

Entourons notre texte d'une balise <h1>.

javascript

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

La fonction m() permet de décrire n'importe quelle structure HTML. Par exemple, pour ajouter une classe au <h1> :

javascript

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

Pour inclure plusieurs éléments :

javascript

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

Etc. :

javascript

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

Exemple en direct

var root = document.body;

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

Remarque : Si vous préférez la syntaxe <html>, il est possible de l'utiliser via un plugin Babel.

jsx

// Syntaxe HTML via le plugin JSX de Babel
<main>
  <h1 class="title">My first app</h1>
  <button>A button</button>
</main>

Composants

Un composant Mithril.js est un simple objet doté d'une méthode view. Voici le code précédent transformé en composant :

javascript

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

Pour activer le composant, nous utilisons m.mount.

javascript

m.mount(root, Hello);

Comme vous pouvez vous y attendre, cela génère le balisage suivant :

html

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

La fonction m.mount est similaire à m.render, mais au lieu d'un rendu unique, elle active le système de rafraîchissement automatique de Mithril.js. Pour illustrer cela, ajoutons quelques événements :

javascript

var count = 0; // Ajout d'une variable

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

m.mount(root, Hello);

Nous avons défini un événement onclick sur le bouton, qui incrémente une variable count (qui a été déclarée en haut). Nous affichons maintenant également la valeur de cette variable dans le texte du bouton.

Vous pouvez maintenant mettre à jour le texte du bouton en cliquant dessus. Grâce à m.mount, il n'est pas nécessaire d'appeler m.render manuellement pour appliquer les modifications de la variable count au HTML ; Mithril.js s'en charge automatiquement.

Concernant les performances, Mithril.js est très rapide pour les mises à jour car il ne modifie que les parties du DOM strictement nécessaires. Ainsi, dans notre exemple ci-dessus, lorsque vous cliquez sur le bouton, le texte qu'il contient est la seule partie du DOM que Mithril.js met réellement à jour.

Exemple en direct

var root = document.body;
var count = 0; // Ajout d'une variable

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

Routage

Le routage consiste simplement à naviguer entre les différents écrans d'une application.

Ajoutons une page d'accueil qui s'affiche avant notre compteur de clics. Commençons par créer un composant pour cette page :

javascript

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

Comme vous pouvez le voir, ce composant affiche simplement un lien vers #!/hello. La partie #!, appelée hashbang, est une convention courante dans les applications monopages pour indiquer que la partie suivante (ici, /hello) est un chemin de route.

Maintenant que nous avons plusieurs écrans, utilisons m.route à la place de m.mount.

javascript

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

La fonction m.route conserve la fonctionnalité de rafraîchissement automatique de m.mount et active la reconnaissance des URLs ; en d'autres termes, elle indique à Mithril.js comment réagir à la présence d'un #! dans l'URL.

'/splash' après root indique la route par défaut. Si le hashbang de l'URL ne correspond à aucune des routes définies (/splash et /hello ici), Mithril.js redirige vers cette route par défaut. Donc, si vous ouvrez la page dans un navigateur et que votre URL est https://localhost, vous êtes redirigé vers https://localhost/#!/splash.

Comme vous pouvez le constater, cliquer sur le lien de la page d'accueil vous redirige vers le compteur de clics que nous avons créé précédemment. Notez que maintenant votre URL pointe vers https://localhost/#!/hello. Vous pouvez naviguer d'avant en arrière vers la page de présentation à l'aide des boutons précédent et suivant du navigateur.

Exemple en direct

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

En résumé, XHR est un moyen de communiquer avec un serveur.

Modifions notre compteur de clics pour enregistrer les données sur un serveur. Nous utiliserons REM comme serveur, une API REST simulée conçue pour les applications de démonstration comme celle-ci.

Commençons par créer une fonction qui appelle m.request. url spécifie le point de terminaison (une ressource), method le type d'action (généralement PUT pour upsert), body le contenu envoyé, et withCredentials active les cookies (requis par l'API REM).

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

L'appel de la fonction increment effectue un upsert de l'objet {count: 1} sur le point de terminaison /api/tutorial/1. Ce point de terminaison renvoie un objet avec la même valeur count qui lui a été envoyée. Notez que la variable count est mise à jour après la requête, avec la valeur renvoyée par le serveur.

Remplacez le gestionnaire d'événements du composant pour appeler la fonction increment au lieu d'incrémenter directement la variable count :

javascript

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

Cliquer sur le bouton devrait maintenant mettre à jour le compteur.

Exemple en direct

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

Nous avons vu comment créer et mettre à jour du HTML, comment créer des composants, des routes pour une application monopage et interagir avec un serveur via XHR.

Cela devrait suffire pour démarrer le développement du frontend d'une application réelle. Maintenant que vous maîtrisez les bases de l'API Mithril.js, consultez le tutoriel d'application simple qui vous guide dans la création d'une application concrète.

Documentation de Mithril.js 2 ​

Qu'est-ce que Mithril.js ? ​

Taille du téléchargement

Performances

Pour commencer ​

Hello world ​

Exemple en direct ​

Éléments DOM ​

Exemple en direct ​

Composants ​

Exemple en direct ​

Routage ​

Exemple en direct ​

XHR ​

Exemple en direct ​

Documentation de Mithril.js 2

Qu'est-ce que Mithril.js ?

Pour commencer

Hello world

Exemple en direct

Éléments DOM

Exemple en direct

Composants

Exemple en direct

Routage

Exemple en direct

XHR

Exemple en direct