Mithril.js 2 Dokümantasyonu

Mithril.js nedir?

Mithril.js, Tek Sayfa Uygulamaları (SPA) geliştirmek için kullanılan modern bir istemci tarafı JavaScript çatısıdır. Küçüktür (8.9 KiB gzip), hızlıdır ve kullanıma hazır yönlendirme ve XHR araçları sunar.

Dosya boyutu

Mithril.js (8.9 KiB)

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

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

Angular (135 KiB)

Performans

Mithril.js (6.4 ms)

Vue (9.8 ms)

React (12.1 ms)

Angular (11.5 ms)

Mithril.js, Vimeo ve Nike gibi şirketler ve Lichess gibi açık kaynak platformları tarafından kullanılmaktadır.

Eğer deneyimli bir geliştiriciyseniz ve Mithril.js'nin diğer framework'lerle nasıl karşılaştırıldığını öğrenmek istiyorsanız, framework karşılaştırması sayfasına göz atın.

Mithril.js, IE11, Firefox ESR ve Firefox, Edge, Safari ve Chrome'un son iki sürümünü destekler. Herhangi bir polyfill'e ihtiyaç duymaz.

v1 dokümanlarını mı arıyorsunuz? Buraya tıklayın.

Başlarken

Mithril.js'yi denemenin en kolay yolu, onu bir CDN'den dahil etmek ve bu öğreticiyi takip etmektir. Bu öğretici, API'nin yönlendirme ve XHR gibi birçok özelliğini kapsayacak ve sadece 10 dakika sürecektir.

Takip etmek için bir HTML dosyası oluşturalım:

html

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

    // kodunuz buraya gelecek!
  </script>
</body>

İşleri daha basit hale getirmek için Mithril.js'yi doğrudan buradan deneyebilirsiniz. Bu, Mithril.js'nin önceden yüklendiği canlı bir oyun alanıdır ve bu arada - aynı zamanda Mithril ile oluşturulmuştur.

var root = document.body;

// Kodunuz burada

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

flems.io üzerinde örneği açmak için buraya tıklayın

Merhaba dünya

Olabildiğince küçükten başlayalım: ekrana biraz metin yazdıralım. Aşağıdaki kodu dosyanıza yazın (kopyala yapıştırmak yerine yazarak öğrenmeniz daha iyi olacaktır).

javascript

var root = document.body;

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

Şimdi, metni başka bir şeyle değiştirelim. Önceki kodun altına bu satırı ekleyin:

javascript

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

Gördüğünüz gibi, HTML oluşturmak ve güncellemek için aynı kodu kullanıyorsunuz. Mithril.js, metni sıfırdan yeniden oluşturmak yerine, metni güncellemenin en verimli yolunu otomatik olarak bulur.

Canlı Örnek

var root = document.body;

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

DOM elemanları

Metnimizi bir <h1> etiketi içine saralım.

javascript

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

m() fonksiyonu, istediğiniz herhangi bir HTML yapısını tanımlamak için kullanılabilir. Örneğin, <h1> etiketine bir sınıf eklemek isterseniz:

javascript

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

Birden fazla elemana sahip olmak isterseniz:

javascript

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

Ve böyle devam eder:

javascript

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

Canlı Örnek

var root = document.body;

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

Not: Eğer <html> sözdizimini tercih ediyorsanız, bir Babel eklentisi aracılığıyla kullanmak mümkündür.

jsx

// Babel'in JSX eklentisi aracılığıyla HTML sözdizimi
<main>
  <h1 class="title">My first app</h1>
  <button>A button</button>
</main>

Bileşenler

Mithril.js bileşeni, sadece bir view fonksiyonu içeren bir nesnedir. İşte yukarıdaki kodun bir bileşen olarak yazılmış hali:

javascript

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

Bileşeni etkinleştirmek için m.mount kullanırız.

javascript

m.mount(root, Hello);

Beklediğiniz gibi, bu işlem aşağıdaki HTML'i oluşturur:

html

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

m.mount fonksiyonu m.render'a benzer, ancak yalnızca bir kez HTML oluşturmak yerine, Mithril.js'nin otomatik yeniden çizim sistemini etkinleştirir. Bunun ne anlama geldiğini anlamak için, bir sayaç değişkeni ekleyip bazı olaylar tanımlayalım:

javascript

var count = 0; // bir sayaç değişkeni eklendi

var Hello = {
  view: function () {
    return m('main', [
      m('h1', { class: 'title' }, 'My first app'),
      // sonraki satır değiştirildi
      m(
        'button',
        {
          onclick: function () {
            count++;
          },
        },
        count + ' clicks'
      ),
    ]);
  },
};

m.mount(root, Hello);

Düğmeye bir onclick olayı ekledik, bu da bir count değişkenini artırır (en üstte tanımlandı). Şimdi de bu değişkenin değerini düğme etiketinde yazdırıyoruz.

Artık düğmeye tıklayarak düğmenin etiketini güncelleyebilirsiniz. m.mount kullandığımız için, count değişkenindeki değişiklikleri HTML'ye uygulamak için manuel olarak m.render çağırmanıza gerek yoktur; Mithril.js bunu sizin için yapar.

