איך זה מרגיש ללמוד JavaScript ב-2016

לא נוצרו מסגרות JavaScript במהלך כתיבת מאמר זה.

להלן השראה מהמאמר "זה העתיד" מ-Circle CI. אתה יכול לקרוא את המקור כאן . היצירה הזו היא רק דעה, וכמו כל מסגרת JavaScript, אין לקחת אותה ברצינות רבה מדי.

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

-המונח בפועל הוא מהנדס Front End, אבל כן, אני הבחור הנכון. אני עושה אינטרנט בשנת 2016. הדמיות, נגני מוזיקה, מל"טים מעופפים שמשחקים כדורגל, אתה שם את זה. זה עתה חזרתי מ-JsConf ומ-ReactConf, אז אני מכיר את הטכנולוגיות העדכניות ביותר ליצירת אפליקציות אינטרנט.

לְהִתְקַרֵר. אני צריך ליצור עמוד שמציג את הפעילות העדכנית ביותר של המשתמשים, אז אני רק צריך לקבל את הנתונים מנקודת הקצה של REST ולהציג אותם באיזו טבלה ניתנת לסינון, ולעדכן אותו אם משהו משתנה בשרת. חשבתי אולי להשתמש ב-jQuery כדי להביא ולהציג את הנתונים?

-אוי אלוהים לא, אף אחד כבר לא משתמש ב-jQuery. כדאי לנסות ללמוד React, זה 2016.

אה, בסדר. מה זה React?

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

זה נשמע מסודר. האם אני יכול להשתמש ב-React כדי להציג נתונים מהשרת?

-כן, אבל תחילה עליך להוסיף את React ו-React DOM כספרייה בדף האינטרנט שלך.

רגע, למה שתי ספריות?

אז האחת היא הספרייה בפועל והשנייה מיועדת למניפולציה של ה-DOM, שעכשיו אתה יכול לתאר ב-JSX.

JSX? מה זה JSX?

-JSX הוא רק סיומת תחביר JavaScript שנראית די כמו XML. זו סוג של דרך נוספת לתאר את ה-DOM, תחשוב על זה כעל HTML טוב יותר.

מה רע ב-HTML?

-זה 2016. אף אחד כבר לא מקודד HTML ישירות.

יָמִינָה. בכל מקרה, אם אני מוסיף את שתי הספריות האלה, אוכל להשתמש ב-React?

-לֹא בְּדִיוּק. אתה צריך להוסיף את Babel ואז אתה יכול להשתמש ב-React.

עוד ספריה? מה זה בבל?

-הו, Babel הוא טרנספילר המאפשר לך למקד לגרסאות ספציפיות של JavaScript, בזמן שאתה מקודד בכל גרסה של JavaScript. אתה לא חייב לכלול את Babel כדי להשתמש ב-ReactJS, אבל אלא אם כן, אתה תקוע עם השימוש ב-ES5, ובואו נהיה אמיתיים, זה 2016, אתה צריך לקוד ב-ES2016+ כמו שאר הילדים המגניבים.

ES5? ES2016+? אני הולך לאיבוד כאן. מה זה ES5 ו-ES2016+?

-ES5 מייצג ECMAScript 5. זוהי המהדורה שרוב האנשים מכוונים אליה מאז שהיא יושמה על ידי רוב הדפדפנים בימינו.

ECMAScript?

-כן, אתה יודע, תקן ה-scripting JavaScript התבסס עליו בשנת 1999 לאחר שחרורו הראשוני בשנת 1995, אז כאשר JavaScript נקרא Livescript ורץ רק ב-Netscape Navigator. זה היה מאוד מבולגן אז, אבל למרבה המזל עכשיו הדברים ברורים מאוד ויש לנו, כמו, 7 מהדורות של היישום הזה.

7 מהדורות. באמת. ו-ES5 ו-ES2016+ הם?

-המהדורה החמישית והשביעית בהתאמה.

רגע, מה קרה עם השישי?

