Menggunakan framework untuk membangun sebuah aplikasi bukanlah hal baru di dunia coding. Pilihan alat yang bisa digunakan pun beragam dengan keunggulannya masing-masing. Salah satu yang kerap digunakan para programmer karena fleksibilitasnya adalah Angular.

Nama framework ini sudah tidak asing di dunia pemrograman. Sejak awal kemunculannya, framework ini telah berhasil menunjukkan kualitas melalui fitur yang belum tentu dimiliki produk serupa. Jadi, jangan heran apabila kebanyakan aplikasi yang beredar, baik web app, PC, ataupun smartphone dibuat menggunakan framework buatan Misko Havery dan Adam Hebron tersebut.

Sejarah Singkat Angular

Versi awal framework ini, yaitu AngularJS, dikembangkan pertama kali pada tahun 2009 oleh Misko Hevery dan Adam Abrons ketika mereka bekerja di Brat Tech LLC. Awalnya, AngularJS merupakan salah satu software yang menjadi otak di balik layanan online storage JSON.

JSON juga dikembangkan oleh Hevery dan Abrons sebagai layanan yang menyasar pasar enterprise. Sayangnya, JSON kurang populer dan tidak terlalu diminati. Melihat hal itu, para pengembang JSON pun berusaha mengenalkan produk framework mereka melalui domain GetAngular.com.

Proyek ini bertujuan membuat end to end tool bagi para website developer agar bisa berinteraksi baik dengan frontend dan backend. Lagi-lagi, proyek ini juga tidak terlalu diminati sampai pada akhirnya, Hevery dan Abrons merilis AngularJS secara open source.

Ketika bekerja di Google, Hevery mencoba mengembangkan lagi framework yang pernah ia buat bersama Abrons dibantu oleh Igor Minar dan Vojta Jina. Proyek ini dikembangkan ketika Hevery tengah mengerjakan salah satu proyek Google, yaitu Google Feedback. Pada saat itu bersama rekannya, Hevery telah menyelesaikan 17.000 baris kode yang ditulis selama 6 bulan.

Ukuran kode yang meningkat tentu saja membuat tingkat kesulitannya pun semakin tinggi. Akibatnya, muncul risiko kesulitan untuk memodifikasi dan memperbaikinya. Melihat hal ini, Hevery menawarkan proyek GetAngular pada pimpinannya dan memberikan jaminan bahwa semua source code bisa ditulis ulang menggunakan framework ini dalam waktu dua minggu.

Pada praktiknya, Hevery ternyata membutuhkan waktu tiga minggu. Meskipun begitu, ia berhasil mengubah 17.000 baris kode menjadi 1.500 saja. Dari keberhasilan ini, pimpinan Google tertarik untuk mengembangkan AngularJS berbasis javascript. Sejarah pun mencatat AngularJS sebagai salah satu framework terbaik.

Versi lama framework ini terakhir dirilis tanggal 17 Maret 2015 dengan nama kode locality-filtration versi 1.3.25 sebelum akhirnya dikembangkan menggunakan basis typescript dengan nama Angular. Meskipun versi terbarunya telah dirilis, AngularJS masih sering dipakai untuk website development.

Sampai sekarang, framework ini hanya bisa berjalan optimal di hampir semua browser kecuali Internet Explore versi apapun, termasuk versi 6, 7, dan 8. Jadi apabila ingin menggunakan framework ini untuk membangun aplikasi, gunakan Chrome, Firefox, Opera, dan browser lainnya. 

Untuk memahami sejarah framework ini lebih dalam lagi, mari kita lihat timeline perilisan setiap versi dan perubahan apa saja yang ditawarkan oleh masing-masing framework.

1. Medio 2014-2016

Masa peralihan dari versi JS ke terbaru ini sempat menciptakan kontroversi di kalangan pengembang. Meskipun begitu, segalanya berubah drastis dan cukup membuat gebrakan. Kontroversi yang terjadi timbul karena pengembang mengumumkan bahwa framework versi ini dipindahkan dari Alpha ke pratinjau. Padahal, versi ini masih tergolong baru di dunia app development.

Namun, pada Desember 2015, versi pratinjau di-upgrade menjadi beta dan dirilis pertama kali pada Mei 2016 sebagai perkenalan. Versi finalnya sendiri dirilis tidak lama, tepatnya pada tanggal 14 September 2016.

