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, sebagian besar didukung oleh elemen Polymer's Core and Paper, dan elemen Brick yang dibuat oleh tim di Mozilla.
Saat developer semakin terbiasa dengan pembuatan elemen mereka sendiri dan mulai berpikir untuk membangun aplikasi, muncul sejumlah pertanyaan:
- Bagaimana sebaiknya Anda menyusun UI aplikasi Anda?
- Bagaimana cara Anda bertransisi ke berbagai negara bagian?
- Apa saja strategi untuk meningkatkan performa?
- Dan bagaimana sebaiknya 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 membangunnya. Inilah yang saya pikirkan:
Struktur
Memecah aplikasi menjadi bagian-bagian modular yang dapat digabungkan dan digunakan kembali merupakan tenant utama Komponen Web. Elemen core-* dan paper-* polimer memudahkan untuk memulai dengan potongan-potongan kecil, seperti core-toolbar dan paper-icon-button...
...dan menggunakan kekuatan komposisi, gabungkan dengan berapa pun elemen untuk membuat scaffold aplikasi.
Setelah scaffold generik diterapkan, Anda dapat menerapkan gaya CSS Anda sendiri untuk mengubahnya menjadi pengalaman yang unik bagi 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 langsung memikirkan konten.
Salah satu elemen yang sangat cocok untuk menangani banyak konten adalah core-list.
core-list dapat dihubungkan ke sumber data (pada dasarnya array objek), dan untuk setiap item dalam array, instance template akan dicap. Dalam template ini, Anda dapat memanfaatkan kecanggihan sistem data binding Polymer untuk menghubungkan konten Anda dengan cepat.
Transisi
Setelah mendesain dan mengimplementasikan berbagai bagian aplikasi Anda, tugas selanjutnya adalah mencari tahu cara menavigasi antarbagian tersebut.
Meskipun masih merupakan elemen eksperimental, core-animated-pages menyediakan sistem animasi yang dapat dicocokkan yang dapat digunakan untuk melakukan transisi di antara berbagai status di aplikasi Anda.
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 ada dua jenis: imperatif dan deklaratif. Menggabungkan core-animated-pages dengan salah satu pendekatan dapat valid, bergantung pada kebutuhan project Anda.
Router imperatif (seperti Direktur Flatiron) dapat memproses rute yang cocok, lalu memerintahkan core-animated-pages untuk memperbarui item yang dipilih.
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) benar-benar dapat menggabungkan perutean dan core-animated-pages ke dalam satu elemen, sehingga pengelolaan keduanya menjadi lebih sederhana.
Jika ingin kontrol yang lebih mendetail, Anda dapat melihat library seperti lebih banyak perutean, yang dapat digabungkan dengan core-animated-pages menggunakan data binding dan mungkin memberikan yang terbaik dari kedua hal tersebut.
Performa
Seiring berkembangnya aplikasi, Anda harus tetap memperhatikan bottleneck performa, terutama semua hal yang terkait dengan jaringan karena biasanya ini merupakan bagian paling lambat dari aplikasi web seluler.
Kemenangan performa yang mudah berasal dari pemuatan polyfill Komponen Web secara kondisional.
Anda tidak perlu mengeluarkan semua biaya tersebut jika platform sudah mendapatkan dukungan penuh. Di setiap rilis repo webcomponents.js baru, polyfill juga telah dipecah menjadi file mandiri. Hal ini berguna jika Anda ingin memuat subset polyfill secara kondisional.
<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 manfaat jaringan signifikan yang bisa didapatkan dengan menjalankan semua Impor HTML menggunakan alat seperti Vulcanize.
Vulkan akan menggabungkan impor Anda ke dalam satu paket, secara signifikan mengurangi jumlah permintaan HTTP yang dibuat aplikasi Anda.
Offline
Namun, membangun aplikasi berperforma tinggi tidak menyelesaikan dilema pengguna dengan sedikit atau tanpa konektivitas. Dengan kata lain, jika aplikasi Anda tidak bekerja secara offline, maka itu bukanlah aplikasi seluler. Saat ini Anda dapat menggunakan cache aplikasi yang jumlahnya sangat banyak untuk membuat resource offline, tetapi di masa mendatang, pekerja layanan akan segera menjadikan pengalaman pengembangan offline jauh lebih baik.
Jake Archibald baru-baru ini memublikasikan buku resep yang luar biasa tentang pola pekerja layanan, tetapi saya akan membantu Anda memulai dengan cepat:
Mudah sekali menginstal pekerja layanan. Buat file worker.js, dan daftarkan saat aplikasi Anda melakukan booting.
Penting bagi Anda untuk menemukan worker.js di root aplikasi, hal ini memungkinkannya untuk menangkap permintaan dari jalur mana pun di aplikasi Anda.
Di pengendali penginstalan pekerja, saya meng-cache berbagai resource (termasuk data yang mendukung aplikasi).
Hal ini memungkinkan aplikasi saya memberikan setidaknya pengalaman penggantian kepada pengguna jika mereka mengaksesnya secara offline.
Selanjutnya!
Komponen Web adalah tambahan yang besar untuk platform web, dan masih dalam tahap perkembangan. Dengan semakin banyaknya browser yang mereka gunakan, kami, komunitas developer, dapat mengetahui praktik terbaik dalam menyusun aplikasi kami. Solusi di atas memberi kita titik awal, tetapi masih banyak lagi yang harus dipelajari. Mari kita lanjutkan membuat aplikasi yang lebih baik!