אתה מתכוון ל-ES6? כן, אני מתכוון, כל מהדורה היא ערכת-על של הקודמת, אז אם אתה משתמש ב-ES2016+, אתה משתמש בכל התכונות של הגרסאות הקודמות.

יָמִינָה. ולמה אז להשתמש ב-ES2016+ על פני ES6?

-ובכן, אתה יכול להשתמש ב-ES6, אבל כדי להשתמש בתכונות מגניבות כמו אסינכרון והמתנה, אתה צריך להשתמש ב-ES2016+. אחרת אתה תקוע עם גנרטורים ES6 עם קורוטינים כדי לחסום קריאות אסינכרוניות לזרימת בקרה נכונה.

אין לי מושג מה אמרת הרגע, וכל השמות האלה מבלבלים. תראה, אני רק טוען חבורה של נתונים משרת, פעם יכולתי לכלול את jQuery מ-CDN ופשוט לקבל את הנתונים עם קריאות AJAX, למה אני לא יכול לעשות את זה?

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

יָמִינָה. אז האלטרנטיבה שלי היא לטעון שלוש ספריות כדי להביא נתונים ולהציג טבלת HTML.

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

אני רואה. ומה זה מנהל מודול?

-ההגדרה תלויה בסביבה, אבל ברשת אנחנו מתכוונים בדרך כלל לכל דבר שתומך במודולי AMD או CommonJS.

נכון. ו-AMD ו-CommonJS הם...?

-הגדרות. ישנן דרכים לתאר כיצד מספריות ומחלקות JavaScript צריכות לקיים אינטראקציה. אתה יודע, מייצא ודורש? אתה יכול לכתוב מספר קובצי JavaScript המגדירים את AMD או CommonJS API ואתה יכול להשתמש במשהו כמו Browserify כדי לאגד אותם.

בסדר, זה הגיוני... אני חושב. מה זה Browserify?

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

רישום npm?

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

כמו CDN?

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

הו, כמו באוור!

-כן, אבל עכשיו 2016, אף אחד כבר לא משתמש בבאואר.

אה, אני מבין... אז אני צריך להוריד את הספריות מ-npm?

-כֵּן. אז למשל, אם אתה רוצה להשתמש ב-React, אתה מוריד את מודול React ומייבא אותו לקוד שלך. אתה יכול לעשות זאת עבור כמעט כל ספריית JavaScript פופולרית.

הו, כמו אנגולר!

-זוויתי זה כל כך 2015. אבל כן. Angular יהיה שם, לצד VueJS או RxJS ושאר ספריות מגניבות של 2016. רוצה ללמוד על אלה?

בוא נישאר עם React, אני כבר לומד יותר מדי דברים עכשיו. אז אם אני צריך להשתמש ב-React אני אביא אותו מה-npm הזה ואז משתמש בדבר הזה של Browserify?

-כֵּן.

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

זהו, זו הסיבה שאתה משתמש במנהל משימות כמו Grunt או Gulp או Broccoli כדי להפוך את ההפעלה של Browserify לאוטומטית. לעזאזל, אתה יכול אפילו להשתמש במימוזה.

לִנְחוֹר? לִבלוֹעַ? בְּרוֹקוֹלִי? מימוזה? לעזאזל אנחנו מדברים עכשיו?

-מנהלי משימות. אבל הם כבר לא מגניבים. השתמשנו בהם ב-2015, אחר כך השתמשנו ב-Makefiles, אבל עכשיו אנחנו עוטפים הכל עם Webpack.

Makefiles? חשבתי שזה משמש בעיקר בפרויקטים של C או C++.

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

אֲנָחָה. הזכרת משהו שנקרא Webpack?

-זה עוד מנהל מודול לדפדפן תוך שהוא סוג של רץ משימות גם כן. זה כמו גרסה טובה יותר של Browserify.

אה, אוקי. למה זה יותר טוב?

-טוב, אולי לא יותר טוב, זה פשוט יותר דעתני על איך צריך לקשור את התלות שלך. Webpack מאפשר לך להשתמש במנהלי מודולים שונים, ולא רק ב-CommonJS, כך למשל מודולים מקוריים הנתמכים ב-ES6.

