Google Polymer - Bagaimana Ini Akan Mengubah Cara Aplikasi Web Dibangun

Bersama dengan Foto Google, Google juga telah membangun kembali Polymer dari awal, menangani peningkatan kinerja dan efisiensi. Pikirkan Polymer sebagai SDK (Perangkat Pengembangan Perangkat Lunak) untuk Web, yang membuatnya pengembangan aplikasi web jauh lebih cepat menggunakan standar baru yang disebut Komponen Web.

Komponen Web memungkinkan kita untuk melakukannya buat elemen dan tag khusus untuk situs web kami. Dalam posting ini kita akan melihat bagaimana elemen khusus di Google Polymer dapat membantu pengembangan aplikasi web. Selain itu, kami juga akan melihat beberapa demo tentang bagaimana elemen khusus ini dapat berfungsi.

Tentang Komponen Web

Cara terbaik untuk memahami cara kerja Komponen Web adalah dengan melihat elemen standar saat ini seperti . Ketika kita menambahkan bersama dengan sumber URL audio, browser web akan membuat elemen ini sebagai pemutar audio dengan tombol play and pause, rel waktu dan juga slider volume. Pernah bertanya-tanya bagaimana kontrol pemain dibuat dan ditata?

Pemain kontrol UI tersembunyi di bawahnya sebagai Shadow Roots, juga dikenal sebagai Bayangan DOM. Untuk melihat Shadow DOM, luncurkan menu Chrome DevTools > klik pada Gigi ikon> pilih menu Tampilkan bayangan agen pengguna DOM pilihan.

Pada tangkapan layar berikut, Anda dapat menemukan tumpukan

dan elemen yang membangun kontrol pemutar UI secara rahasia.

Hari ini, dengan Komponen Web, kita dapat memberi nama elemen kita sendiri juga. Kita dapat membangun elemen seperti, untuk menanamkan umpan Twitter atau (mungkin) untuk menanamkan bagan.

Selain itu, elemen khusus ini juga dapat memiliki beberapa atribut khusus yang diterima. Sehubungan dengan elemen, Anda mengatur atribut yang disebut nama pengguna yang akan digunakan untuk menentukan nama pengguna Twitter.

Elemen Khusus dalam Polimer

Polymer hadir dengan banyak elemen yang mencakup hampir semua kebutuhan aplikasi web. Google membagi elemen-elemen ini menjadi grup: Elemen Besi, Elemen Kertas, Komponen Web Google, Elemen Emas, Elemen Neon, Elemen Platinum, dan Molekul.

1. Unsur Besi

Elemen Besi adalah kumpulan elemen dasar. Elemen-elemen dasar inilah yang biasa kita gunakan membangun halaman web seperti input, form dan gambar. Perbedaannya adalah Polymer menambahkan beberapa kekuatan ekstra untuk elemen-elemen ini.

Semua elemen dalam grup ini adalah besi- diawali, misalnya , yang digunakan untuk menampilkan gambar. Itu elemen telah dilengkapi dengan beberapa atribut tambahan yang tidak dapat kita terapkan secara reguler elemen. Kita dapat, misalnya, menambahkan preload, luntur, dan placeholder atribut:

Contoh di atas pertama-tama akan menampilkan placeholder gambar dan kemudian memudar menjadi gambar yang sebenarnya di src karena sudah terisi penuh, melakukan efek pemuatan gambar yang halus.

2. Elemen Kertas

Itu Elemen kertas adalah sekelompok elemen Desain Material. Desain Material adalah bahasa desain Google untuk membuat antarmuka pengguna dan pengalaman di seluruh platform Google baik Web dan aplikasi Android lebih konsisten secara visual. Beberapa elemen yang unik untuk Desain Bahan adalah Kertas dan Tombol Aksi Mengambang (FAB).

Kertas

Kertas adalah metafora Google untuk media yang mendasari konten. Untuk menambahkan kertas dengan Polymer, kami menggunakan elemen. Elemen ini mengambil 2 atribut:

ketinggian untuk mengangkat Kertas, karenanya menambahkan bayangan untuk memperkuat ketinggian
animasi akan menerapkan animasi sebagai perubahan ketinggian Kertas.

Tombol Aksi Mengambang (FAB)

Floating Action Button (FAB) adalah tombol melingkar dengan ikon, mengambang di layar, biasanya dengan warna yang menonjol. Google menyarankan bahwa tombol ini membawa fungsi yang sering diakses. Ini sebuah contoh:

Cuplikan kode berikut menambahkan Bahan Kertas dengan gambar dan FAB.

Kami akan memiliki hasil sebagai berikut:

Kami memiliki foto dengan “jantung” tombol mengambang di atasnya. Klik untuk Suka foto, dan tombol memberi efek riak untuk mengakui klik.

Lihat Demo Kertas

3. Komponen Web Google

Komponen Web Google adalah elemen khusus yang mengatasi Google API dan layanan seperti Google Maps, Youtube, dan Google Feed, untuk beberapa nama. Elemen dalam grup ini buat berinteraksi dengan layanan Google hanya beberapa baris jauhnya.

Berikut ini adalah contoh untuk menampilkan Google Map menggunakan elemen.

  Ini adalah Googleplex

