כוכב חדש נולד: מה זה בכלל Vue.js?

פריימוורק מבוסס קומפוננטות – מה זה בכלל Vue.js ומה היתרונות שלה?

 

מקור: cc0-by-pixabay

השנה החולפת הייתה מאוד מוצלחת עבור Vue.js. כשזה קורה בשוק כל כך רווי, זה בדרך כלל מעיד שמשהו טוב קורה שם. מי שעוקב אחר התעשייה מקרוב בוודאי יודע שפריימוורק (וספריות) קמות ונופלות השכם והערב. ואם המחשבה "באמת?! זה מה שצריך עכשיו…. עוד פריימוורק?" חלפה בראשכם – אני לחלוטין מאיפה זה נובע. תשישות ג'אווהסקריפט (javascript fatigue) זו תופעה אמיתית. בשנים האחרונות, זה נדמה שכל רגע צץ משהו חדש שמבטיח להיות "game changer" שכולנו צריכים ללמוד: progressive web apps, functional programming, reactivity, flux ועוד ועוד. העדכון היומיומי הזה נותן אותותיו. עם זאת, זה מה שהופך את התחום של פיתוח ווב לשונה. יותר מכל תחום אחר מפתחים לא מפחדים לצאת מאזור הנוחות שלהם ולאמץ גישות חדשות לבעיות ישנות. חלק מההבטחות בסופו של דבר מגשימות עצמן (ע"ע ריאקט, node.js)

למציאות המורכבת הזו הגיחה Vue לפני כשנתיים. היוצר שלה איוואן יו (evan you) לא חיפש להמציא את הגלגל מחדש. להפך, הוא בחן את כל הרעיונות שלדעתו הוכיחו את עצמם עד כה והטמיע אותם ב-Vue עם דגש רב על ידידותיות למשתמש. כך קיבלנו פריימוורק מבוסס קומפוננטות על גבי דום וירטואלי (כן, כמו בריקאט) שתומך בטמפלטים עם דיירקטיבים מיוחדים ו-scope binded expressions (כן, כמו באנגולר). התוצאה שהתקבלה היא קוד קומפקטי (17kb בפרודקשן), נוח לעבודה, שמצליח (בזכות snabdom) לנצח אפילו את ריאקט בבנצ'מרקים. השימוש ברעיונות מוכרים וטובים בשילוב עם ממשק נוח לעבודה הם אלו שאפשרו את הזליגה שהתרחשה בשנה האחרונה.

אז למי זה נועד בעצם? אני אתחיל ואסייג: לא קיים כלי עבודה אחד שמתאים לכל סוג עבודה. יש להתחשב באופי וגודל הפרויקט כשבוחרים פריימוורק. עם זאת, רוב הפריימוורקים היום לוקחים בחשבון (או משתדלים לפחות) את רוב אתגרי ה-UI המוכרים. בשביל להבין מה זה פתרון טוב, נזכיר בקצרה קודם את ה"בעיות". במקרה של עולם "SPA" רובנו למדנו על בשרנו ש: כשאין גבולות גזרה ברורים, ככל שמוסיפים יותר פיצ'רים – האפליקציה נהיית יותר מבוזרת ופחות קריאה. ככל שיש יותר מפתחים נוצרים קונפליקטים ובאגים הנובעים משינויי state לא צפויים. גם כאשר מקפידים על הקונבנציות, שימוש חוזר בקוד (re-use) דורש התאמות נוספות. יותר מידי מפתחים מוצאים לנכון "לגעת בדום" מה שפוגע בביצועים. ועוד…

אז איך Vue מתמודד עם האתגרים האלה? נתבונן ברעיונות הכי מעניינים של הפריימוורק:

"קומפננטות" (components)

