Langsung ke konten utama

Tutorial Angular Bagian 1: Introduction


Angular merupakan salah satu library javascript yang sangat populer untuk membangun user interface aplikasi berbasis web (web application). Dikembangkan oleh Google, Angular telah digunakan oleh banyak perusahaan kelas dunia maupun startup yang menginginkan aplikasi mereka dapat berjalan  dengan smooth dan tentu saja cepat ketika diakses oleh pengguna. Berikut ini adalah beberapa faktor yang dapat dipertimbangkan mengapa memilih Angular, antara lain:

Re-usable Component

Mayoritas sebuah website terdiri atas sedikitnya tiga blok utama yaitu: 
  1. Header: memuat menu navigasi, logo dan judul website.
  2. Content: memuat informasi utama yang ditujukan bagi pengguna, baik itu artikel, tabel maupun grafik.
  3. Footer: memuat informasi seperti copyright, link social media, nomor kontak dan sebagainya.
Nah, dari tiga blok diatas, header dan footer adalah yang jarang sekali berubah, berbeda dengan blok content yang isinya dinamis tergantung dari halaman yang sedang diakses oleh pengguna. Angular memungkinkan kita untuk membuat header dan footer menjadi komponen tersendiri dan dapat digunakan kembali (re-usable) untuk membangun halaman-halaman lainnya. Jadi misalkan Anda punya tiga halaman di website Anda: beranda.html, artikel.html dan kontak.html maka Anda hanya perlu membuat satu komponen header dan satu komponen footer untuk digunakan oleh ketiga halaman tersebut, dan jika ada perubahan (misalnya mengubah logo di header) Anda cukup mengubah di komponen itu saja.

tiga blok utama sebuah website

Performa dan Kecepatan

Angular dilengkapi dengan dengan fitur service workers yang dapat membantu pengguna mengakses aplikasi meskipun dalam kondisi offline atau jaringan yang buruk. Selain itu juga terdapat web workers untuk menjalankan background processing tanpa membebani CPU secara berlebihan, dan yang tidak kalah menarik adalah fitur server side rendering menggunakan Angular universal untuk meningkatkan user experience ketika harus menampilkan halaman dengan data yang besar dan perhitungan yang kompleks.

Statically Typed

Berbeda dengan plain javascript, Angular menggunakan typescript sehingga membantu developer menghindari kesalahan pemograman terkait data type terutama ketika harus menulis code dalam jumlah yang cukup banyak.

Komunitas Yang Stabil

Tentu saja support dari komunitas menjadi sangat penting dalam memilih library, Angular punya fan base yang sangat besar di seluruh dunia. Tersedia banyak plugin dan design system library yang dapat digunakan untuk mempercepat proses development.

Learn Once, Write Many

Yup betul sekali, Anda hanya perlu mempelajari Angular saja untuk dapat membuat aplikasi di berbagai macam platform. Baik itu web, mobile web, desktop native dan mobile app, semua bisa dengan Angular. Khusus mobile app development, ionic adalah salah satu framework yang cukup mature dan mudah digunakan, Anda dapat membuat Android atau iOS app dengan code base yang sama tanpa harus melakukan banyak perubahan terhadap program yang Anda tulis.

Learning Curve Yang Gentle

Berdasarkan pengalaman saya, dibandingkan library populer lainnya seperti ReactJS dan Vue, Angular relatif lebih mudah dipelajari dan dipahami, khususnya bagi Anda yang sebelumnya hanya pernah menggunakan plain javascript ataupun jquery.
model binding di Angular yang lebih simpel

Meskipun Angular punya banyak sekali keunggulan dan benefit yang ditawarkan, bukan berarti tidak ada drawback yang bisa saja menjadi pain point Anda nantinya, saya hanya akan mention salah satu pain point yang paling signifikan yaitu lifecycle yang terlalu cepat, team Angular merilis versi major beberapa kali dalam setahun dan hal tersebut pernah membuat saya kewalahan untuk terus melakukan upgrade aplikasi.

Lifecycle Rilis Angular

