רוצים שהאתר שלכם ב-Agular יהיה מהיר ונגיש ככל האפשר? הגעת למקום הנכון!
מה זה Angular?
Angular היא מסגרת לפיתוח ממשקי משתמש. הכלים האלה מספקים אבני בניין שיעזרו לכם להגדיר במהירות אפליקציה שניתנת לתחזוקה וניתנת להתאמה. חברת Angular מאפשרת למפתחים ליצור אפליקציות שזמינות באינטרנט, בנייד או במחשב.
מה האוסף הזה?
האוסף הזה מתמקד בחמישה תחומים עיקריים לאופטימיזציה של אפליקציה של Angular:
- שיפור הביצועים של האפליקציה כדי להגדיל את מספר ההמרות והמעורבות של המשתמשים
- שיפור האמינות של האפליקציה ברשתות חלשות על ידי שמירה מראש של נכסים במטמון באמצעות Angular Service Worker
- להפוך את האפליקציה לניתנת לגילוי עבור מנועי חיפוש ובוטים של רשתות חברתיות באמצעות עיבוד מראש ורינדור בצד השרת
- להפוך את האפליקציה לניתנת להתקנה כדי לספק חוויית משתמש שדומה לזו של אפליקציה ל-iOS או ל-Android
- שיפור הנגישות של האפליקציה כדי שכל המשתמשים יוכלו להשתמש בה בצורה מובנת
כל פוסט באוסף יתואר טכניקות שתוכלו ליישם ישירות באפליקציות שלכם.
מה לא באוסף הזה?
האוסף הזה מבוסס על ההנחה שאתם כבר מכירים את Angular ואת TypeScript. אם אתם עדיין לא בטוחים איתן, תוכלו לעיין במסמכי התיעוד של TypeScript ובמדריך Getting Started with Angular ב-angular.io.
יצירת פרויקט
ממשק שורת הפקודה של Angular (CLI) מאפשר להגדיר במהירות אפליקציה פשוטה בצד הלקוח של Angular. בפוסט הזה יש מבוא קצר ל-CLI, ואילו פוסטים אחרים באוסף מראים איך להוסיף תכונות מתקדמות יותר, כמו רינדור בצד השרת ותמיכה בפריסה.
הגדרת ה-CLI
כדי להתחיל, מריצים את הפקודות הבאות כדי להתקין את ה-CLI בכל העולם ולוודא שהגרסה מותקנת במכשיר:
npm i -g @angular/cli
ng --version
צריך לוודא שהפלט של הפקודה האחרונה הוא גרסה 8.0.3 ואילך.
לחלופין, אם לא רוצים להתקין את ה-CLI באופן גלובלי, אפשר להתקין אותו באופן מקומי ולהריץ אותו באמצעות הפקודה npx:
npm i @angular/cli
npx ng --version
יצירת הפרויקט
כדי ליצור הרצה של פרויקט חדש:
ng new my-app
הפקודה הזו תיצור את המבנה הראשוני של הקבצים והתיקיות עבור האפליקציה שלכם, ותתקין את המודולים של הצמתים הדרושים לו.
לאחר שתהליך ההגדרה הושלם בהצלחה, הפעילו את האפליקציה:
cd my-app
ng serve
עכשיו אמורה להיות לכם גישה לאפליקציה בכתובת http://localhost:4200.
מה השלב הבא?
בהמשך האוסף הזה תלמדו איך לשפר את הביצועים, הנגישות וה-SEO של אפליקציית Angular. מה נכלל:
- פיצול קוד ברמת המסלול ב-Agular
- תקציבי ביצועים עם ה-CLI של Angular
- ניתוב של אסטרטגיות שליפה מראש (prefetch) ב-Agular
- אופטימיזציה של זיהוי שינויים ב-Agular
- וירטואליזציה של רשימות גדולות באמצעות Angular CDK
- הדרכה מראש באמצעות Angular Service Worker
- עיבוד מראש של מסלולים באמצעות Angular CLI
- רינדור בצד השרת באמצעות Angular Universal
- הוספת מניפסט של אפליקציית אינטרנט באמצעות Angular CLI
- ביקורת נגישות באמצעות Codelyzer