רוצים שהאתר שלכם ב-Angular יהיה מהיר ונגיש ככל האפשר? הגעת למקום הנכון.
מה זה Angular?
Angular הוא framework ליצירת ממשקי משתמש. הוא מספק אבני בניין שעוזרות להגדיר במהירות אפליקציה שניתן לתחזק ולהתאים לעומס. Angular מאפשרת למפתחים ליצור אפליקציות שפועלות באינטרנט, בנייד או במחשב.
מה יש באוסף הזה?
האוסף הזה מתמקד בחמישה תחומים עיקריים לאופטימיזציה של אפליקציית Angular:
- שיפור הביצועים של האפליקציה כדי להגדיל את ההמרות ואת מעורבות המשתמשים
- שיפור האמינות של האפליקציה ברשתות חלשות על ידי שמירת נכסים במטמון מראש באמצעות ה-service worker של Angular
- הפיכת האפליקציה לניתנת לגילוי על ידי מנועי חיפוש ובוטים של רשתות חברתיות באמצעות רינדור מראש ורינדור בצד השרת
- הופכים את האפליקציה לניתנת להתקנה כדי לספק חוויית משתמש דומה לזו של אפליקציה ל-iOS או ל-Android
כל פוסט באוסף יתאר טכניקות שתוכלו ליישם ישירות באפליקציות שלכם.
מה לא כלול באוסף הזה?
האוסף הזה מניח שאתם כבר מכירים את Angular ו-TypeScript. אם אתם עדיין לא מרגישים בטוחים לגביהם, כדאי לעיין במסמכי התיעוד של TypeScript ובמדריך תחילת העבודה עם Angular באתר angular.io.
התחלת פרויקט
ממשק שורת הפקודה (CLI) של Angular מאפשר להגדיר במהירות אפליקציית 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. הנה מה שכלול:
- פיצול קוד ברמת הנתיב ב-Angular
- תקציבי ביצועים באמצעות Angular CLI
- אסטרטגיות לאחזור מראש של מסלולים ב-Angular
- אופטימיזציה של זיהוי שינויים ב-Angular
- וירטואליזציה של רשימות גדולות באמצעות Angular CDK
- שמירה מראש במטמון באמצעות Angular Service Worker
- עיבוד מראש של מסלולים באמצעות Angular CLI
- רינדור בצד השרת באמצעות Angular Universal
- הוספת קובץ מניפסט של אפליקציה לאפליקציית אינטרנט באמצעות Angular CLI