Seperti yang dapat dilihat pada gambar di atas versi terbaru adalah ^13.0.0 yang dirilis tanggal 4 November 2021 padahal versi sebelumnya baru saja dirilis tanggal 12 May 2021. Dikarenakan fokus saya adalah pada healthy IT Portfolio maka mau tidak mau semua aplikasi yang menggunakan versi ^12.0.0 harus segera diupgrade ke versi ^13.0.0 sebelum 12 November 2022 atau sebelum LTS (Long Term Support) habis.

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Mempelajari bahasa pemograman PHP itu buang-buang waktu!

Begitulah kurang lebih maksud dari postingan di group facebook yang saya baca, sambil geleng-geleng kepala dan berucap dalam hati " what the heck you are talking about man !". Tapi tanpa kita sadari ada banyak orang yang sepemikiran dengan si empunya post , mereka menganggap PHP itu adalah sebuah bahasa yang sangat tidak keren, tidak canggih, tidak safe,  terlalu banyak garbage collection sehingga ga well   perform. Saya jadi teringat beberapa waktu yang lalu ketika menghadiri sebuah konferensi teknologi di Jakarta, statement dari seorang IT Manager sebuah perusahaan yang bergerak di industri keuangan " we are not doing PHP here, and will never be while I'm still here " rasanya kembali menegaskan bagaimana bahasa pemograman ini dipandang sebelah mata dan kerap menjadi second citizen. Well, with all due respect.. tidak ada yang salah dengan penilaian tersebut, apalagi jika disampaikan dengan data dan fakta plus experience. Tidak bisa kita pungkiri PHP mem
Posting Komentar
Baca selengkapnya

Tutorial Angular Bagian 3: Membuat dan Mengubah Style Component

Component merupakan bagian terpenting dari Angular untuk menghasilkan blok-blok HTML yang membentuk suatu halaman. Masing-masing component dapat berdiri sendiri atau menjadi sub component dari component lain (biasa disebut dengan child component)   dan bisa digunakan berulangkali di halaman yang berbeda (reusable). Secara garis besar Angular component   terdiri atas: HTML template untuk menampilkan HTML objek kepada pengguna Typescript class, digunakan untuk menulis logika aplikasi ataupun behaviour dari component tersebut CSS untuk mengubah style/tampilan component Membuat Component Cara yang paling mudah untuk membuat component adalah dengan Angular CLI, buka terminal dan pastikan Anda sudah berada di dalam direktori   aplikasi Angular lalu jalankan perintah berikut: ng generate component hello-world Perintah di atas secara otomatis akan membuat folder dengan nama hello-world (src/app/hello-world) dan di dalam folder tersebut Anda akan menemukan file: hello-world.component.ts
Posting Komentar
Baca selengkapnya

Tutorial Angular Bagian 2: Instalasi dan Konfigurasi

Menginstall dan memulai sebuah project dengan Angular dapat dilakukan hanya dengan beberapa langkah saja karena Angular sudah menyediakan CLI ( command line interface ) yang membuat pekerjaan menjadi jauh lebih mudah. Anda tidak perlu repot-repot membuat atau meng copy-paste  file yang dibutuhkan tapi cukup dengan menjalankan perintah di terminal/ command prompt  maka file yang Anda inginkan akan otomatis terbentuk. Adapun sebelum bekerja dengan Angular, sangat disarankan sekali bagi Anda untuk memiliki pengetahuan dasar mengenai HTML, CSS dan javascript. Hal ini dapat membantu Anda lebih mudah memahami keseluruhan materi dari tutorial ini maupun tutorial lainnya yang berkaitan dengan Angular. Pre Requisite Sebelum memulai project dengan Angular pastikan di komputer/laptop Anda sudah terinstall  NodeJS  dan  NPM . Saya tidak akan menjelaskan detail step-by-step instalasi NodeJS dan NPM pada tutorial ini karena dapat Anda temukan secara mandiri di Google, namun saya sarankan untu
Posting Komentar
Baca selengkapnya