לדוגמה: ב CSS3, הוצגה לראשונה פונקציה חישובית שמאפשרת לבצע חישובים אריתמטיים. במקום שהמתכנת יפתח מחשבון, יקיש ערכים, יחשב ויקליד את התוצאה בתוך קובץ ה CSS – יהיה ניתן להקליד את החישוב בתוך פונקציית Calc ו\"שפת\" ה CSS תחשב אותו. אני לא מדבר על הכפלת מטריצות לוגרתימיות, אני מדבר על פעולה פשוטה כמו 8px+2px+4px.
בעת כתיבת פוסט זה, רק שני דפדפנים נפוצים (מתוך 7, אם נחשיב מכשירי מובייל) תומכים ביכולת החישוב של CSS3. עבור כל שאר הדפדפנים יש לבצע חישוב בראש ולהקליד את התוצאה לתוך ה CSS.
\"מה כל-כך רע בלבצע חישוב קטן בראש?\" – אתם עשויים לשאול. \"תפעיל קצת את התאים האפורים שלך!\".
ובכן – אני מדמיין את קובץ ה CSS, חלק אינטגרלי מאתר או אפליקציה, שמכיל את הערך:
…531 פיקסלים. איך לעזאזל הגעתי ל 531 פיקסלים?!
האם זה 600 פחות X, Y ו Z כפול 2?
האם 551 פיקסלים, שני אלמנטים למעלה, צריכים גם הם להשתנות אם יום אחד אחליט להרחיב את \"531 הפיקסלים\"? מה עוד צריך להשתנות ולמה?
דחף ראשוני של מתכנת טוב הוא להוסיף הערה:
יותר ברור – נכון, אבל האם אתם מדמיינים קובץ CSS עם מאות שורות בהערות, שניתן לתחזוקה?
 |
| תמונה מייצגת של דוד בוב, כשהוא במצב-רוח טוב. מקור: 33degree.org |
 |
