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.
Dan melalui kekuatan komposisi, gabungkan dengan sejumlah elemen untuk membuat scaffold aplikasi.
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.
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.
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.
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.
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.
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.
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.
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).
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.