Polymer.js: Masa Depan Pengembangan Aplikasi Web?

Sekitar setahun yang lalu pada Mei 2013, Google meluncurkan Polymer.js.

Jadi di sinilah kita, setahun kemudian. Dan pertanyaannya adalah: Apakah sudah siap untuk prime time? Apakah sudah memungkinkan untuk membuat aplikasi siap produksi dengan teknik pengembangan web Polymer?

Untuk menjawab pertanyaan ini, saya membawa Polymer untuk test drive guna mengembangkan aplikasi web dan untuk melihat seberapa baik kinerjanya. Artikel ini adalah tentang pengalaman itu dan apa yang saya pelajari dalam prosesnya.

Polymer.js: Konsepnya

Sebelum kita masuk ke tutorial Polymer, pertama-tama mari kita definisikan Polymer.js, bukan untuk apa yang diklaim, tetapi untuk apa sebenarnya.

Saat Anda mulai mencoba Polymer, mau tidak mau Anda akan langsung tertarik dengan pandangan dunianya yang unik. Polimer mengaku mengambil semacam pendekatan kembali ke alam yang "menempatkan elemen kembali di pusat pengembangan web". Dengan Polymer.js, Anda dapat membuat elemen HTML Anda sendiri dan menyusunnya menjadi aplikasi web yang lengkap dan kompleks yang dapat diskalakan dan dipelihara. Ini semua tentang membuat elemen baru (yaitu, kustom) yang kemudian dapat digunakan kembali di halaman HTML Anda secara deklaratif, tanpa perlu mengetahui atau memahami bagian dalamnya.

Bagaimanapun, elemen adalah blok pembangun web. Dengan demikian, weltanschauung Polymer adalah bahwa pengembangan web pada dasarnya harus didasarkan pada perluasan paradigma elemen yang ada untuk membangun komponen web yang lebih kuat, daripada mengganti markup dengan "gobs of script" (untuk menggunakan kata-kata mereka). Dengan kata lain, Polymer percaya dalam memanfaatkan teknologi "asli" browser daripada mengandalkan labirin perpustakaan JavaScript kustom yang semakin kompleks (jQuery et. al.). Sebuah gagasan yang menarik memang.

Oke, jadi begitu teorinya. Sekarang mari kita lihat kenyataannya.

Pengembangan Web Polimer: Kenyataan

Sementara pendekatan filosofis Polymer tentu memiliki manfaat, sayangnya ide itu (setidaknya sampai batas tertentu) lebih maju dari zamannya.

Polymer.js menempatkan serangkaian persyaratan yang besar dan kuat pada browser, mengandalkan sejumlah teknologi yang masih dalam proses standardisasi (oleh W3C) dan belum ada di browser saat ini. Contohnya termasuk shadow dom, elemen template, elemen kustom, impor HTML, pengamat mutasi, tampilan berdasarkan model, peristiwa penunjuk, dan animasi web. Ini adalah teknologi yang luar biasa, tetapi setidaknya sampai sekarang, yang belum datang ke browser modern.

Strategi Polymer adalah membuat pengembang front-end memanfaatkan teknologi terdepan, yang masih akan datang, berbasis browser ini, yang saat ini sedang dalam proses standardisasi (oleh W3C), saat tersedia. Sementara itu, untuk mengisi celah tersebut, Polymer menyarankan penggunaan polyfills (kode JavaScript yang dapat diunduh yang menyediakan fitur yang belum ada di browser saat ini). Polyfill yang direkomendasikan dirancang sedemikian rupa sehingga (setidaknya secara teoritis) akan mulus untuk diganti setelah versi browser asli dari kemampuan ini tersedia.

Baiklah. Tapi biarkan aku meluruskan ini. Setidaknya untuk saat ini, kita akan menggunakan pustaka JavaScript (yaitu, polyfill) untuk menghindari penggunaan Pustaka JavaScript? Nah, itu "menarik".

Intinya, kemudian, adalah bahwa kita berada dalam semacam mode limbo dengan Polymer, karena pada akhirnya mengandalkan (atau mungkin lebih akurat, memperkirakan) teknologi browser yang belum ada. Oleh karena itu, Polymer.js hari ini tampaknya lebih seperti studi tentang bagaimana aplikasi yang berpusat pada elemen dapat dibangun di masa depan (yaitu, ketika semua fitur yang diperlukan diimplementasikan di browser utama dan polyfill tidak lagi diperlukan). Tapi, setidaknya saat ini, Polymer tampaknya lebih seperti konsep yang menarik daripada opsi aktual untuk membuat aplikasi perubahan-pandangan-dunia-Anda yang kuat di sini dan sekarang, yang membuat menulis (atau menemukan) tutorial Polimer sulit dilakukan di luar. dari dokumentasi Google.

Arsitektur Polimer

