Android Data Binding

Salah satu hal yang cukup melelahkan dalam Android development adalah mendeklarasikan komponen UI dan menggunakan findViewById secara berulang-ulang. Adanya external library ButterKnife yang membuat code lebih rapi, terstruktur dan menghilangkan penggunaan findViewById secara berulang-ulang. Blog tentang ButterKnife bisa dilihat disini

Pada Google I/O 2015, Google mengeluarkan Data Binding Library untuk Android. Tujuan data binding adalah untuk declarative layout dan meminimalisir penggunaan kode untuk mengikat application logic dan komponen layout. Sebelumnya, kita lihat dulu contoh penggunaan findViewById dan ButterKnife. Berikut adalah contoh layout xml

Jika menggunakan findViewById, pada class Activity bisa dibuat seperti ini

cukup merepotkan jika kita mempunyai banyak komponen UI. Selanjutnya jika menggunakan ButterKnife, pada class Activity bisa dibuat seperti ini

Bisa dilihat dengan ButterKnife dapat menghilangkan penggunaan findViewById berulang-ulang dan membuat code lebih rapi. Selanjutnya adalah bagaimana cara menggunakan data binding.

1. Enable DataBinding di App.Gradle

2. Create POJO if necessary, ie:

3. Wrap Parent ViewGroup in <layout> tag. Define meta data of binding in <data> tag and set the variables defined <data> tag in binding.

Bisa dilihat data variable User di-bind dengan TextView (pada atribut "android:text"). Untuk "user.nama" dan "user.address" mengikuti dari POJO yang dibuat. 

4. Inflate layout using DataBindingUtil in Activity or Fragment Class. ie:

Hasilnya TextView yang sudah di-bind tadi akan menjadi "Haris" dan "Jl. Kartika Pinang". Dengan databinding, kita tidak perlu lagi mengetik findViewById ataupun @BindView. Selain itu, dengan databinding kita bisa menyediakan sedikit simple logic pada xml layout, contoh:

databinding di android nantinya digunakan dengan MVVM pattern.

Lebih lengkap mengenai  databinding bisa dilihat disini. Semoga membantu/

PS: Please correct me if I'm wrong :)

Reference:

- https://developer.android.com/topic/libraries/data-binding/index.html

Data Binding Angular 1 vs Angular 2

Data Binding pada angular merupakan salah satu fitur yang paling saya sukai. Two ways data binding yang sangat mudah digunakan membuat hidup ini berasa lebih mudah, terutama bagi saya yang tidak menyukai javascript maupun jquery.

Two Way Data Binding merupakan konsep yang diusung oleh angular sejak angular 1.

Model dan View akan terus menerus melakukan sync sehingga data yang diupdate baik dari controller maupun view akan saling mengupdate dan selalu sama. Angular1 menggunakan sebuah variable bernama $scope untuk menjadi penjembatan antara model dan view. Semua data yang berada dalam $scope akan selalu diawasi. Hal itu membuat model dan view selalu sync satu sama lainnya, tetapi jangan berpikir bahwa itu semua semanis kelihatannya. Yap, angular melakukan watch pada semua variable $scope yang aktif dan tentunya menghabiskan resource yang cukup besar. Sebuah kesalahan kecil seperti melakukan reuse variable $scope pada html yang sedang di hide saja bisa menyebabkan rendering behind the view yang luar biasa hingga menyebabkan freeze padahal hanya untuk mendisplay ( yap, saya pernah mengalaminya )

Lalu bagaimana dengan Angular2?
Berikut sample code agar lebih mudah di cerna : 

<div>{{article.name}}</div>
<article-detail [article]="selectArticle"></article-detail>
<div (click)="selectArticle(article)"></div>

Pada angular 2 terdapat 3 macam data binding : 

Data Binding Angular 2

• Interpolation : {{article.name}}interpolation berfungsi untuk menampilkan value dari component pada div biasa
• Property Binding : [article]
  property binding berfungsi untuk menampilkan value dari component pada property, atau dari parent ke child
• Event Binding : (click)
  Event Binding berfungsi untuk mengirim data dari view menuju component

Lalu dari ketiga macam tipe binding yang disediakan Angular 2. Terdapat juga two way data binding yang merupakan kombinasi dari property binding dan event binding yang merupakan bentuk dari Two Data Binding Angular 2. 

<input [(ngModel)]="article.name">

Pada Two Way Data Binding, Angular menggabungkan property dan event binding. Perubahan yang dilakukan oleh user akan dikirim ke component melalui event binding, sedangkan Perubahan pada component akan dikirim menggunakan property binding. Hal tersebut membuat angular tidak perlu melakukan watch pada suatu variable melainkan melakukan aktivitas ketika ada triger baik dari component maupun dari view. Hal yang sama juga dapat dilakukan antar parent dan child component.

Two Way Data Binding Angular 2

Angular 2 telah memberikan solusi yang lebih baik untuk masalah performance data binding yang terjadi pada Angular sebelumya. Dan tentunya kita dapat tetap berbahagia tanpa perlu repot memproses two data binding sendiri. Sekian saja untuk kesempatan kali ini.

Sampai berjumpa pada kesempatan berikutnya. Happy Coding :D