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

Selama setahun sebelumnya, tim Polymer telah menghabiskan banyak waktu untuk mengajari developer cara membuat elemen mereka sendiri. Hal ini telah menghasilkan ekosistem yang berkembang pesat, yang sebagian besar didukung oleh elemen Core dan Paper Polymer, serta elemen Brick yang dibuat oleh tim di Mozilla.

Saat developer semakin terbiasa membuat elemen mereka sendiri dan mulai memikirkan cara mem-build aplikasi, hal ini akan menimbulkan sejumlah pertanyaan:

  • Bagaimana sebaiknya Anda menstruktur UI aplikasi?
  • Bagaimana cara Anda bertransisi melalui berbagai status?
  • Apa saja strategi untuk meningkatkan performa?
  • Lalu, bagaimana cara Anda memberikan pengalaman offline?

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

Struktur

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

Polymer membantu developer membangun aplikasi dengan lebih cepat

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

Polymer membuat Komponen Web lebih menarik

Setelah memiliki scaffold umum, Anda dapat menerapkan gaya CSS Anda sendiri untuk mengubahnya menjadi pengalaman yang unik bagi brand Anda. Keuntungan melakukan hal ini dengan komponen adalah Anda dapat membuat pengalaman yang sangat berbeda sekaligus memanfaatkan primitif pembuatan aplikasi yang sama. Dengan adanya scaffold, Anda dapat beralih untuk memikirkan konten.

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

Polymer membuat Komponen Web lebih menarik

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

Transisi

Dengan berbagai bagian aplikasi yang telah dirancang dan diterapkan, tugas berikutnya adalah mencari tahu cara menavigasi di antara bagian-bagian tersebut.

Meskipun masih merupakan elemen eksperimental, core-animated-pages menyediakan sistem animasi plug-in yang dapat digunakan untuk melakukan transisi di antara berbagai status dalam 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.

Di dunia Web Components, pemilihan rute tersedia dalam dua jenis: imperatif dan deklaratif. Menggabungkan core-animated-pages dengan salah satu pendekatan dapat valid, bergantung pada kebutuhan project Anda.

Router imperatif (seperti Director Flatiron) dapat memproses rute yang cocok, lalu menginstruksikan 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 ditransisikan.

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

Kartu laporan Polymer perlu ditingkatkan.

Jika menginginkan kontrol yang lebih terperinci, Anda dapat melihat library seperti more-routing, yang dapat digabungkan dengan core-animated-pages menggunakan data binding dan mungkin memberi Anda yang terbaik dari keduanya.

Performa

Saat aplikasi Anda terbentuk, Anda harus terus memantau bottleneck performa, terutama apa pun yang terkait dengan jaringan karena ini sering kali merupakan bagian paling lambat dari aplikasi web seluler.

Peningkatan performa yang mudah diperoleh dengan memuat polyfill Komponen Web secara kondisional.

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 dipecah menjadi file mandiri. Hal ini berguna jika Anda ingin memuat subkumpulan 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 peningkatan jaringan yang signifikan yang dapat diperoleh dari menjalankan semua Impor HTML Anda melalui alat seperti Vulcanize.

Kartu laporan Polymer perlu ditingkatkan.

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

Offline

Namun, hanya membuat aplikasi yang berperforma tinggi tidak akan menyelesaikan dilema pengguna dengan sedikit atau tanpa konektivitas. Dengan kata lain, jika aplikasi Anda tidak berfungsi secara offline, aplikasi tersebut bukanlah aplikasi seluler. Saat ini, Anda dapat menggunakan cache aplikasi yang banyak dikritik untuk membuat resource Anda offline, tetapi untuk masa mendatang, Pekerja Layanan akan segera membuat pengalaman pengembangan offline menjadi jauh lebih baik.

Jake Archibald baru-baru ini memublikasikan buku panduan pola pekerja layanan yang luar biasa, tetapi saya akan memberikan panduan memulai untuk membantu Anda:

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

Kartu laporan Polymer perlu ditingkatkan

Anda harus menempatkan worker.js di root aplikasi. Hal ini memungkinkan worker.js untuk menangkap permintaan dari jalur apa pun di aplikasi Anda.

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

Kartu laporan Polymer perlu ditingkatkan

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

Mari kita lanjutkan.

Komponen Web adalah tambahan besar untuk platform web, dan masih dalam tahap awal. Saat aplikasi ini tersedia di lebih banyak browser, kita, komunitas developer, harus menentukan praktik terbaik untuk menyusun aplikasi. Solusi di atas memberi kita titik awal, tetapi masih banyak hal yang perlu dipelajari. Mari kita lanjutkan untuk membuat aplikasi yang lebih baik.