Baru-baru ini, Angular merilis fitur pengembangan "pengalaman" independen yang disebut Zone.js. Meskipun fitur tersebut masih eksperimental, tim Angular telah mengerjakan inovasi penting ini untuk waktu yang lama. Primitif responsif menjadi semakin penting bagi pengembang, menunjukkan bahwa Angular memasuki era baru lainnya. Dependensi sudutKeuntungan Sinyal dan Rxj bahkan lebih jelas, menghilangkan kebutuhan untuk terus-menerus mendengarkan perubahan yang Zone.js bergantung padanya, dan akhirnya bertindak sebagai perantara selama pengembangan.
Angular akan terus menjadi kerangka kerja yang berani dan kuat di masa depan dan memulai transformasi baru.
Pertama-tama, artikel saya tidak dimaksudkan untuk mengajarkan apa pun kepada siapa pun. Saya harap pembaca saya tidak merasa mereka pantas menjadi begitu pasif. Saya mencoba berbagi pengalaman dan pembelajaran saya sebanyak mungkin dan terbuka untuk diskusi. Penting untuk berdiskusi bersama, bertukar pikiran, dan mengevaluasi berdasarkan pemikiran kritis. Tidak boleh dilupakan bahwa masih ada beberapa kebingungan tentang cara kerjanya, terutama ketika teknologi yang dibahas dalam artikel ini masih dialami, dan saya akan mengatakan bahwa bahkan mekanisme deteksi perubahan masih dapat menyebabkan kebingungan di antara tim inti di Angular.
Apa itu Zone.js dan apa fungsinya?
Zone.js adalah perpustakaan kecil yang dikembangkan oleh Brian Ford pada tahun 2010 dengan nama "Zona" untuk mengelola pekerjaan asinkron dalam JavaScript. Terinspirasi oleh bahasa seperti Erlang dan Dart, ini bertujuan untuk menghadirkan konkurensi terstruktur ke lingkungan single-threaded JavaScript. Tim Angular mendapatkan momentum ketika mengadopsi Zones sebagai mekanisme deteksi perubahannya di Angular 2, dan tim Angular mulai menyumbangkannya dalam bentuk Zone.js, memberikan partisipasi masyarakat yang lebih luas dan pengembangan lebih lanjut. Saat ini, meskipun masih terkait erat dengan Angular, Zone.js dapat dibilang sebagai alat yang ampuh untuk memantau dan mengintervensi tugas-tugas asinkron, memungkinkan analisis kinerja, kemampuan penanganan kesalahan, dan banyak fungsi yang dipertanyakan.
Jadi mengapa Angular meninggalkan Zone.js?
Memanfaatkan kemampuan AI untuk dengan mudah mengubah gambar imajiner kami menjadi gambar, kami menggunakan metafora "spons di bawah tempat tidur" untuk membuat visual agar mudah dipahami.
Bayangkan tempat tidur pada gambar di atas, yang tidak diletakkan di lantai, tetapi di atas spons besar. Zone.js seperti spons dalam aplikasi Angular. Spons ini memastikan bahwa tempat tidur duduk di atas alas yang nyaman dan mendukung sekaligus memberikan kenyamanan relatif kepada orang yang tidur. Spons menyerap setiap gerakan tempat tidur, mencegah gerakan di dalam tempat tidur memantulkan ke luar.
Patch monyet di Zone.js mendengarkan semua API asinkron di browser, seperti: peristiwa, komitmen, observable, setTimeout, setInterval, dll.
Dengan mendengarkan ini, aplikasi Angular dapat mendeteksi perubahan apa pun dan dengan demikian memperbarui antarmuka pengguna, pada kenyataannya, seperti tempat tidur pendukung spons, Zone.js juga memungkinkan aplikasi Angular berjalan dengan lancar. Dalam hal ini, masalah kinerja yang tidak kita rasakan dalam proyek yang sangat besar dapat terjadi.
Di sisi lain, struktur kompleks ini tampaknya mencegah kita merasakan perubahan spesifik tertentu dari waktu ke waktu. Setiap karakteristik dan perkembangan sebelumnya, bersama dengan perkembangan internalnya sendiri dan kebutuhan yang berubah, tiba-tiba menjadi penghalang untuk perkembangan dan perkembangan berikutnya.
Ketika kita menarik spons keluar dari bawah kita, kita melihat bahwa kebebasan bergerak alami mulai muncul saat tempat tidur bersentuhan langsung dengan tanah. Ketika efek membatasi kenyamanan spons mulai aus, itu berarti gerakan di tempat tidur sekarang akan terpantul langsung di tanah.
Metafora seperti itu mungkin berarti bahwa spons menyediakan zona nyaman dan memberikan tidur yang relatif lebih nyaman. Zone.js seperti spons ini, ia memberikan zona nyaman yang serius yang memungkinkan kita merasakan setiap perubahan di seluruh permukaan. Namun, seiring waktu, struktur kompleks ini dapat mencegah kita merasakan beberapa perubahan spesifik. Nyeri punggung bawah dapat terjadi ketika kita menarik spons keluar dari bawah kita, dan rasa sakit dan nyeri ini menunjukkan bahwa kita telah turun dari tanah buatan ke tanah alami, dan sementara pengalaman transisi ini bisa sedikit menyakitkan, pada akhirnya, dengan punggung bawah yang lurus, tidur yang lebih nyaman dan sirkulasi yang lebih baik, serta ketajaman fisik dan mental yang lebih sehat. Ketika kita beralih ke bebas zona, yaitu nyeri punggung dan sendi karena tidur di tempat tidur tanpa spons, adalah pertanda baik bahwa kita beralih dari tanah buatan ke tanah alami. Meskipun pengalaman transisi ini agak menyakitkan, nyeri transisi juga menghilang saat punggung bawah kita mulai terbentuk kembali ke keadaan alami sebelumnya, memberikan sirkulasi yang lebih baik; Contoh transisi di sini sesuai dengan Zoneless eksperimental yang kita dengar di Angular v18.
Zone.js dianggap menambah beban tambahan karena melacak operasi asektron dan meneruskannya ke mekanisme deteksi Angular seperti panggilan, peristiwa, kesalahan, dll. Saat ini, dalam hal kinerja Angular, kita tidak dapat melihat atau bahkan merasakan beban ekstra di sini. Zone.js dapat dikembangkan lebih lanjut dan beberapa masalah debugging dapat diselesaikan, tetapi dasarnya di sini adalah peta jalan Angular. Kami melihat bahwa Sinyal yang dikembangkan sendiri sendiri yang bereaksi primitif Zone.js sekarang menghalangi rencana masa depan Angular. Meskipun struktur Sinyal sangat berguna dalam hal mekanisme deteksi dan juga bagus dalam hal kinerja, mudah digunakan dan kuat, Zone.js tidak lagi diperlukan, tetapi bukan perpustakaan yang dapat ditinggalkan dalam semalam.
Kami memahami bahwa Angular tidak ingin membatasi mimpinya, melainkan ingin membangun aplikasi yang lebih fleksibel dan andal dengan kerangka kerja yang lebih mandiri dengan menghilangkan proses perantara sebanyak mungkin. Kami melihat Angular bergerak menuju keadaan yang lebih praktis dan mencoba memanfaatkan peluang untuk memasuki tren naik lagi di masa depan. Sayangnya, dari survei StateofJS saat ini, kami tidak dapat mengatakan bahwa itu dalam tren seperti itu, tetapi kami juga melihat bahwa Angular terbuka untuk semua kemungkinan inovasi.
Bagaimana cara beralih ke mode Zoneless di Angular 18?
Angular 18 hadir dengan langkah yang memungkinkan kita untuk beralih ke mode bebas zona dan menyingkirkan spons. Seperti yang ditunjukkan di bawah ini, kami sekarang dapat memberikan pengalaman ini menggunakan mekanisme deteksi perubahan tanpa zona di fase bootstrap.
Dengan fungsi di atas ditambahkan ke penyedia, kita sekarang dapat menggunakan perintah npm uninstall zone.js untuk menghapus zone.js yang ditentukan dalam array polyfills di bawah ini dari angular.json.
Sekarang kita bisa menggunakan Angular Zoneless!
Apa keuntungan dari Zoneless?
Zoneless menyediakan ekosistem yang lebih efisien untuk aplikasi kami dengan menghilangkan operasi mendengarkan yang tidak perlu. Ini berarti rendering yang lebih cepat, performa yang lebih tinggi, pemuatan halaman yang lebih cepat, ukuran paket yang lebih kecil, dan debugging yang lebih mudah.
Ikuti tes klasik di mana Anda menambahkan penghitung dengan mengklik tombol dan Anda ingin meningkatkan angka itu saat mengklik tombol. Dalam hal ini, kita dapat melihat bahwa nilai yang diubah dirender ketika setiap fungsi dipicu, dan nilai ini berubah di HTML. Karena itu sudah menjadi fungsi dan kita memicunya secara langsung, itu dirender di sini. Tetapi apa yang terjadi jika nilai ini berubah karena pengaruh eksternal dan kita ingin melihat perubahan nilai apa pun tanpa kita memicunya secara manual? Jika ada Zone.js, ia terus-menerus mendengarkan semua perubahan dan memberi tahu Angular atas nama kami. Namun, karena tidak ada mekanisme seperti itu saat ini, kita perlu memicu mekanisme deteksi perubahan setelah beberapa operasi asinkron, atau menggunakan Sinyal atau RxJS secara langsung, sehingga perubahan dapat dideteksi secara langsung karena reaktivitas ini.
Hilangnya Sponge mengajarkan kita bahwa bukan hanya Zone.js yang menghilang, tetapi juga "zona nyaman".
Jika kita menggunakan Zone.js sebagai modul dengan JavaScript mentah, itu akan terlihat seperti ini.
Di Angular, kita tidak perlu berurusan dengan situasi ini; Dengan ngZone, operasi ini sudah bekerja bersama-sama dengan mekanisme deteksi.
Misalnya, dalam kasus DOM langsung, pendengar peristiwa, observable dan komitmen, permintaan HTTP, dan alur kontrol sinkron, kita harus memicu mekanisme deteksi perubahan secara manual untuk operasi asinkron.
Karena Sinyal atau R xjs secara otomatis mendeteksi perubahan, tidak perlu memicu mekanisme deteksi perubahan.
Contoh sinyal:
Sekarang mari kita tulis aplikasi untuk menguji mekanisme deteksi perubahan Zoneless dan Angular dan melihat cara kerjanya.
Setelah memulai interval yang ditentukan di atas sebagai standar, kita melihat bahwa interval mulai bekerja, tetapi DOM tidak disegarkan dan perubahan tidak tercermin. Saat kita menggunakan interval mulai sinyal, kita melihat bahwa itu berfungsi tanpa memicu mekanisme deteksi perubahan Angular. Seperti yang Anda lihat, saat peristiwa klik dan interval sinyal dimulai, Angular memperhatikan perubahan, segera menangkap perubahan dalam interval standar kami, dan kemudian melepaskannya.
Ketika kita mengirim nilai dalam variabel ke komponen induk, kita menemukan bahwa nilai tersebut dipersepsikan secara berbeda dalam kasus push dan default.
Saat kita mengikat input di sebelah kiri, perubahan tercermin ketika tidak ada area, dan demikian pula, kita dapat melihat bahwa perubahan tersebut tercermin setelah mengklik karena janji.
Di sini kita melihat bahwa setelah panggilan HTTP tanpa mendeteksi perubahan, perubahan tidak tercermin, hanya ketika kita memicunya secara manual. Tentu saja, Sinyal dengan mudah mencerminkan pendatang baru ke layar yang diinginkan. Beberapa kodenya adalah sebagai berikut:
app.component.ts
change-detection-demo.component.ts
Aplikasi ini telah dipublikasikan di Stacklibitz, dan Anda dapat melihat pengujian lainnya. Anda juga dapat melacak hasil di UI melalui kode.
Tumpukan blitz:Login hyperlink terlihat.
GitHub:Login hyperlink terlihat.
Ada juga contoh aplikasi di bawah ini yang menunjukkan cara kerja mekanisme deteksi perubahan Angular, dan Anda juga dapat mencobanya dari sana.
Login hyperlink terlihat.
Hal-hal yang perlu dipertimbangkan saat beralih ke mode bebas wilayah
Penting untuk dicatat bahwa, seperti namanya, ExperimentalZonelessChangeDetection masih bersifat eksperimental.
Saat melakukan beberapa pengujian, kami melihat beberapa keanehan dalam mekanisme deteksi perubahan. Misalnya, ketika beberapa perubahan tidak dipicu secara manual, kami tidak melihat perubahan dalam DOM dan statusnya tidak disegarkan. Namun, ketika sinyal atau variabel reaksi lain bekerja di luar mekanisme deteksi perubahan dan menyebabkan DOM disegarkan, kita dapat mengamati bahwa status yang sebelumnya tidak diperbarui juga disegarkan.
Jika Anda ingin mengimplementasikan fitur ini dalam proyek yang ada, Anda harus menguji semua tindakan dan perilaku aplikasi dengan cermat. Secara khusus, pustaka pihak ketiga mungkin mengandalkan Zone.js, yang dapat menyebabkan beberapa kesalahan dan masalah rendering.
Asli:Login hyperlink terlihat. |
Dipaparkan pada 2024-12-30 11:02:42
|
|
|
|
Tuan tanah|
Dipaparkan pada 2024-12-30 11:04:13
|