2. Medio 2016-2017

Pada 13 Desember 2016, versi 4 dirilis tanpa mengeluarkan versi 3. Penyebabnya adalah sebelumnya pengembang telah merilis versi v3.3.0 untuk paket router. Untuk menghindari kebingungan, versi 4 dirilis sebagai pengembangan dari versi 2. Meskipun telah dirilis sejak Desember 2016, versi terbaik Angular 4 dikeluarkan pada Maret 2017.

Versi terbaru itu dikenal juga dengan 4.3 yang mengusung beberapa fitur, seperti:

• HttpClient 
• GuardsCheckStart, GuardCheckEnd, ResolveStart, dan ResolveEnd yang digabungkan dalam rangkaian NavigationStart
• Nonaktifkan animasi

3. Medio 2017-2019

Pada rentang waktu ini, versi 5, 6, 7, dan 8 dirilis dengan menambahkan banyak fitur dan fasilitas terbaik. Termasuk di dalamnya, dukungan untuk aplikasi web progresif, peningkatan kerja animasi, peningkatan aksesibilitas pilihan, diferensial untuk semua kode aplikasi, dan dukungan typescript 3.4, serta memanfaatkan Angular Ivy sebagai pratinjau keikutsertaan.

Pratinjau keikutsertaan itu meliputi:

• Kode yang dihasilkan lebih mudah dibaca
• Waktu rebuild ulang lebih cepat
• Ukuran muatan ditingkatkan
• Jenis template ditingkatkan
• Kompatibilitas mundur

4. Medio 2020

Pada tahun 2020, pengembang merilis versi 9 dan 10 agar bisa bekerja dengan typescript 3.6 dan 3.7. Selain perbaikan di sana sini, versi terbaru menawarkan beberapa keuntungan, di antaranya:

• Ukuran bundel lebih kecil
• Pengujian lebih cepat
• Debugging yang lebih baik
• Peningkatan CSS
• Pengaturan stricter opsional

Mengenal Framework Angular

Dikembangkan oleh Google dan bersifat open source, framework ini sebenarnya telah mengalami beberapa perkembangan mulai dari versi pertama yang dikenal sebagai AngularJS hingga versi 10 yang merupakan keluaran terbaru dan terakhir. Meskipun dikeluarkan oleh satu perusahaan, setiap versi dibuat dengan basis yang berbeda.

Sebelum membahas tentang versi terbaru framework andalan Google ini, ada baiknya kita mengetahui terlebih dahulu tentang fitur umum AngularJS yang membuat framework ini menjadi salah satu alat penting dalam membuat suatu aplikasi, yaitu:

1. AngularJS merupakan framework yang efisien untuk membangun rich internet applications.
2. AngularJS memberi pengembang pilihan untuk menulis aplikasi melalui pendekatan MVC atau model, view, dan controller.
3. Aplikasi yang dibuat menggunakan AngularJS dapat digunakan pada segala web browser, kecuali Internet Explorer.
4. AngularJS merupakan open source, artinya Anda dapat mengunduh dan memasang framework ini tanpa dikenai biaya sedikit pun.

Selain fitur umum di atas, AngularJS juga memiliki fitur inti, di antaranya:

1. Data Binding
2. Scope
3. Controller
4. Services
5. Filters
6. Directives
7. Templates
8. Routing
9. ModelView Whatever
10. Deep Linking
11. Dependency Injection

Selain fitur umum dan khusus yang biasanya ada pada AngularJS, ada baiknya kita juga mengetahui kalau ada tiga bagian utama yang menjadi komponen penting pada framework AngularJS, yaitu:

1. ng-app : merupakan arahan dan link dari AngularJS ke html
2. ng-model : merupakan arahan data dari aplikasi AngularJS ke input kontrol html
3. ng-bind : arahan data dari aplikasi AngularJS ke tag html

Melihat fitur dan komponen tentang AngularJS di atas, tidak heran apabila framework ini cukup digemari para app developer. AngularJS masih menggunakan bahasa pemrograman javascript. Inilah mengapa, versi terbaru dikembangkan dengan menggunakan typescript.

