Angular Telah Merilis Angular Versi 12, Apa Saja yang Baru?

Last Updated on August 12, 2022 by

Angular JS menjadi salah satu framework JavaScript yang paling sering melakukan peluncuran versi terbaru dalam waktu yang berdekatan.

Angular 11 baru saja dirilis pada tanggal 11 November tahun 2020, namun Angular kembali menghadirkan versi terbaru Angular yakni Angular 12 yang saat ini sudah tersedia versi betanya. Apa saja yang berbeda dari Angular 11 dan 12?

Fitur Angular 12

Versi preview dari Angular 12 sudah dirilis sejak 10 Februari lalu. Saat ini Beta Angular 12.0.0-next.0, sudah tersedia di GitHub. Pada proyek sebelumnya banyak developer yang mengusulkan bahwa Angular 12 akan mendapatkan kemampuan yang memengaruhi produksi dukungan untuk bundler Webpack 5, serta sejumlah peningkatan lainnya.

Rilis produksi secara resmi direncanakan pada bulan Mei. Beberapa fitur yang ada dalam versi beta meliputi:

1. Mengimplementasikan metode appendAll () pada HttpParams.
2. Untuk formulir, terdapat validator minimal dan maksimal yang sedang diperkenalkan kepada developer.
3. Terdapat fitur untuk mengekspor daftar kode status HTTP.
4. Penambahan fitur ke Angular Language Service yang memungkinkan akses lokasi untuk komponen yang menggunakan file template.
5. Penambahan diagnostik untuk menyarankan pengaktifan ‘strictTemplates’ memberikan cara bagi server bahasa untuk mengambil diagnostik opsi compiler.
6. Patch yang menambahkan API untuk mengambil blok periksa jenis template untuk template, jika ada di lokasi file, dan pemilihan node TS di TCB yang sesuai dengan node template tempat permintaan TCB dibuat. Hal ini pun akan membantu dalam proses debug.
7. Penambahan perintah untuk mendapatkan komponen untuk file template, untuk layanan bahasa.
8. Berbagai perbaikan bug juga ditampilkan, mempengaruhi compiler, compiler-CLI, Bazel build tool, router, dan bagian lain dari Angular.

Baca juga : Angular JS Tutorial: Membuat proyek web AngularJS dasar

Peningkatan dari Versi Sebelumnya

Berikut ini kami jabarkan fitur-fitur Angular 11, untuk melihat perbedaan antara Angular 11 dan Angular versi terbaru.

1. Dukungan Hot Module Replacement (HMR)

Hot Module Replacement adalah mekanisme yang memungkinkan modul diganti tanpa penyegaran browser penuh. Fitur ini adalah konsep lama untuk Angular di mana pengembang telah bekerja dengan HMR di versi sebelumnya.

Salah satu fitur menarik dari Angular 11 adalah, Angular 11 menawarkan dukungan untuk HMR dengan konfigurasi yang diperlukan dan perubahan kode yang membuatnya kurang ideal untuk disertakan dengan cepat di Angular.

Fitur ini tidak diaktifkan di versi sebelumnya. Angular 11 memungkinkan CLI untuk mengaktifkan HMR (server dev) saat memulai aplikasi dengan ‘ng serve.’

2. Pembaruan pada Operasi Byelog

Operasi Byelog merupakan salah satu item atau bagian Angular Roadmap di mana tim sudut telah berfokus pada investasi upaya rekayasa yang signifikan untuk memprioritaskan masalah, sebelum memiliki pemahaman jelas tentang kebutuhan komunitas yang luas.

Semua masalah developer saat ini telah berhasil diprioritaskan di masing-masing dari tiga ‘monorepo’ yang akan dilanjutkan dengan ini sebagai upaya berkelanjutan saat masalah baru dilaporkan. Proses ini juga memecahkan beberapa masalah populer di router dan formulir.

Semua masalah sekarang akan diprioritaskan dalam waktu 2 minggu setelah terjadinya, yang telah mengurangi ukuran simpanan Angular dan menyelesaikan banyak masalah.

3. Automatic Inlining of Fonts

Angular 11 menampilkan penyejajaran font otomatis yang mengubah Font dan Ikon Google Anda menjadi sebaris di html indeks. Hal ini pun akan terjadi setiap kali Anda menyetel flag di angular.json Anda di bawah opsi build.

CLI Angular akan mendownload dan inline font selama waktu kompilasi yang sedang digunakan dan ditautkan dalam aplikasi.

Fitur Angular 11 ini diaktifkan secara default untuk konfigurasi produksi. Namun, yang perlu Anda lakukan untuk memanfaatkan pengoptimalan ini adalah memastikan koneksi internet tersedia dan stabil selama Anda melakukan build, jika build dijalankan pada CI. Anda juga perlu memperbarui aplikasi Anda untuk mengaktifkan ini secara default di aplikasi yang dibangun dengan versi 11.

4. Component Test Harnesses

Componen Test Harnesses adalah fitur yang diperkenalkan di Angular versi 9. Fitur ini memberikan permukaan API yang kuat dan terbaca yang membantu untuk menguji komponen Material Angular.

Component Test Harnesses menyediakan cara bagi pengembang untuk berinteraksi dengan komponen Material Angular dengan menggunakan API yang didukung saat pengujian.

Fitur ini adalah salah satu dari 11 keuntungan dalam menggunakan Angular, di mana pengembang dapat lebih kuat rangkaian pengujiannya dengan menyediakan harness untuk semua komponen.

