3 מסגרת JavaScript הטובה ביותר / ספריה לפיתוח חזית

JavaScript צובר פופולריות רבה יותר ויותר עם השנים, הקהילה צומחת במהירות והמפתחים מפתחים ובונים כלים כל העת לשפה מדי יום.


זה הופך אותו למוחץ כשמדובר בהחלטה באיזה כלי / מסגרת / ספריה להשתמש למשימה מסוימת מכיוון שתמיד ישנן אפשרויות מרובות לכל דבר שרק תרצו לעשות ב- JavaScript. בהתחלה, זה עדיין מאתגר להחליט איזו ספריה או מסגרת ללמוד.

מאמר זה מתמקד בפיסול היתרון של שימוש במספר מסגרות / ספריות קדמיות JavaScript ובסופו של דבר נותן תמונה ברורה יותר מהן. זה נועד להקל על תהליך ההחלטה של ​​בחירת אחד.

הגיב

הגיב אינה מסגרת אלא ספריית JavaScript לבניית ממשקי משתמש.

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

חלק מהתכונות כוללות את הדברים הבאים.

  • מספק רכיבים תגוביים, ניתנים להתאמה אישית וניתנים לשימוש חוזר
  • עושה שימוש ב- DOM וירטואלי
  • מהיר במיוחד
  • מבוסס רכיב
  • מחייב נתונים חד כיווני
  • שימוש חוזר בקוד
  • מאחוריה מערכת אקולוגית תוססת ומשגשגת
  • טיפול נוח לניהול המדינה

התקנה / שימוש

ניתן להשתמש בתגובה בחזית בשתי דרכים שונות.

  • ב- CDN
  • באמצעות Node.JS

ב- CDN

אתה יכול להתייחס שלהם אתר רשמי כדי לקבל קישור סקריפטים, שתוכל לכלול בתג הכותרת בסימון ה- HTML שלך. בחר את הקישורים על בסיס המטרה.

לדוגמה, אם משתמשים בסביבת פיתוח, אז:

וכן, לייצור

באמצעות Node.JS

אני מניח שכבר התקנת את NodeJS. להתקנת React, פשוט הקלד את הפקודה הבאה.

sudo npm i -g create-react-app – שמור-dev

לאחר סיום ההתקנה, הקלד את הפקודה הבאה

צור-הגב-אפליקציה היישום הראשון-שלי-הגיב

הפקודה לעיל תתקין את כל הספריות הדרושות כדי להגיב כדי להפעיל כראוי, שכוללת שרת פיתוח, חבילת רשת ובבל..

נווט לתיקיית היישום שלי-תגובה ראשונה והפעל את הפקודה הבאה

התחל בערב

האמור לעיל ישיק שרת פיתוח ביציאה 3000. וכשאתה ניגש ל- IP של השרת שלך עם יציאה 3000, אתה אמור לראות משהו כמו להלן.

React צובר פופולריות וביקוש על ידי מספר ארגונים גדולים. אם אתה מעוניין ללמוד, אז הייתי ממליץ לקחת את זה קורס שלם.

Vue.js

Vue.js היא מסגרת JavaScript מתקדמת לבניית ממשקי משתמש אינטראקטיביים ויישומים עם עמוד יחיד. זוהי מסגרת של תצוגה מודאלית עם ספריית הליבה, המתמקדת בשכבת התצוגה. Vue פופולרי, מכיוון שזו היכולת להפעיל יישומים עם עמוד יחיד. שלא כמו React, Vue משתמש ב- HTML גולמי ולא ב- JSX.

Vue.js הוא קוד פתוח ובמקור נוצר על ידי אוון אתה ושוחרר בפומבי בפברואר 2014. להלן כמה מהתכונות.

  • הוא מספק רכיבי תצוגה ריאקטיביים והרכבים.
  • עושה שימוש ב- DOM וירטואלי
  • שומר על התמקדות בספריית הליבה (כלומר, ניתוב וניהול מדינה)
  • סקופ ב- CSS מטופל ללא CSS-In-Js
  •  כריכה חד כיוונית בתוך רכיבים.
  • תמיכה בהרחבות חיוניות
  • שימוש חוזר בקוד

התקנה / שימוש