אפליקציות גדולות הן קשות לתחזוקה זה ידוע ונלמד בדם. הדרך היחידה להתמודד עם כמות אדירה של פיצ'רים (והקוד שמגיע איתם) היא לפרק את האפליקציה ל"מיני אפליקציות" ("מודולים" או "איזורים" או "קומפננטות"). כאשר לכל אחד זהות ואחריות מוגדרים מראש. ועדיף שתהיה חוסר תלות בינהם כאשר הם באותה רמה בהיררכיה. Vue מאפשר לנו לפרק את האפליקציה לעץ components ברור וקריא ולשמר על חוסר תלויות (decoupling). למשל item בתרשים לא תלוי כלל ב-content. הוא אמנם מוכל בתוכו אך אם ניקח אותו למקום אחר בעץ ונדאג לתת לו את הדאטה (properties) שהוגדר לו בפנים – הוא יתפקד גם במקום אחר. בדומה לריקאט הנתונים נעים "top-down". המידע "מחלחל" בעץ כלפי מטה דרך Properties עבור כל רכיב. וגם הוא בדומה לריאקט בלתי ניתן לשינוי בתוך הרכיב. כלומר צריך לשנות את ה-data ברמה העליונה. בשונה מריאקט, יש ב-Vue קונספט של events. כלומר רכיב ברמה עליונה יותר יכול "לתפוס" event של רכיב ברמה נמוכה יותר וכך להגיב בהתאם (כמו ב-html). או בקיצור "props down, events up".

רכיבי Vue

כל רכיב יכול להיות מורכב ממספר רב של רכיבים או שטוח – html template. מבנה שכזה מאפשר לנו להבין במבט על את ההיררכיה של האפליקציה שלנו בנויה ואף לתחום בעיות ובאגים לרכיבים מסוימים. אגב, נהוג לכתוב כל רכיב בסיומת vue כאשר מכיל בדרך שלושה חלקים לפי הסדר: תבנית, התנהגות ועיצוב. (בלעז: template, script and style). אתם יכולים לכתוב את התבנית ב-jade את העיצוב ב-scss ואת הקוד ב-es2015. לvue לא אכפת. הוא מאוד ורסטילי.

vue

"ריאקטיביות" + "virtual dom"

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

reactive

מה אנחנו רואים פה בעצם? b הוא תוצר של מכפלת המשתנה a ב-7. בקוד לא ריאקטיבי כדי לקבל את ה-b המעודכן היינו צריכים להריץ את המכפלה בשנית. בקוד ריאקטיבי a הינו תלות של b ולכן כאשר הוא משתנה b משתנה בהתאם. בעצם:

onAChanged(() => {

b = a * 7

})

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

דום וירטואלי Virtual dom

Vue מחזיק "עץ וירטואלי" ב-runtime שהוא בעצם תיאור של מבנה האפליקציה. הקונספט הזה נכנס לתודעה בעיקר בזכות ריאקט. הוא פשוט אך אפקטיבי – כאשר מצב האפליקציה (state) משתנה מתבצעים תהליכי diffing, bundling ואופטימיזציות על מנת לרנדר רק את חלקי ה-UI הנדרשים בדום בפעימה הבאה. מה שמאפשר למפתחים להתמקד יותר ב-state ולא ברינדור. כמו כן, אין נגיעות מיותרות בדום שמהוות צוואר בקבוק כמו ב"עולם הישן". התוצאה היא אפליקציה הרבה יותר רספונסיבית.

אקוסיסטם מפנק

על מנת להקטין את "החיכוך" של מפתחים בצעדיהם הראשונים. נוצר גם vue-devtools עבור view שמאפשר עבודה נוחה

כדי שתתחילו ישר לעבוד ולא תצטרכו להסתבך עם קונפגורציות של סביבת העבודה יצרו עבורכם את vue-cli. מוכן לעבודה עם מספר טמפלטים מוכנים מראש. מפרוייקט פשוט ועד webpack עם hot-reloadingg.

במקרים מסוימים, יש צורך להרחיב את vue באלמנטים נוספים. בשביל ספריית ajax\promise יש את vue-resource. הראוטר vue-router מתוחזק in-house כמובן. השימוש ידידותי ברוח התשתית – פלאג אנדד פליי:

import VueRouter from 'vue-router'
Vue.use(VueRouter)
// boom. Installed!

הפוסט נכתב על ידי אורן מזרחי ואלירן אהרוני

כתב אורח

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

הגב

19 Comments on "כוכב חדש נולד: מה זה בכלל Vue.js?"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 
Sort by:   newest | oldest | most voted
Chen Alon
Guest

Great introduction article!
Vue.js will continue to grow and more developers will adapt this great framework in 2017, even more then 2016.

Yaron Biton
Guest

Great article.

In coding-academy.org

We've switched from teaching angular to vue and we are much happier ever since

Gal Weissman
Guest