Sekarang, ke panduan kami. Polymer.js secara arsitektur dibagi menjadi empat lapisan:

Asli: Fitur yang dibutuhkan saat ini tersedia secara native di semua browser utama. Foundation: Polyfill yang mengimplementasikan fitur browser yang dibutuhkan yang belum tersedia secara native di browser itu sendiri. (Tujuannya adalah agar lapisan ini menghilang seiring waktu karena kemampuan yang disediakannya tersedia secara asli di browser.). Core: Infrastruktur yang diperlukan untuk elemen Polymer untuk mengeksploitasi kemampuan yang disediakan oleh lapisan Native dan Foundation. Elemen: Kumpulan elemen dasar, yang dimaksudkan untuk berfungsi sebagai blok penyusun yang dapat membantu Anda membuat aplikasi. Termasuk elemen yang menyediakan: Fungsionalitas dasar seperti ajax, animasi, tata letak fleksibel, dan gerakan. Enkapsulasi API browser dan tata letak CSS yang rumit. Perender komponen UI seperti akordeon, kartu, dan bilah sisi.

Membuat Aplikasi Polimer

Untuk memulai, ada beberapa artikel dan artikel tutorial yang membantu Anda mengenalkan Polimer, konsepnya, dan strukturnya. Tetapi jika Anda seperti saya, ketika Anda telah melaluinya dan siap untuk benar-benar membangun aplikasi Anda, Anda dengan cepat menyadari bahwa Anda benar-benar tidak yakin harus mulai dari mana atau bagaimana membuatnya. Karena saya sekarang telah melalui proses dan menemukan jawabannya, berikut adalah beberapa petunjuk…

Pengembangan web polimer adalah tentang membuat elemen, dan hanya tentang membuat elemen. Jadi, konsisten dengan pandangan dunia Polimer, aplikasi kita akan menjadi... sebuah elemen baru. Tidak lebih dan tidak kurang. Oh oke, saya mengerti. Jadi di situlah kita mulai.

Untuk contoh proyek Polimer kami, saya akan memberi nama elemen tingkat atas aplikasi , karena nama elemen khusus (terlepas dari kerangka kerja apa yang Anda gunakan untuk membuatnya) harus menyertakan tanda hubung (mis., x-tag, elemen polimer, dll.).

Namun, langkah selanjutnya membutuhkan sedikit lebih banyak pemikiran. Kita perlu memutuskan bagaimana kita akan membuat komponen aplikasi kita. Pendekatan yang mudah adalah mencoba mengidentifikasi, dari perspektif visual, komponen dalam aplikasi kita dan kemudian mencoba membuatnya sebagai elemen kustom di Polymer.

Jadi misalnya, bayangkan kita memiliki aplikasi dengan layar berikut:

Kami dapat mengidentifikasi bahwa bilah atas dan menu bilah samping tidak akan berubah dan "konten" aplikasi yang sebenarnya dapat memuat "tampilan" yang berbeda.

Karena itu, satu pendekatan yang masuk akal adalah menciptakan elemen untuk aplikasi kita dan, di dalam elemen itu, kita dapat menggunakan beberapa Elemen UI Polimer untuk membuat bilah atas dan menu bilah samping.

Kami kemudian dapat membuat dua tampilan utama kami, yang akan kami sebut ListView dan SingleView, untuk dimuat ke dalam area "konten". Untuk item dalam ListView, kita dapat membuat ItemView.

Ini kemudian akan menghasilkan struktur seperti ini:

Berita bagus

Sekarang setelah kita memiliki contoh aplikasi Polimer, kita dapat memasukkannya ke halaman web mana pun hanya dengan mengimpor “toptal-app.html” dan menambahkan tag karena, bagaimanapun juga, aplikasi kita hanyalah sebuah elemen. Itu keren.

Faktanya, di situlah letak banyak kekuatan dan keindahan paradigma Polimer. Elemen kustom yang Anda buat untuk aplikasi Anda (termasuk elemen tingkat atas untuk seluruh aplikasi Anda) diperlakukan sebagai elemen lain di halaman web. Oleh karena itu, Anda dapat mengakses properti dan metodenya dari kode atau pustaka JavaScript lainnya (mis., Backbone.js, Angular.js, dll.). Anda bahkan dapat menggunakan pustaka tersebut untuk membuat elemen baru Anda sendiri.

Selain itu, komponen khusus Anda kompatibel dengan pustaka elemen khusus lainnya (seperti X-Tag Mozilla). Jadi, apa pun yang Anda gunakan untuk membuat elemen kustom Anda sendiri, ini kompatibel dengan Polymer dan teknologi browser lainnya.

Oleh karena itu, tidak mengherankan bahwa kami sudah mulai melihat munculnya komunitas Pembuat Elemen yang mengekspos dan berbagi elemen yang baru mereka buat di forum seperti situs Elemen Kustom. Anda dapat pergi ke sana dan mengambil komponen apa pun yang Anda butuhkan dan gunakan saja di aplikasi Anda.