אני מאוד מבולבל מכל העניין הזה של CommonJS/ES6.

-כולם כן, אבל לא צריך להיות לך אכפת יותר עם SystemJS.

ישוע המשיח, עוד שם עצם-js. אוקי, ומה זה SystemJS הזה?

-ובכן, בניגוד ל-Browsify ו-Webpack 1.x, SystemJS הוא טוען מודולים דינמי המאפשר לך לקשור מודולים מרובים במספר קבצים במקום לאגד אותם בקובץ אחד גדול.

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

-כן, אבל מכיוון ש-HTTP/2 מגיע כעת, מספר בקשות HTTP טובות יותר.

רגע, אז אנחנו לא יכולים פשוט להוסיף את שלוש הספריות המקוריות עבור React??

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

אֲנָחָה. וזה רע נכון?

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

הבנתי, הבנתי. אז אם לא הייתם כוללים את הספריות ישירות ב-CDN, איך הייתם עושים זאת?

-הייתי מעביר אותו מ-Typescript באמצעות שילוב של Webpack + SystemJS + Babel.

כתב כתיבה? חשבתי שאנחנו מקודדים ב-JavaScript!

-Typescript הוא JavaScript, או במילים טובות יותר, ערכת-על של JavaScript, ליתר דיוק JavaScript בגרסה ES6. אתה יודע, הגרסה השישית שדיברנו עליה קודם?

חשבתי ש- ES2016+ הוא כבר ערכת-על של ES6! למה אנחנו צריכים עכשיו את הדבר הזה שנקרא Typescript?

-אה, כי זה מאפשר לנו להשתמש ב-JavaScript כשפת הקלדה, ולהפחית שגיאות בזמן ריצה. זה 2016, אתה אמור להוסיף כמה סוגים לקוד ה-JavaScript שלך.

ו-Typescript כמובן עושה את זה.

-Flow גם כן, למרות שהוא בודק רק הקלדה בעוד ש-Typescript הוא ערכת-על של JavaScript שצריך להידור.

אנחה... וזרימה היא?

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

Ocaml? תכנות פונקציונלי?

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

אין לי מושג מה אמרת הרגע.

-אף אחד לא עושה בהתחלה. תראה, אתה רק צריך לדעת שתכנות פונקציונלי טוב יותר מאשר OOP וזה מה שאנחנו צריכים להשתמש ב-2016.

רגע, למדתי OOP במכללה, חשבתי שזה טוב?

כך גם ג'אווה לפני שנקנה על ידי אורקל. כלומר, OOP היה טוב בזמנו, ועדיין יש לו את השימושים שלו היום, אבל עכשיו כולם מבינים ששינוי מצבים שווה ערך לבעיטה בתינוקות, אז עכשיו כולם עוברים לאובייקטים בלתי ניתנים לשינוי ולתכנות פונקציונליות. החבר'ה של Haskell קראו לזה כבר שנים, -ואל תגרמו לי להתחיל עם החבר'ה של Elm- אבל למרבה המזל באינטרנט יש לנו ספריות כמו Ramda שמאפשרות לנו להשתמש בתכנות פונקציונלי ב-JavaScript רגיל.

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

-לֹא. רמדה. כמו למדה. אתה יודע, הספרייה של דיוויד צ'יימברס?

דוד מי?

-דיוויד צ'יימברס. בחור מגניב. משחק משחק הפיכה מרושע. אחד התורמים עבור Ramda. אתה צריך גם לבדוק את Erik Meijer אם אתה רציני לגבי לימוד תכנות פונקציונלי.

ואריק מאייר הוא...?

-גם איש תכנות פונקציונלי. בחור מדהים. יש לו חבורה של מצגות שבהן הוא משליך את Agile בזמן שהוא משתמש בחולצה הצבעונית המוזרה הזו. כדאי גם לבדוק חלק מהדברים של Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