Great article.
Join us – the first Vue.js developers in Israel:
https://www.facebook.com/groups/1062801280495598/

אני
Guest

יש הרבה טכנולוגיות חדשות עכשיו , svelte דומה לvue אבל יותר טובה
angular 4 עם ngrx store או react עם redux זה כבר סטנדרטי,
יש גם inferno ,
aurelia ,
typescript,
rust ,
julia ,
dart ,
scala + play,
swift ,
haskell ,
elixir ,
R,
tensorflow ,
elastic search elk,
python,
msgpack,
node js +fetch+ restify,
dot net core,
c++ 17,
aeropeek
דברים שהולכים חזק עכשיו

ג'אווה סקריפט זה האסמבלר החדש , והוא ניצח את שאר השפות מבחינת cross plaform , בעתיד כננראה שהכל ירוץ מתוך דפדפן ולא מתוך EXE כי זה יותר בטוח שהאפליקציה היא sandboxed

מאור
Guest

בעולם של מערכות משובצות לא נהוג לרוץ בדפדפן לכן exe יהיה חי וקיים

אני
Guest

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

בשוק
Guest

סביבת הפיתוח הכי טובה ל web היא silverlight !
מי שלא חושב כך לא מבין בפיתוח תוכנה במסגרת פרוייקטים גדולים.
מי שבמיקרוסופט החליט לזנוח את silverlight הוא טיפש לא קטן.
אין בתגובה שלי לייאש את כל מפתחים הפחות טובים שמפתחים ב javascript ( כולל כל השושלת של ריאקט ואנגולר ) פשוט לזלזל בהם.

המשך יום קסום :-)

אורי
Guest

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

בשוק
Guest

להשוות silverlight לפלאש מראה על חוסר הבנה.

ניק
Guest

היתכן שיש פה טרול?

בשוק
Guest

וואלה, מי שחושב דברים שלא עולים בקנה אחד עם הדיעות שלך הוא טרול? בטח ממש כיף לעבוד איתך…
מקווה שאתה לא ב R&D.

אני
Guest

אחי סילברלייט זה wpf נכה,
מיקרוסופט נטשו כי הבינו שלא משם תבוא הבשורה
ולא רק זה
את visual studio code
עשו בelectron וריאקט
כמו שהם הולכים לשלב bash של אובונטו בcmd

אנגולר וריאקט זה שיפור
על wpf
אם צריך משהו בכרטיס מסך יש canvas ויש webgl לא חייב xna כבר
ולדברים שהם יותר low level ויותר מרובי threadים ועושים קריאות מערכת פנימיות או הקצאות ידניות והתעסקות עם פוינטרים
יש דוטנט core
סי, c++
אסמבלר ועוד

בשוק
Guest

silverlight זה לא wpf נכה, silverlight זאת מערכת גאונית ( אני גם יודע מי פיתח אותה… איזה גורו שהיה פעיל בפורום בתפוז ) שיש בה את כל היכולות של wpf עם ההגבלות של web ( גישה למחשב וכו' ) ובאמת שחשבו על הכל.
תתעמק טיפה על היכולות silverlight ותבין שכל
הריאקט ואנגולר והקונספטים binding, one page aplication
זה חיקוי עלוב ל silverlight

פשוט חבל…

בשוק
Guest

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

ניק
Guest

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

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

יצחק
Guest
ב"ה אני מסתכל על המבנה והוא ממש דומה למבנה ה polymer, אז קשה לי להבין איזה חידוש יש כאן. קצת על פולימר * מבחינת מבנה, פולימר הוא קומפוננט הכי נוח שהכרתי, ובקלות ניתן להשתמש בקומפוננט גם עבור פרוייקטים אחרים, היות וזה נקי ומסודר * מבחינת עידכון objects ב polymer זה גם מחלחל ל DOM. ללא צורך באבנטים או קישקושים אחרים * נכתב ונתמך ע"י צוות המפתחים של chrome + קהילה רחבה מאוד * אלפי קופוננטים קיימים * בידוד בין קומפוננטים (לדוגמה ב CSS) * עובד יפה גם עם TS ועוד ועוד… עכשיו אחרי כל ההרצאה הזאת, מה מחדש ה Vue.js… Read more »
עופר
Guest

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

Chen Koifman
Guest

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

Tomer
Guest

Only Ember.js

wpDiscuz

תגיות לכתבה: