Mengapa solusi untuk memperlambat aplikasi web bukanlah seperangkat alat yang lebih rumit
Beberapa waktu lalu saya sedang mengerjakan aplikasi Angular. Yang mengejutkan saya adalah bahwa Angular sebenarnya bukan hanya sebuah kerangka kerja, namun merupakan keseluruhan platform yang dibangun di atas platform Web. Alasan dibalik hal ini adalah untuk memberikan pengembang cara terpadu dalam membangun aplikasi di berbagai platform. Tapi berapa biaya penggunaan abstraksi ini?
Bagi Anda, sebagai pengembang Web, ini berarti bahwa untuk sebagian besar hal yang Anda ketahui cara melakukannya di Web, ada (sedikit) versi berbeda untuk mencapai hal tersebut di Angular. Ini juga berarti bahwa Anda tidak memiliki akses langsung ke teknologi web baru yang baru dirilis, Anda harus menunggu tim Angular menambahkan dukungan untuk teknologi tersebut. Dukungan ServiceWorker adalah contoh yang bagus.
Mungkin yang paling penting, ini berarti pasti ada lapisan JavaScript yang berjalan di antara kode aplikasi Anda dan browser yang menjalankan platform Angular. Bagaimana pengaruhnya terhadap kinerja?
Angular sangat menekankan performa di Angular 2 dan rilis berikutnya. Performanya membangun arsitektur yang sangat modular, kompiler Ahead-of-Time (AOT), dan pra-render. Namun, saat menulis aplikasi Angular, saya merasa seolah-olah saya dapat membuat aplikasi berbasis komponen yang sama menggunakan Komponen Web dan menjalankannya langsung di browser. Tentunya akan lebih cepat?
Bisakah kita membuat segalanya lebih mudah…dan lebih cepat?
Saya mendapat dukungan untuk ide saya di Chrome Dev Summit sambil mendengarkan Alex Russell memberikan "pembicaraan yang sangat keras mengenai kinerja aplikasi Web". Dia bahkan mengklaim bahwa jika Anda menggunakan suatu kerangka kerja, Anda “gagal secara default” dalam hal kinerja. Kerangka kerja ini berfokus pada melayani pengembang, seringkali dengan mengorbankan pengguna akhir. Pengembang perlu bekerja secara sadar (terkadang di sekitar kerangka kerja) untuk memberikan pengalaman yang cepat kepada penggunanya. Saya bertemu dengan Alex setelah ceramahnya, dan kami berdiskusi menarik tentang bagaimana masalah ini semakin diperburuk oleh perangkat dan jaringan di kehidupan nyata.
Pada titik ini saya tertarik dan ingin melihat apakah saya benar-benar dapat membuat ulang Angular hanya dengan Polimer, dan apakah aplikasi itu akan lebih cepat daripada aplikasi Angular yang dioptimalkan.
Agar lebih fokus, saya membagi temuan saya menjadi dua postingan. Postingan pertama ini akan membahas pertanyaan awal saya, dapatkah Komponen Web digunakan untuk membangun pengalaman web yang lebih cepat dengan peralatan yang lebih sedikit? Bagian kedua akan membahas pengalaman pengembang sebenarnya dalam membangun aplikasi dengan dua cara ini dan bagaimana kami dapat meningkatkannya.
Aplikasi dan jeruk
Sekarang beberapa dari Anda mungkin berpikir bahwa membandingkan Angular, sebuah kerangka kerja, dengan Polymer, sebuah perpustakaan, tidak seperti membandingkan apel dan jeruk. Bagaimanapun, yang satu dimaksudkan untuk membangun aplikasi sementara yang lain hanya berkaitan dengan komponen bangunan.
Ternyata, cara Anda membuat aplikasi dari komponen adalah dengan menggabungkan komponen yang lebih kecil menjadi komposisi yang lebih kompleks hingga Anda mendapatkan sebuah aplikasi. Jadi, untuk membangun aplikasi berbasis komponen, yang Anda perlukan hanyalah cara membuat komponen.
Baik Angular dan Polymer dikirimkan dengan seperangkat alatnya sendiri untuk membantu pengembang. Yang paling penting, keduanya menyertakan alat baris perintah (CLI) yang dapat digunakan untuk mem-bootstrap proyek baru dan membangun aplikasi untuk penerapan. Polymer juga menyertakan beberapa fitur mirip kerangka kerja seperti dukungan untuk perutean.
Pengaturan Tes Saya
Untuk membandingkan dua pendekatan dalam membangun aplikasi, saya perlu membangun aplikasi yang sama dengan keduanya. Aplikasi yang saya kembangkan adalah aplikasi portal tiruan yang mencantumkan dan menampilkan statistik pasien. Ini terdiri dari tiga tampilan: 1) tampilan login, 2) tampilan daftar dengan pengeditan master/detail, dan 3) tampilan analitik yang memperlihatkan data grafik.
Aplikasi Angular menggunakan "Kendo Grid" dan "Charts" sebagai tambahan pada kerangka inti Angular. Aplikasi Polymer, pada gilirannya, menggunakan “Vaadin Grid” dan “Charts”. Meskipun komponen-komponennya tidak identik, kompleksitas dan fungsinya cukup mirip untuk digunakan dalam perbandingan ini.
Saya membangun aplikasi dengan mengikuti instruksi untuk pembuatan produksi. Untuk Angular 2, itu berarti menggunakan mode kompilasi dan produksi Ahead-of-Time (AOT) dalam build (ng build --aot --prod). Untuk Polymer, saya menggunakan polymer build untuk membuat build yang dibundel (menggabungkan dependensi ke dalam file sesedikit mungkin). Kedua aplikasi menggunakan pemuatan lambat dependensi per tampilan. Proses pembuatan aplikasi Polymer juga membuat Service Worker yang memuat tampilan berikutnya ke dalam cache saat pengguna masuk.
Kedua aplikasi disajikan dengan Gzip diaktifkan dan dikomunikasikan dengan REST API yang sama yang dihosting di localhost. Untuk mendapatkan pengukuran yang lebih realistis, saya menggunakan simulasi koneksi “Good 3G” dengan “Perangkat Kelas Atas” di Chrome Dev Tools.
Saya menjalankan semua tes dengan Chrome. Saya juga menjalankan tes perbandingan di webpagetest.org dengan versi yang diterapkan di halaman GitHub.
Seberapa cepat hal ini berjalan?
Jelas ada pemenang dalam hal kecepatan pemuatan awal. Aplikasi berbasis Polimer telah lengkap secara visual dan siap berinteraksi hanya dalam 0,8 detik. Aplikasi Angular membutuhkan waktu 4 detik lebih lama untuk menyelesaikannya (4,8 detik). Untuk pemuatan awal, Polymer 6x lebih cepat dibandingkan Angular.
Kenapa ini? Bahkan dengan kompilasi AOT, Angular 2 memiliki dua kelemahan berbeda dibandingkan Polymer. Pertama, karena semuanya ada dalam JavaScript, maka semuanya perlu diunduh, diurai, dan dievaluasi sebelum apa pun dapat ditampilkan kepada pengguna. Polymer, di sisi lain, dapat menggunakan kemampuan streaming bawaan browser untuk menampilkan aplikasi saat sedang diunduh. Kedua, Komponen Web adalah konstruksi asli browser. Tidak peduli seberapa optimal JS yang dihasilkan Angular, ada beberapa hal yang lebih cepat jika dijalankan langsung di browser itu sendiri.
Untuk pemuatan awal, Polymer 6x lebih cepat dibandingkan Angular.
Untuk pemuatan halaman berikutnya, perbedaannya tidak terlalu drastis. Ada beberapa perbedaan, tapi saya rasa perbedaannya sebagian besar disebabkan oleh komponen yang digunakan pada halaman tersebut (grafik dan kisi data) dibandingkan teknologi yang digunakan. Bagan di bawah ini merangkum pengukuran kinerja untuk keseluruhan aplikasi.
Menariknya, aplikasi juga memuat lebih cepat saat menggunakan Safari dan polyfill Komponen Web:
Kedua aplikasi memiliki ukuran yang kira-kira sama dalam hal pengunduhan (Polymer: 630kB, Angular: 689kB) dan baris kode (Polymer: baris 1999, Angular: baris 1953).
“Tes selengkapnya dapat ditemukan di sini.”
Lalu bagaimana dengan pra-render?
Saya bisa menggunakan pra-render di aplikasi Angular untuk meningkatkan kecepatan yang dirasakan. Saya katakan dirasakan karena meskipun pra-render memungkinkan pengguna melihat (perkiraan yang baik) halaman akhir lebih cepat, kompleksitas tambahan sebenarnya dapat membuat halaman menjadi lebih interaktif. Saat skrip dimuat, halaman tampak selesai, tetapi tidak ada yang terjadi saat pengguna mencoba berinteraksi dengan halaman tersebut.
Ada alasan lain, seperti SEO, mengapa Anda mungkin ingin melakukan pra-render, tetapi sejauh menyangkut kinerja, saya ingin fokus pada berapa lama waktu yang dibutuhkan agar aplikasi dapat digunakan.
Perlu diperhatikan bahwa Polymer tidak mendukung pra-render. Sebaliknya, tim Polymer menganjurkan penggunaan pola PRPL untuk mencapai kecepatan yang sebanding dengan pra-render tanpa kerumitan tambahan dalam menjalankan aplikasi baik di server maupun di browser.
Kesimpulan
Komponen Web cepat. Untuk pemuatan awal, saya dapat mencapai kecepatan 6x dibandingkan dengan aplikasi yang sama yang diterapkan di Angular. Dan saya dapat mencapai percepatan ini dengan seperangkat alat yang lebih sederhana — tanpa kompilasi AOT, tanpa pra-render.
Namun masih ada pertanyaan lain — bisakah Anda membuat aplikasi yang nyata dan kompleks hanya dengan Komponen Web? Tidak ada gunanya bagi kita jika Komponen Web cepat jika kita tidak dapat menggunakannya untuk membangun aplikasi. Kekuatan Framework ada pada struktur yang mereka tawarkan untuk membantu pengembang membangun aplikasi yang besar dan dapat dipelihara. Ini adalah sesuatu yang tidak ditawarkan oleh Polimer atau Komponen Web secara umum.
Di bagian kedua artikel ini, saya akan menyelami pengalaman pengembang dalam membuat aplikasi ini dan apa yang mungkin dapat kami lakukan untuk mempermudah pengembang dalam membangun pengalaman web yang sangat cepat.
Sumber untuk kedua aplikasi ada di GitHub:
Awalnya diterbitkan di vaadin.com.