בְּסֵדֶר. אני הולך לעצור אותך שם. כל זה טוב ומשובח, אבל אני חושב שכל זה פשוט כל כך מסובך ומיותר רק כדי להביא נתונים ולהציג אותם. אני די בטוח שאני לא צריך להכיר את האנשים האלה או ללמוד את כל הדברים האלה כדי ליצור טבלה עם נתונים דינמיים. בואו נחזור ל-React. איך אני יכול להביא את הנתונים מהשרת עם React?

-ובכן, אתה למעשה לא מביא את הנתונים עם React, אתה רק מציג את הנתונים עם React.

אה, לעזאזל. אז במה אתה משתמש כדי להביא את הנתונים?

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

אני מצטער? אתה משתמש באחזור כדי להביא את הנתונים? מי שקורא לדברים האלה צריך תזאורוס.

-אני יודע נכון? תביא את השם של המימוש המקורי לביצוע XMLHttpRequests נגד שרת.

אה, אז AJAX.

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

התקשרות חוזרת לעזאזל?

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

אה, אוקי. ועניין ההבטחה הזה פותר את זה?

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

ואת זה אפשר לעשות עם Fetch?

-כן, אבל רק אם המשתמש שלך משתמש בדפדפן ירוק עד, אחרת עליך לכלול Fetch polyfill או להשתמש ב-Request, Bluebird או Axios.

כמה ספריות אני צריך לדעת למען השם? כמה מהם?

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

הרגע אמרת גיא פיירי? בוא נגמור עם זה. מה עושות ספריות Bluebird, Request, Axios?

-אלה ספריות לביצוע XMLHttpRequests שמחזירות הבטחות.

האם שיטת AJAX של jQuery לא התחילה להחזיר גם הבטחות?

-אנחנו לא משתמשים במילה "J" ב-2016 יותר. פשוט השתמש ב-Fetch ו-polyfill אותו כאשר הוא לא בדפדפן או השתמש ב-Bluebird, Request או Axios במקום זאת. לאחר מכן נהל את ההבטחה עם ממתין בתוך פונקציית אסינכרון ובום, יש לך זרימת שליטה נכונה.

זו הפעם השלישית שאתה מזכיר לחכות אבל אין לי מושג מה זה.

-Await מאפשר לך לחסום שיחה אסינכרונית, מה שמאפשר לך לקבל שליטה טובה יותר על מועד אחזור הנתונים והגדלת קריאת הקוד הכוללת. זה מדהים, אתה רק צריך לוודא שאתה מוסיף את ההגדרה המוקדמת של שלב 3 ב-Babel, או משתמש בפונקציות תחביר-אסינכרון ו-transform-async-to-generator plugin.

זה מטורף.

-לא, מטורפת היא העובדה שאתה צריך להדר מראש את קוד Typescript ואז להעתיק אותו עם Babel כדי להשתמש בו.

מה? זה לא כלול ב-Typescript?

-זה עושה זאת בגרסה הבאה, אבל החל מגרסה 1.7 הוא מכוון רק ל-ES6, אז אם אתה רוצה להשתמש בהמתנה בדפדפן, ראשית עליך להרכיב את קוד ה-Typescript שלך המכוון ל-ES6 ולאחר מכן את Babel שמגיע עד ליעד ES5.

בשלב זה אני לא יודע מה להגיד.

-תראה, זה קל. קוד הכל ב-Typescript. כל המודולים שמשתמשים ב-Fetch מרכיבים אותם למיקוד ES6, מעבירים אותם עם Babel בהגדרה מראש של שלב 3, ומטעינים אותם עם SystemJS. אם אין לך Fetch, מלא אותו, או השתמש ב-Bluebird, Request או Axios, ותתמודד עם כל ההבטחות שלך בהמתנה.

יש לנו הגדרות שונות מאוד של קל. אז עם הטקס הזה הבאתי סוף סוף את הנתונים ועכשיו אני יכול להציג אותם עם React נכון?

-האם הבקשה שלך תטפל בשינויי מדינה כלשהם?

אה, אני לא חושב. אני רק צריך להציג את הנתונים.