Performansı merak ediyorsanız, Mithril.js'nin güncellemeleri oluşturmada çok hızlı olduğu ortaya çıktı, çünkü DOM'un yalnızca kesinlikle ihtiyaç duyduğu kısımlarına dokunuyor. Yani yukarıdaki örneğimizde, düğmeye tıkladığınızda, içindeki metin, Mithril.js'nin güncellediği tek DOM kısmıdır.

Canlı Örnek

var root = document.body;
var count = 0; // bir sayaç değişkeni eklendi

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

Yönlendirme (Routing)

Yönlendirme, birden fazla ekranı olan uygulamalarda bir ekrandan diğerine geçiş yapma işlemidir.

Tıklama sayacımızdan önce görünen bir açılış sayfası ekleyelim. İlk olarak bunun için bir bileşen oluşturuyoruz:

javascript

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

Gördüğünüz gibi, bu bileşen basitçe #!/hello adresine bir bağlantı oluşturur. #! kısmı hashbang olarak bilinir ve Tek Sayfa Uygulamalarında (Single Page Applications) yaygın olarak kullanılan bir kuraldır ve bundan sonraki kısmın (/hello kısmı) bir rota yolu olduğunu belirtir.

Artık birden fazla ekranımız olacağına göre, m.mount yerine m.route kullanıyoruz.

javascript

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

m.route fonksiyonu hala m.mount ile aynı otomatik yeniden çizim işlevine sahiptir ve ayrıca URL farkındalığını sağlar; başka bir deyişle, URL'de bir #! gördüğünde Mithril.js'nin ne yapacağını bilmesini sağlar.

root'tan hemen sonraki "/splash", varsayılan rota olduğu anlamına gelir, yani URL'deki hashbang tanımlı rotalardan birine işaret etmiyorsa (/splash ve /hello, bizim durumumuzda), Mithril.js varsayılan rotaya yönlendirir. Yani sayfayı bir tarayıcıda açarsanız ve URL'niz https://localhost ise, https://localhost/#!/splash adresine yönlendirilirsiniz.

Ayrıca, beklediğiniz gibi, açılış sayfasındaki bağlantıya tıklamak sizi daha önce oluşturduğumuz tıklama sayacı ekranına götürür. Şimdi URL'nizin https://localhost/#!/hello adresine işaret edeceğini unutmayın. Tarayıcının geri ve ileri düğmesini kullanarak açılış sayfasına geri ve ileri gidebilirsiniz.

Canlı Örnek

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

Temel olarak, XHR sadece bir sunucuyla iletişim kurmanın bir yoludur.

Tıklama sayacımızı bir sunucuda veri kaydedecek şekilde değiştirelim. Sunucu için, bu öğretici gibi oyuncak uygulamalar için tasarlanmış bir sahte REST API'si olan REM'i kullanacağız.

İlk olarak m.request'i çağıran bir fonksiyon oluşturuyoruz. url, bir kaynağı temsil eden bir uç noktayı belirtir, method, yaptığımız eylemin türünü belirtir (tipik olarak PUT metodu upsert işlemini yapar), body, uç noktaya gönderdiğimiz veridir ve withCredentials, çerezleri etkinleştirmek anlamına gelir (REM API'sinin çalışması için bir gereklilik).

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 fonksiyonunu çağırmak, /api/tutorial/1 uç noktasına bir {count: 1} nesnesini ekler veya günceller (upsert). Bu uç nokta, kendisine gönderilen aynı count değerine sahip bir nesne döndürür. count değişkeninin yalnızca istek tamamlandıktan sonra güncellendiğine ve şimdi sunucudan gelen yanıt değeriyle güncellendiğine dikkat edin.

count değişkenini doğrudan artırmak yerine increment fonksiyonunu çağırmak için bileşendeki olay dinleyicisini değiştirelim:

javascript

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

Düğmeye tıkladığınızda sayının güncellenmesi gerekir.

Canlı Örnek

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'nin nasıl oluşturulacağını ve güncelleneceğini, bileşenlerin nasıl oluşturulacağını, Tek Sayfa Uygulaması için rotaların nasıl oluşturulacağını ve XHR aracılığıyla bir sunucuyla nasıl etkileşimde bulunulacağını öğrendik.

Bu, gerçek bir uygulamanın ön yüzünü yazmaya başlamanız için yeterli olmalıdır. Artık Mithril.js API'sinin temellerine aşina olduğunuza göre, gerçekçi bir uygulama oluşturma konusunda size yol gösteren basit uygulama öğreticisine göz atmayı unutmayın.

Mithril.js 2 Dokümantasyonu ​

Mithril.js nedir? ​

Dosya boyutu

Performans

Başlarken ​

Merhaba dünya ​

Canlı Örnek ​

DOM elemanları ​

Canlı Örnek ​

Bileşenler ​

Canlı Örnek ​

Yönlendirme (Routing) ​

Canlı Örnek ​

XHR ​

Canlı Örnek ​

Mithril.js 2 Dokümantasyonu

Mithril.js nedir?

Başlarken

Merhaba dünya

Canlı Örnek

DOM elemanları

Canlı Örnek

Bileşenler

Canlı Örnek

Yönlendirme (Routing)

Canlı Örnek

XHR

Canlı Örnek