Typescript sendiri merupakan bahasa pemrograman berbasis Java dan menggunakan konsep Object Oriented Programming (Pemrograman Berbasis Objek) yang dikembangkan oleh Microsoft. Typescript dimanfaatkan untuk mengatasi kompleksitas pembuatan aplikasi dengan skala besar. 

Hal tersebut didukung oleh beberapa fitur yang membuat typescript cenderung mudah diatur sehingga proses pembangunan aplikasi menggunakan framework berbasis typescript bisa lebih fleksibel.

Framework ini biasanya digunakan untuk membangun single page application (SPA). Penggunaan SPA berarti, komponen-komponen pada aplikasi akan dimasukkan terlebih dahulu ke dalam browser sehingga pengguna tidak perlu melakukan page load untuk membuka halaman baru.

Versi typescript diperkenalkan pertama kali pada tahun 2014 dengan kode 2.0. Versi ini memiliki basis serupa dengan AngularJS dengan penambahan beberapa fitur. Sejak itu hampir setiap tahun, Google selalu merilis versi terbaru dengan memperbaiki setiap fitur yang dirasa kurang optimal dan menambahkan fasilitas baru untuk memaksimalkan hasil.

Versi terbaru yaitu Angular 10 dirilis pada 24 Juni 2020 silam dengan beberapa tambahan seperti:

• Alat pilih rentang tanggal baru
• Peringatan tentang impor common javascript
• Pengaturan stricter cenderung opsional
• Memiliki konfigurasi browser default baru
• Ada fitur penghentian dan penghapusan

Walaupun bisa dibilang versi 10 adalah yang paling mutakhir, pengembang framework ini masih berencana untuk merilis versi terbaik mereka. Inilah mengapa sejak versi 9 dirilis, tim pengembang memindahkan semua aplikasi baru untuk bisa menjalankan compiler dan runtime ivy. Meskipun begitu, setiap merilis versi terbaru pengembang selalu berharap framework-nya masih kompatibel dengan versi lama. 

Berkaitan dengan software development, ada fitur lainnya yang membuat framework ini paling sering digunakan, yakni:

1. Modularitas

Modularitas adalah komponen umum seperti card, toolbar, navbar, serta container dibangun sekali tetapi dapat digunakan berkali-kali. Jadi, framework ini mampu membangun banyak komponen yang dapat dipakai kembali tanpa harus melakukan coding dari awal.

2. Pemrograman Berbasis Objek

Komponen pada framework ini dapat dikembangkan dengan menerapkan prinsip class dan object. Konsep tersebut dikenal oleh kalangan developer sebagai pemrograman berbasis objek atau object oriented programming (OOP). OOP sendiri kerap terjadi ketika developer menggunakan framework berbasis typescript. 

Hal semacam itu tentu saja memudahkan pembuat aplikasi dalam mengembangkan code dan menyesuaikannya dengan paradigma programming. Pasalnya, kebanyakan bahasa pemrograman yang digunakan adalah Java atau C#.

3. Reactive Programming

Dalam sebuah pemrograman, hasil response dari server muncul secara tidak sinkron. Untuk menjaga agar user experience tetap baik, kita tidak dapat selalu menggunakan code secara berurutan. Kita juga harus mampu menjalankan kode yang mampu berfungsi secara tidak sinkron (asynchronous). 

Inilah mengapa sebuah framework harus memiliki fitur reactive programming. Angular sendiri menggunakan alat bernama RxJS atau reactive javascript. Fitur ini mampu menampung segala bentuk perubahan yang terjadi secara tidak sinkron demi menjaga agar code tetap berjalan meskipun aplikasi masih melakukan fetch request kepada server.

Meskipun dasarnya sama, versi terbaru dari AngularJS memiliki beberapa perbedaan dibanding pendahulunya, yaitu:

1. Framework ini tidak memiliki konsep “lingkup” atau pengontrol dan hanya menggunakan hierarki komponen sebagai arsitektur utama.

2. Sintaks ekspresi pada versi terbaru AngularJS berbeda dengan fokus pada “[ ]” untuk mengikat properti dan “( )” untuk peristiwa.

3. Banyak inti fungsi yang dipindahkan ke modul untuk meningkatkan fungsi modularitas.

4. Angular memiliki callback berulang yang disediakan oleh reactive javascript. Meskipun hal ini membatasi visibilitas dan debugging status, seluruhnya mampu dituntaskan menggunakan add-on reaktif seperti ngrx atau ngxs.

