En İyi Açısal Uygulamalar - Ağustos 2017 Sürümü

(Bu gönderi https://fluin.io/blog/angular-best-practices-august-2017 adresinden gönderilmiştir)

Başka bir ay, en iyi uygulamaların başka bir özeti. Bu ay, takım ve IDE konfigürasyonuyla ilgili bazı temel hususlara ve sizi gelecekteki başarıya hazırlayacak bazı reaktif programlama ilkelerine geri döndük.

En İyi Uygulama 1: CLI'yi kullanın

Bugün, Açısal CLI, Açısal Uygulamalar oluşturmanın en iyi yoludur. Birçok geliştirici, CLI'nin ilk kullanıma hazır olmadan önce Angular ile başlamasına karşın, CLI geliştiricilerin, yeni başlayanların ve büyük işletme ekiplerinin büyük çoğunluğu için harika.

Yeni bir projeye mi başladınız? CLI ile oluşturun.

Mevcut bir proje üzerinde mi çalışıyorsunuz? CLI ile yeni bir proje oluşturun ve mevcut kodunuzu / src / app / içine taşıyın.

npm kurulum -g @ açısal / cli
yeni projem

CLI, yeni projeler oluşturmak ve sizin için yeni kod üretmek için iskele araçlarına (aka şemalara) sahiptir, ancak bunlar temel fayda değildir. CLI'nin en büyük yararı, hem hizmet sunumu ile canlı gelişim için hem de hizmet oluşturma işlemine sahip tarayıcılara göndereceğiniz üretim kodu için yapım boru hattını otomatikleştirmesidir.

-prod build 'e her zaman, Angular ekibinin otomatik olarak açabileceği en iyi uygulamalardan yararlanacaktır. Bu, bu komutun Service Workers veya The Angular Optimizer gibi özelliklerle zaman içinde daha güçlü olacağı anlamına gelir.

En İyi Uygulama 2: John Papa’nın Vs Kod Uzantısını Yükleme

Visual Studio Code, Angular uygulamaları oluşturmak için harika bir IDE. Kendiniz için yapabileceğiniz en büyük iyiliklerden biri, John Papa’nın Temel Açısal Paketini kurmaktır.

Bu, Visual Studio Kodunda Angular ile çalışmayı hiç olmadığı kadar iyi hale getirir.

Bu paket aşağıdaki harika araçları içerir:

  1. Açısal Dil Servisi - Uygulamanızla birlikte şablon farkında ve Açısal duyarlı tamamlama ve hata kontrolü sağlar
  2. EditorConfig - VSCode’un yeni bir CLI projesinin parçası olarak sizin için otomatik olarak oluşturduğumuz .editorconfig’e olan yapılandırmasını bağlar
  3. Bracket Pair Colorizer - Standart sözdizimi vurgulaması yerine, bu uzantı iç içe katmanlarına göre köşeli ayraçları, parantezleri ve kaşlı ayraçları renklendirir. Yuvalamanın görsel endikasyonları, karmaşık kodlarla çalışırken çok yardımcı olur.

En İyi Uygulama 3: Bileşenlerdeki Gözlenebilirlerinize Abone Olma

İlk kez Observables ile çalışan birçok geliştirici, verileri yerel olarak bir yerde abone olmak ve saklamak istiyor.

Bu genellikle bir kayma önleyicidir çünkü çerçeveyi sizin için yapmasına izin vermek yerine, geliştiriciyi bileşenlerin ve aboneliklerin yaşam döngüsünü yönetmeye zorlar.

Bunu yapmanın en iyi yolu, asenkron boruyu şablonlarınızda kullanmak ve Angular'ın sizin için her şeyi yönetmesine izin vermektir. Bazı örnek kodlara bir göz atalım.

Bunu yapma:

...
şablon: `
    {{localData | json}}
`)
ihracat sınıfı MyComponent {
    localData;
    yapıcı (http: HttpClient) {
        http.get ( 'yolu / / benim / api.json için')
        .subscribe (data => {
            this.localData = veri;
        });
    }
}

Bunun yerine bunu yapın

...
şablon: `
    {{veri | zaman uyumsuz | json}}
`)
ihracat sınıfı MyComponent {
    veri;
    yapıcı (http: HttpClient) {
        this.data = http.get ('yol / to / my / api.json');
    }
}

Gözlenebilir ve şablon aracılığıyla abone olarak, bellek sızıntılarını önlüyorsunuz, çünkü bileşen parçalanırken Angular otomatik olarak Gözlenebilir listesinden çıkar. Bu HTTP için önemli görünmeyebilir, ancak birkaç nedenden ötürü güzel.

Async borusu, veri artık gerekli değilse, tamamlamak, işlemek ve onunla hiçbir şey yapmamak yerine HTTP isteklerini iptal edecektir.

Async borusu nihayet ChangeDetectionStrategy'nizi OnPush'a değiştirerek daha performanslı uygulamalar oluşturabileceğimiz anlamına gelir. OnPush'a geçtiğinizde, birçok yeni ve geliştirilmiş strateji, manuel aboneliğinizin otomatik olarak tetiklemeyeceği değişiklik saptaması ihtiyacını tetikleyebilir.

İşte daha gelişmiş Gözlenebilir stratejilerin birkaç örneği:

Async borusu daha sonra Firebase gibi gerçek zamanlı bir veri kümesi gibi daha karmaşık bir şey içeren basit bir HTTP çağrısını değiştirirseniz, şablon kodunuzun değişmesi gerekmediği anlamına gelir.

El ile abone olduğunuzda, Gözlemlenebilirlerin özelliklerinin / güçlerinin çoğu kayboluyor. Gözlemlenebilirler, yeniden deneme, startWith (çevrimdışı önbellekleme gibi şeyler için) veya zamanlayıcı tabanlı yenileme gibi davranışlarla zenginleştirilebilir.

En İyi Uygulama 4: SEO ve Analytics'i Unutma

Web siteleri ve uygulamalar, Google gibi arama motorlarının bunları dizine ekleyebilmesi ve içeriğinizi dünyayla paylaşabilmesi nedeniyle güçlüdür.

Analytics ürünleri, kullanıcılarınızın ihtiyaçlarını ve davranışlarını anlamanıza yardımcı olabilir.

Her ikisini de ayarlamak için, index.html’e Google Analytics snippet'ini ekleyelim ve izleme kodunu değiştirerek varsayılan olarak ekledikleri ilk sayfa gösterimini kaldıralım.