Single Page Web Application dengan Backbonejs

 Author : ramadhan, 11 May, 2014, Komentar

backbonejs


Agak telat sih, hari ginih... 2014 kok baru ngomongin single page web application. Tapi biar lah.. sempatnya kan hari inih.


Ginih sob... udah banyak kan contoh web yang powerful dari speed memuat data informasinya sampai desainnya yang menawan tanpa nunggu 10 detik lebih buat liat kontennya. Contoh nih SoundCloud.. Udah punya akun SoundCloud kan.. Gimana mantep banget nggak tuh dia muat datanya? Ya iyalah kan dia Single Page Web Application.



Stop !!!


Ada yang nggak tau soal Single Page itu apa.. (Ayo cepet pura pura udah ngerti sob :D)


Tapi kalo udah ngerti beneran langsung lewatin sampe ke Apa itu backbonejs, Lets Scroll Down...


Ginih sob, Single page web application ituh, halaman web yang loncat ke halaman lain tanpa reload alias bekerja di background.


Apa untungnya emang kalau pakai si apa itu.. single web page atau apalah tadi...?


Banyak sob..


Kan biasanya kita pakai php tuh, kita campur phpnya sama html yang menurut saya ribet total. Terus tiap loncat dari satu halaman ke halaman lain harus MEMUAT semua css dan javascript yang di halaman SEBELUMNYA udah dimuat. Jadi lama kan, orang udah dimuat kok dimuat lagi. Bahasa jawanya "Mindo gaweni". Nah kalo cukup minta data yang menurut kita PENTIIIING banget aja gimana.. soal menampilkan data kasih ke jquery deh... Jadi kita minta data aja.. style nggak minta lagi.. kan di halaman yang udah dimuat ini udah ada stylenya :D (Keep efficient broo).


Waduh ribet amat.. gimana tuh???


Hahahaha... ikutin aja deh sob, ntar juga tau sendiri dimana enaknya.. pengalaman pribadi soalnya :D

