1.

FrameWork Angular

● Definisi Angular
Angular adalah sebuah platform untuk mengembangkan front–end dari
sebuah aplikasi web yang berbasis open source. Platform ini dikembangkan oleh
tim Google dan komunitas open source Angular. Platform ini menggunakan
bahasa Typescript, sebuah pengembangan dari bahasa Javascript yang
merupakan bahasa utama yang digunakan untuk web development. Angular
sendiri merupakan platform yang dibangun untuk meningkatkan performa dari
AngularJS. Platform ini sering disebut juga dengan Angular 2 atau Angular 2+.

Platform ini seringkali digunakan untuk membangun single page

application (SPA). Penggunaan dari SPA ini berarti bahwa segala komponen
yang akan digunakan dalam aplikasi web tersebut akan di- load dalam browser
terlebih dahulu agar user tidak perlu melakukan page load ketika membuka page
baru. Seringkali SPA ini berupa bundle dari code Javascript yang dibuka oleh
browser secara bersamaan.

● Arsitektur Pada Angular

Angular adalah framework model-view-controller (MVC) yang lengkap. Ini
memberikan panduan yang jelas tentang bagaimana aplikasi harus terstruktur
dan menawarkan aliran data dua arah sambil memberikan DOM nyata.

Berikut ini adalah arsitektur dari aplikasi Angular:

1. Module

Aplikasi Angular memiliki root module bernama AppModule, yang

menyediakan mekanisme bootstrap untuk meluncurkan aplikasi.

2. Component
 Setiap komponen dalam aplikasi mendefinisikan class yang
menyimpan logika dan data aplikasi. Component umumnya
mendefinisikan bagian dari user interface (UI).

3. Template

Template Angular menggabungkan Angular markup dengan HTML

untuk memodifikasi elemen HTML sebelum ditampilkan. Ada dua jenis
data binding:

● Event binding: Memungkinkan aplikasi Anda merespons masukan

pengguna di target lingkungan dengan memperbarui data aplikasi
Anda.
● Property binding: Memungkinkan pengguna untuk menginterpolasi
nilai yang dihitung dari data aplikasi Anda ke dalam HTML.

4. Metadata

Metadata memberi tahu Angular cara memproses class. Ini

digunakan untuk mendekorasi kelas sehingga dapat mengonfigurasi
perilaku yang diharapkan dari suatu class.

5. Service

Saat Anda memiliki data atau logika yang tidak berkaitan dengan
tampilan tetapi harus dibagikan ke seluruh komponen, maka dibuatlah
service class. Class selalu dikaitkan dengan injectable decorator.

6. Dependency Injection

Fitur ini memungkinkan Anda menjaga kelas komponen tetap tajam

dan efisien. Ini tidak mengambil data dari server, memvalidasi input
pengguna, atau masuk langsung ke konsol. Sebaliknya, ini
mendelegasikan tugas-tugas tersebut ke dalam layanan atau service
class.
● Kelebihan dan Kekurangan

Kelebihan Dari Angular

Sudah banyak versi Angular yang telah dirilis sejak awal. Semua
versi ini telah ditambahkan ke framework yang efisien.

1. Komponen Kustom

Angular memungkinkan pengguna untuk membangun komponen

mereka sendiri yang dapat mengemas fungsionalitas bersama dengan
logika rendering menjadi bagian yang dapat digunakan kembali. Ini juga
berfungsi baik dengan komponen web.

2. Data Binding

Angular memungkinkan pengguna dengan mudah untuk

memindahkan data dari kode JavaScript ke tampilan, dan bereaksi
terhadap peristiwa pengguna tanpa harus menulis kode apa pun secara
manual.

3. Dependency Injection

Angular memungkinkan pengguna untuk menulis layanan modular

dan menyuntikkannya di mana pun mereka dibutuhkan. Ini meningkatkan
kemampuan pengujian dan penggunaan kembali layanan yang sama.

4. Testing

Test adalah alat yang sangat bermanfaat, dan Angular telah

dibangun dari bawah ke atas dengan mempertimbangkan kemampuan
untuk diuji. Anda akan memiliki kemampuan untuk menguji setiap bagian
dari aplikasi Anda.