אתה יכול להשתמש ב- Vue.js בקצה הקדמי, דרך CDN או באמצעות Node.js

להשתמש ב- דרך CDN, אתה יכול להוסיף את הסקריפט הבא לקטע כותרת דף HTML שלך.

התסריט שלעיל מתאים למטרות פיתוח שכן הוא כולל מסר חשוב במסוף. עם זאת, לייצור, עליך להשתמש בהמשך.

ול להשתמש עם Nodejs, אתה יכול להתקין אותו באמצעות הפקודה npm.

npm להתקין Vue

אני ממליץ לך בחום לקרוא את ה- Vue JS הרשמי תיעוד ללמוד עוד או לשקול לקחת את זה שביל.

זוויתי

זוויתי היא מסגרת JavaScript מבנית לדפים דינמיים. זה מאפשר שימוש ב- HTML כשפת תבנית ומאפשר שימוש בתחביר HTML לביטוי רכיב יישומים בצורה ברורה ותמציתית. זהו פרויקט קוד פתוח שמתוחזק על ידי גוגל ותורמים אחרים.

התקנה

וודא כי התקנת Nodejs האחרונה. הדבר הראשון שנצטרך להתקין הוא כלי Angular CLI.

npm התקן -g @ angular / cli

לאחר ההתקנה, אנו יכולים ליצור פרויקט חדש עם הפקודה הבאה.

מתוך האפליקציה החדשה-זוויתית הראשונה שלי

עקוב אחר ההוראות שעל המסך. זה מייצר חלק מהקבצים והתיקיות ומשתמש במודול ה- npm כדי להוריד ספריות של צד שלישי הדרושות כדי ש- Angular תפעל כראוי..

כדי להפעיל את היישום החדש שנוצר, הפעל את הפקודה הבאה מתיקיית היישומים.

שרת ng

פעולה זו אמורה להפעיל את השרת באופן אוטומטי ביציאה 4200.

[[מוגן בדוא”ל] האפליקציה הראשונה-זוויתית שלי] # ng הגשה
10% בניית 3/3 מודולים 0 פעיליםℹ 「wds」: הפרויקט פועל ב http: // localhost: 4200 / webpack-dev-server /
ℹ 「wds」: פלט ה- webpack מוגש מ /
ℹ 「wds」: 404s יחזרו ל //index.html

נתח {main} main.js, main.js.map (main) 47.8 kB [ראשוני] [שניתנו]
נתח {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [ראשוני] [שניתנו]
נתח {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
נתח {styles} styles.js, styles.js.map (סגנונות) 10 kB [ראשוני] [שניתנו]
נתח {vendor} vendor.js, vendor.js.map (ספק) 3.81 MB [ראשוני] [שניתנו]
תאריך: 2019-12-28T12: 08: 20.138Z – Hash: 5d4b93c7bf9e61979c4d – זמן: 12864ms
** שרת פיתוח Angular Live מקשיב ב- localhost: 4200, פתח את הדפדפן שלך ב http: // localhost: 4200 / **
ℹ 「wdm」: נערך בהצלחה.

סיכום

אז מה שתבחרו ללמוד הוא העדפה אישית יותר מאשר “דבר שהוא טוב יותר”.

כל המסגרות / הספריות המפורטות לעיל נהדרות. הנה סיכום קצר;

  • עליך ללמוד Angular אם אתה רוצה מסגרת שאתה רוצה להסתמך עליה בלי שתצטרך להתמודד עם תלות חיצוניות.
  • עליך ללמוד React אם אתה רוצה לבנות יישום מהיר, PWA, עמוד בודד, ונוח לך סביב JSX.
  • ל- React יש את הקהילה התוססת ביותר ויותר אפשרויות עבודה בגלל הקהילה הגדולה שלה.
  • קל יחסית להתחיל עם React.
  • React ניתנת להתאמה אישית ומתייחסת לכל חלק ממשק המשתמש כמרכיב.
  • ל- Vue יש את אותם יתרונות כמו React אך ללא JSX.
  • שוק העבודה עבור Vue הולך וגדל.

להלן תרשים ב- Google Trends המציג השוואה בין שיעור הפופולריות של 3 מהם.

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

תגיות:

  • קוד פתוח

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map