Memulai: mengoptimalkan aplikasi Angular

Ingin membuat situs Angular Anda secepat dan semudah mungkin diakses? Anda datang ke tempat yang tepat!

Apa itu Angular?

Angular adalah framework untuk membuat antarmuka pengguna. Library ini menyediakan elemen penyusun untuk membantu Anda menyiapkan aplikasi yang skalabel dan dapat dikelola dengan cepat. Angular memungkinkan developer membuat aplikasi yang berjalan di web, seluler, atau desktop.

Apa yang ada dalam koleksi ini?

Kumpulan ini berfokus pada lima area utama untuk mengoptimalkan aplikasi Angular:

  • Meningkatkan performa aplikasi Anda untuk meningkatkan konversi dan engagement pengguna
  • Meningkatkan keandalan aplikasi Anda di jaringan yang buruk dengan menyimpan aset ke cache terlebih dahulu menggunakan pekerja layanan Angular
  • Membuat aplikasi Anda dapat ditemukan oleh mesin telusur dan bot media sosial menggunakan pra-rendering dan rendering sisi server
  • Membuat aplikasi Anda dapat diinstal untuk memberikan pengalaman pengguna yang mirip dengan aplikasi iOS/Android

Setiap postingan dalam koleksi ini akan menjelaskan teknik yang dapat Anda terapkan langsung ke aplikasi Anda sendiri.

Apa yang tidak ada dalam koleksi ini?

Koleksi ini mengasumsikan bahwa Anda sudah familier dengan Angular dan TypeScript. Jika Anda belum merasa yakin dengan keduanya, lihat dokumentasi TypeScript dan panduan Memulai Angular di angular.io.

Mulai project

Dengan antarmuka command line (CLI) Angular, Anda dapat dengan cepat menyiapkan aplikasi Angular sisi klien yang sederhana. Postingan ini berisi pengantar singkat tentang CLI, sedangkan postingan lain dalam koleksi ini menunjukkan cara menambahkan fitur lanjutan seperti rendering sisi server dan dukungan deployment.

Menyiapkan CLI

Untuk memulai, instal CLI secara global dan pastikan Anda memiliki versi terbaru dengan menjalankan perintah berikut:

npm i -g @angular/cli
ng --version

Pastikan perintah terakhir menghasilkan output versi 8.0.3 atau yang lebih baru.

Atau, jika tidak ingin menginstal CLI secara global, Anda dapat menginstalnya secara lokal dan menjalankannya dengan perintah npx:

npm i @angular/cli
npx ng --version

Membuat project

Untuk membuat project baru, jalankan:

ng new my-app

Perintah ini akan membuat file awal dan struktur folder untuk aplikasi Anda serta menginstal modul node yang diperlukan.

Setelah proses penyiapan berhasil selesai, mulai aplikasi Anda dengan menjalankan:

cd my-app
ng serve

Sekarang, Anda dapat mengakses aplikasi di http://localhost:4200.

Apa langkah selanjutnya?

Di sisa koleksi ini, Anda akan mempelajari cara meningkatkan performa dan SEO aplikasi Angular Anda. Berikut ini adalah hal-hal yang dibahas:

  • Pemisahan kode Route-Level di Angular
  • Anggaran Performa dengan Angular CLI
  • Strategi Pengambilan Rute di Angular
  • Pengoptimalan deteksi perubahan di Angular
  • Memvirtualisasikan daftar besar dengan Angular CDK
  • Menyimpan ke cache terlebih dahulu dengan Pekerja Layanan Angular
  • Merender rute sebelumnya dengan Angular CLI
  • Rendering sisi server dengan Angular Universal
  • Menambahkan manifes aplikasi web dengan Angular CLI