Ardian Fazri
Posted on
Updated on
Tags :

Table of Content

id

Apa saja fitur terbaru di Angular 15?

Saya mempelajari framework angular dari versi pertamanya, mereka yang dulunya sangat simple karena menggunakan javascript. Kemudian mereka membuat ulang angular supaya lebih modular dengan typescript dan rajin update hingga versi 15.

Apa saja perubahan dan yang baru di Angular 15?

Standalone APIs sekarang sudah menjadi Developer Preview

Di versi 14, mereka mengenalkan Standalone API yang memungkinkan kita sebagai developer untuk membuat aplikasi tanpa NgModules. Dan mereka mengabarkan bahwa di versi 15, Standalone API sudah masuk ke versi stabil dan akan selalu berkembang setelahnya.

Saya sebenarnya masih belum pernah mencoba hal ini, tapi dari apa yang saya baca, kita tidak perlu mengimport NgModules untuk menggunakan aplikasi angular, kita bisa langsung panggil komponen yang kita inginkan. Mingko Gechev memberikan contoh kode seperti ini.

import {bootstrapApplication} from '@angular/platform-browser';
import {ImageGridComponent} from './image-grid';

@Component({
    standalone : true,
    selector : 'photo-gallery',
    imports : [ImageGridComponent],
    template: `
        ... <image-grid [images]="imageList"></image-grid>
    `,
})

export class PhotoGalleryComponent {
    // Component logic
}

bootstrapApplication(PhotoGalleryComponent);

Router & HttpClient tree-shakable standard APIs

Infonya kita bisa membuat muti-route application dengan menggunakan new router standalone API. Cara pendeklarasiaannya adalah sebagai berikut :

export const appRoutes: Routes = [{
    path : 'lazy',
    loadChildren: () => import('./lazy/lazy.routes')
    .then(routes => routes.lazyRoutes)
}];

Dimana lazyRoutes dideklarasikan sebagai berikut :

import {Routes} from '@angular/router';
import {LazyComponent} from './lazy.component';

export const lazyRoutes: Routes = [{path: '', component: LazyComponent}];

dan akhirnya, kita bisa meregistrasikan appRoutes di dalam bootstrapApplication call.

bootstrapApplication(AppComponent, {
    providers: [
        provideRouter(appRoutes)
    ]
})

Keuntungan lainnya menggunakan provideRouter APi adalah tree-shakable. Apa itu tree-shakable? Menggoyang pohon?

Pengertian dari Tree Shaking

Karena artikel ini, saya jadi perlu membaca beberapa hal yang saya tidak fahami. Dan akhirnya saya pelajari apa itu tree shaking.

Tree Shaking adalah terminologi yang sering di dalam konteks pemrograman javascript yang bisa dijelaskan sebagai membuang kode yang mati.

Fitur ini menggunakan statement import dan export untuk mendeteksi apakah kode modul itu di export atau diimport di antara file javascript.

Biasanya di aplikasi berbasis javascript, kita menggunakan module bundlers seperti webpack atau rollup yang otomatis akan menghapus kode mati (dead code) atau kode yang tidak diperlukan. Module bundler melakukannya pada saat proses bundling file javascript menjadi satu file javascript.

Tentunya fitur dan proses ini penting agar kode yang dihasilkan menjadi production ready, dalam segi file juga lebih minimalis, transport data lebih singkat.

Nah, di angular ini, ternyata sudah mulai mendukung Tree Shaking secara default. Mantap!

Di tenting di API mereka, biasanya hasil bundlenya bisa mengurangi ukuran kode nya hingga 11%. Tidak banyak, tapi ok.

Directive Composition API

API ini dikabarkan bisa membuat penggunaan ulang kode (code reuse) ke level yang lebih tinggi. Fitur ini banyak diminta oleh GitHub.

Directive Composition API memungkinkan developer untuk melengkapi element host dengan directives dan

Coba langsung lihat kode nya ya..

@component({
    selector : 'mat-menu',
    hostDirectives: [HasColor, {
        directive: CdkMenu,
        inputs: ['cdkMenuDisabled: disabled'],
        outputs: ['cdkMenuClosed: closed']
    }]
})

class MatMenu {}

Dijelaskan bahwa kode diatas kita melengkapi Matmenu dengan dua directives : HasColor dan CdkMenu. MatMenu menggunakan semua input dan output dan logic yang berhubungan dengan HasColors dan hanya logic dan input yang dipilih dari CdkMenu.

Image Directive sekarang Stable!

Sebenarnya ini adalah fitur yang menurut saya penting bagi developer solo ya, karena kita tidak perlu membuat kode atau menggunakan plugin untuk membuat optimasi gambar. Kita ketahui bahwa gambar adalah aset yang bisa menjadi terbesar dari sebuah halaman website atau aplikasi. Bisa dibilang elephant in the room lah.

