קיצור דרך להתקנת Backbone בעזרת Bower

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

backbone-logo

פעם הכל היה כה פשוט…

לפני 2006 (השנה בה פורסמה jQuery), אתר היה מורכב בדרך כלל מ:

  • דף HTML
  • ספריית CSS עם קובץ style.css
  • ספריית JS עם קובץ script.js
  • ספריית תמונות

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

ואז הסכר נפרץ

עם פרוץ מהפכת ה-Single Page Applications נוצר היצע של פתרונות למשימות שבעבר היו נחלת צד-השרת. פתרונות למשימות פשוטות כמו המרת תאריכים (שבעבר הגיעו מומרים היישר מן השרת) החלו להיבנות בצורת ספריות. לצורך ההמחשה: כיום קיימים 90 (!) תוספי jQuery לטיפול בתאריכים.

One Stop Shop

התהוות ההיצע האדיר נוצרה הודות לפריחתה של מגמת הקוד-הפתוח, על-חשבון חברות ענק כמו Microsoft ו-Sun. החברות הללו הציעו פתרונות (כמו Webforms של מיקרוסופט ו-Java Applets של סאן) לבניית דפי ווב. ניתן לדמות את הפתרונות האלה לארגז כלים מושלם עם כל הכלים הנדרשים: מברגים, פטיש ומסמרים. ואולם, ישנו משפט ידוע ״כשיש לך פטיש, כל בעיה נראית כמו מסמר״. ואכן כפי שהתברר בהמשך, היו בעיות (כמו משך טעינת הדף) שעבורן הכלים המוצעים פשוט לא היו מספיק טובים.

Enterprise OUT Open-Source IN

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

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

מבנהו של פרויקט ווב מודרני

עם השנים התווספו לפרויקט מרכיבים נוספים: ספריות (AngularJS, jQuery), תבניות (Handlebars, Mustache), קבצי מקור ל-CSS) LESS, Sass), ועזרים (Grunt, Mocha).

כתוצאה מריבוי הפתרונות, נוצרו מורכבויות משני סוגים שונים:

מורכבות ברמת הקוד – בקטגוריה זו נכללות הפעולות שמשנות את הקוד. מטרת השינוי יכולה להיות שיפור היעילות (באמצעות JSHint), הביצועים (Uglify) והקריאות (Coffescript).

מורכבות ברמת הקבצים – בקטגוריה זו נכללות הפעולות המקנות מבנה לפרויקט: ניהול רכיבים (Bower – בו נתמקד בפוסט הנוכחי), ניהול מבנים (Yeoman) וניהול משימות (Grunt).

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

מה זה רכיב ג׳אווה סקריפט?

קובץ או ספרייה בג׳אווה סקריפט, שממלאים תפקיד מסויים.

אילו תפקידים יכולים רכיבים למלא?

לדוגמה:

  1. Twitter Bootstrap – עיצוב.
  2. Modernizr – תאימות-לאחור עבור דפדפנים.

מה זה Bower?

כלי לניהול רכיבים – התקנה, הסרה ועדכון.

כיצד מתקינים רכיב?

[javascript]
$ bower install modernizr
[/javascript]

כיצד מתקינים גרסה מסויימת של רכיב?

[javascript]
$ bower install modernizr#2.6.2
[/javascript]

כיצד מתקינים קבוצת רכיבים?

  1. ניצור קובץ בשם bower.json:
    [javascript]
    {
    ‘name’: ‘web-app’,
    ‘version’: ‘0.0.1’,
    ‘dependencies’: {
    ‘bootstrap’: ‘~3.0.0’,
    ‘modernizr’: ‘~2.6.2’,
    ‘jquery’: ‘~1.10.2’;
    }
    }
    [/javascript]
  2. [javascript]
    $ bower install
    [/javascript]

כיצד מעדכנים רכיב?

[javascript]
$ bower update modernizr
[/javascript]

כיצד מסירים רכיב?

[javascript]
$ bower uninstall modernizr
[/javascript]

מטרת הניסוי

להתקין את Backbone ואת כל הספריות הקשורות אליו (underscore.js, jQuery.js ו-json2.js) בפרויקט, בעזרת פקודה אחת של Bower.

הציוד הדרוש

עורך טקסט, Node.js.

מהלך הניסוי:

נתקין את bower:

[javascript]
$ npm install -g bower
[/javascript]

bower.json

[javascript]
{
‘name’: ‘backbone-app’,
‘version’: ‘0.0.1’,
‘dependencies’: {
‘backbone’: ‘~1.1.0’,
‘underscore’: ‘~1.5.0’,
‘jquery’: ‘~1.10.2’,
‘json2’: ‘latest’;
}
}
[/javascript]


ונתקין:

[javascript]
$ bower install
[/javascript]

תוצאות הניסוי

כעת הרכיבים מותקנים ומוכנים לעבודה.

.
├── backbone
├── jquery
├── json2
└── underscore

שי מסיסטרנו

מפתח ווב מאז 2007, בעברו מרצה במכללת Ness מ-2009 עד 2012.

הגב

2 תגובות על "קיצור דרך להתקנת Backbone בעזרת Bower"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

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

סידור לפי:   חדש | ישן | הכי מדורגים
רועי
Guest

לכל אלה שלא משתמשים יותר ב-webforms, במה אתם משתמשים? מה הטכנולוגיות ההרבה יותר מתקדמות שקיימות? במה הן עדיפות?

אבי
Guest
backbone? תתקדמו, היה טוב לפני שנתיים, גם עם מריונט עדיין דורש המון עבודת תחזוקה והתאמות לכל דבר. (ויש לי ניסיון לא מועט עם פיתוח ב-backbone) חבל להשקיע זמן לכתוב הכל בעצמך שיש ספריה כמו angular שעושה פי עשר, ובהרבה פחות זמן. לגבי webforms – טכנולוגיה מעולה ויש המון אתרים שעדיין רצים על הטכנולוגיה הזו, זה שמתמשמשים ב-webforms לא אומר שחייבים להשתמש בכל מה שלא צריך, ניתן לממש תיאורתית mvc מלא עם webforms בלי controlים עם runat=server . שוב, כל דבר לפי הצורך, אם מדובר במערכת קטנה שיש לפתח אותה במהירות, webforms עם כמה controlים מוכנים יחסכו המון זמן פיתוח (מניסיון).… Read more »
wpDiscuz

תגיות לכתבה: