Burchakli eng yaxshi amaliyotlar - 2017 yil avgust

(Ushbu xabar https://fluin.io/blog/angular-best-practices-august-2017 saytida joylashtirilgan)

Boshqa oy, eng yaxshi amaliyotlarning yana bir xulosasi. Ushbu oyda biz vositalarni yaratish va IDE konfiguratsiyasi haqida ba'zi bir asoslarga va kelajakda muvaffaqiyatga erishish uchun sizga yordam beradigan ba'zi reaktiv dasturlash tamoyillariga qaytmoqdamiz.

Eng yaxshi amaliyot 1: CLI-dan foydalaning

Bugungi kunda Angular CLI - bu burchakli ilovalarni yaratishning eng yaxshi usuli. Ko'pgina ishlab chiquvchilar CLI tayyor bo'lgunga qadar Angular bilan boshladilar, ammo CLI dasturchilar, boshlang'ich kompaniyalar va yirik korxonalar jamoalari uchun juda yaxshi.

Yangi loyihani boshlamoqchimisiz? Uni CLI yordamida yarating.

Mavjud loyiha ustida ishlayapsizmi? CLI bilan yangi loyiha yarating va keyin mavjud kodni / src / app / ichiga o'tkazing.

npm o'rnatish -g @ burchak / krem
ng yangi mening loyiham

CLI-da yangi loyihalarni yaratish va siz uchun yangi kod yaratish uchun iskala (aka sxematik) vositalari mavjud, ammo bu asosiy foyda emas. CLI ning asosiy afzalligi shundaki, u ng xizmat qiladigan va jonli rivojlanish uchun qurilgan quvur liniyasini avtomatlashtiradi, shuningdek ng build -prod bilan brauzerlarga yuboradigan ishlab chiqarish kodi.

ng build -prod har doim ham ko'plab eng yaxshi amaliyotlardan foydalanadi, chunki Burchak guruhi avtomatik ravishda yoqishi mumkin. Bu shunchaki Service Workers yoki Angular Optimizer kabi funktsiyalar bilan vaqt o'tishi bilan ushbu buyruq yanada kuchliroq bo'lishini anglatadi.

2-eng yaxshi amaliyot: John Papa-ning Vs-kod kengaytmasini o'rnating

Visual Studio Code - bu burchakli dasturlarni yaratish uchun ajoyib IDE. O'zingiz uchun qila oladigan eng katta xurmatlardan biri bu Jon Papa uchun Essential Angular Extension paketini o'rnatishdir.

Bu Visual Studio Code-da Angular bilan ishlashni har qachongidan ham yaxshiroq qiladi.

Ushbu to'plam quyidagi ajoyib vositalarni o'z ichiga oladi:

  1. Angular Language Service - bu sizning andozangizni biladigan va angularni anglash va dasturni xatolar bilan tekshirishni ta'minlaydi
  2. EditorConfig - yangi CLI loyihasining bir qismi sifatida siz uchun avtomatik ravishda yaratadigan .editorconfig-ga VSCode konfiguratsiyasini ulaydi.
  3. Bracket Pair Colorizer - standart sintaksisi ta'kidlash o'rniga, bu ichki qavat asosida qavslar, qavslar va jingalak qavslarni ranglaydi. Nestning vizual ko'rsatkichlari murakkab kod bilan ishlashda katta yordamdir.

3-chi eng yaxshi amaliyot: O'zingizning kuzatuvchilaringizga tarkibiy qismlarga obuna bo'lmang

Kuzatuv ma'lumotlari bilan birinchi marta ishlaydigan ko'plab ishlab chiquvchilar biron bir joyda ma'lumotlarga obuna bo'lishni va saqlashni xohlashadi.

Odatda bu antipattern bo'ladi, chunki u sizni dasturchini tarkibiy qismlarga ruxsat berish o'rniga, tarkibiy qismlar va obunalarni hayot aylanishini boshqarishga majbur qiladi.

Buning eng yaxshi usuli shablonlaringiz ichida asenk trubasidan foydalanish va Angular siz uchun hamma narsani boshqarishiga imkon berishdir. Keling, ba'zi bir namunaviy kodni ko'rib chiqaylik.

Buni qilmang:

...
shablon: `
    {{localData | json}}
`)
MyComponent komponentini eksport qilish {
    mahalliyData;
    konstruktor (http: HttpClient) {
        http.get ('path / to / my / api.json')
        obunani bekor qilish (data => {
            this.localData = ma'lumotlar;
        });
    }
}