Oleh karena itu, mengatur gambar menjadi hal yang krusial menurut saya, karena kita ingin tetap menggunakan kualitas yang terbaik dan optimal. Bagus dan tidak lambat, secara kasarnya.

Angular memiliki directive yang khusus mengatur tentang gambar, mereka menamainya Image Directive, and goodness, sekarang sudah stable.

Di Angular versi 15 ini, image directive menambahkan beberapa fitur baru, yaitu :

  1. Pembuatan srcset otomatis : directive ini memastikan ukuran gambar dikirimkan sesuai gambar yang diminta oleh perangkat user dengan membuat srcset. Kita ketahui bahwa srcset adalah fitur html yang bermanfaat sekali.
  2. Fill mode [experimental] : Mode fill ini memungkinan gambar untuk mengisi semua kontatiner parentnya. Sangat cocok digunakan untuk background dari sebuah kontainer, contohnya di gambar card yang harus memiliki tinggi dan lebar yang sama. Meskipun masih experimental, tapi fitur ini bermanfaat.

Kita bisa menggunakan standalone directive NgOptimizedImage langsung ke komponen atau ke NgModule :

import { NgOptimizedImage } from '@angular/common';

@NgModule({
    imports: [NgOptimizedImage],
})
class AppModule {}

@Component({
    standalone: true,
    imports: [NgOptimizedImage],
})

class MyStandaloneComponent {}

Untuk menggunakan dalam komponen, kita hanya perlu mengubah atribut src ke ngSrc dan jangan lupa untuk mengatur priority attribut untuk gambar LCP.

Kalian bisa melihat dokumentasinya langsung di https://angular.io/guide/image-directive

Functional Router Guards

Router guard adalah fitur yang digunakan untuk membuat logika khusus untuk menangani penjagaan di router, bianya digunakan untuk membuat autentikasi dahulu sebelum bisa masuk ke dalam route tertentu.

Di angular 15 ini, router API mengurangi booledplate di guards. Contohnya adalah kode di bawah ini, kode ini menjelaskan bagaimana guard bisa digunakan untuk memverifikasi user login.

@Injectable({ proviedIn: 'root' })

export class MyGuardWithDependency implements CanActivate {
    constructor(private loginService: LoginService ) {}

    canActivate() {
        return this.loginService.isLoggenIn();
    }
}

const route = {
    path : 'somePath',
    canActivate: [MyGuardWithDependency]
}

LoginService mengimplementasikan sebagian besar logika nya dan guard hanya memanggil fungsi isLoggedIn di LoginService. Meskipun guard ini simple dan sederhana, angular memiliki banyak kode boilerplate.

Dengan cara fungsi baru di router guard, kita hanya perlu melakukannya sebagai berikut.

const route = {
    path: 'admin',
    canActivate: [()=> inject(LoginService).isLoggedIn()]
}

Kita mengexpresikan semua guard di dalam deklarasi guard. Functional guards juga bisa di compose, kita bisa membuat fungsi yang mirip dengan factory yang menerima konfigurasi dan return sebuah guard atau fungsi resolver. Kalian bisa melihat beberapa contohnya di link ini https://github.com/angular/angular/blob/8546b17adec01de69bf314a959ef2d12f6638eb9/packages/router/test/integration.spec.ts#L5157-L5194

Router unwraps default imports

Jadi kita tidak perlu mengimport dengan then, sekarang sudah otomatis mengimport komponen. Contohnya sebagai berikut.

Kita memiliki komponen yang kita namai LazyComponent :

@Component({
    standalone: true,
    template: '...'
})

export default class LazyComponent { ... }

sebelumnya, kita harus membuat router seperti ini :