-הו, תודה לאל. אחרת הייתי צריך להסביר לך את Flux, ויישומים כמו Flummox, Alt, Fluxible. למרות שלמען האמת אתה צריך להשתמש ב- Redux.

אני פשוט אעוף על השמות האלה. שוב, אני רק צריך להציג נתונים.

-הו, אם אתה רק מציג את הנתונים לא היית צריך React מלכתחילה. היית בסדר עם מנוע תבניות.

אתה צוחק עליי? אתה חושב שזה מצחיק? האם כך אתה מתייחס לאהוביך?

רק הסברתי במה אתה יכול להשתמש.

לְהַפְסִיק. פשוט תפסיק.

-כלומר, גם אם זה רק באמצעות מנוע תבנית, עדיין הייתי משתמש בשילוב Typescript + SystemJS + Babel במקומך.

אני צריך להציג נתונים על דף, לא לבצע את הרוג ה-MK המקורי של Sub Zero. רק תגיד לי באיזה מנוע תבנית להשתמש ואני אקח את זה משם.

-יש הרבה, איזה מהם אתה מכיר?

אוף, לא זוכר את השם. זה היה מזמן.

-jTemplates? jQote? טָהוֹר?

אוקיי, לא מצלצל בפעמון. עוד אחד?

-שְׁקִיפוּת? JSRender? MarkupJS? KnockoutJS? לזה היה כריכה דו-כיוונית.

עוד אחד?

-PlatesJS? jQuery-tmpl? כידון? יש אנשים שעדיין משתמשים בזה.

אוּלַי. האם יש דומים לזה האחרון?

-שפם, תחתון? אני חושב שעכשיו אפילו לודאש יש אחד למען האמת, אבל אלה הם סוג של 2014.

טועה.. אולי זה היה חדש יותר.

-יַרקָן? DustJS?

לֹא.

-DotJS? EJS?

לֹא.

-Nunjucks? ECT?

לֹא.

-מה, אף אחד לא אוהב את תחביר Coffeescript בכל מקרה. יַרקָן?

לא, כבר אמרת ג'ייד.

התכוונתי לפאג. התכוונתי לג'ייד. כלומר, ג'ייד הוא עכשיו פאג.

אֲנָחָה. לא. לא זוכר. באיזה מהם היית משתמש?

-כנראה רק מחרוזות תבנית מקוריות של ES6.

תן לי לנחש. וזה דורש ES6.

-נָכוֹן.

אשר, תלוי באיזה דפדפן אני משתמש צריך Babel.

-נָכוֹן.

אשר, אם אני רוצה לכלול מבלי להוסיף את כל ספריית הליבה, אני צריך לטעון אותו כמודול מ-npm.

-נָכוֹן.

מה שדורש Browserify, או Wepback, או ככל הנראה הדבר האחר שנקרא SystemJS.

-נָכוֹן.

אשר, אלא אם כן מדובר ב-Webpack, באופן אידיאלי צריך להיות מנוהל על ידי רץ משימות.

-נָכוֹן.

אבל, מכיוון שאני צריך להשתמש בתכנות פונקציונליות ובשפות מודפסות, אני צריך קודם להרכיב את Typescript או להוסיף את הדבר הזה של Flow.

-נָכוֹן.

ואז שלח את זה לבבל אם אני רוצה להשתמש בהמתנה.

-נָכוֹן.

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

-רק אל תשכח ל-polyfill Fetch אם זה לא נתמך, Safari עדיין לא יכול להתמודד עם זה.

אתה יודע מה. אני חושב שסיימנו כאן. למעשה, אני חושב שסיימתי. סיימתי עם האינטרנט, סיימתי עם JavaScript לגמרי.

-זה בסדר, בעוד כמה שנים כולנו נקודד ב-Elm או WebAssembly.

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

-אני שומע אותך. אז כדאי לנסות את קהילת Python.

מַדוּעַ?

-שמעת פעם על Python 3?

עדכון: תודה על הצבעת שגיאות הקלדה ושגיאות, אני אעדכן את המאמר כפי שצוין. דיון ב- HackerNews וב- Reddit .