Chrome Dev Summit 2014 - Polymer - Negara persatuan

Polymer dan Komponen Web adalah topik yang sangat panas akhir-akhir ini, dan karena ekosistem ini berkembang pesat, developer sering kali kesulitan untuk mengikuti semua perubahan terbaru.

Dalam ceramahnya di Chrome Dev Summit, Matt McNulty, manajer teknik untuk tim Polymer, menjelaskan apa itu Polymer, dan juga menguraikan peta jalan untuk Polymer 1.0.

Apa itu Polimer?

Pertama, apa itu Polymer?

Polymer adalah library yang membantu Anda mem-build elemen dan aplikasi dari komponen web. Komponen Web adalah rangkaian standar baru canggih yang memungkinkan developer memperluas kosakata HTML dengan elemen khusus mereka sendiri.

Polymer membantu developer membangun aplikasi lebih cepat

Karena Komponen Web dirancang sebagai primitif baru untuk browser, artinya Komponen Web sangat canggih tetapi tingkatnya sangat rendah dan memerlukan sedikit kode untuk digunakan.

Polymer membuat Komponen Web lebih manis

Polimer mempermudah penggunaan Komponen Web dengan menerapkan "sugaring" pada sintaksis. Ini mengurangi jumlah kode boilerplate yang perlu Anda tulis, dan menambahkan gaya deklaratif sehingga membuat Komponen Web semudah menulis HTML.

Eksperimen Polimer

Polymer dimulai sebagai eksperimen untuk melihat apakah kami dapat mem-polyfill standar Komponen Web dan mendapatkan masukan dari developer sebelum teknologi ini dikirim di semua browser. Seiring dengan semakin banyaknya developer yang mulai menggunakan Polymer, Polymer berubah dari hanya polyfill, menjadi library aktual yang penuh dengan fitur produktivitas (data binding, pengamat perubahan atribut, penemuan node otomatis, dll). Namun, semua eksperimen memiliki hasil, jadi bagaimana kami melakukannya?

Kartu laporan Polymer memerlukan peningkatan

Meskipun banyak developer mengatakan bahwa mereka menyukai keekspresifan dan produktivitas saat bekerja dengan Komponen Web di Polymer, mereka juga menyatakan kekhawatiran seputar performa dan kompleksitas secara keseluruhan.

Hal ini menyoroti ketegangan alami yang dimiliki Polymer selama ini: menjadi eksperimen untuk memajukan platform web, sekaligus membuat sesuatu yang layak produksi dan dapat diandalkan oleh developer.

Perubahan Mendatang

Tim Polymer telah meninjau dengan cermat setiap fitur library untuk menyusun versi yang lebih ramping dan siap produksi, yang dapat dipercaya oleh developer.

Lapisan

Polimer telah difaktorkan ulang menjadi serangkaian lapisan. Fitur intinya cepat dan ramping, sedangkan fitur yang lebih canggih akan disertakan. Untuk sebagian besar kasus penggunaan, fitur inti harus mencakup kebutuhan developer.

Polimer telah difaktorkan ulang menjadi beberapa lapisan

Binding Data yang Disederhanakan

Sistem data binding Polymer juga telah dioptimalkan secara signifikan untuk performa. Dengan mengikuti pendekatan berlapis, binding dua arah kini diaktifkan, dengan default-nya adalah binding satu arah. Selain itu, jenis properti yang dipublikasikan telah dibuat eksplisit dan perubahan properti sekarang mengaktifkan peristiwa untuk membantu elemen dari library yang berbeda agar lebih mudah dikomunikasikan.

Data binding telah disederhanakan

DOM Bayangan Leaner

Polyfill Shadow DOM adalah prestasi rekayasa yang luar biasa. Versi ini dirancang agar komprehensif dan sesuai spesifikasi, yang penting untuk menguji primitif platform secara menyeluruh, tetapi sayangnya menimbulkan sejumlah bottleneck performa untuk fitur yang tidak digunakan Polymer.

Rilis Polymer berikutnya akan mengambil pendekatan berbeda, dengan menggunakan lapisan gaya shim yang hanya mem-polyfill apa yang dibutuhkan Polymer.

Shim shadowdom jauh lebih cepat

Polymer yang ada akan aktif untuk komponen web non-Polymer generik.

Memindahkan ke webcomponents.org

Berbicara tentang polyfill, mereka juga mendapatkan rumah baru. Saat ini, banyak pengembang bingung tentang hubungan antara Polymer dan Komponen Web. Beberapa orang berpikir bahwa Anda harus menggunakan semua Polymer untuk menggunakan Komponen Web, padahal sebenarnya, Anda hanya memerlukan polyfill.

Untuk lebih memperjelas perbedaan ini, polyfill dipindahkan ke webcomponents.org dan sekarang diganti namanya menjadi webcomponents.js.

Polyfill dipindahkan ke webcomponents.org

Langkah ini dirancang untuk membantu penulis library lain memanfaatkan polyfill tanpa kebingungan. Tim Polymer akan terus berkontribusi pada polyfill, tetapi harapannya adalah bahwa perubahan ini akan membuat mereka menjadi lebih banyak sumber daya bersama bagi komunitas.

Hasil

Jadi, apa hasil dari semua perubahan ini?

Kecepatan

Di Chrome, Polymer kini 5x lebih cepat, dan di Safari peningkatan kecepatan 8x lipat.

Polymer kini 8x lebih cepat di Safari

Ukuran File

Ukuran file juga telah diperkecil 87%, dari 123 KB menjadi 15 KB (6 KB gzip).

Polymer sekarang 87% lebih kecil

Roadmap

Akan ada beberapa perubahan yang dapat menyebabkan gangguan API dalam rilis berikutnya, yang ditandai dengan nomor versi baru (0.8), tetapi tim ingin memperjelas bahwa ini bukan penulisan ulang. Memindahkan proyek Anda saat ini dari Polymer 0,5 ke 0,8 seharusnya cukup sepele.

Tim Polymer juga telah menguraikan roadmap untuk memberi developer kejelasan lebih lanjut seputar rilis mendatang.

Roadmap polimer, beta di q1, 1,0 di q2

Pratinjau 0.8 sekarang tersedia sebagai cabang di GitHub (meskipun masih sangat aktif dikembangkan dan kurang dalam dokumentasi). Beta 0,9 resmi direncanakan untuk Q1 2015, dengan 1,0 terjadi kira-kira di Q2.

Eksperimen Selesai

Dengan semua perubahan terbaru di Polymer, tim di baliknya meletakkan dasar untuk Komponen Web menjadi bagian integral dari setiap stack developer. Jika Anda baru mengenal Komponen Web, sekarang adalah waktu yang tepat untuk melihat dan membiasakan diri dengan teknologi transformatif ini. Jika Anda sudah menggunakan komponen (dan Polymer), masa depan akan terlihat cerah. Pantau Blog Polymer untuk mendapatkan semua info terbaru, dan daftar ke milis Polymer untuk mengajukan pertanyaan atau memberikan komentar. Selamat mencoba!