5. Komprehensif
 Angular adalah framework yang lengkap dan menyediakan solusi
siap pakai untuk melakukan komunikasi server, routing dalam aplikasi
Anda, dan masih banyak lagi.

6. Kompatibilitas Browser

Angular bersifat lintas platform dan kompatibel dengan banyak

browser. Aplikasi Angular biasanya dapat berjalan di semua browser
(Misalnya: Chrome, Firefox) dan OS, seperti Windows, macOS, dan Linux.

Kekurangan Dari Angular

1. Sulit untuk dipelajari

Komponen dasar Angular yang harus diketahui semua

pengguna yaitu directive, module, decorator, component, service,
dependency injection, pipe, dan template. Topik yang lebih lanjut
mencakup deteksi perubahan, zona, kompilasi AoT, dan Rx.js.
Untuk pemula, Angular 4 mungkin sulit untuk dipelajari karena
merupakan framework yang kompleks.

2. Opsi SEO terbatas

Angular menawarkan opsi SEO yang terbatas dan

aksesibilitas yang buruk ke search engine crawler.

3. Migrasi

Salah satu alasan mengapa perusahaan tidak sering

menggunakan Angular adalah kesulitan dalam mem-porting
kode berbasis js/jquery lama ke arsitektur Angular. Selain itu,
setiap rilis versi baru dapat menyulitkan pengguna, dan beberapa
di antaranya tidak kompatibel dengan versi sebelumnya.
 4. Verbose dan Kompleks

Masalah umum dalam komunitas Angular adalah

verbositas dari framework. Ini juga cukup kompleks
dibandingkan dengan alat front-end lainnya.

2. Bootstrap
● Definisi Bootstrap

Bootstrap adalah framework web development berbasis HTML, CSS, dan

Javascript yang dirancang untuk mempercepat proses pengembangan web
responsive dan mobile-first(memprioritaskan perangkat seluler).Selain bisa
digunakan untuk mengembangkan website dengan lebih cepat, Bootstrap
adalah framework gratis yang bersifat open-source. Skrip dan syntax yang
disediakan Bootstrap bisa diterapkan untuk berbagai komponen dalam desain
web.

● Fungsi Bootstrap

Tujuan dan fungsi Bootstrap adalah untuk membuat website responsive

dan mobile-first. Jadi, semua elemen antarmuka website dipastikan bisa bekerja
secara optimal di semua ukuran layar, baik desktop maupun perangkat seluler.
Bootstrap tersedia dalam dua varian: versi yang sudah dikompilasi dan
didasarkan pada source code (kode sumber).
Developer yang sudah berpengalaman biasanya memilih penggunaan
Bootstrap dengan source code, karena lebih bebas menyesuaikan gaya dengan
proyek yang dikerjakan. Contohnya, versi “kode sumber” Bootstrap
memungkinkan Anda mengakses port Sass. Jadi, framework ini akan membuat
stylesheet khusus yang mengimpor Bootstrap sehingga Anda bisa memodifikasi
dan menambahkan fungsinya sesuai kebutuhan.
 Anda juga bisa menginstal Bootstrap dengan package manager, yaitu tool
yang mengelola dan memperbarui framework, library, dan aset. Beberapa
package manager yang paling populer adalah npm, Composer, dan Bower. Npm
mengelola dependensi sisi server, sementara Composer fokus pada front-end.
Apabila menangani proyek berbasis PHP, Anda bisa mencoba menggunakan
Bower. Karena popularitasnya ini, Bootstrap memiliki banyak komunitas. Para
developer dan desainer web bisa menjelajahi komunitas ini untuk saling berbagi
pengetahuan dan membahas versi terbaru patch Bootstrap.

● Kelebihan Bootstrap

➔ Mudah Digunakan

kelebihan utama Bootstrap adalah kemudahannya untuk dipelajari.