Anda juga dapat melihat sesuatu yang baru di Angular 11, yaitu fungsi paralel, peningkatan kinerja, dan API baru.

Fungsi paralel bekerja dengan tindakan asinkron dalam pengujian dengan membiarkan pengembang berfungsi beberapa interaksi asinkron dengan komponen secara paralel. Dengan fungsi deteksi perubahan manual, pengembang dapat menonaktifkan deteksi perubahan otomatis dalam pengujian unit dan mengakses kontrol deteksi perubahan yang lebih terperinci.

5. Updated Language Service Preview

Angular 11 menghadirkan Layanan Bahasa Angular yang menyediakan alat bantu untuk mengembangkan produktivitas dan kesenangan dalam lingkungan Angular. Bentuk layanan bahasa saat ini bergantung pada View Engine yang memberikan pengalaman yang lebih kuat dan akurat bagi pengembang.

Angular 11 mengubah aturan ini untuk layanan bahasa untuk menyimpulkan dengan benar tipe generik dalam template seperti yang dilakukan oleh compiler TypeScript. Fitur Angular 11 baru yang kuat ini masih dalam pengembangan dan menyediakan layanan bahasa berbasis Ivy yang lebih kuat dan akurat.

6. Peningkatan Angular ESlint

Jadi sebelum versi baru ini, Angular selalu menerapkan linting dengan TSLint secara default, tetapi TSLint sekarang tidak digunakan lagi oleh pembuatnya dan merekomendasikan migrasi ke ESLint sepenuhnya.

Dengan banyak bantuan anggota komunitas Angular, jalur migrasi pihak ketiga dibangun dengan typescript-eslint, angular-eslint dan tslint-to-eslint-config, dan ini telah diuji untuk memastikan kelancaran transisi untuk pengembangan Angular.

Oleh karena itu.  ke depannya penggunaan TSLint dan bahkan Codelyzer sudah tidak digunakan lagi, yang berarti implementasi Angular default untuk linting tidak lagi tersedia, tetapi Anda dapat menggabungkan angular-eslint dalam sebuah proyek dan bermigrasi dari TSLint.

7. Mendukung pengembangan yang lebih cepat

Angular 11 telah membawa pengembangan dan siklus build yang lebih cepat yang membuat pembaruan ke beberapa area utama. Area-area tersebut adalah, ‘Ngcc – Angular Compiler’ dan ‘TypeScript v4.0.’ Proses pembaruan ‘ngcc’ akan menjadi 4x lebih cepat sebagai perubahan baru di Angular 11.

Hal ini pun berarti pengguna harus menghabiskan lebih sedikit waktu untuk menunggu pembangunan dan pembangunan kembali selesai. Kontributor Angular, Joost, saat membuat profil compiler Angular, harus membuat compiler Typecript lebih cepat untuk meningkatkan ‘Ngcc.’

Perubahan ini pun dilakukan di Typecript 4.1 sehingga ketika Angular mendukung Typecript 4.1 di versi lebih lanjut, itu akan membantu Anda lebih cepat dalam membangun aplikasi.

8. Peningkatan Internet Explorer

Angular 11 menghapus semua dukungan untuk versi lama Internet Explorer versi 9 dan 10 dan bahkan versi seluler. Satu-satunya versi IE yang sekarang masih didukung adalah 11, dan API yang tidak digunakan lagi juga telah dihapus.

9. Dukungan Webpack 5

Angular 11 memiliki dukungan WebPack 5 eksperimental opt-in. Hal ini berarti Anda dapat memilih untuk menggunakan versi 5 webpack dalam proyek Anda ke depannya.

Angular berencana untuk memimpin jalur ini dan memungkinkan build yang lebih cepat dengan caching disk yang benar-benar persisten dan bahkan ukuran bundel yang lebih kecil dengan ‘cjs tree-shaking.’ Ingatlah bahwa ini masih eksperimental, jadi jangan gunakan dulu dalam produksi.

10. Improved Logging dan Reporting

Angular versi 11 ini juga memiliki fitur terbaru dari segi cara pelaporan dilakukan pada fase pembangun selama pengembangan. Perubahan baru sekarang telah dibuat pada CLI untuk membuat log dan bahkan laporan umumnya mudah dibaca.

Perbedaan Angular 12 dan Angular 11

Angular 12 merupakan peningkatan dari Angular 11. Tidak jauh berbeda dari Angular 11, Angular versi terbaru yang akan rilis secara resmi hanya mendapat tambahan-tambahan fitur dari versi sebelumnya. Berikut perbedaannya:

1. Pada Angular 12 terdapat penambahan fitur ke Angular Language Service yang memungkinkan akses lokasi untuk komponen yang menggunakan file template. Sementara pada pada Angular 11 pratinjau layanan bahasa menggunakan Ivy.
2. Pada Angular 12 terdapat penambahan diagnostik untuk menyarankan pengaktifan ‘strictTemplates’ memberikan cara bagi server bahasa untuk mengambil diagnostik opsi compiler.
3. Dibanding dengan Angular 11, Angular 12 menampilkan berbagai perbaikan bug juga ditampilkan, mempengaruhi compiler, compiler-CLI, Bazel build tool, router, dan bagian lain dari Angular. Hal ini membuat Angular 12 lebih baik dari segi perbaikan bug.

Jika Anda ingin tahu lebih banyak informasi seputar teknologi pembangunan website maupun aplikasi, jangan lupa kunjungi Web App di https://appkey.id atau download aplikasinya di Google Play Store agar Anda tidak ketinggalan informasi terbaru.