אלכסיי גרצ'ב: צא לחזית

Kyiv Go Meetup מאי 2018:

עופרת: - שלום לכולם! תודה שהיית כאן! היום יש לנו שני דוברים רשמיים - ליושה ו-וניה. יהיו עוד שניים אם יהיה לנו מספיק זמן. הדובר הראשון הוא אלכסיי גרצ'ב, הוא יספר לנו על GopherJS.

אלכסיי גרצ'ב (להלן - AG): – אני מפתח Go, ואני כותב שירותי אינטרנט ב-Go. לפעמים אתה צריך להתמודד עם החזית, לפעמים אתה צריך להיכנס אליו ידנית. אני רוצה לדבר על הניסיון והמחקר שלי ב-Go בחזית הקצה.

האגדה היא כזו: תחילה נדבר על למה אנחנו רוצים להפעיל את Go בחזית, ואז נדבר על איך זה יכול להיעשות. ישנן שתי דרכים - Web Assembly ו-GopherJS. בואו נראה מה הסטטוס של הפתרונות הללו ומה ניתן לעשות.

מה רע בחזית?

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

אין מספיק בדיקות? בנייה איטית? מערכת אקולוגית? בסדר גמור.

לגבי ה-frontend, אני אוהב את הציטוט שאמר אחד ממפתחי ה-frontend בספר שלו:

ל-Javascript אין מערכת סוגים. כעת אציין את הבעיות שנתקלתי בהן במהלך עבודתי ואסביר כיצד הן נפתרות.

מערכת הטיפוס באופן כללי בקושי יכולה להיקרא מערכת טיפוס ב-Javasript - יש קווים שמציינים את סוג האובייקט, אבל למעשה אין לזה שום קשר לטיפוסים. בעיה זו נפתרת ב-TypeScript (תוסף ל-Javasript) וב-Flow (בודק מסוג סטטי ב-Javascript). למעשה, ה-frontend כבר הגיע לנקודה של פתרון הבעיה של מערכת מסוג גרוע ב-Javascript.

אין ספרייה סטנדרטית בדפדפן ככזה - יש כמה אובייקטים מובנים ופונקציות "קסם" בדפדפנים. אבל ב-Javascript אין ספרייה סטנדרטית ככזו. בעיה זו נפתרה כבר פעם אחת על ידי jQuery (כולם השתמשו ב-jQuery עם כל אבות הטיפוס, העוזרים, הפונקציות שנדרשו כדי לעבוד). עכשיו כולם משתמשים ב-Lodash:

התקשרות חוזרת לעזאזל. אני חושב שכולם ראו את קוד Javascript לפני כ-5 שנים, והוא נראה כמו "אטריות" של מורכבות מדהימה של התקשרויות חוזרות. כעת הבעיה הזו נפתרה (עם השחרור של ES-15 או ES-16), הבטחות נוספו ל-Javascript וכולם יכולים לנשום לזמן מה.

עד שהגיהנום של Promice הגיע... אני לא יודע איך תעשיית הפרונט-אנד מסתדרת, אבל הם תמיד מסיעים את עצמם לאיזה ג'ונגל מוזר. הצלחנו גם לעשות גיהנום על הבטחות. ואז פתרנו את הבעיה על ידי הוספת פרימיטיבי חדש - אסינכרון/חכה:

הבעיה עם א-סינכרון נפתרה. Async/await הוא פרימיטיבי פופולרי למדי בשפות שונות. לפייתון ואחרים יש גישה זו - היא די טובה. הבעיה נפתרה.

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

• תחביר Javascript קצת מוזר. כולנו מכירים את הבעיות בהוספת מערך ואובייקט ובדיחות אחרות.
• Javascript הוא רב פרדיגמה. זוהי מערכת דחופה במיוחד כעת כאשר המערכת האקולוגית גדולה מאוד:
  • כולם כותבים בסגנונות שונים - חלק כותבים בצורה מבנית, חלק כותבים פונקציונלית, מפתחים שונים כותבים בדרכים שונות;
  • מחבילות שונות, פרדיגמות שונות כאשר אתה משתמש בחבילות שונות;
  • יש הרבה "כיף" עם תכנות פונקציונלי ב-Javasript - ספריית rambda הופיעה ועכשיו אף אחד לא יכול לקרוא תוכניות שנכתבו בספרייה הזו.

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

מהי Web Assembly?

החבר'ה האמיצים מקרן מוזילה ומספר חברות אחרות העלו דבר כזה כמו Web Assembly. מה זה?

• זוהי מכונה וירטואלית המובנית בדפדפן התומכת בפורמט הבינארי.
• תוכניות בינאריות מגיעות לשם ומבוצעות כמעט באופן מקורי, כלומר, הדפדפן לא צריך לנתח את כל ה"אטריות" של קוד javascript בכל פעם.
• כל הדפדפנים הצהירו על תמיכה.
• מכיוון שזהו bytecode, אתה יכול לכתוב מהדר לכל שפה.
• ארבעה דפדפנים עיקריים כבר נשלחים עם תמיכה ב-Web Assembly.
• אנו מצפים לתמיכה מקורית ב-Go בקרוב. הארכיטקטורה החדשה הזו כבר נוספה: GOARCH=wasm GOOS=js (בקרוב). עד כאן, למיטב הבנתי, זה לא פונקציונלי, אבל יש אמירה שזה בהחלט יהיה ב-Go.

מה לעשות עכשיו? GopherJS

אמנם אין לנו תמיכה ב-Web Assembly, אבל ישנו טרנספילר כמו GopherJS.

• קוד Go מועבר ל-Javascript "טהור".
• פועל בכל הדפדפנים - אין תכונות חדשות שנתמכות רק על ידי דפדפנים מודרניים (זהו Vanilla JS, שפועל על כל דבר).
• יש תמיכה כמעט בכל מה שיש ל-Go, כולל גורוטינים וערוצים... כל מה שאנחנו כל כך אוהבים ויודעים.
• כמעט כל הספרייה הסטנדרטית נתמכת, פרט לאותן חבילות שאין הגיון לתמוך בהן בדפדפן: syscall, אינטראקציות נטו (יש לקוח net/http, אבל אין שרת, והלקוח מחוקה באמצעות XMLHttpRequest). באופן כללי, כל הספרייה הסטנדרטית זמינה - הנה היא בדפדפן, הנה stdlib של Go, שאנחנו אוהבים.
• כל אקוסיסטם החבילה ב-Go, כל פתרונות צד שלישי (תבניות וכו') ניתנים להידור באמצעות GopherJS ולהפעיל בדפדפן.

קל מאוד להשיג את GopherJS - זו רק חבילת Go רגילה. אנחנו הולכים לקבל, ויש לנו פקודת GopherJS לבנות את האפליקציה:

זה עולם שלום קטן כזה...

...תוכנית Go רגילה, חבילת fmt ספרייה רגילה ו-Binding Js כדי להגיע ל-API של הדפדפן. Println בסופו של דבר יומר ליומן המסוף והדפדפן יכתוב "Hello gophers"! זה כל כך פשוט: אנחנו עושים GopherJS build - אנחנו משיקים את זה בדפדפן - הכל עובד!

מה יש לך כרגע? כריכות

יש כריכות לכל מסגרות js הפופולריות:

• JQuery;
• Angular.js;
• D3.js לשרטוט ועבודה עם ביג דאטה;
• React.js;
• VueJS;
• יש אפילו תמיכה ב-Electron (כלומר, אנחנו כבר יכולים לכתוב יישומי שולחן עבודה על Electron);
• והדבר המצחיק ביותר הוא WebGL (אנחנו יכולים ליצור אפליקציות גרפיות מלאות, כולל משחקים עם גרפיקה תלת מימדית, מוזיקה וכל הטוב);
• ועוד כריכות רבות לכל מסגרות ה-Javascript והספריות הפופולריות.

מסגרת

1. יש מסגרת אינטרנט שכבר פותחה במיוחד עבור GopherJS - Vecty. זהו אנלוגי מלא של React.js, אך פותח רק ב-Go, עם הפרטים הספציפיים של GopherJS.
2. יש תיקי משחק (הפתעה!). מצאתי את השניים הכי פופולריים:
   • אנגו;
   • אבטן.

אני אראה לך כמה דוגמאות איך זה נראה ומה אתה כבר יכול לכתוב ב-Go:

או אפשרות זו (לא הצלחתי למצוא יורה תלת מימד, אבל אולי היא קיימת):

מה אני מציע?

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

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

ועכשיו יש הזדמנות טובה ליצור ספריות ממשק משתמש ב-Go שיפעלו על GopherJS! סוף סוף תוכל לכתוב מסגרת משלך! זה הזמן שבו אתה יכול לכתוב מסגרת, והיא תהיה מהראשונות ולקבל אימוץ מוקדם, ואתה תהיה כוכב (אם זו מסגרת טובה).

אתה יכול להתאים הרבה חבילות שונות שכבר נמצאות במערכת האקולוגית של Go לפרטי הדפדפן (לדוגמה, Template engine). הם כבר יעבדו, אתה יכול לעשות כריכות נוחות כך שאתה יכול בקלות לרנדר את התוכן ישירות בדפדפן. בנוסף, אתה יכול ליצור, למשל, שירות שיכול לרנדר את אותו הדבר בשרת ובחזית הקצה, באמצעות אותו קוד - כל מה שמפתחי קצה אוהבים (רק עכשיו ב-Go).

אתה יכול לכתוב משחק! סתם בשביל הכיף…

זה כל מה שרציתי להגיד.

שאלות

שאלה (להלן ש'): – האם אני כותב ב-Go או ב-Js?

AG: – כותבים שגרות, ערוצים, מבנים, הטמעה – הכל בגו... נרשמת לאירוע, מעביר שם פונקציה.

בתוך: - אז אני כותב ב-Js "עירום"?

AG: – לא, אתה כותב כאילו ב-Go ומתחבר ל-API של הדפדפן (ה-API לא השתנה). אתה יכול לכתוב כריכות משלך כך שהודעות יישלחו לערוץ - זה לא קשה.

בתוך: - מה לגבי נייד?

AG: – בהחלט ראיתי: יש כריכות לתיקון קורדובה ש-Js מריץ. ב-React Native - אני לא יודע; אולי יש, אולי לא (לא התעניינתי במיוחד). מנוע המשחק N-go תומך בשתי האפליקציות לנייד - גם ב-iOS וגם באנדרואיד.

בתוך: – שאלה לגבי אספת אינטרנט. יותר ויותר מקום נתפס, למרות הדחיסה וה"מכווץ"... האם לא נהרוג את העולם הפרונט-אנד בצורה כזו עוד יותר?

AG: – Web Assembly הוא פורמט בינארי, ובינארי כברירת מחדל לא יכול להיות במהדורה הסופית יותר מטקסט... אתה נמשך לזמן ריצה, אבל זה זהה לגרירת ספריית Javascript הרגילה כשהיא לא שם, אז אנחנו השתמש בקצת Lodash. אני לא יודע כמה לודש לוקח.

בתוך: - ברור שפחות מזמן ריצה...

AG: - ב-Javascript "טהור"?

בתוך: - כן. אנו דוחסים אותו לפני שליחתו...

AG: - אבל זה טקסט... באופן כללי, מגה בייט נראה כמו הרבה, אבל זה הכל (יש לך את כל זמן הריצה). לאחר מכן, אתה כותב את ההיגיון העסקי שלך, אשר יגדיל את הבינארי שלך ב-1%. עד כה אני לא רואה שזה הורג את החזית. יתרה מכך, Web Assembly יעבוד מהר יותר מ-Javascript מהסיבה הברורה - אין צורך לנתח אותו.

בתוך: – זו עדיין נקודה שנויה במחלוקת... אין עדיין יישום ייחוס של "Vasma" (אספת אינטרנט) כך שניתן לשפוט באופן חד משמעי. מבחינה קונספטואלית, כן: כולנו מבינים שבינארי צריך להיות מהיר יותר, אבל היישום הנוכחי של אותו V8 יעיל מאוד.

AG: - כן.

בתוך: - קומפילציה שם עובדת ממש מגניבה וזה לא עובדה שיהיה יתרון גדול.

AG: - Web Assembly נעשה גם על ידי בחורים גדולים.

בתוך: – נראה לי שעדיין קשה לשפוט את Web Assembly. יש שיחות כבר הרבה שנים, אבל יש מעט הישגים אמיתיים שאפשר להרגיש.

AG: - אולי. נראה.

בתוך: – אין לנו בעיות בקצה האחורי... אולי כדאי להשאיר את הבעיות הללו בקצה הקדמי? למה ללכת לשם?

AG: - עלינו לשמור על צוות של עובדים בחזית.

כמה מודעות 🙂

תודה שנשארת איתנו. האם אתה אוהב את המאמרים שלנו? רוצים לראות עוד תוכן מעניין? תמכו בנו על ידי ביצוע הזמנה או המלצה לחברים, Cloud VPS למפתחים החל מ-$4.99, אנלוגי ייחודי של שרתים ברמת הכניסה, שהומצא על ידינו עבורכם: כל האמת על VPS (KVM) E5-2697 v3 (6 ליבות) 10GB DDR4 480GB SSD 1Gbps החל מ-$19 או איך לשתף שרת? (זמין עם RAID1 ו-RAID10, עד 24 ליבות ועד 40GB DDR4).

Dell R730xd זול פי 2 במרכז הנתונים Equinix Tier IV באמסטרדם? רק כאן 2 x Intel TetraDeca-Core Xeon 2x E5-2697v3 2.6GHz 14C 64GB DDR4 4x960GB SSD 1Gbps 100 TV החל מ-$199 בהולנד! Dell R420 - 2x E5-2430 2.2Ghz 6C 128GB DDR3 2x960GB SSD 1Gbps 100TB - החל מ-$99! לקרוא על כיצד לבנות תשתיות קורפ. מחלקה עם שימוש בשרתי Dell R730xd E5-2650 v4 בשווי 9000 יורו עבור אגורה?

מקור: www.habr.com