Buning o'rniga buni qiling

...
shablon: `
    {{ma'lumotlar | async | json}}
`)
MyComponent komponentini eksport qilish {
    ma'lumotlar;
    konstruktor (http: HttpClient) {
        this.data = http.get ('path / to / my / api.json');
    }
}

Kuzatiluvchi va shablonga obuna bo'lish bilan siz xotira etishmasligidan qochasiz, chunki tarkibiy qism yiqilganida Angular avtomatik ravishda Kuzatiluvchi obunani bekor qiladi. Bu HTTP uchun unchalik muhim bo'lmasligi mumkin, ammo bu bir necha sabablarga ko'ra yoqimli.

Async trubkasi HTTP so'rovlarini bekor qiladi, agar ma'lumotlar endi kerak bo'lmasa, to'ldirish, ishlov berish va keyin hech narsa qilmasdan.

Async trubkasi, ChangeDetectionStrategy-ni OnPush-ga almashtirish orqali biz yanada faol dasturlarni yaratishimiz mumkinligini anglatadi. OnPush-ga o'tgandan so'ng, ko'plab yangi va takomillashtirilgan strategiyalar o'zgarishni aniqlash zaruriyatini qo'zg'atishi mumkin, bu sizning qo'lda yozilishingiz avtomatik ravishda boshlanmaydi.

Kuzatilishi mumkin bo'lgan rivojlangan strategiyalarning bir nechta namunalari:

Async trubkasi shuni anglatadiki, agar siz oddiy HTTP qo'ng'iroqni Firebase kabi real vaqt ma'lumotlar bazasi kabi murakkabroq narsa bilan almashtirsangiz, shablon kodingizni o'zgartirish shart emas.

Qo'lda obuna bo'lganingizda Kuzatiladigan kuzatuvlarning ko'pgina xususiyatlari / kuchlari yo'qoladi. Qayta urinish, startWith (oflayn keshlash kabi narsalar uchun) yoki taymerga asoslangan yangilash kabi kuzatiladigan kuzatuvlarni yanada boyitish mumkin.

Eng yaxshi amaliyot 4: SEO va Analytics haqida unutmang

Google kabi qidiruv tizimlari ularni indekslashi va tarkibingizni dunyo bilan baham ko'rishi tufayli veb-saytlar va ilovalar juda kuchli.

Tahlil mahsulotlari sizning foydalanuvchilarning ehtiyojlari va xatti-harakatlarini tushunishga yordam beradi.

Ikkalasini sozlash uchun, bizning index.html-ga Google Analytics parchasini qo'shib qo'yamiz va odatiy holatga kiritilgan dastlabki sahifani olib tashlagan kuzatuv kodini almashtiramiz.

Endi keling va bizning app.module.ts-ga tadbirlarni qo'shaylik.

Biz barcha marshrutizator voqealarini tinglashni, navigatsiya hodisasi qachon tugaganini bilib olishni (NavigationEnd) va sahifaning sarlavhasini yangilashni va tahliliy voqeani yuborishni xohlaymiz.

Biz obunani ishlatmoqchimiz (ammo yo'q!), Lekin bu nuqtai nazardan yaxshi, chunki bizda bitta bitta obuna bo'lishi kerak va biz uning butun umrini brauzerda ishlashini xohlaymiz.

SEO uchun biz sahifamiz sarlavhasini marshrutni sozlashdagi ba'zi qo'shimcha ma'lumotlardan o'qiymiz.

app.module.ts

var ga e'lon qilmoq;
...
RouterModule.forRoot ([
    ...
    {path: 'bio', komponent: Bio, ma'lumotlar: {sarlavha: 'About'}},
    {yo'l: 'loyihalar', tarkibiy qism: Loyihalar, ma'lumotlar: {sarlavha: 'Loyihalar'}},
])
...
konstruktor (marshrutizator: yo'riqnoma, faolRoute: ActivatedRoute, sarlavha: sarlavha) {
    router.events.filter (e => e nusxasi NavigationEnd) .subsubs ((voqea) => {
        sahifaTitle = router.routerState.snapshot.root.children [0] .data ['title'];
        if (pageTitle) {
            title.setTitle (sahifaTitle);
        } else if (pageTitle! == false) {
            title.setTitle ('Mening asl sarlavham');
        }
        ga ('yuborish', 'sahifa ko'rinishi', event.urlAfterRedirects);
    });
}