Özgür GÜL

Mithril.js

Geliştireceğim bir web projesi için single page application destekleyen bir web framework aramaktaydım.

İstediğim özellikler şunlardı:

Bunları göz önüne aldığımda aradığım kütüphanin sadece benim hayal dünyamda olduğumdan emindim. Ta ki Mithril.js ile karşılaşana kadar. Benim istediğim özelliklerin hepsini kapsaması dışında ekstra özellikleri de var:

Son zamanlarda kullandığım en kullanışlı kütüphane diyebilirim.

Nedir bu Mithril.js?

Kendisi web uygulamaları geliştirmemize yarayan bir araç. Örnek bir modül oluşturacak olursak:

import m from 'mithril'

var Site = {
    view: function() {
        return m("div", "Merhaba dünya!")
    }
}

Üstteki kod parçası, bize içinde Merhaba dünya yazan bir bileşen döndürüyor. Kullanımı şu şekilde olabilir:

import m from 'mithril'
import Site from './Site'

window.onload = function () {

    m.mount(document.getElementById("app"), Site)

}

Basit bir site için karmaşık gözüktüğünü kabul ediyorum. Ayrıca m("div", {}) yazım şekli biraz karmaşık. Mithril.js, Reactjs’in de tercih ettiği yazım stilini kullanıyor, O yüzden transform-react-jsx isimli babel pluginini sayfa başına /** @jsx m */ koymak şartıyla kullanabilirsiniz.

Artık şu şekilde bileşenler oluşturulabilir:


/** @jsx m */

import m from 'mithril'

var Site = {
    view: function() {
        return <div>Merhaba dünya</div>
    }
}

Konsepti anlamak açısından Tablo diye bir bileşen oluşturacağım. İçine bizim göndereceğimiz verileri kullanıcıya gösteren bir bileşen:


/** @jsx m */

import m from 'mithril'

var Tablo = {
    view: function(vnode) {
        return (
            <table>
                {
                    vnode.attrs.veri.map(function(v){
                        return <tr><td>{v}</td></tr>
                    })
                }
            </table>
        )
    }
}

Artık üstteki bileşeni istediğimiz yerden şu şekilde kullanabiliriz:


/** @jsx m */

import m from 'mithril'
import Tablo from './Tablo'

var Site = {
    view: function() {
        return (
            <div>Merhaba dünya</div>
            <Tablo veri={["elma", "portakal", "armut"]} />
        )
    }
}

Oldukça basit. Tablo isimli bileşende şunlar oluyor:

Bunlara ek olarak, her bileşenin kendine ait yaşam döngüleri var. Bazıları şunlar:


/** @jsx m */

import m from 'mithril'
import Tablo from './Tablo'

var Site = {

    oninit: function(vnode) {
        console.log("Bileşen başlatılıyor. vnode.attrs'den gelen parametreler değişkenlere atanabilir.")
    },
    oncreate: function(vnode) {
        console.log("DOM oluştu. Http istekleri yapılabilir.")
    },
    onupdate: function(vnode) {
        console.log("DOM güncellendi")
    },
    onremove: function(vnode) {
        console.log("DOM silindi")
    },
    view: function() {
        return (
            <div>Merhaba dünya</div>
            <Tablo veri={["elma", "portakal", "armut"]} />
        )
    }
}

Diğer metodlar için verdiğim linke göz atabilirsiniz.

Route sistemi

Web uygulamamızın, kendi içinde sayfalara ayrılmasını yöneten m.route isimli metod. Örnek vermek gerekirse:

import m from 'mithril'
import IndexPage from './core/page/IndexPage'
import LoginPage from './core/page/LoginPage'
import RegisterPage from './core/page/RegisterPage'

window.onload = function () {

	// routes
	m.route(document.querySelector("routes"), "/", {
    	"/": IndexPage,
    	"/login": LoginPage,
    	"/register": RegisterPage
	})
	
}

/login URL’sine giden bir kişiyi bizim yazdığımız LoginPage isimli bileşene yönlendiriyor. Bileşenler ile karmaşık verilere sahip görünümler oluşturabilmesinin yanında (örnek bir treeview olabilir) sayfalar da oluşturulabilir.

Mithril’in router sistemini kullanırken dikkat etmemiz gereken nokta var. Site içindeki linkleri şu şekilde belirtmeliyiz:

<a href="/login" oncreate={m.route.link}>Login</a>

Mithril hakkında yazılacak çok şey var. Vakit kaybetmeden alttaki linke tıklayıp başlayabilirsiniz:

Mithril.js kusursuz demek olmaz. Ufak tefek eksiklikleri var, bunlardan benim için en önemli olan eksiklik bileşen tabanlı redraw olmaması. Yani sizin sitenizde herhangi yerde bir değişiklik olduğunda bütün bileşenler güncellenir (view metodu çağrılır). Çözüm olarak, duruma göre onbeforeupdate metodundan true veya false döndürülürek redraw ertelenebilir.