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ınlacaktır.

7322

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.