Seperti yang Anda bisa di atas, elemen mengambil lintang dan garis bujur untuk menentukan lokasi di peta. Kita juga bisa bersarang untuk menunjukkan penanda peta dari lokasi itu bersama dengan teks yang akan muncul setelah mengklik penanda.

Lihat Demo Peta

Ingin menampilkan video Youtube? Anda dapat menggunakan elemen.

Demikian pula kami menyesuaikan output melalui atribut.

Lihat Demo Youtube

4. Elemen Emas

Elemen Emas adalah elemen yang dirancang khusus untuk aplikasi e-commerce. Di sini Anda akan menemukan elemen untuk menunjukkan kartu kredit, email, telepon, dan input ZIP yang semuanya telah dilengkapi validasi format untuk memastikan input dan keamanan data yang benar. Ini adalah salah satu contoh untuk menambahkan input kartu kredit Visa.

5. Elemen Lainnya

Elemen yang tersisa termasuk elemen Neon untuk animasi dan efek khusus, elemen Platinum untuk offline dan pemberitahuan push dan terakhir Molekul, pembungkus untuk perpustakaan pihak ketiga.

Catatan Editor: Pada saat penulisan ini, Elemen Neon, Elemen Platinum, dan Molekul masih belum tersedia.

Mengintegrasikan Polimer

Ingin menggunakan Polimer dalam pengembangan web Anda? Berikut cara menginstal dan mengintegrasikannya ke halaman web Anda. Karena sebagian besar elemen Polimer bergantung satu sama lain, cara terbaik untuk menginstal Polimer adalah melalui Bower.

Bower adalah manajer dependensi proyek yang membuatnya lebih mudah untuk menginstal skrip atau gaya yang diperlukan untuk menjalankan proyek. Lihat posting kami sebelumnya tentang cara menginstal, memperbarui & menghapus perpustakaan web dengan mudah dengan Bower.

Untuk mengintegrasikan Polymer, luncurkan Terminal kemudian arahkan ke direktori proyek Anda, dengan asumsi Anda telah membuatnya. Lalu lari Bower init perintah untuk memulai file bower.json ke proyek Anda yang akan digunakan untuk merekam dependensi proyek. Buka bower.json dan tambahkan baris berikut.

 "dependensi": "polimer": "Polimer / polimer # ^ 1.0.0", "google-web-components": "GoogleWebComponents / google-web-components # ^ 1.0.0", "elemen-besi": " Elemen Polimer / elemen besi # ^ 1.0.0 "," elemen kertas ":" Elemen polimer / elemen kertas # ^ 1.0.0 "," elemen emas ":" Elemen Polimer / elemen emas # ^ 1.0.0 "

Pengaturan ini mengasumsikan bahwa kita akan menggunakan semua elemen dari setiap grup. Anda dapat menghapus apa yang tidak Anda butuhkan dari daftar ketergantungan. Ketika dependensi diatur, jalankan menginstal bower perintah untuk menginstal dependensi pada daftar.

Proses ini mungkin memakan waktu cukup lama karena melibatkan pengambilan sejumlah besar file dari repositori. Setelah selesai, Anda harus menemukan mereka disimpan di komponen bower_ map.

Buka file HTML yang ingin Anda gunakan komponen Polymer. Di dalam kepala dokumen, menautkan WebComponents.js yang merupakan polyfill untuk browser yang belum mendukung WebComponents, dan impor file komponen menggunakan Impor HTML.

Berikut ini sebuah contoh:

Pengaturan ini akan memungkinkan kami untuk menggunakan , , elemen.

Showcases

Berikut adalah beberapa aplikasi web yang sudah menggunakan Google Polymer.

Google

Google menggunakan Google Polymer di halaman web Google IO 2015; Google Fi, layanan nirkabel Google untuk operator dan vendor dalam kemitraan; dan Google Music.

Elemen Khusus

CustomElements adalah hub tempat Anda dapat menemukan elemen khusus yang dibangun dengan Komponen Web. Itu menggunakan elemen Kertas untuk mengandung dan membangun daftar. Ini juga menyediakan rute yang nyaman untuk menginstal elemen-elemen ini melalui Bower dan NPM.

Editor Chrome Dev

Aplikasi Chrome untuk mengedit kode yang bekerja dengan sangat baik. Aplikasi ini menggunakan tombol FAB, menu Kertas, dan elemen dialog Kertas di antarmuka pengguna.

Desainer Polimer

Alat untuk membangun aplikasi web dengan elemen Polymer menggunakan antarmuka seret dan lepas.

Prakiraan Stok Harian

Laporan dan perkiraan bursa efek yang seluruhnya dibangun dengan elemen Polymer.

Surat Polimer

Aplikasi klien email untuk Gmail. Itu terlihat bagus dan cair, meskipun sayangnya, itu tidak berfungsi penuh.

Pikiran terakhir

Polymer memiliki cakupan yang sangat luas dan Anda mungkin perlu waktu untuk membiasakan diri dengan semua elemen khusus serta API-nya. Meskipun demikian, Komponen Web dan Polimer tentu akan mempengaruhi cara kita membangun aplikasi web. Tetap di depan orang banyak dengan membaca lebih lanjut tentang Komponen Web - referensi ditemukan di bawah ini.

Lihat Demo
Sumber Unduhan

Referensi yang berguna

Keadaan Komponen Web
Pengantar Detail Untuk Elemen Kustom
Blog Resmi Google Polymer