Di samping itu…

Polimer masih merupakan teknologi yang cukup baru sehingga pengembang, terutama pengembang aplikasi pemula, cenderung menganggapnya agak rapuh, dengan sejumlah tepi kasar yang tidak terlalu sulit ditemukan.

Berikut adalah sampelnya:

• Kurangnya dokumentasi dan panduan.
  • Tidak semua Polymer.js UI dan Elemen non-UI didokumentasikan. Terkadang satu-satunya "panduan" tentang cara menggunakannya adalah kode demo. Dalam beberapa kasus, bahkan perlu merujuk ke kode sumber Elemen Polimer untuk lebih memahami cara kerjanya dan dapat/harus digunakan.
  • Tidak sepenuhnya jelas bagaimana mengatur aplikasi yang lebih besar. Secara khusus, bagaimana Anda seharusnya melewatkan objek tunggal di antara elemen? Strategi mana yang harus Anda terapkan untuk menguji elemen kustom Anda? Panduan tentang jenis masalah ini pada saat ini sangat sedikit.

• Kesalahan ketergantungan dan versi-itis. Bahkan ketika Anda mengunduh elemen Polymer.js seperti yang disarankan, Anda mungkin menemukan kesalahan ketergantungan, menunjuk ke dependensi versi yang berbeda dalam elemen yang sama. Meskipun dipahami bahwa Elemen Polimer saat ini sedang dalam pengembangan yang berat, masalah semacam ini dapat membuat pengembangan menjadi cukup menantang, mengikis kepercayaan dan minat pengembang.

• Masalah pada platform seluler. Performa Polymer.js pada platform seluler sering kali berada di antara yang membuat frustrasi dan bermasalah.
  • Mengunduh seluruh perpustakaan dan polyfill (tanpa gzip'ing) lambat, dan Anda perlu mengunduh setiap Elemen Polimer yang ingin Anda gunakan.
  • Memproses polyfill, library, dan elemen kustom tampaknya menjadi tugas yang mahal di platform seluler. Bahkan ketika pengunduhan selesai, Anda masih sering memiliki layar kosong selama beberapa detik.
  • Khususnya untuk fungsionalitas yang lebih kompleks (seperti drag-and-drop atau rendering ke kanvas), Anda mungkin menemukan bahwa fungsionalitas yang berfungsi dengan baik di desktop tidak berfungsi dengan benar, atau belum didukung, pada platform seluler. Dalam kasus khusus saya, salah satu frustrasi yang saya temui adalah dengan merender menjadi kanvas di iOS.
• Pelaporan kesalahan yang tidak memadai atau membingungkan. Terkadang ketika Anda salah mengeja nama atribut, atau hanya memecahkan sesuatu yang terkait dengan lapisan inti itu sendiri, Anda menerima pesan kesalahan aneh di konsol Anda dengan dua tumpukan panggilan yang perlu Anda selidiki untuk mencoba menentukan di mana masalahnya. Terkadang mudah untuk menyelesaikan ini, tetapi terkadang Anda akhirnya perlu mencoba strategi yang sama sekali berbeda hanya untuk menghindari kesalahan karena Anda tidak dapat melacak sumbernya.

Kesimpulan

Polimer adalah teknologi yang menarik, tetapi tidak dapat disangkal masih dalam masa pertumbuhan. Dengan demikian, ini belum cocok untuk pengembangan aplikasi siap produksi tingkat perusahaan yang besar. Selain itu, tidak banyak panduan atau tutorial yang tersedia khusus untuk pengembangan web Polymer.js.

Sejauh apakah pendekatan JavaScript-centric atau DOM-centric benar-benar lebih baik secara fundamental, juri masih belum tahu. Polimer membuat beberapa argumen yang meyakinkan, tetapi argumen kontra memang ada.

Mungkin yang paling menonjol, Polymer membutuhkan tingkat keahlian yang cukup signifikan dalam menggunakan teknologi browser seperti DOM. Anda dalam banyak hal kembali ke hari-hari sebelum jQuery, mempelajari DOM API untuk melakukan tugas-tugas sederhana seperti menambahkan atau menghapus kelas CSS dari sebuah elemen. Ini tentu saja membuatnya terasa, setidaknya pada tingkat tertentu, seperti Anda mengambil langkah mundur daripada maju.

Namun demikian, tampaknya elemen kustom akan menjadi bagian penting dari Pengembangan Web di masa depan, jadi menyelam lebih cepat daripada nanti mungkin akan lebih bijaksana untuk pengembang web saat ini. Dan jika Anda belum pernah mencoba membuat elemen kustom Anda sendiri sebelumnya, Polymer (dan tutorial ini) mungkin adalah tempat yang masuk akal untuk memulai.