{
    path : 'lazy',
    loadComponent: () => import('./lazy-file).then(m=> m.LazyComponent)
}

sekarang, router otomatis akan mencari export yang ada di file itu dan mengimportnya.

{
    path : 'lazy',
    loadComponent: () => import('./lazy-file)
}

Lebih simple kan ya...

Stack Trace yang lebih baik

Intinya angular 15 memperbaiki bagaimana angular membuat error message lebih baik, dan tentunya bisa membuat pengalaman debugging lebih nyaman dan tidak bikin stress. hehe

Mereka bekerja-sama dengan Chrome DevTools untuk memperbaikinya.

Yang dulunya seperti ini :

ERROR Error: Uncaught (in promise): Error
Error
    at app.component.ts:18:11
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:25:1)
    at _ZoneDelegate.invoke (zone.js:372:26)
    at Object.onInvoke (core.mjs:26378:33)
    at _ZoneDelegate.invoke (zone.js:371:52)
    at Zone.run (zone.js:134:43)
    at zone.js:1275:36
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at resolvePromise (zone.js:1211:31)
    at zone.js:1118:17
    at zone.js:1134:33

menjadi seperti ini :

ERROR Error: Uncaught (in promise): Error
Error
    at app.component.ts:18:11
    at fetch (async)  
    at (anonymous) (app.component.ts:4)
    at request (app.component.ts:4)
    at (anonymous) (app.component.ts:17)
    at submit (app.component.ts:15)
    at AppComponent_click_3_listener (app.component.html:4)

Jika dilihat secara sekilas sih, yang baru lebih jelas mana kode yang menyebabkan error, yang jelas-jelas adalah file aplikasi yang berkaitan dengan kita. File yang berisikan kode kita.

Berbeda dengan kode error yang pertama dimana, kita tidak tahu apa itu. hehe.

Saya sebenarnya belum ada waktu untuk mendalam hal ini, kalian bisa baca lebih detil di link ini https://developer.chrome.com/blog/devtools-modern-web-debugging/

Release MDC-based components sudah stable

Angular Material adalah kumpulan komponen yang menurut saya sangat diperlukan dan pasti harus diupdate. Alasannya adalah angular merupakan project opensource yang dikelola dan didanai oleh Google, kita ketahui Material Design merupakan bahasa desain yang digunakan oleh semua produk Google.

Beberapa waktu lalu, Material Design memang mengalami perubahan yang signifikan yaitu update dari versi 2 ke versi 3. Perubahannya signifikan.

Oleh sebab itu, kemungkinan besar Angular Material harus mengukuti style versi 3 beberapa waktu kedepannya, saat ini mereka masih menggunakan material design versi 2 sebagai acuannya.

nah, Material Design Component for Web ini yang memungkinkan Angular Material menggunakan style Material Design 3. Kabarnya mereka membuat ulang kodenya.

Kemungkikan ketika menggunakan Angular Material, kita akan mendapatkan desain MD3, tapi jika kalian ingin menggunakan desain yang lama, masih bisa diakses dengan komponen legacy.

Contoh pakainya sebagai berikut :

import {MatLegacyButtonModule} from '@angular/material/legacy-button';

Perbaikan di beberapa komponent

Seperti pada halnya software dan framework opensource, ada beberapa issue yang akan dikabarkan oleh pengguna dan developer, salah satunya adalah issue pada mat-slider.

CDK Listbox

Penambahan CDK (Component Dev Kit) baru, yaitu Listbox.

Perbaikan di Experimental esbuild support

Di versi 14, angular meluncurkan dukungan eksperimental untuk esbuild di ng build, gunanya untuk mempercepat durasi build dan menyerhanakan pipeline angular.

Di versi 15 ini, mereka mencoba bereksperimen juga untuk beberapa aspek seperti Saas, SVG template, file replacement dan ng build --watch.

Untuk mencobanya kita perlu mengubah konfigurasi di angular.json.

"builder" : "@angular-devkit/build-angular:browser"

ke :

"builder" : "@angular-devkit/build-angular:browser-esbuild"

Import otomatis di language service

Language service adalah fitur yang digunakan untuk memandu kita saat membuat kode pemrograman, biasanya memberikan autocomplete pada object, import component dan sebagainya. Intinya ketika ada error atau problem, language service ini akan memberikan solusinya, kalian harus mengecek apakah solusinya sama dengan yang kalian maksud.

Di versi 15 ini, angular menambahkan languager service untuk otomatis mengimport component yang kita gunakan atau panggil, tapi belum atau lupa di import.

Peningkatan di CLI (Command Line Interface)

Menggunakan CLI pada saat membuat aplikasi angular menjadi hal yang sudah biasa, bahkan angular membuatkan tutorial yang pasti menggunakan CLI. Meskipun kita bisa membuat aplikasi angular tanpa CLI, tapi sebaiknya menggunakannya karena bisa mempersingkat waktu dan menghindari error yang kita tidak inginkan.

Di versi 15 ini, kita bisa membuat component standalone langsung dengan CLI, sintax nya adalah ng g component --standalone

Mereka juga berencana untuk menyederhanakan output dari sintax ng new. Pada tahap pertama ini, mereka menghapus test.ts, polyfills.ts dan exnironments. Sekarang kita bisa menspesifikasikan polyfills langsung di angular.json di seksi polyfills.

"polyfills" : [
    "zone.js"
]

Untuk mengurangi beratnya konfigurasi, sekarang kita menggunakan .browserlist untuk menargetkan versi ECMAScript.

Kesimpulan Angular 15

Artikel ini mengambil poin dari https://blog.angular.io/angular-v15-is-now-available-df7be7f2f4c8 dengan beberapa pendapat pribadi. Menurut saya, angular 15 menjadi framework yang masih terus berkembang.