lifelong learner — urip iku urup, currently working on accenture.

Ada apa dengan angular 7?

0
Degananda.com -

angular7_big

Angular 7 adalah versi tujuh dari pengembangan dari framework SPA(Single page application) yang bernama angular. Framework versi 7 yang dikembangkan oleh raksasa teknologi google ini di rilis pada tanggal 18 october 2018. Jika kita masih menggunakan angularjs (versi sebelum perombakan total menjadi angular) tidak perlu kahwatir, karena angularjs masih dapat digunakan hingga sekarang.

Angular berevolusi mulai dari angular 2, angular 4, angular 5, angular 6 dan saat ini versi terahir adalah angular 7.  Angular 3 tidak dimasukan pada versi rilis karena google ingin menyamakan versi angular dengan versi angular router yang saat itu sudah mencapai versi 4.

Tetapi jika kita saat ini menggunakan angular 5, maka pertimbangkanlah untuk melakukan upgrade versi dari 5 menjadi 7 karena terdapat segudang fitur yang dapat membantu meningkatkan performance dari aplikasi frontend bisnis kita.

Apa yang baru pada angular 7 ?

Secara garis besar, perubahan dan peningkatan yang terjadi pada framework angular 7 terdapat pada dua sisi yakni :

  1. angular material 7
  2. angular cli 7

jika kita saat ini masih menggunakan angular 6 dan ingin mencoba angular 7 jalankan perintah cli dibawah untuk melakukan upgrade dari versi 6 ke versi 7. Kita hanya perlu melakukan update package @angular/cli dan @angular/core

ng update @angular/cli @angular/core

update akan membutuhkan waktu yang relatif singkat-  grab take your snack!

Angular-cli – lebih banyak prompt!

Jika anda sebelumnya saat kita menjalankan perintah ng-new hanya akan mendapatkan prompt untuk mimilih akan menggunakan package @angular/router, maka pada versi 7 ini kita akan mendapatkan tambahan opsi seperti : apa nama aplikasi ? dan opsi memilih apa kita ingin menggunakan css atau sass.

Peningkatan performa pada angular 7

Tentunnya ini adalah hal yang paling ditunggu dan diutamakan oleh developer yakni pengingkatan performa dari sebuah platform.  Kita tahu bahwa angular menggunakan polyfills.ts untuk memastikan compatibilitas kode (ES6 dan Typescript) yang dibuat oleh developer terhadap browser IE(Internet explorer) ,Firefox(FF) serta beberapa browser lainnya.

Beberapa developer menggunakan library reflect-metadata untuk mendefinisikan tipe dari sebuah tipedata. Contohnya adalah

class Person {
 @logProperty
 public name : string;
}

penggunaan reflect-meta data atau pada contoh diatas adalah property decorator menurut google hanya di perlukan pada saat development. Sedangkan saat production reflect-metadata ini tidak perlukan. Hal ini diklaim dapat meningkatkan performa pada aplikasi angular.

Peringatan bundle size

Semakin banyak halaman dan fitur yang akan kita develop pada angular maka semakin besar pula ukuran bundle tersebut. Pada angular 7, kita bisa mendapatkan notifikasi ketika ukuran bundle tersebut melebihi ukuran tertentu dengan hanya melakukan konfigurasi pada angular.json seperti pada contoh dibawah ini

"budgets": [{
  "type": "initial",
  "maximumWarning": "2mb",
  "maximumError": "5mb"
}]

Update angular material

User interface dan User experience tentunnya menjadi salah satu concern yang paling utama pada frontned. Dengan peningkatan kemampuan angular material ini diharapkan developer mampu membuat user experience yang lebih baik kepada customer dengan effort yang optimal.

CDK atau component dev kita memiliki kemampuan untuk melakukan virtual scrolling dan juga kemampuan drag and drop. Virtual scorlling ini dapat membuat scroll vertikal yang mana ketika terjadi perubahan DOM didalam komponen scroll tersebut angular dapat mendeteksi perubahannya. Very Cool & Useful!.

Sedangkan drag and drop akan membantu developer ketika menghadapi user story yang membutuhkan kemampuan melakukan assignment antara satu object ke object lainnya. Contohnya adalah melakuakn assignment vehicle kepada fleet dalam kasus iot.