Ya itu tadi yang dinamakan single page web application. Kita nggak memuat halaman lain, cukup minta ke server, minta deh tuh data yang ada di halaman lain tadi. Tampilin dihalaman ini juga, langsung. Pakai AJAX, kalo ajax pasti tau kan :D . Pakai jquery aja dah bisa. Terus controllernya, yang ngebedain ini halaman A apa udah pindah ke halaman B itu ada di hashbang, belakang url yang ada ininya (#blablabla). Sampai disini udah paham kan?


okay Lanjut...


Jadi.. Apa Itu Backbonejs?


Backbone itu bahasa inggris, artinya "Tulang belakang". Nah JS nya ya Javascript. Udah kan? Beres kan? Next


dafuq


Hahahaha... bercanda sob, tapi beneran... artinya tulang belakang. Tumpuan kode javascript kita biar ada strukturnya, biar mudah ngatur tiap gerakannya, biar cepet jalannya. Liat tuh bekicot, ulat, mereka nggak punya tulang belakang, jadi lamban, soalnya nggak bisa dengan cepat mengatur / mengontrol gerakan tubuhnya. Javascript juga gitu, kalo halaman web kita nggak punya struktur yang kuat, jalannya juga lambat (developmentnya), jadi lamaaaa gitu selesein proyeknya. Beda lagi kalo halaman web kita jadi cepat jalannya development. Fix bug juga nggak lama lama amat.


Kok pakai Backbonejs? kan jquery juga mudah kan...


Nah, tuh, cobain sana, single web page pakai jquery aja. Atau tambahin noh pluginnya. Yakin dah kalo udah disubmit proyeknya dan banyak permintaan tester buat ganti beberapa interface PASTI bingung lagi.




Mana nih yang harus diganti. Mana belum kasih komentar lagi. :(


Nah ituh !!! :D


Jadi serasa curhat nih.. ceritain semua problem masa lampau :D


Tapi itu sebelum saya kenal Backbonejs. Sekarang udah kenal dan makin lama makin akrab nih.. Kenalin backbonejs nih, dia kekar, badannya tinggi besar, seksi banget dah (elu pura pura jadi cewek ya :D).


Berkenalan dengan Backbonejs


Seperti yang saya jelaskan diatas tadi, Backbonejs itu adalah tulang punggung, struktur aplikasi, memperkuat sistem, nah tulang punggung itu terbagi dari beberapa tulang, ada tulang ekor ada tulang ini ada tulang itu yang mana semua tulang itu tadi saling memperkuat dan saling mengisi. Backbonejs juga seperti itu, ada beberapa unsur backbonejs, dan karena backbonejs itu adalah MVC framework, jadi ke empat unsurnya nggak akan lepas dari konsep desain tersebut. Yakni Model, View, Router (Controller) dan Collection (Himpunan dari model).


Saya jelasin satu satu yah.. mulai dari Model.


Model


Apa itu model?


Kita ibaratkan dengan manusia yah.. Model itu adalah jantung. Yang mana tubuh manusia hanya dinamakan mayat jika jantungnya tidak berdetak lagi. Padahal jantung itulah yang membuat manusia bisa bergerak, mengalirkan oksigen yang dibutuhkan semua organ tubuh lain melalui darah. Jika jantung tidak bekerja. Manusia tersebut dinamakan mayat. Nah didalam backbonejs, Model adalah jantung sistem. Organ sistem yang tugasnya mengalirkan data yang dibutuhkan organ sistem lain melalui object javascript. Jika model tidak sempurna, maka sistem itu adalah sistem yang gagal.


Nah codingnya gimana tuh?


Liat sini..


Siswa = Backbone.Model.extend({
	initialize: function(){
		console.log("Model siswa telah dibuat");
	}
})
var doni = new Siswa;


Nah kenalin dulu sama si initialize, dia selalu terpanggil ketika objek baru yang menggunakan model Siswa terdefinisikan. Tidak hanya di Model, tapi di View, Collection  dan Router juga bisa diberi initialize. Sebenarnya tidak perlu menggunakannya initialize juga nggak masalah. Tapi suatu saat anda akan sangat terbantu dengan adanya initialize.


Memasang Atribut


Model adalah objek dengan atribut yang sudah anda terapkan sebelumnya. Berikut adalah beberapa cara untuk memasang atribut pada suatu objek dari suatu model.


Siswa = Backbone.Model.extend({
	initialize: function(){
		console.log("Model siswa telah dibuat");
	}
})
var doni = new Siswa({ nama: "Rizki Romadhoni", usia : 19});
// atau juga bisa dengan memasang atribut setelah pendeklarasian objek
var sandy = new Siswa();
sandy.set({ nama : "Sandy Kartikasari", usia : 19 });


Memasukkan object didalam constructor juga sama dengan menggunakan method model.set(). Sekarang model yang telah dibuat sudah memiliki atribut dan siap untuk kita ambil lagi atributnya saat kita butuh.


Mengakses Atribut


Dengan method model.get() kita bisa mengakses atribut dari suatu object model kapanpun kita membutuhkannya.


Siswa = Backbone.Model.extend({
	initialize: function(){
		console.log("Model siswa telah dibuat");
	}
})
var doni = new Siswa({ nama: "Rizki Romadhoni", usia : 19});
var nama = doni.get("nama"); // Rizki Romadhoni
var usia = doni.get("usia"); //19


Manipulasi Atribut Model


Model bisa mempunyai banyak method yang anda buat sendiri (custom method) untuk memanipulasi atribut. Defaultnya semua method tersebut bersifat public.


Siswa = Backbone.Model.extend({
	initialize: function(){
		console.log("Model siswa telah dibuat");
	},
	defaults: {
		nama : "Tidak diketahui",
		usia : "Tidak diketahui"
	},
	namai: function(namabaru){
		this.set({nama : namabaru})
	}
});
var doni = new Siswa({ nama: "Rizki Romadhoni", usia : 19});
doni.namai('Rizki Robhani');
var nama = doni.get("nama"); //Rizki Robhani


Yap, kita bisa mengimplementasikan beberapa method untuk get/set model, bahkan menghitung atribut atributnya.


Mendeteksi adanya perubahan pada object model.


Ini yang paling membantu dalam mengelola model di backbonejs. Ketika suatu atribut nilainya berubah, kita dapat mendeteksinya dan mengupdate data yang kita tampilkan. Sangat berguna ketika ingin mengupdate data yang sedang ditampilkan.


Siswa = Backbone.Model.extend({
	initialize: function(){
		this.on("change:nama", function(model){
			var nama = model.get("nama");
			console.log("namanya sekarngan udah diubah jadi "+ nama);
		})
		console.log("Model siswa telah dibuat");
	},
	defaults: {
		nama : "Tidak diketahui",
		usia : "Tidak diketahui"
	},
	namai: function(namabaru){
		this.set({nama : namabaru})
	}
});
var doni = new Siswa({ nama: "Rizki Romadhoni", usia : 19});
doni.set({nama : "Rizki Robhani"}); // Nama berubah, memicu console.log diatas

:D belum dapet apa apa ya? :D santai sob.. keep reading :D
Nah katanya Model itu seperti jangtung yang ngalirin oksigen lewat darah.. Trus Paru parunya backbone apa dong? Kalo nggak punya paru paru sama aja nggak bisa hidup.. emang oksigen dari mana kalo paru paru nggak ada???
Ginih.. Backbonejs kok diragukan.. kau ituh..
Model Backbonejs punya paru paru ya.. dia bisa berinteraksi dengan server, menghapus data di server, membuat data di server, dan memanipulasi data di server. Nah karna paru paru juga nggak boleh sembarangan menghirup udara, kalau paru paru harus menghirup udara dengan kadar oksigen yang cukup, nah Model backbonejs pun juga harus menghirup udara yang mengandung oksigen yang cukup, maksudnya servernya nggak boleh sembarangan. Harus dengan RESTfull API. Ntar ya bahas RESTfull API nya.

 

 
Bagikan halaman ke sosial media
 
Tags :   backbonejs    javascript    ajax       

Tentang Penulis

writer ramadhan
Web designer, love music, football, photography

Link: http://exmple.com

   Komentar Anda