Başlangıç: Angular uygulamasını optimize etme

Angular sitenizi olabildiğince hızlı ve erişilebilir hale getirmek mi istiyorsunuz? Doğru yere geldiniz.

Angular nedir?

Angular, kullanıcı arayüzleri oluşturmaya yönelik bir çerçevedir. Sürdürülebilir ve ölçeklenebilir bir uygulamayı hızlıca oluşturmanıza yardımcı olacak yapı taşları sağlar. Angular, geliştiricilerin web, mobil veya masaüstünde çalışan uygulamalar oluşturmasına olanak tanır.

Bu koleksiyonda neler var?

Bu koleksiyon, Angular uygulamalarını optimize etmek için beş ana alana odaklanır:

  • Kullanıcı dönüşümünü ve etkileşimini artırmak için uygulamanızın performansını iyileştirme
  • Angular hizmet çalışanı ile öğeleri önbelleğe alarak uygulamanızın zayıf ağlardaki güvenilirliğini artırma
  • Önceden işleme ve sunucu taraflı oluşturma kullanarak uygulamanızı arama motorları ve sosyal medya botları için keşfedilebilir hale getirme
  • iOS/Android uygulamalarına benzer bir kullanıcı deneyimi sunmak için uygulamanızı yüklenebilir hale getirme

Koleksiyondaki her yayında, kendi uygulamalarınıza doğrudan uygulayabileceğiniz teknikler açıklanır.

Bu koleksiyonda neler yok?

Bu koleksiyonda, Angular ve TypeScript hakkında bilgi sahibi olduğunuz varsayılır. Bu konularda henüz kendinize güvenmiyorsanız TypeScript belgelerine ve angular.io adresindeki Getting Started with Angular (Angular'a Başlarken) kılavuzuna göz atın.

Bir proje başlatın

Angular komut satırı arayüzü (CLI), basit bir istemci tarafı Angular uygulamasını hızlıca oluşturmanıza olanak tanır. Bu yayında KSA'ya kısa bir giriş yapılırken koleksiyondaki diğer yayınlarda, sunucu tarafı oluşturma ve dağıtım desteği gibi ileri seviye özelliklerin nasıl ekleneceği gösterilmektedir.

KSA'yı ayarlama

Başlamak için CLI'yı global olarak yükleyin ve aşağıdaki komutları çalıştırarak en yeni sürüme sahip olduğunuzu doğrulayın:

npm i -g @angular/cli
ng version

Son komut çıkışının 8.0.3 veya daha yeni bir sürüm olduğundan emin olun.

Alternatif olarak, CLI'yı global olarak yüklemek istemiyorsanız yerel olarak yükleyip npx komutuyla çalıştırabilirsiniz:

npm i @angular/cli
npx ng version

Projeyi oluşturma

Yeni bir proje oluşturmak için şu komutu çalıştırın:

ng new my-app

Bu komut, uygulamanız için ilk dosyaları ve klasör yapısını oluşturur ve ihtiyaç duyduğu düğüm modüllerini yükler.

Kurulum işlemi başarıyla tamamlandıktan sonra aşağıdaki komutu çalıştırarak uygulamanızı başlatın:

cd my-app
ng serve

Artık uygulamanıza http://localhost:4200 adresinden erişebilirsiniz.

Sırada ne var?

Bu koleksiyonun geri kalanında, Angular uygulamanızın performansını ve SEO'sunu nasıl iyileştireceğinizi öğreneceksiniz. Bu makalede ele alınan konular:

  • Angular'da rota düzeyinde kod bölme
  • Angular CLI ile performans bütçeleri
  • Angular'da rota önceden getirme stratejileri
  • Angular'da değişiklik algılama optimizasyonu
  • Angular CDK ile büyük listeleri sanallaştırma
  • Angular hizmet çalışanı ile önbelleğe alma
  • Angular CLI ile rotaları önceden oluşturma
  • Angular Universal ile sunucu tarafı oluşturma
  • Angular CLI ile web uygulaması manifesti ekleme