أفضل الممارسات الزاوية - إصدار أغسطس 2017

(تم نشر هذه المشاركة من https://fluin.io/blog/angular-best-practices-august-2017)

شهر آخر ، ملخص آخر لأفضل الممارسات. عدنا هذا الشهر إلى بعض الأساسيات المتعلقة بالأدوات وتكوين IDE ، وبعض مبادئ البرمجة التفاعلية التي ستعدك للنجاح في المستقبل.

أفضل ممارسة 1: استخدم CLI

اليوم ، يُعد Angular CLI أفضل طريقة لإنشاء تطبيقات Angular. بدأ العديد من المطورين بـ Angular قبل أن يكون CLI جاهزًا للوقت الأول ، لكن CLI رائعة بالنسبة للغالبية العظمى من المطورين والشركات الناشئة وفرق الشركات الكبيرة.

بدء مشروع جديد؟ قم بإنشائه باستخدام CLI.

العمل على مشروع قائم؟ قم بإنشاء مشروع جديد باستخدام CLI ، ثم انقل الشفرة الحالية إلى / src / app /.

تثبيت npm -g @ angular / cli
نانوغرام جديد بلدي المشروع

لدى CLI أدوات للسقالات (وتعرف أيضًا باسم الخطط) لإنشاء مشاريع جديدة ، وإنشاء رمز جديد لك ، لكن هذه ليست الفائدة الرئيسية. تتمثل الفائدة الرئيسية لـ CLI في الطريقة التي تعمل بها على أتمتة خط أنابيب الإنشاء لكل من التطوير المباشر مع ng تخدم وكذلك لرمز الإنتاج الذي ستشحنه إلى المتصفحات باستخدام ng build -prod

ستستفيد ng build -prod دائمًا من أكبر عدد من الممارسات التي يستطيع فريق Angular تشغيلها تلقائيًا. هذا يعني أن هذا الأمر سيصبح أكثر قوة بمرور الوقت مع ميزات مثل عمال الخدمة أو الزاوي المحسن.

أفضل ممارسة 2: قم بتثبيت ملحق Vs Code من John Papa

Visual Studio Code هو بيئة تطوير متكاملة رهيبة لإنشاء تطبيقات Angular. واحدة من أكبر المزايا التي يمكنك القيام بها لنفسك هي تثبيت حزمة حزمة الأساسية الزاوي الأساسية من John Papa.

هذا يجعل العمل مع Angular في Visual Studio Code أفضل من أي وقت مضى.

تتضمن هذه الحزمة الأدوات الرائعة التالية:

  1. The Angular Language Service - يوفر إكمال القالب وعلم الزوايا ومعرفتها خطأ والتحقق من التطبيق الخاص بك
  2. EditorConfig - يربط تكوين VSCode بـ .editorconfig الذي نقوم بإنشائه تلقائيًا لك كجزء من مشروع CLI جديد
  3. Color Bracket Pair Colorizer - بدلاً من تمييز بناء الجملة القياسي ، فإن ألوان الامتداد هذه تجمع بين الأقواس والأقواس والأقواس المتعرجة بناءً على الطبقة المتداخلة. تعتبر المؤشرات البصرية للتداخل مساعدة كبيرة عند العمل باستخدام تعليمات برمجية معقدة.

أفضل ممارسة 3: لا تشترك في ملاحظاتك في المكونات

يرغب العديد من المطورين الذين يعملون مع Observables لأول مرة في الاشتراك وحفظ البيانات محليًا في مكان ما.

هذا عادة ما يكون مضادًا لأنه يفرض عليك المطور لإدارة دورة حياة المكونات والاشتراكات ، بدلاً من ترك إطار العمل يقوم بذلك نيابة عنك.

أفضل طريقة للقيام بذلك هي استخدام توجيه الإخراج غير المتزامن داخل القوالب الخاصة بك ، والسماح لـ Angular بإدارة كل شيء نيابة عنك. دعونا نلقي نظرة على بعض التعليمات البرمجية عينة.

لا تفعل هذا:

...
القالب:
    {{localData | سلمان}}
`)
فئة التصدير MyComponent {
    localData.
    مُنشئ (http: HttpClient) {
        http.get ( 'الطريق / / لي / api.json')
        .subscribe (data => {
            this.localData = البيانات ؛
        })؛
    }
}

بدلا من ذلك القيام بذلك

...
القالب:
    {{البيانات | غير متزامن | سلمان}}
`)
فئة التصدير MyComponent {
    البيانات؛
    مُنشئ (http: HttpClient) {
        this.data = http.get ('path / to / my / api.json') ؛
    }
}

من خلال الاحتفاظ بالملاحظة والاشتراك عبر القالب ، فإنك تتجنب تسرب الذاكرة لأن Angular ستقوم تلقائيًا بإلغاء الاشتراك من Observable عند هدم المكون. قد لا يبدو هذا مهمًا بالنسبة إلى HTTP ، ولكن هذا أمر رائع لعدة أسباب.

سيقوم أنبوب Async بإلغاء طلبات HTTP إذا لم تعد هناك حاجة إلى البيانات ، بدلاً من إكمالها ومعالجتها ثم عدم القيام بأي شيء معها.

أخيرًا ، يعني توجيه Async أنه يمكننا إنشاء تطبيقات أكثر فاعلية عن طريق تحويل ChangeDetectionStrategy إلى OnPush. عندما تقوم بالتبديل إلى OnPush ، يمكن للعديد من الاستراتيجيات الجديدة والمحسّنة أن تشعل الحاجة إلى اكتشاف التغيير ، وهو ما لن يتم تشغيله تلقائيًا.

فيما يلي بعض الأمثلة لاستراتيجيات يمكن ملاحظتها أكثر تقدماً:

يعني توجيه Async أنه في وقت لاحق إذا قمت بتبديل مكالمة HTTP بسيطة مع شيء أكثر تعقيدًا مثل مجموعة البيانات الحقيقية مثل Firebase ، فلن تحتاج إلى تغيير رمز القالب.

يتم فقد العديد من ميزات / صلاحيات Observables عند الاشتراك يدويًا. يمكن إثراء الملاحظات بسلوك مثل إعادة المحاولة أو startWith (لأشياء مثل التخزين المؤقت في وضع عدم الاتصال) أو تحديث يستند إلى المؤقت.

أفضل ممارسة 4: لا تنسَ مُحسنات محركات البحث والتحليلات

تعد المواقع والتطبيقات قوية بسبب الطريقة التي تستطيع بها محركات البحث مثل Google فهرستها ومشاركة المحتوى الخاص بك مع العالم.

يمكن أن تساعدك منتجات Analytics في فهم احتياجات المستخدمين وسلوكياتهم.

لإعداد هذين الأمرين ، دعنا ندرج مقتطف Google Analytics في الفهرس الخاص بنا. html واستبدل شفرة التتبع وهي تزيل معاينة الصفحة الأولية التي تتضمنها افتراضيًا.