בעבודה על פרויקט מורכב, בין אם אתה מתכנת מנוסה או סטודנט טרי, סביר להניח שתתקל בבעיות. כאשר אתה מפצל את הפרויקט שלך למודולים רבים, מתעוררות בעיות, מה שמקשה על מעקב אחר שגיאות ומציאת פתרונות. בנסיבות אחרות, איתור באגים במופעים בודדים עשוי להיות קשה מכיוון שלא גילית את הפתרון המתאים לבעיה עליה עבדת.
זה מתרחש גם כקטע קוד מדי פעם, שעשוי להיראות מורכב באותו זמן. JavaScript היא אחת מהשפות מבוססות האינטרנט שקל מאוד ללמוד. כל שעליך לעשות הוא להפעיל את דפדפן שולחן העבודה שלך ולנווט אל כלי מפתחים (בדרך כלל F12), וסיימת! לאחר מכן תוכל להתנסות עם JS מבלי שתצטרך להתקין או להפעיל תוכנה מסובכת.
כדי להתחיל, כל מה שאתה צריך זה דפדפן. זה נפלא לקבל את כל הפשטות הזו ישירות מהקופסה, אבל יש מקרים שבהם אתה צריך יותר. לדוגמה, נניח שאתה רוצה להתנסות בממשק API חדש שגילית לאחרונה אבל לא רוצה להתחיל פרויקט חדש.
בפוסט זה נשווה ונשווה את שלושת מגרשי המשחקים הפופולריים ביותר של JS, CodePen, CodeSandbox ו-StackBlitz. בואו נתחיל!
קוד פן
כלי פיתוח אתרים בחזית מתפתחים תמיד, ועורכי טקסט הם מרכיב גדול בטכנולוגיות העדכניות ביותר שהופכות את חיי המפתח לפשוטים יותר. מלבד עורכי טקסט עצמאיים כמו Atom או Notepad ++, יש בשנים האחרונות פיצוץ של עורכים מבוססי דפדפן שאינם דורשים התקנת תוכניות ומקדמים שיתוף פעולה רב יותר.
CodePen היא "קהילה מקוונת לבדיקה והצגה של קטעי קוד HTML, CSS ו-JavaScript שנוצרו על ידי משתמשים" המציעה הזדמנויות פנטסטיות ללמוד כיצד לכתוב דפי אינטרנט חזיתיים בצורה טובה יותר.
CodePen נותן לך שני "מצבים". הראשון והנפוץ ביותר הוא העט. זה פשוט כמו לחיצה על כפתור ולהעביר ישירות לעורך. משם, תוכל לגשת ללוח תצוגה מקדימה וכן לחלונות עריכה בסיסיים של HTML, CSS ו-JS.
אין "מערכת קבצים", "IntelliSense" או כל דבר אחר - רק הדגשת תחביר פשוטה ופקודות מהירות כמו prettify. בלשונית האפשרויות, תוכל לבחור מתוך מגוון מוגבל של מעבדי קדם עבור כל שלוש השפות (כגון TypeScript עבור JS) או להוסיף חיבורים למקורות חיצוניים.
אם אתה רק צריך לעשות משהו בחינם, כל אחד מהעורכים יספיק. הייתי מציע CodePen עבור כל דבר שלא דורש הרבה הגדרות או ספריות - פשוט HTML, CSS ו-JS עם מעבדי קדם אופציונליים למעלה. אם אתה רוצה לנצל את מגרש המשחקים כדי לשפר את הנוכחות שלך במדיה החברתית או לפתח תיק עבודות אישי, CodePen היא אפשרות טובה יותר.
גרסה משופרת
יש לך עוד כמה חלופות לבחירה ב-CodePen. אם אתה משלם מדי שנה, אתה יכול לקבל אחת משלוש תוכניות פרימיום עבור $12, $19 או $39 בכל חודש. אתה יכול ליצור אינסוף עטים, פוסטים ואוספים פרטיים בכל אחת משלושת השכבות.
תקבל גם את תג ה-Pro (חיזוק חברתי), גישה למצב שיתוף פעולה חי, ללא פרסום ועוד. יש גם אסטרטגיות מסוימות ספציפיות לצוות והבחנות צולבות אחרות. בדוק את לוח החיובים הרשמי שלהם למידע נוסף.
תכונות עיקריות
מלבד יצירת HTML, CSS ו-JavaScript ב-CodePen, יש עוד כמה דברים שמייחדים אותו.
- אפשר לצפות בזמן אמת בקוד שלך. זה לא דורש קומפילציה.
- ניסוי מאפשר לך ללמוד דברים חדשים.
- צור מקרי בדיקה זעירים כדי לחפש ולטפל בבעיות.
- הצג את היצירות הנפלאות שלך.
- צור ואחסן עטים לשימוש מאוחר יותר.
- נסה את הקוד של מפתחים אחרים וראה אותו בפעולה.
יתרונות
- ראשית, אין עלות.
- משאבי למידה מובנים.
- שתפו פעולה עם אחרים והשוו פרויקטים כדי לראות לאן הם יכולים להגיע בעתיד.
- ממשק המשתמש פשוט לשימוש ופשוט.
חסרונות
- ספריית הקודים קטנה, השלמת קוד אוטומטי אינה מספקת. זה פשוט טוב לפרויקטים של עמוד אחד ואינו יכול להתמודד עם שום דבר גדול יותר.
- ב-CodePen, אתה יכול ליצור עטים פרטיים, אבל תצטרך לשדרג לחברות Pro ($9 לחודש).
ארגז חול של קוד
CodeSandbox הוא עורך קוד מבוסס אינטרנט. זה ממכן עבורך את התפשטות, האריזה וניהול התלות, ומאפשר לך לבנות פרויקט חדש בלחיצה אחת. לאחר שיצרת משהו מרתק, תוכל לשתף אותו עם אחרים פשוט על ידי שיתוף האתר.
העורך תואם לכל פרויקט JavaScript, למרות שהוא כולל תכונות מסוימות הספציפיות ל-React, כמו האפשרות לשמור את הפרויקט בתבנית יצירת-להגיב-אפליקציה.
כל פרויקט שאתה בונה ב-CodeSandbox מתחיל בתבנית. זה יכול להתייחס לספרייה, מסגרת או זמן ריצה ספציפיים (כולל Node.js) או להשתמש פשוט בטכנולוגיות אינטרנט סטנדרטיות. לאחר בחירת תבנית, אתה נשלח לעורך, שם תמצא את כל הקבצים הדרושים וחלון התצוגה המקדימה כבר פתוח.
יש לך גישה ל"מערכת קבצים" בכל ארגזי החול, מה שאומר שאתה יכול ליצור קבצים חדשים, להשתמש במודולים (כולל חבילות NPM) ולקיים אינטראקציה עם נכסים סטטיים. ישנה גם הזדמנות לשנות את קובצי התצורה הספציפיים לתבנית.
אתה יכול אפילו לבנות תבניות משלך עבור מקרה השימוש הייחודי שלך, עם מבנה קבצים ותלות, בדומה ל-IDE. מכיוון שהכלי מקושר ל-Github, אתה יכול ליצור commits במהירות ולפתוח PRs. אתה יכול לפרוס את האפליקציה שלך ל-ZEIT או Netlify מיד.
CodeSandbox Team Pro
CodeSandbox, עסק הולנדי המאפשר למפתחים לבנות ארגז חול לפיתוח אפליקציות אינטרנט מבוסס דפדפן, הוציא רשמית פלטפורמת שיתוף פעולה המאפשרת לצוותים לעבוד על קוד בענן. המוצר החדש, Team Pro, הוא פתרון ללא קוד שנבנה עבור צוותי מוצר שלמים, החל ממעצבים ומנהלים דרך צוותי אבטחת איכות (QA) ועוד.
הפרויקטים מסופקים בממשק ידידותי למשתמש לכל מי שרוצה לבצע או לקבל שינויים ביישום אינטרנט, הימנעות משיטות חלופיות כמו שליחת הערות והמלצות למפתחים לביצוע השינויים, העברתם חזרה לדיון וחזרה על התהליך.
תכונות עיקריות
- עורך קוד וכלי אב טיפוס מבוסס אינטרנט.
- לשימוש מקומי, ניתן להוריד ארגז חול בקלות בקובץ zip.
- תכנות נעשה בארגזי חול, שאותם ניתן לחלוק בקלות עם עמיתים לעבודה.
יתרונות
- חווית משתמש משופרת ושליטה רבה יותר על העורך.
- את תכונת התצוגה המקדימה החיה ניתן לשנות ולהציג בחלון נפרד.
- הקוד מעוצב אוטומטית וכולל CLI (codesandbox-cli)
- תמיכה במודולי npm מתקדמים.
- הודעות שגיאה נחמדות עם המלצות.
- זה משפר את חווית ניפוי הבאגים על ידי מתן מסוף טוב יותר, מציג בדיקה ומציג בעיות טובות יותר.
חסרונות
- צרכן הקצה נחשף לפרסונליזציות רבות.
- גרירה ושחרור של קבצים ממחשב מקומי אינם פועלים כראוי.
- יש לעקוב אחר מבנה תיקיות מסוים ב-CodeSandbox.
- הפונקציונליות של ארגז חול פרטי זמין רק ללקוחות.
StackBlitz
StackBlitz הוא IDE מקוון המופעל באמצעות קוד של Visual Studio עבור יישומי אינטרנט. הפלטפורמה רספונסיבית וניתנת להתאמה כמו גרסת שולחן העבודה. StackBlitz הוא IDE מקוון שמגיע עם טעון מראש Angular ו-React כלי פיתוח.
Thinkster.io בנה את הפרויקט הפנטסטי הזה כדי שיהיה פשוט ככל האפשר להתחיל עם פרויקט Angular או React שלך מבלי שתצטרך לדאוג לגבי התקנת תלות או הגדרות בנייה. StackBlitz מספקת הרבה תכונות מדהימות וייחודיות שאין לאף עורך קוד מקוון אחר כרגע. כתוצאה מכך, כדאי לחקור את StackBlitz יותר ולגלות מה יש ל-IDE המקוון הזה להציע.
Stackblitz דומה מאוד ל-IDE השלם, במיוחד אם אתה לא יכול להיפרד מקוד VS כי הכלי מבוסס עליו. לחבילה יש מגוון תכונות המאפשרות לך להתחיל ולהמשיך ביצירת יישום ערימה מלאה.
התוכנית מופעלת על ידי Visual Studio, המוכר בקרב מפתחים. עריכה לא מקוונת היא התכונה הבולטת של הפרויקט. כדי לאפשר זאת, צוות Stackblitz יצר שרת אינטרנט בדפדפן. תוך כדי הקלדה, הוא מתקין אוטומטית תלות, קומפילציה, מאגד ועושה טעינה חוזרת חמה.
גרסה משופרת
צוער, אסטרונאוט וקומנדר זמינים בחינם, 8$ לחודש ו-$29 לחודש, בהתאמה. אסטרונאוט ומפקד כולל מספר תכונות כמו פרויקטים פרטיים ללא הגבלה, העלאות ללא הגבלה של קבצים, הזמנה לערוץ רפוי של צוות ליבה וכן הלאה. למידע נוסף, עיין בלוח החיובים הרשמי.
תכונות עיקריות
- הוספת חבילות NPM לפרויקט שלך.
- הודות לשרת פיתוח חדש בדפדפן, אתה יכול לערוך במצב לא מקוון.
- כתובת URL של אפליקציה מתארחת המאפשרת לנו לגשת (ולהשתף) לאפליקציה החיה שלנו בכל עת.
- תכונות בולטות אחרות של Visual Studio Code כוללות Intellisense, חיפוש פרויקטים (Cmd/Ctrl+P), Go to Definition ואחרות.
יתרונות
- היכולות של Firebase לפריסה.
- העורך ממש קל לשימוש ומהיר במיוחד.
- למשתמשים יש גישה אל package.json, index.html ו-index.js.
- קוד מקור ניתן לשיתוף שניתן גם להטמיע.
- תצוגה מקדימה חיה בחלק גדול של העמוד, עם אפשרות לפתוח בעמוד אחר במידת הצורך.
- במצב לא מקוון, עריכה
- השלמות חכמות ושיפור Intellisense.
- הליבה של Stackblitz היא קוד פתוח.
חסרונות
- אין לך השפעה על הבניין או על שרת המפתחים כי אלה מנוהלים על ידי הפקודה create-react-app.
- ב-React, יש להקפיד על מבנה תיקיות בסיסי.
- לא ניתן לעצב קוד באופן אוטומטי, למרות שניתן לעשות זאת באופן ידני.
סיכום
כיום, מגרש משחקים כמו אלה שראינו לעיל עשוי לשמש לבנייה מלאה של כל פרויקט אינטרנט. אין צורך להתקין IDE מסורבלים במחשב האישי שלך כאשר אתה יכול לבנות, לנפות באגים, לבדוק ולפרוס ישירות מדפדפן האינטרנט שלך.
לדעתי, StackBlitz יהיה הטוב ביותר ביניהם מכיוון שהוא IDE מבוסס אינטרנט המאפשר JavaScript, Angular ופרויקטי פיתוח אחרים ישירות מהקופסה, ללא צורך בהתקנה של סביבות פיתוח מקומיות כמו Node.js, npm, או Angular. הוא מספק את אותה חוויה כמו השימוש ב- Visual Studio Code באופן מקומי. במציאות, מכיוון ש-StackBlitz מונע על ידי Visual Studio Code, הוא מרגיש מהיר ורב-תכליתי כמו גרסת שולחן העבודה.
איזה מכלי CodePen, CodeSandbox ו-StackBlitz הוא הכלי שלך? ספר לנו בתגובות.
אבתיה
תודה על המאמר הנהדר הזה, ברגע שראיתי את stackblitz.com, אני יודע שזה מה שאני רוצה.