Chrome Dev Summit 2014 - Mari kita bangun beberapa aplikasi dengan Polymer

Pada tahun sebelumnya, tim Polymer telah menghabiskan banyak waktu untuk mengajari developer cara membuat elemen mereka sendiri. Hal ini menyebabkan ekosistem yang berkembang pesat, yang sebagian besar didukung oleh elemen Core and Paper dari Polymer, dan elemen Brick yang dibuat oleh tim di Mozilla.

Saat developer makin akrab dengan pembuatan elemen-elemen mereka sendiri dan mulai berpikir untuk membangun aplikasi, hal ini akan memunculkan sejumlah pertanyaan:

  • Bagaimana sebaiknya Anda membuat struktur UI aplikasi?
  • Bagaimana cara bertransisi melalui berbagai status?
  • Apa saja strategi untuk meningkatkan performa?
  • Dan bagaimana seharusnya Anda memberikan pengalaman offline?

Untuk Chrome Dev Summit, saya mencoba menjawab pertanyaan ini dengan membuat aplikasi kontak kecil dan menganalisis proses yang saya lalui untuk membuatnya. Inilah yang saya pikirkan:

Struktur

Memecah aplikasi menjadi bagian-bagian modular yang dapat digabungkan dan digunakan kembali adalah penyewa utama Komponen Web. Elemen core-* dan paper-* Polymer memudahkan Anda untuk memulai dengan potongan-potongan kecil, seperti paper-toolbar dan paper-icon-button.

Polymer membantu developer membangun aplikasi lebih cepat

Dan dengan kekuatan komposisi, gabungkan dengan sejumlah elemen untuk membuat scaffold aplikasi.

Polimer membuat Komponen Web lebih manis

Setelah memiliki scaffold generik, Anda dapat menerapkan gaya CSS Anda sendiri untuk mengubahnya menjadi pengalaman yang unik untuk brand Anda. Kelebihan melakukan hal ini dengan komponen adalah memungkinkan Anda menciptakan pengalaman yang sangat berbeda sambil memanfaatkan primitif pembuatan aplikasi yang sama. Dengan scaffold, Anda dapat beralih ke konten yang akan dibuat.

Satu elemen yang sangat cocok untuk menangani banyak konten adalah core-list.

Polimer membuat Komponen Web lebih manis

core-list dapat dihubungkan ke sumber data (pada dasarnya array objek), dan untuk setiap item dalam array, instance template akan dicetak. Dalam template, Anda dapat memanfaatkan kecanggihan sistem data binding Polymer untuk menghubungkan konten Anda dengan cepat.

Transisi

Dengan berbagai bagian aplikasi Anda yang didesain dan diimplementasikan, tugas berikutnya adalah mencari tahu cara menavigasi di antara bagian-bagian tersebut.

Meskipun masih merupakan elemen eksperimental, core-animated-pages menyediakan sistem animasi yang dapat dicocokkan yang dapat digunakan untuk transisi di antara berbagai status di aplikasi Anda.

Kartu laporan Polymer perlu ditingkatkan

Namun, animasi hanyalah setengah dari teka-teki. Aplikasi perlu menggabungkan animasi tersebut dengan router untuk mengelola URL-nya dengan benar.

Dalam dunia {i>routing<i} Komponen Web terbagi menjadi dua jenis: imperatif dan deklaratif. Menggabungkan core-animated-pages dengan salah satu pendekatan dapat valid, bergantung pada kebutuhan project Anda.

Router imperatif (seperti Flatiron's Director) dapat memproses rute yang cocok, lalu memerintahkan core-animated-pages untuk memperbarui item yang dipilih.

Kartu laporan Polymer perlu ditingkatkan

Hal ini dapat berguna jika Anda perlu melakukan beberapa pekerjaan setelah rute cocok dan sebelum bagian berikutnya dialihkan.

Di sisi lain, router deklaratif (seperti app-router) sebenarnya dapat menggabungkan perutean dan core-animated-pages menjadi satu elemen, sehingga pengelolaan keduanya menjadi lebih sederhana.

Kartu laporan Polymer perlu ditingkatkan.

Jika ingin kontrol yang lebih halus, Anda dapat melihat library seperti lebih banyak perutean, yang dapat digabungkan dengan core-animated-pages menggunakan data binding, dan mungkin memberikan yang terbaik dari keduanya.

Performa

Seiring berkembangnya aplikasi, Anda harus memperhatikan bottleneck performa, terutama apa pun yang berkaitan dengan jaringan, karena ini sering kali menjadi bagian paling lambat dari aplikasi web seluler.

Keuntungan performa yang mudah berasal dari pemuatan polyfill Komponen Web secara bersyarat.

Kartu laporan Polymer perlu ditingkatkan

Tidak ada alasan untuk mengeluarkan semua biaya tersebut jika platform sudah memiliki dukungan penuh. Dalam setiap rilis repo webcomponents.js baru, polyfill juga telah dibagi menjadi file mandiri. Hal ini berguna jika Anda ingin memuat subset polyfill secara bersyarat.

<script>
    if ('import' in document.createElement('link')) {
    // HTML Imports are supported
    } else {
    document.write(
        '<script src="bower_components/webcomponentsjs/HTMLImports.min.js"><\/script>'
    );
    }
</script>

Ada juga keuntungan jaringan yang signifikan yang bisa didapatkan dari menjalankan semua Impor HTML Anda melalui alat seperti Sense.

Kartu laporan Polymer perlu ditingkatkan.

Sense akan menggabungkan impor menjadi satu paket, secara signifikan mengurangi jumlah permintaan HTTP yang dibuat aplikasi Anda.

Offline

Namun, hanya membangun aplikasi berperforma tinggi tidak akan menyelesaikan dilema pengguna dengan sedikit atau tanpa konektivitas. Dengan kata lain, jika aplikasi Anda tidak bekerja secara offline, maka itu sebenarnya bukan aplikasi seluler. Sekarang Anda dapat menggunakan cache aplikasi yang banyak disamaratakan untuk membuat sumber daya offline, tetapi di masa mendatang, Pekerja Layanan akan segera membuat pengalaman pengembangan offline jauh lebih baik.

Baru-baru ini, Jake Archibald menerbitkan buku masak pola pekerja layanan yang luar biasa, tetapi saya akan memberikan cara cepat untuk membantu Anda:

Menginstal pekerja layanan sangat mudah. Buat file worker.js, dan daftarkan saat aplikasi Anda melakukan booting.

Kartu laporan Polymer perlu ditingkatkan

Anda harus menemukan worker.js di root aplikasi agar dapat menangkap permintaan dari jalur mana pun dalam aplikasi Anda.

Dalam pengendali penginstalan pekerja, saya meng-cache muatan resource (termasuk data yang mendukung aplikasi).

Kartu laporan Polymer perlu ditingkatkan

Hal ini memungkinkan aplikasi saya untuk memberikan setidaknya pengalaman penggantian kepada pengguna jika mereka mengaksesnya secara offline.

Maju!

Komponen Web adalah tambahan besar untuk platform web, dan komponen ini masih sangat baru. Saat mereka menggunakan lebih banyak browser, terserah kami, komunitas developer, untuk mengetahui praktik terbaik dalam menyusun aplikasi. Solusi di atas memberi kita titik awal, tetapi masih banyak lagi yang harus dipelajari. Teruslah membangun aplikasi yang lebih baik!