Khususnya karena popularitasnya, banyak tutorial dan forum online yang
tersedia di internet untuk membantu Anda mulai mempelajarinya. Salah
satu alasan Bootstrap sangat populer di kalangan developer dan desainer
web adalah struktur filenya yang sederhana. File-filenya dikompilasi untuk
akses yang mudah, dan hanya membutuhkan pengetahuan dasar HTML,
CSS, serta JS untuk memodifikasinya.

➔ Responsive Grid

Bootstrap hadir dengan sistem grid siap pakai, sehingga Anda tidak
perlu membuatnya dari nol. Sistem grid ini terdiri dari baris dan kolom,
memungkinkan Anda membuat grid baru di dalam grid yang sudah ada
tanpa perlu memasukkan kueri media dalam file CSS. Selain itu, sistem
grid Bootstrap membantu mempersingkat proses entri data. Tersedia
banyak kueri media yang memungkinkan Anda menentukan breakpoint
(titik henti) kustom setiap kolom berdasarkan kebutuhan Anda.

➔ Kompatibel dengan banyak browser

 Website yang bisa diakses dari berbagai browser tentu akan
membuat pengunjung betah membukanya. Bounce rate pun berkurang,
dan peringkat website di hasil pencarian akan turut naik. Bootstrap
memenuhi persyaratan ini melalui kompatibilitasnya dengan versi terbaru
web browser utama.

➔ Bootstrap Image System

Bootstrap menangani tampilan gambar dan responsivitas

menggunakan aturan HTML dan CSS yang telah ditentukan. Dengan
menambahkan kelas .img-responsive, Anda bisa mengubah ukuran
gambar secara otomatis sesuai ukuran layar pengguna. Tentu saja ini
akan meningkatkan performa website Anda, karena mengurangi ukuran
gambar merupakan salah satu cara optimasi website.

➔ Dokumentasi DBootstrap yang lengkap

Bootstrap menyediakan dokumentasi bagi para developer yang

baru mulai belajar menggunakan framework ini. Berikut adalah beberapa
topik yang bisa Anda temukan di halaman dokumentasi Bootstrap:

● Konten ‒ menyediakan kompilasi source code Bootstrap.

● Browser dan perangkat ‒ mencantumkan semua browser web
dan mobile yang didukung, serta komponen berbasis seluler.
● JavaScript ‒ menguraikan berbagai plugin JS yang dikembangkan
berdasarkan jQuery.
● Tema ‒ menjelaskan variabel Sass bawaan untuk penyesuaian
yang lebih mudah.
● Alat ‒ mengajarkan cara menggunakan skrip npm Bootstrap untuk
berbagai tindakan.
 ● Aksesibilitas ‒ mencakup fitur dan batasan Bootstrap terkait
markup struktural, komponen, kontras warna, visibilitas konten, dan
efek transisi.

Dokumentasi ini juga mencakup contoh kode untuk praktik tingkat

dasar. Bahkan, Anda bisa menyalin dan memodifikasi contoh kode untuk
proyek Anda sehingga tidak perlu repot-repot menulis kodenya dari nol.

● Kekurangan Bootstrap

Kekurangan Bootstrap adalah gaya visualnya yang hampir selalu sama, sehingga
Anda perlu melakukan banyak penyesuaian gaya agar proyek Anda tidak monoton. Kalau
tidak, semua website yang dibuat dengannya akan memiliki navigasi, struktur, dan
komponen desain yang sama, yang tentu saja kurang menarik dan profesional.

Selain itu, jumlah fungsi yang sangat banyak membuat ukuran file jadi membengkak.
Akibatnya, waktu loading website menjadi lambat dan server cukup terbebani kalau Anda
tidak cermat. Untuk menghindari masalah ini, tambahkan kelas yang Anda butuhkan saja
dan gunakan versi file yang di-minify. Meskipun Bootstrap kompatibel dengan versi terbaru
browser populer, masalah terkadang malah timbul di versi lama browser. Artinya, tampilan
website Anda akan sepenuhnya bergantung pada pengguna, apakah mereka sudah
memperbarui browsernya atau belum.

Kelemahan lainnya adalah gaya Bootstrap relatif besar. Tidak menutup kemungkinan
bahwa nantinya akan ada output HTML yang tidak diperlukan, sehingga membuang-buang
resource CPU.