Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
3 Framework Web Material Design dengan Dukungan Resmi Dari Google – Framework dalam Bahasa Indonesia kerangka kerja adalah sebuah perangkat lunak yang memudahkan programmer dalam membuat aplikasi baik itu Desktop ataupun Website. Berupa library atau kumpulan class, fungsi dan prosedur yang siap pakai. Karena sifat Framework inilah yang membuat para programer lebih memilihnya daripada membuatnya dari awal. Selain kemudahannya, framework juga mempunyai susunan dan struktur yang begitu rapi. Biasanya telah menerapkan konsep MVC dan fitur keamanan standar untuk sebuah web.
Sedangkan desain material adalah bahasa desain yang dikembangkan oleh Google yang diumumkan oleh Kepala Bidang Desain Google Matias Duarte pada perhelatan Google IO pada 24 Juni 2014 yang lalu. Disebut Material Design karena bahasa desain ini mengambil implementasi dari dunia nyata didasarkan pada kertas dan tinta. Setiap objek dalam desain tersebut berada dalam bentuk 3D, artinya setiap objek memiliki dimensi X, Y, dan Z. Nantinya tiap-tiap dimensi tersebut akan mempengaruhi cahaya dan letak bayangan dari objek.
Pertama kali desain tersebut digunakan pada produk Google yaitu Google Now, sebutan untuk desain material tersebut bernama Cards. Cards merupakan salah satu bahasa desain material. Nah desain cards tersebut sekarang telah banyak digunakan banyak website saat ini sekalipun tidak sepenuhnya menggunakan bahasa desain material.
https://www.youtube.com/watch?v=rrT6v5sOwJg
Sekarang telah banyak berbagai macam framework web desain material seperti materialize, material ui, muicss untuk mobile ada ionic material dan sebagainya. Tidak ada salahnya kamu menggunakan salah satu framework seperti materialize yang paling banyak dipakai. Namun saat ini ada tiga framework web dengan desain material yang resmi langsung didukung oleh Google yaitu Material Design Lite (MDL), Polymer dan Angular Material. Berikut penjelasannya
Material Design Lite
Material Design Lite (MDL), seperangkat komponen yang memungkinkan developer untuk mengembangkan situs dengan bahasa desain Material Design. Komponen tersebut terdiri dari seperangkat kode CSS, HTML, dan JavaScript. Singkatnya Material Design Lite adalah framework front-end untuk mengembangkan situs dari Google. Serupa dengan framework lain seperti Bootstrap atau Foundation, MDL memiliki sejumlah komponen yang siap digunakan seperti cards, layout kolom, slider, pemintal, tab, tipografi, dan banyak lagi. Aturan penggunaan MDL sangat sederhana, pertama kamu harus memulai dengan tag HTML, kemudian diikuti dengan dengan komponen-komponen MDL di dalam tag tersebut.
Mengingat framework ini masih baru, belum banyak komponen dan juga fitur yang bisa kamu gunakan. Website Chromplex ini juga menggunakan framework Material Lite Design, untuk beberapa hal kami menambahkan CSS sendiri.
Angular Material
AngularJS adalah front-end framework untuk javascript yang dikembangkan oleh Google. Framework ini menerapkan pola MVC ataupun MV Whatever. AngularJS merupakan salah satu framework untuk membangun single page application yang tentunya ditulis dengan menggunakan Javascript. Dengan AngularJS, kamu dapat membangun sebuah aplikasi tanpa melibatkan server side scripting di halaman view. Karena kemudahannya framework ini telah banyak digunakan developer untuk membangun web mereka.
Contoh penggunaan AngularJS
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Nah Google telah menyediakan AngularJS yang telah mengimplementasi desain material, kamu dapat melihat dokumantasinya di https://material.angularjs.org/latest/.
Polymer
Polymer adalah library atau pustaka untuk membangun web component. Dengan polymer kamu dapat menggunakan API browser ke dalam elemen HTML buatan kamu. Kamu dapat membuat web component kamu sendiri untuk digunakan browser menggunakan standar web. Karena Polymer dikembangkan oleh Google maka browser Chrome mendapat dukungan penuh.
HTML menyediakan satu set built-in elemen seperti <button>, <form> dan <table>. Setiap elemen memiliki API sendiri attribute, properties, method, dan events. Setiap elemen memiliki built-in styling didalamnya, style built-in ini dapat ditimpa menggunakan CSS.
Siapapun dapat menggunakan elemen ini untuk membangun sebuah halaman web sederhana. Tapi mereka terbatas. Untuk membangun sesuatu yang sederhana seperti satu set tab, kamu perlu HTML ditambah CSS dan biasanya script juga.
Dengan kustom eleman, kamu dapat memperpanjang kosakata HTML dengan elemen kamu sendiri. Elemen yang menyediakan UI canggih. Unsur yang mudah digunakan seperti <select>
Contoh kustom elemen
<my-tabstrip>
<my-tab>
Home
</my-tab>
<my-tab>
Services
</my-tab>
<my-tab>
Contact Us
</my-tab>
<my-tabstrip>
Apakah Polymer komponen web? Apakah elemen? Tidak dari salah satu dari keduanya, polimer dibangun di atas komponen web standar dan membantu kamu membangun elemen kustom kamu sendiri. Nah ternyata Polymer telah menyediakan elemen khusus untuk desain material, elemen tersebut dapat kamu lihat di https://elements.polymer-project.org/browse?package=paper-elements.
Pembahasan yang mendalam mengenai Angular dan Polymer ini akan kita bahas pada artikel yang berbeda.
