Documentazione di Mithril.js 2
Cos'è Mithril.js?
Mithril.js è un framework JavaScript moderno lato client per la creazione di applicazioni a singola pagina (SPA). È di dimensioni ridotte (8.9 KiB gzip), veloce e fornisce routing e strumenti XHR pronti all'uso.
Dimensione di download
Mithril.js (8.9 KiB)Vue + Vue-Router + Vuex + fetch (40 KiB)React + React-Router + Redux + fetch (64 KiB)Angular (135 KiB)Prestazioni
Mithril.js (6.4 ms)Vue (9.8 ms)React (12.1 ms)Angular (11.5 ms)Mithril.js è utilizzato da aziende come Vimeo e Nike, nonché da piattaforme open source come Lichess.
Se sei uno sviluppatore esperto e vuoi sapere come Mithril.js si confronta con altri framework, consulta la pagina confronto fra framework.
Mithril.js supporta IE11, Firefox ESR e le ultime due versioni di Firefox, Edge, Safari e Chrome. Non sono richiesti polyfill.
Cerchi la documentazione della v1? Clicca qui.
Iniziare
Un modo semplice per provare Mithril.js è includerlo tramite una CDN e seguire questo tutorial. Verranno illustrate la maggior parte delle funzionalità dell'API (inclusi routing e XHR) e richiederà solo 10 minuti.
Creiamo un file HTML da utilizzare per seguire il tutorial:
<body>
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script>
var root = document.body;
// il tuo codice va qui!
</script>
</body>Per semplificare ulteriormente le cose, puoi provare Mithril.js direttamente qui. Questo è un playground live con Mithril.js precaricato che - tra l'altro - è anche costruito in Mithril.
var root = document.body;
// Il tuo codice qui
m.mount(root, {
view: function () {
return m('h1', 'Try me out');
},
});
Hello world
Iniziamo nel modo più semplice possibile: visualizziamo del testo sullo schermo. Copia il codice qui sotto nel tuo file (e per copia, intendo scrivilo - imparerai meglio):
var root = document.body;
m.render(root, 'Hello world');Ora, cambiamo il testo in qualcos'altro. Aggiungi questa riga di codice sotto quella precedente:
m.render(root, 'My first app');Come puoi vedere, usi lo stesso codice sia per creare che per aggiornare l'HTML. Mithril.js capisce automaticamente il modo più efficiente per aggiornare il testo, piuttosto che ricrearlo ciecamente da zero.
Esempio Live
var root = document.body;
m.render(root, 'Hello World');
Elementi DOM
Racchiudiamo il nostro testo in un tag <h1>.
m.render(root, m('h1', 'My first app'));La funzione m() può essere utilizzata per descrivere qualsiasi struttura HTML tu desideri. Quindi, se devi aggiungere una classe all'<h1>:
m('h1', { class: 'title' }, 'My first app');Se desideri avere più elementi:
[m('h1', { class: 'title' }, 'My first app'), m('button', 'A button')];E così via:
m('main', [
m('h1', { class: 'title' }, 'My first app'),
m('button', 'A button'),
]);Esempio Live
var root = document.body;
m.render(root, [
m('main', [
m('h1', { class: 'title' }, 'My first app'),
m('button', 'A button'),
]),
]);
Nota: se preferisci la sintassi <html>, è possibile utilizzarla tramite un plugin Babel.
// Sintassi HTML tramite il plugin JSX di Babel
<main>
<h1 class="title">My first app</h1>
<button>A button</button>
</main>Componenti
Un componente Mithril.js è fondamentalmente un oggetto con una funzione view. Ecco il codice sopra trasformato in un componente:
var Hello = {
view: function () {
return m('main', [
m('h1', { class: 'title' }, 'My first app'),
m('button', 'A button'),
]);
},
};Per montare il componente, usiamo m.mount.
m.mount(root, Hello);Come ci si aspetterebbe, questo genera il seguente markup:
<main>
<h1 class="title">My first app</h1>
<button>A button</button>
</main>La funzione m.mount è simile a m.render, ma invece di renderizzare l'HTML solo una volta, attiva il sistema di ridisegno automatico di Mithril.js. Per capire cosa significa, aggiungiamo alcuni eventi:
var count = 0; // aggiungiamo una variabile
var Hello = {
view: function () {
return m('main', [
m('h1', { class: 'title' }, 'My first app'),
// modifichiamo la riga successiva
m(
'button',
{
onclick: function () {
count++;
},
},
count + ' clicks'
),
]);
},
};
m.mount(root, Hello);Abbiamo definito un evento onclick sul button, che incrementa una variabile count (che è stata dichiarata in precedenza). Ora stiamo anche renderizzando il valore di quella variabile nell'etichetta del button.
Ora puoi aggiornare l'etichetta del button facendo clic sul button. Dato che abbiamo usato m.mount, non è necessario chiamare manualmente m.render per applicare le modifiche nella variabile count all'HTML; Mithril.js lo fa automaticamente.
Se ti stai chiedendo come influisce sulle prestazioni, Mithril.js è molto veloce nel renderizzare gli aggiornamenti, perché modifica solo le parti del DOM di cui ha assolutamente bisogno. Quindi, nel nostro esempio sopra, quando fai clic sul button, il testo al suo interno è l'unica parte del DOM che Mithril.js aggiorna effettivamente.
Esempio Live
var root = document.body;
var count = 0; // aggiungiamo una variabile
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);
Routing
Il routing consiste semplicemente nel passare da una schermata all'altra all'interno di un'applicazione con diverse schermate.
Aggiungiamo una pagina di benvenuto che appare prima del nostro contatore di clic. Prima creiamo un componente per essa:
var Splash = {
view: function () {
return m('a', { href: '#!/hello' }, 'Enter!');
},
};Come puoi vedere, questo componente genera un link a #!/hello. La parte #! è nota come hashbang ed è una convenzione comune utilizzata nelle applicazioni single-page per indicare che ciò che segue (la parte /hello) è un percorso di routing.
Ora che abbiamo più di una schermata, usiamo m.route invece di m.mount.
m.route(root, '/splash', {
'/splash': Splash,
'/hello': Hello,
});La funzione m.route mantiene la stessa funzionalità di ridisegno automatico di m.mount e abilita anche il riconoscimento degli URL; in altre parole, indica a Mithril.js cosa fare quando vede un #! nell'URL.
Il "/splash" subito dopo root significa che quella è la route predefinita, cioè se l'hashbang nell'URL non punta a una delle route definite (/splash e /hello, nel nostro caso), allora Mithril.js reindirizza alla route predefinita. Quindi, se apri la pagina in un browser e il tuo URL è https://localhost, allora vieni reindirizzato a https://localhost/#!/splash.
Inoltre, come ci si aspetterebbe, cliccando sul link nella splash page ti porta alla schermata del contatore di clic che abbiamo creato in precedenza. Nota che ora il tuo URL punterà a https://localhost/#!/hello. Puoi navigare avanti e indietro alla splash page usando i pulsanti indietro e avanti del browser.
Esempio Live
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
In sostanza, XHR è un metodo per comunicare con un server.
Modifichiamo il nostro contatore di clic per fare in modo che salvi i dati su un server. Per il server, useremo REM, una REST API mock progettata per applicazioni dimostrative come questo tutorial.
Prima creiamo una funzione che chiama m.request. L'url specifica un endpoint che rappresenta una risorsa, il method specifica il tipo di azione che stiamo intraprendendo (tipicamente il metodo PUT upserts), body è il contenuto che stiamo inviando all'endpoint e withCredentials significa abilitare i cookie (necessario per il funzionamento dell'API REM).
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);
});
};La chiamata alla funzione increment upserts un oggetto {count: 1} all'endpoint /api/tutorial/1. Questo endpoint restituisce un oggetto con lo stesso valore count che gli è stato inviato. Nota che la variabile count viene aggiornata solo dopo il completamento della richiesta, ed è aggiornata con il valore di risposta dal server.
Sostituiamo l'handler dell'evento nel componente per chiamare la funzione increment invece di incrementare direttamente la variabile count:
var Hello = {
view: function () {
return m('main', [
m('h1', { class: 'title' }, 'My first app'),
m('button', { onclick: increment }, count + ' clicks'),
]);
},
};Fare clic sul pulsante ora dovrebbe aggiornare il conteggio.
Esempio Live
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);
Abbiamo discusso come creare e aggiornare HTML, come creare componenti, come definire route per una Single Page Application e come comunicare con un server tramite XHR.
Questo dovrebbe essere sufficiente per iniziare a sviluppare il frontend per una vera applicazione. Ora che hai acquisito familiarità con le basi dell'API Mithril.js, si consiglia di consultare il tutorial sulla semplice applicazione, che ti guida attraverso la creazione di un'applicazione realistica.