תפריט צד

הומניסטים בטכניון? VUE.JS

מאת שלומי גוטליב

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

בפרויקט עלה הצורך במיון מהיר של מאות שורות תוכן עבור המשתמש, וכן כלי ניהול מהירים לעורך התוכן, לצורך ניהול והרשמה לקורסים. ניתן לראות דוגמה לפתרון כאן https://humanities.technion.ac.il/faculty_courses/ 

יש מקרים שאנגולר (ANGULARJS) גדול על מידות הפרויקט. זה המקום לשלב ספריה קלת משקל כמו VUE.JS (נשמע כמו VIEW אז למה צרפתית). VUEJS מאפשרת לבצע הצגה של נתונים בקלות מתוך JSON של פוסטים באתר. אומנם ללא כל הפילטרים והיכולות של אנגולר, אבל באופן מהיר וקל. מבחן השוואתי - בקרוב...

באפן כללי הגישה ב VUEJS מבוססת על אובייקט החיפוש כמו שנראה בדוגמה הבאה

var app = new Vue({
        el: '#courses-list-app',
        // Courses object come from wp_localized_script and includes the JSON data for the courses and the years
        data: {
            freeSearch: "",
            semesterFilter: "",
            yearFilter: "",
            degreeFilter: "",
            courses: JSON.parse(Courses.courses),
            courseYears: JSON.parse(Courses.courseYears)
        },
        methods : {
            compareByCourseNum : function(a, b) {
                if (a.number > b.number) {
                    return 1;
                } else if (a.number < b.number) {
                    return -1;
                }
                return 0;
            },
            compareByActive: function(a, b) {
                if (a.active < b.active) {
                    return 1;
                } else if (a.active > b.active) {
                    return -1;
                }
                return 0;
            }
        },
        computed: {
            filteredCourses: function() {
                var self = this;
                return self.courses.filter(function(course) {
                    // checks for free search input and all filters in the table header
                    return (course.name.indexOf(self.freeSearch) > -1 ||
                        course.number.indexOf(self.freeSearch) > -1 ||
                        course.lecturer_name.indexOf(self.freeSearch) > -1) &&
                        (course.year === self.yearFilter || self.yearFilter == "") &&
                        (course.degree === self.degreeFilter || self.degreeFilter == "")
                    // sort the results, first by course number then by activity status
                    }).sort(self.compareByCourseNum).sort(self.compareByActive);
            }
        }
    });

https://github.com/shgotlib/Academic-Course-Posttype/blob/master/inc/js/...

הספרייה vue היא ספריית JavaScript ליצירת אפליקציות אינטרנט דינמיות, בדומה ל Angular או React.
הספרייה נוצרה ב 2014 ע"י אנשי Angular לשעבר שהחליטו לפתח מוצר עצמאי אשר לדעתם יכול להיות טוב יותר מ Angular עבור רוב המשתמשים.
 
בשונה מ Angular, מדובר בספרייה קטנה יחסית וקלת משקל (20kb בגרסת prod), שלא מכילה רכיבים רבים.
 
Angular מכילה מודולים שונים שנכללים בתוך חבילת ההתקנה הבסיסית, למשל Routes, Http, Animations, Form validation וכדומה, וזה מה שהופך אותה לפריימוורק כל כך מקיף.
בשונה ממנה, הספרייה vue מכילה ברמת הליבה רק את הרכיבים הבסיסיים ביותר, כמו בניית טמפלטים בצד הלקוח וחיבור דינמי בין ה HTML לבין רכיבי ה JavaScript. אם המשתמש מעוניין להוסיף רכיב נוסף הוא יכול להתקין אותו בנפרד כחבילת צד ג' או במקרים מסוימים להשתמש בחבילות שנוצרו במיוחד על ידי צוות הפיתוח של vue (למשל router, vuex).
 
הבדל נוסף הוא בתהליך הפיתוח. בעוד שפיתוח עם Angualr דורש לעיתים קרובות לייצר מודולים רבים ומורכבים, שימוש ב vue מאפשר ליצור עמוד אינטרנט בסגנון אפליקטיבי, עם פילטרים, קריאות HTTP וכדומה תוך שימוש בקובץ JS אחד.
 
עובדות אלו, יחד עם העובדה שמדובר בספרייה פופולרית ועדכנית במיוחד, גורמות לה להפוך לאופציה משתלמת במקרים מסויימים. בייחוד במקרים בהם מדובר באפליקציה קטנה יחסית, עם היקף תוכן מוגבל.
 
כאשר יש צורך ליצור אפליקציית ווב גדולה ועשירה ברכיבים כדאי לשקול שימוש ב Angular, שבמקרה זה תספק חבילת פיתוח מקיפה יותר.