| הלוגו של Sass: קיצור של Syntactically Awesome Stylesheets. הספרייה יועדה למעצבים – ולכן השיווק שמתאים יותר לפלח שוק זה. מקור: http://sass-lang.com/ |
- קבועים (נקראים בטעות \"משתנים\") אשר מאפשרים לקבוע ערך פעם אחת ולהשתמש בו הרבה פעמים. שינוי עתידי ידרוש שינוי במקום אחד בלבד: הגדרת הקבוע.
- Mixins (מקבילות דקלרטיביות לפונקציות) – היכולת להגדיר פעם אחת מספר שורות שחוזרת על עצמן ולהשתמש בהן שוב ושוב. שימוש נפוץ הוא \"לעטוף\" בפקודה אחת את הצורות השונות בהן קוראים לפקודה בדפדפנים שונים, כך שהקוד יציג רק את הפעולה הרצויה מבלי לשכפל את התחביר של הדפדפנים השונים. rounded-corners או gradient הן דוגמאות טובות.
background: @color;
background: -webkit-gradient(linear,left bottom, left top,color-stop(0, @start), color-stop(1, @stop));
background: -ms-linear-gradient(bottom, @start, @stop);
background: -moz-linear-gradient(center bottom, @start 0%, @stop 100%);
}
בהמשך, אוכל פשוט לקרוא ל:
השפה הנפוצה בתחום היא ללא ספק CoffeeScript, תחת הסלוגן \"Expose the good parts of JavaScript\".
בניגוד ל Sass ו LESS שבאות להתמודד עם חוסר-יכולת-ביטוי של שפת ה CSS, שפת JavaScript עשירה למדי ומלאה ב\"שטיקים\" המאפשרים גמישות רבה למתכנת. שפות המטא של JavaScript באו דווקא לעשות את ההפיך: להגביל את JavaScript ולהגן על המתכנת בפני שורה של Pitfalls אפשריים.
בנוסף – הן מציגות תחביר משופר, יותר תמציתי ואלגנטי. אלמנטים רבים שחוזרים על עצמם ב JavaScript לא באמת נדרשים והסרתם – יכולה לשפר משמעותית את קריאות הקוד.
לדוגמה, במקום לכתוב:
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) {
for (var key in parent) {
if (__hasProp.call(parent, key)) child[key] = parent[key];
} function ctor() { this.constructor = child;
} ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
Animal = (function() {
Animal.name = \'Animal\';
function Animal(name) {
this.name = name;
}
Animal.prototype.move = function(meters) {
return alert(this.name + (\" moved \" + meters + \"m.\"));
};
return Animal;
})();
Horse = (function(_super) {
__extends(Horse, _super);
Horse.name = \'Horse\';
function Horse() {
return Horse.__super__.constructor.apply(this, arguments);
}
Horse.prototype.move = function() {
alert(\"Galloping…\");
return Horse.__super__.move.call(this, 45);
};
return Horse;
})(Animal);
אפשר לכתוב בקופיסקריפט:
constructor: (@name) ->
move: (meters) ->
alert @name + \" moved #{meters}m.\"
class Horse extends Animal
move: ->
alert \"Galloping…\"
super 45
בד\"כ חיסכון הקוד לא יהיה כ\"כ גדול, אך בכל-זאת החלטתי להביא דוגמה זו כדי להראות את הפוטנציאל.
ניתן לזהות בתחביר של CoffeScript אלמנטים רבים משפת רובי וגם מפייטון (כלומר, גישת פייטון שהועדפה על גבי רובי).
ובכן, מה החסרונות של קופיסקריפט?
יש ללמוד שפה חדשה, לעבור עוד שלב של קומפילציה ולהסתפק בסט כלים חיצוניים קטן יותר (למרות שיש כבר לא מעט IDEs בעלי תמיכה כזו או אחרת לקופיסקריפט).
עוד ביקורת אפשרית הוא שאולי, אבל אולי, קופיסקריפט לא הולכת רחוק מספיק: קופיסקריפט משפרת את התחביר, מונעת טעויות ג\'אווהסקריפט נפוצות (למשל הגדרה של משתנה ללא \"var\" – כך שהוא הופך להיות גלובלי או שימוש ב\"==\" ולא ב \"===\") אך היא עדיין לא מאפשרת קפיצת מדרגה ביכולת ה static checking של השפה. כמתכנת צד-שרת עדיין חסרה לי היכולת להגדיר משתנה שיספק לי Type Safety או בכלל לתפוס עוד טעויות בעזרת הקומפיילר.
שפה אחרת, עם מאפיינים דומים לקופיסקריפט, שכן עושה צעד נוסף בכיוון זה היא Dart של גוגל. יעד מרכזי של השפה הוא לאפשר לקוד להתחיל לרוץ גם לפני שכל הקוד נטען – וכך לספק פידבק מוקדם למשתמש. זמן טעינה ארוך ללא תגובה היא בעיה ידועה של אפליקציות גדולות בג\'אווהסקריפט.
דפדפן כרום [ג] יודע להריץ את Dart ללא קומפילציה ל JavaScript וכך להשיג ביצועים אפילו גבוהים יותר. כרגע לא נראה שדפדפנים אחרים ימשיכו בקו זה.
num x, y;
Point(num this.x, num this.y);
Point scale(num factor) => new Point(x*factor, y*factor);
num distance() => Math.sqrt(x*x + y*y);
}
void main() {
Point a = new Point(2,3).scale(10);
print(a.distance());
}
הנה דוגמה לשפת DART: תחביר קרוב יותר ל C-Syntax שנהוג בג\'אווהסקריפט אך עדיין עם קיצורים רבים. \"num\" הוא תחליף ל \"var\" שיספק לי גם בדיקה בזמן קומפילציה.
בניגוד לשאר הטכנולוגיות שהצגתי בסדרת פוסטים זו, דארט עדיין לא הוכיחה את עצמה. האמת שהיא אפילו חדשה למדי וגרסה רשמית שלה שוחררה רק לפני חודש.
מפתח ווב ותיק ציין בפני השגה מעניינת: \"לגוגל יש היסטוריה של טכנולוגיות מרשימות, שלבסוף לא תופסות\", הוא אמר. לא אנסה לנתח את הסיבה – אך זו בהחלט נקודה שאני מזדהה איתה וששווה התייחסות לפני שאתם קופצים וממירים את כל הקוד שלכם ל DART.
למשל, אתם רוצים לייצר גרדיאנט מושקע שכזה:
בתוכנות גרפיות יש פקדים קלים על מנת לייצר אותו. איך אתם מעבירים אותו לCSS?
כמה שניות בראש יקחו לכם לתרגם אותו לקוד, הברור מאליו, הבא:
אם אינכם משתייכים ל\"גאונים המתמטיים\" שמחשבים ערכים כאלו בראש, אבל כן משתייכים ל\"עצלנים\" שמחפשים דרכי קיצור – יש הרבה כאלו באינטרנט. אמנם אין הרבה IDEs חזקים לפיתוח ווב אך יש הרבה מאוד כלים (Generators) שייצרו לכם snippets של CSS או JavaScript שיכולים לחסוך לכם הרבה עבודה.
- colorzilla gradient-editor הוא הכלי שייצר את קוד הגרדיאנט למעלה וישמח לייצר קוד שמתאים לכל הדפדפנים.
- CSS Layout Generator יסייע לייצר Layouting בעזרת CSS בלבד – פעולה שעשויה להיות מלאכת מחשבת
- השם עשוי להפתיע אתכם, אך CSS Button Generator ייצר כפתורים עגולים ויפים בעזרת CSS בלבד.
- kuler יספק לכם sets של 5 צבעים שמתאימים אחד לשני. לא עוד אתר בעיצוב
גיאורגי(החליפו את המחוק בכל שם שנותן לכם קונוטציה לעיצוב גרוע). - Pattern Cooler ייצר לכם תמונות רקע ש\"מתחברות אחת לשנייה\" ויוצרות טאפט.
חפשו בגוגל \"Generators\" ותראו שהאינטרנט מלא בכלים קטנים שמסייעים למפתחי ווב.
Aptana הוא מורכב ומסורבל ופשוט לא מסודר נוח. מעולם לא חיבבתי אותו. העדפתי אפילו להשתמש ב++Notepad שהיה מוגבל אך זריז. עד שגיליתי את מה שמפתחי הווב המתוחכמים מכירים: IDE מבית IntelliJ בשם WebStorm.
כמובן שיש פה עניין של טעם אישי, אך אם אתם מפתחים ווב בחצי משרה או יותר, ומוכנים להשקיע bare 100$ בשביל איכות החיים שלכם – כדאי לכם להוריד גרסת ניסיון של Web Storm. אני לא אפרט את רשימת הפ\'יצרים (תמיכה ב SASS, LESS, CoffeeScript, Node.js השלמה אוטומטית חכמה, Refactoring ו Debugger חזק – אופס, פירטתי). הדבר שאני הכי אוהב ב IDE הזה שהוא מרגיש לי טבעי ו\"זורם איתי\" בוייב הנכון. לא מקשה עלי, כמו Aptana. שלא תאמרו שלא ידעתם.
[ב] ההדמיה היא מוצלחת – אך בהחלט ניתן לראות שאלו הם \"תרגילים\" וכי תחביר השפה לא מספק כלים מיוחדים לסייע לתאר מקרים נפוצים אלו.
[ג] בעצם V8.