5. Versi terbaru ini juga memiliki dukungan untuk framework universal yang mampu menjalankan aplikasi di server.

6. Pada versi terbaru, terdapat kompilasi template untuk proses secara tidak sinkron (asynchronous).

Persiapan Alat Coding Angular

Untuk melakukan software development menggunakan framework Angular ada beberapa peralatan yang dibutuhkan. Salah satunya adalah melakukan instalasi Node.js terbaru yang bisa diunduh disini. Apabila menggunakan Windows, instalasi bisa dilakukan secara langsung sesuai petunjuk.

Untuk memudahkan penggunaan Node.js, pilihlah opsi instalasi npm serta pengaturan menambah path. Setelah proses instalasi selesai, lakukan pengecekan apakah aplikasi Node.js telah terpasang dengan baik. Hasilnya akan tampak pada layar dalam bentuk serangkaian kode yang menunjukkan bahwa Node.js telah terpasang sekaligus versi yang di-install.

Apabila sudah dipastikan bahwa Node.js terpasang dengan baik, lakukan instalasi framework. Pasalnya, jika Node.js telah terpasang, instalasi framework bisa dilakukan dengan sangat mudah seperti berikut ini.

Pertama, masukkan perintah di bawah ini ke dalam terminal,

“npm install –g @angular/cli”

Setelah itu, pastikan apakah aplikasi telah terpasang dengan memasukkan perintah

“ng –version.”

Apabila sukses, tampilan layar akan menunjukkan logo framework. Nah, untuk membuat proyek, jalankan perintah berikut,

“ng new belajar-angular”

Selanjutnya, layar akan menampilkan serangkaian kode. Dari sini Anda bisa menjalankannya dengan masuk ke dalam directory aplikasi dan menjalankan perintah

“ng serve.”

Jika berhasil, layar akan menampilkan kode yang menunjukkan bahwa aplikasi berjalan di localhost dengan port 4200. Selain Node.js, alat yang dibutuhkan untuk mengembangkan project ini adalah text editor dan browser. Agar kesalahan penulisan kode ataupun proses pembuatan komponen lebih mudah, gunakan text editor IDE (Integrated Development Environment).

Sebaiknya, gunakan IDE dari pengembang framework. Apabila tidak bisa, alternatif lainnya adalah menggunakan VS Code dengan fitur lebih lengkap dan tidak berbayar. Untuk browser-nya, gunakan browser apa pun yang ada pada PC.

Fungsi browser adalah untuk debugging dengan memanfaatkan tools bawaannya. Setelah semua alat di atas siap, proses membangun aplikasi pun bisa dilakukan secara maksimal.

Cara Membuat Aplikasi Menggunakan Angular

Untuk membuat aplikasi menggunakan framework, ada beberapa langkah yang harus dilakukan:

1. Buat Starting Project

Pembuatan aplikasi dilakukan dengan cara mengetik perintah,

“ng new (nama proyek)-app”

Pada terminal. Apabila menggunakan materialize-css, lakukan instalasi terlebih dahulu dan arahkan ke direktori proyek. Selanjutnya, ketik perintah

“npm install-save materialize-css”

Karena materialize membutuhkan jquery, pasang dulu jquery. Setelah memasang jquery, jangan lupa untuk mengimpor materialize-css ke proyek dan menambahkannya dengan cara:

• Menambahkan path ke style
• Menambahkan Node ke style

Apabila urutan tersebut telah diselesaikan, kita sudah bisa menggunakan materialize.

2. Buat Komponen yang Akan Digunakan

Idealnya, buatlah tiga komponen yang terdiri dari, CardFilmComponent, CardFilmComponent, dan ListFilmComponen. Komponen ini seharusnya diletakkan pada folder terpisah dan pastikan bahwa masing-masing telah dimasukkan ke app.module.ts.

3. Buat Model yang Diperlukan

Model diperlukan untuk memudahkan mapping data. Pertama, tentu saja kita membutuhkan model film. Variabel tersebut berisi detail film yang telah disiapkan dan diletakkan di “app.models.” Kita juga membutuhkan model untuk menampung respons. Biasanya, model ini berisi array dari film. Jadi sebelumnya, kita harus membuat film_response terlebih dahulu.