Mithril.js DOM elements Hello World

Mithril.js küçük (~ 8kb) ve hızlı bir web arayüz JavaScript çerçevesidir. Bu, jQuery gibi kütüphanelere duyulan ihtiyacın yerini alan, daha basit ve daha yetenekli bir React sürümüdür. Mithril'in küçük boyutu ve API'si gömülü JavaScript widget'ları veya yüksek performans gereksinimleri olan kullanıcı arayüzleri için idealdir.

Mithril.js, interaktif kullanıcı arayüzü geliştirmeyi zahmetsiz hale getirir. Siz uygulamanızdaki her durum için basit sayfalar tasarlayın. Mithril.js, veriniz değiştiğinde sadece doğru bileşenleri verimli bir şekilde güncellesin ve oluştursun.

Bildirimsel sayfalar, kodunuzu daha öngörülebilir ve hata ayıklaması daha kolay hale getirir.

Kendi state’ini(durum) yöneten bileşenler geliştirin ve onları bir araya getirerek kompleks kullanıcı arayüzleri oluşturun.

Bileşen mantığı, şablonlar yerine JavaScript’te yazıldığı için, uygulamanız boyunca kolayca zengin veri iletebilir ve state(durum) bilgisini DOM dışında tutabilirsiniz.

Kullandığınız diğer teknolojilerle ilgili varsayımlar yapmıyoruz. Bu nedenle yeni özellikleri, mevcut kodunuzu baştan yazmadan Mithril.js ile geliştirebilirsiniz.

Konuya Başlayalım

Mithril'i denemenin kolay bir yolu bir CDN'den eklemek ve bu makaleyi takip etmektir.

Şimdi CDN'den eklenmiş bir HTML sayfası hazırlıyalım.


<!DOCTYPE html>
<html lang="tr">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <script src="https://unpkg.com/mithril/mithril.js"></script>
</head>
<script>
    var root = document.body

    // your code goes here!
    </script>
<body>
	
</body>
</html>

JQuery'de geliştiriciler $ (document) .ready (); fonksiyonu ile, Website belgenizin tamamen yüklenip yüklenmediğini ve gerekli tüm öğelerin sayfanızda olup olmadığını kontrol etmekteler. Bizde kodlarımızı temiz ve derli toplu durması için script etiketleri arasına yazacağız JQery'de yer alan bu fonksiyonun javascript olanı yazacağız.


document.addEventListener("DOMContentLoaded", function() {

   alert('Döküman hazır!');

});

Elementlerin Render Edilmesi

Elementler, Mithril.js uygulamalarının en küçük yapı birimidir.

Tarayıcının DOM elementlerinin aksine, Mithril elementleri daha sade nesnelerdir ve oluşturulmaları daha kolaydır. Çünkü Mithril DOM, elementler ile eşleşmek için DOM’ın güncellenmesi işini kendisi halleder.

"Bileşen" (component) konsepti daha yaygın olarak bilindiği için, anlam bakımından elementler ile karıştırılabilir. Sonraki bölümde Mithril bileşenlerine de değineceğiz. Fakat elementler, Mithril bileşenlerinin en küçük yapıtaşlarıdır. Bu nedenle sonraki bölüme atlamadan önce bu bölümü okumanızı tavsiye ederiz.

Bir Elementin DOM’a Render Edilmesi

Başlayabildiğimiz kadar küçük başlayalım: ekranda bazı metinler oluşturabilirsiniz. Aşağıdaki kodu çalışma dosyanıza yazın.

HTML dosyanızın belgesini seçelim:


var root = document.body

m.render(root, "Hello world")

HTML belgesine direkt yazdık, Şimdi bir HTML elementi şecerek yazalım HTML dosyanızın herhangi bir yerinde <div> olduğunu düşünelim:


<div id="root"></div>

Buna id="root" (kök) düğüm denir. Çünkü içerisindeki her şey Mithril.js tarafından yönetilir.

Genellikle Mithril.js ile yazılan uygulamalar, sadece bir adet kök DOM düğümü içerirler. Eğer Mithril.js'i mevcut uygulamanıza entegre ediyorsanız, birbirinden izole olacak şekilde dilediğiniz kadar kök DOM düğümüne sahip olabilirsiniz.

Kök DOM düğümü içerisinde bir Mithril elementini render etmek istiyorsanız, bu iki parametreyi de m.render() metoduna geçirmeniz gereklidir:


var root = document.getElementById("root")

m.render(root, "Hello world")

Sayfada "Hello, world" mesajı görüntülenecektir.

Render Edilmiş Elementin Güncellenmesi

Mithril elementleri immutable‘dır.(Değişmez nesne) Yani bir kez Mithril.js elementi oluşturduktan sonra, o elementin alt elemanlarını veya özelliklerini değiştiremezsiniz. Bu nedenle element, bütün bir videonun tek bir karesi gibidir: Arayüzün belirli bir andaki görüntüsünü temsil eder.

Bu zamana kadar edindiğimiz bilgiler ışığında, kullanıcı arayüzünün güncellenmesi için tek yolun, yeni bir element oluşturup, m.render() metoduna aktarmak olduğunu biliyoruz.

ÖRNEK:


var root = document.body

m.render(root, "Hello world")

Şimdi metni başka bir metinle değiştirelim. Bu kod satırını öncekinin altına ekleyin:


m.render(root, "İlk uygulamamız.")

ÇIKTI:

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

Mithril.js Yalnızca Gerekli Kısımları Günceller

Mithril DOM, ilgili elementi ve elementin alt elemanlarını, bir önceki versiyonlarıyla karşılaştırır. Farkları tespit ettikten sonra yalnızca gerekli olan kısımlarda DOM güncellemesi yapar. Bu sayede DOM, istenen duruma getirilmiş olur.

Oluşturduğumuz element, her saniyede bütün UI ağacını görüntülemesine rağmen, Mithril.js DOM tarafından yalnızca ilgili metin düğümü ve bu düğümün içerikleri güncelleniyor.

Deneyimlerimizden yola çıkarsak, kullanıcı arayüzünün zaman içerisinde nasıl değiştirileceğinden ziyade herhangi bir anda nasıl görünmesi gerektiğini düşünmek birçok hatanın oluşmasını engellemektedir.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

KATEGORİ

HTML
CSS
PHP
JQUERY
PHOTOSHOP
JavaScript
Web Dünyası
Linux
MİTHRİL FRAMEWORK
Laravel
Git
React

POPÜLER MAKALE

HTML LİNK(Bağlantı)EKLEME - LİNK VERME
HTML YAZI VE RESİM ORTALAMA
HTML RESME LİNK VERME
HTML FORM OLUŞTURMA
CSS YATAY MENÜ YAPIMI
HTML RESİM EKLEME
CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
HTML DİV ve SPAN NEDİR?
HTML ARKAPLANA MÜZİK EKLEME
KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME

ETİKET