מה חדש באנגולר 7?

הקדמה

איך לעדכן?

אם שידרגתם לגירסא 6, החיים שלכם צריכים להיות פשוטים. אפשר לעדכן עם שורת פקודה אחת:

ng update @angular/cli @angular/core

העדכון אמור להיות ממש מהיר ואמור לקחת פחות מ10 דק׳.

אם אתם לא משדרגים מגרסא 6, זה הולך להיות קצת יותר טריקי עבורכם. למזלכם, האתר הרשמי של אנגולר ממש יעזור לכם. אז בקרו שם בשביל מידע מפורט על איך לעשות את זה.

CLI Prompts

כשנעשה פעולות נפוצות כמו ng new, הCLI יתחיל לשאול אותנו שאלות שיעזרו לנו לשנות את האופציות הדיפולטיביות של המשימה.

לפני הפיצ׳ר הזה, בשביל לשנות את האופציות הדיפולטיביות היה צורך להשתמש בדגלים של הCLI. עכשיו הCLI יתן לנו שאלות שניצטרך לענות עליהם. כמובן שהאפשרות להשתמש בדגלים בשביל אופציות יותר מתקדמות עדיין קיימת ואין מחשבה להסיר את התמיכה בהם.

לדוגמא, כאשר ניצור אפליקציה חדשה ונשתמש ב ng new, יהיו 2 שאלות - האם נרצה תמיכה בRouter, ובאיזה סגנון של StyleSheet ארצה להשתמש (CSS, SCSS, SASS).

Application Performance

יצירת תגיות גודל

זה ממש פיצ׳ר ממש מגניב לדעתי. הפיצ׳ר הזה הוא שומר עלינו מעצמנו על ידי כך שהוא יזהיר אותנו אם עברנו את הגודל של הBundle. הגדלים הדיפולטיבים לאזהרה הם 2MB ולשגיאה 5MB. כמובן שזה קונפיגורבילי דרך הקובץ angular.json.

אם אתם רוצים לברר מה גודל ה Bundle שלכם, פשוט הריצו ng serve.

הסרת reflect metadata polyfill בפרודקשין

אם כבר מדברים על שמירה עלינו מעצמנו, בשביל לשמור על ביצועים מעולים הצוות של אנגולר גילה שהרבה מהמפתחים משתמשים בreflect metadata polyfill בפרודקשיין. (אמור להיות בשימוש רק בסביבת פיתוח). עכשיו מסירים את כל הכיף הזה בצורה דיפולטיבית.

אם אתם לא בטוחים מה זה reflect metadata, אז זה חבילה שהיא הצעה לES7. היא מאפשרת למטה דאטה להיכלל בקלאס או בפונקציה.אם נסתכל על קלאס של אנגולר, שימוש ב @Component לדוגמא, יתורגם על ידי הפוליפיל הזה ל ES5. אם בא לכם, אפשר לקרוא על זה עוד כאן.

Angular Material & the CDK

השנה היו הרבה עדכונים בAngular Matrieal, כולל עמוד בית חדש לMatrieal. יש שם מלא דברים מגניבים, שווה להציץ.

אם אתם כבר משתמשים בAngular Matrieal, אתם תשימו לב לשינויים קטנים שכן הסיפריה יישרה קו עם ההנחיות של Matreial Desgin.

נגישות

אנגולר שיפרה את הנגישות שלה בכל הנוגע ל select. אפשר להשתמש עכשיו ב select נייטיב בתוך mat-form-field וכיוצא מכך הוא יותר נגיש ועם ביצועים טובים יותר מאשר הביצועים של mat-select. כמובן שישנה האפשרות להשתמש ב mat-select, אז כל מה שאתם צריכים זה לבחור.

Virtual Scroll

נוסף לCDK פיצ׳ר מאד חזק שאני אישית חיכיתי לו. Virtual Scroll טוען ומסיר אלמנטים מהDOM על בסיס האלמנטים שכרגע חשופים למשתמש. זה מאפשר בעצם חווית משתמש מאד מהירה למשתמשים עם רשימות נגללות ארוכות.

<cdk-virtual-scroll-viewport itemSize="20">   
    <div *cdkVirtualFor="let developer of developersArray"></div> 
</cdk-virtual-scroll-viewport>

תשחקו עם זה כאן, זה סופר מגניב.

Drag And Drop

D&D נתמך עכשיו ב CDK ביחד עם רינדור אוטומטי כאשר המשתמש מזיז פריטים וגם מטודות עזר עבור סידור מחדש של רשימות ומעבר של פריטים בין רשימות.

בדף הרשמי יש עוד המון דוגמאות והסברים.

אמנם מדובר בעדכונים קטנים אבל תמיד חשוב להתעדכן ולדעת מה כל היכולות של הספרייה :)

מסכימים? לא מסכימים? יש לכם שאלות? אשמח אם תשאירו תגובה ותגידו לי מה דעתכם.