תוֹכֶן
- 01. זוויתי
- 02. להגיב
- 03. נוף
- איך התחביר של המסגרות משתווה?
- פופולריות ושוק
- פיתוח אפליקציות לנייד
- מסגרות אחרות שצריך להיזהר בהן בשנת 2020
- סיכום
בשנת 2020 אנו מבורכים במספר מסגרות וספריות שיעזרו לנו בפיתוח אתרים. אבל לא תמיד היה כל כך הרבה מגוון. עוד בשנת 2005, שפת תסריט חדשה בשם Mocha נוצרה על ידי בחור בשם ברנדן אייך. חודשים לאחר ששמו שונה ל- LiveScript, השם הוחלף שוב ל- JavaScript. מאז, JavaScript עשה דרך ארוכה.
בשנת 2010 ראינו את ההקדמה של Backbone ו- Angular כמסגרות ה- JavaScript הראשונות, ובשנת 2016 92% מכלל האתרים השתמשו ב- JavaScript. במאמר זה, אנו נסתכל על שלוש ממסגרות ה- JavaScript העיקריות (Angular, React ו- Vue) ועל מעמדן לקראת העשור הבא. רוצה ליצור אתר משלך? נסה רשימה זו של בוני אתרים.
לקבלת כמה משאבים מבריקים, עיין ברשימת הכלים המובילים שלנו לעיצוב אתרים, בסיכום שירותי אירוח האתרים שלנו, וברשימה זו גם תוכנות מעולות לבדיקת משתמשים.
01. זוויתי
AngularJS שוחרר בשנת 2010 אך בשנת 2016 שוכתב לחלוטין ושוחרר כ- Angular 2. Angular היא מסגרת אינטרנט מלאה שפותחה על ידי גוגל, המשמשת את Wix, Upwork, The Guardian, HBO ועוד.
יתרונות:
- תמיכה יוצאת דופן ב- TypeScript
- MVVM מאפשר למפתחים להפריד עבודה על אותה קטע אפליקציה באמצעות אותה מערכת נתונים
- תיעוד מצוין
חסרונות:
- יש קצת עקומת למידה
- מעבר מגרסה ישנה יכול להיות קשה.
- עדכונים מוצגים באופן קבוע למדי כלומר, מפתחים צריכים להסתגל אליהם
מה הלאה?
ב- Angular 9, Ivy הוא מהדר ברירת המחדל. הוא הוקם כדי לפתור הרבה מהנושאים סביב הביצועים וגודל הקובץ. זה אמור להפוך את היישומים לקטנים, מהירים ופשוטים יותר.
כאשר אתה משווה גרסאות קודמות של Angular ל- React ו- Vue, ה-
גדלי הצרור הסופי היו הרבה יותר גדולים בשימוש ב- Angular. קיסוס מאפשר גם הידרציה פרוגרסיבית, וזה מה שהצוות הזוויתי הראה ב- I / O 2019. הידרציה פרוגרסיבית משתמשת בקיסוס כדי לטעון בהדרגה על השרת והלקוח. לדוגמא, ברגע שמשתמש מתחיל לקיים אינטראקציה עם דף, קוד הרכיבים יחד עם כל זמן ריצה נלקח חלק אחר חלק.
אייבי נראה כאילו המוקד הגדול קדימה עבור Angular והתקווה היא להפוך אותו לזמין לכל האפליקציות. תהיה אפשרות ביטול הסכמה בגרסה 9, עד ל- Angular 10.
02. להגיב
ריאקט שוחרר בתחילה בשנת 2013 על ידי פייסבוק ומשמש לבניית ממשקי אינטרנט אינטראקטיביים. משתמשים בו על ידי נטפליקס, דרופבוקס, פייפאל ואובר, עד כמה שם.
יתרונות:
- React משתמש ב- DOM הווירטואלי, אשר משפיע לטובה על הביצועים
- קל לכתוב את JSX
- עדכונים אינם פוגעים ביציבות
חסרונות:
- אחת החסרונות העיקריים היא צורך בספריות צד שלישי כדי ליצור אפליקציות מורכבות יותר
- מפתחים נותרים בחושך בדרך הטובה ביותר להתפתח
מה הלאה?
ב- React Conf 2019 צוות React נגע במספר דברים שהם עבדו עליהם. הראשון הוא הידרציה סלקטיבית, שם React תשהה את כל מה שהיא עובדת על מנת לתעדף את הרכיבים שהמשתמש מתקשר איתם. כאשר המשתמש ילך לקיים אינטראקציה עם קטע מסוים, אזור זה יופטר. הצוות עבד גם על Suspense, שהיא המערכת של ריאקט לתזמורת טעינת קוד, נתונים ותמונות. זה מאפשר לרכיבים להמתין למשהו לפני שהם מעובדים.
גם הידרציה סלקטיבית וגם מתח מתאפשרים באמצעות Concurrent Mode, המאפשרת לאפליקציות להיות יותר מגיבות בכך שהיא נותנת ל- React את היכולת להיכנס לבלוקים גדולים של עבודות בעדיפות נמוכה יותר כדי להתמקד במשהו שהוא בעדיפות גבוהה יותר, כמו תגובה לקלט המשתמש. הצוות גם הזכיר את הנגישות כתחום אחר שעליו התבוננו, על ידי התמקדות בשני נושאים מסוימים - ניהול ממשקי מיקוד וקלט.
03. נוף
Vue פותחה בשנת 2014 על ידי אוון יו, עובד לשעבר של גוגל. הוא משמש את Xiaomi, Alibaba ו- GitLab. Vue הצליח לצבור פופולריות ותמיכה מצד מפתחים בפרק זמן קצר וללא גיבוי של מותג גדול.
יתרונות:
- מאוד קל בגודל
- ידידותי למתחילים - קל ללמוד
- קהילה נהדרת
חסרונות:
- לא מגובה על ידי חברת ענק, כמו תגובה עם פייסבוק ו- Angular עם גוגל
- אין מבנה אמיתי
מה הלאה?
Vue הציבה לעצמה יעד להיות מהיר יותר, קטן יותר, מתחזק יותר ולהקל על מפתחים למקד את הילידים (אם אתה מתקשה לשמור, שקול שירות אירוח אתרים). המהדורה הבאה (3.0) אמורה להתקיים ברבעון הראשון של שנת 2020, הכוללת שכתוב וירטואלי של DOM לצורך ביצועים טובים יותר יחד עם תמיכה משופרת ב- TypeScript. יש גם תוספת של ממשק ה- API, המספק למפתחים דרך חדשה ליצור רכיבים ולארגן אותם לפי תכונה במקום פעולה.
המפתחים את Vue היו עסוקים גם בעבודה על Suspense, שמושעה את עיבוד הרכיבים שלך ומייצר רכיב נסיגה עד להתקיים התנאי.
אחד הדברים הנהדרים עם העדכונים של Vue הוא שהם מקיימים תאימות לאחור. הם לא רוצים שתשבור את פרויקטי Vue הישנים שלך. ראינו זאת בהעברה מ -1.0 ל -2.0, שם 90 אחוזים מה- API זהים.
איך התחביר של המסגרות משתווה?
כל שלוש המסגרות עברו שינויים מאז שחרורן, אך דבר קריטי להבנה הוא התחביר ואיך זה שונה. בואו נסתכל על השוואה בין התחביר בכל הנוגע לכריכת אירועים פשוטה:
נוף: ה v-on ההוראה משמשת לצירוף מאזינים לאירועים המפעילים שיטות במופעי Vue. קידומת להוראות v- על מנת לציין שהם מאפיינים מיוחדים המסופקים על ידי Vue ולהחיל התנהגות תגובתית מיוחדת על ה- DOM שניתנו. ניתן לספק מטפלים באירועים באופן מקוון או כשם השיטה.
תבנית> כפתור v-on: לחץ = "clickHandler"> לחץ עליי / כפתור> / תבנית> סקריפט> ייצוא ברירת מחדל {name: "HelloWorld", שיטות: {clickHandler: function () {console.log ("לחצו עלי! ”); }}}; / סקריפט>
לְהָגִיב: תגובה מגבירה סימנים והיגיון ב- JS ו- JSX, סיומת תחביר ל- JavaScript. עם JSX, הפונקציה מועברת כמטפלת באירועים. טיפול באירועים עם רכיבי React דומה מאוד לטיפול באירועים על רכיבי DOM. אבל יש כמה הבדלים תחביריים; למשל, אירועי תגובה נקראים באמצעות camelCase ולא באותיות קטנות.
לחצן פונקציה () {function clickHandler (e) {console.log ("לחצו עלי"); } לחצן חזרה onClick = {clickHandler}> לחץ עלי! / כפתור>; }
זוויתי: תחביר מחייב אירוע מורכב משם אירוע יעד בסוגריים בצד שמאל של סימן שווה ומצהיר תבנית מצוטט מימין. לחלופין, אתה יכול להשתמש ב- עַל- קידומת, המכונה הצורה הקנונית.
@Component ({selector: "app-click-me", תבנית: "button (click) =" onClickMe () "> לחץ עלי! / כפתור>`}) מחלקת ייצוא ClickMeComponent {onClickMe () {console.log (" לחצת עלי! ”); }}
פופולריות ושוק
נתחיל בתמונה כוללת של שלוש המסגרות ביחס לשאר האינטרנט על ידי בחינת נתונים סטטיסטיים של W3Techs. Angular משמשת כיום 0.4 אחוזים מכל אתרי האינטרנט, עם נתח שוק של ספריית JavaScript של 0.5 אחוזים. React משמש 0.3 אחוזים מכל אתרי האינטרנט ונתח שוק של ספריית JavaScript של 0.4 אחוזים, ול- Vue יש 0.3 אחוזים לשניהם. זה נראה די אחיד והיית מצפה לראות את המספרים עולים.
מגמות גוגל: במהלך 12 החודשים האחרונים, React הוא הפופולרי ביותר במונחי חיפוש, ואחריו Angular. Vue.js נמצא די מאחור; עם זאת, דבר אחד שיש לזכור הוא כי Vue עדיין צעיר בהשוואה לשניים האחרים.
חיפושי עבודה: בזמן כתיבת שורות אלה, React ו- Angular מותאמות באופן הדוק מבחינת רשימות המשרות ב- Indeed עם Vue הרבה אחרי. בלינקדאין, לעומת זאת, נראה שיש ביקוש רב יותר למפתחי Vue.
הצפת מחסנית: אם אתה מסתכל על תוצאות סקר המפתחים של Stack Overflow לשנת 2019, React ו- Vue.js הן מסגרות האינטרנט האהובות והרצויות ביותר. זוויתית מתיישבת בעמדה התשיעית עבור האהובים ביותר אך השלישי המבוקשים ביותר.
GitHub: ל- Vue יש מספר הכוכבים הגדול ביותר עם 153,000 אבל יש לו מספר התורמים הנמוך ביותר (283). לתגובה לעומת זאת יש 140 אלף כוכבים ו -1,341 תורמים. ל- Angular רק 59.6,000 כוכבים, אך המספר הגבוה ביותר של התורמים מבין השלושה הוא 1,579.
מגמות NPM: התמונה שלמעלה מציגה נתונים סטטיסטיים על 12 החודשים האחרונים, שם ניתן לראות כי ל- React מספר הורדות גבוה יותר בחודש בהשוואה ל- Angular ו- Vue.
פיתוח אפליקציות לנייד
המוקד העיקרי של שלושת הגדולים הוא פריסת המובייל. ל- React יש React Native, שהפכה לבחירה פופולרית לבניית אפליקציות iOS ו- Android לא רק עבור משתמשי React אלא גם עבור קהילת פיתוח האפליקציות הרחבה יותר. מפתחים זוויתיים יכולים להשתמש ב- NativeScript לאפליקציות מקוריות או ב- Ionic לאפליקציות ניידות היברידיות, ואילו למפתחי Vue יש אפשרות לבחור בין NativeScript או Vue Native. בגלל הפופולריות של יישומים ניידים, זה נשאר אזור מפתח להשקעה.
מסגרות אחרות שצריך להיזהר בהן בשנת 2020
אם אתה רוצה לנסות משהו חדש בשנת 2020, עיין במסגרות JavaScript אלה.
גַחֶלֶת: מסגרת קוד פתוח לבניית יישומי אינטרנט העובדת על פי דפוס ה- MVVM. משתמשים בו על ידי כמה חברות גדולות כמו מיקרוסופט, נטפליקס ולינקדאין.
מֵטֵאוֹר: פלטפורמת JavaScript מלאה בערימה לפיתוח יישומי אינטרנט ומובייל מודרניים. זה קל ללמוד ויש לו קהילה מאוד תומכת.
סיכום
כל שלוש המסגרות משתפרות ללא הרף, וזה סימן מעודד. לכל אחד יש נקודת מבט משלו ופתרון מועדף לגבי איזה מהם עליו להשתמש, אבל זה באמת מסתכם בגודל הפרויקט וזה גורם לך להרגיש יותר בנוח.
ההיבט החשוב ביותר הוא המשך התמיכה בקהילות שלהם, כך שאם אתה מתכנן להתחיל פרויקט חדש ומעולם לא השתמשת באף אחד מהשלושה לפני כן, אני מאמין שאתה בידיים בטוחות עם כולם. אם עדיין לא הספקת ללמוד אף אחת משלוש המסגרות, אז אני מציע להפוך את זה לרזולוציה שלך לראש השנה להתחיל ללמוד. העתיד יסתובב סביב שלושת אלה.
תוכן זה הופיע במקור במגזין נט.
