הטרנדים החמים בתחום הווב והמובייל (חלק ג')
סקירה קצרה על המגמות החמות בפיתוח Web ובעיקר בפיתוח Web ל-Mobile. חלק שלישי ואחרון בסדרה
זהו הפוסט השלישי והאחרון בסדרת "הטרנדים החמים בתחום הווב והמובייל" (לחלק הראשון) (לחלק השני).
CSS Meta-Languages
אתם בוודאי מכירים את "שפת" CSS – שפת עיצוב ה-StyleSheets של האינטרנט. מצד אחד, CSS היא שפה רבת יכולות גרפיות, אך מצד שני קשה לקרוא לה "שפה". CSS היא שפה דקלרטיבית (כלומר: המתכנת מציין את התוצאה הרצויה – לא את הדרך להגיע אליה), והיכולות ה"תכנותיות" (אימפרטיביות) שלה – אינן עומדות בקו אחד עם שפות תכנות בסיסיות… משנות השישים של המאה הקודמת.
לדוגמה: ב-CSS3, הוצגה לראשונה פונקציה חישובית שמאפשרת לבצע חישובים אריתמטיים. במקום שהמתכנת יפתח מחשבון, יקיש ערכים, יחשב ויקליד את התוצאה בתוך קובץ ה-CSS – יהיה ניתן להקליד את החישוב בתוך פונקציית Calc ו"שפת" ה-CSS תחשב אותו. אני לא מדבר על הכפלת מטריצות לוגרתימיות, אני מדבר על פעולה פשוטה כמו 8px+2px+4px.
בעת כתיבת פוסט זה, רק שני דפדפנים נפוצים (מתוך 7, אם נחשיב מכשירי מובייל) תומכים ביכולת החישוב של CSS3. עבור כל שאר הדפדפנים יש לבצע חישוב בראש ולהקליד את התוצאה לתוך ה-CSS.
"מה כל-כך רע בלבצע חישוב קטן בראש?" – אתם עשויים לשאול. "תפעיל קצת את התאים האפורים שלך!".
ובכן – אני מדמיין את קובץ ה-CSS, חלק אינטגרלי מאתר או אפליקציה, שמכיל את הערך:
width: 531px;
…531 פיקסלים. איך לעזאזל הגעתי ל 531 פיקסלים?!
האם זה 600 פחות X, Y ו Z כפול 2?
האם 551 פיקסלים, שני אלמנטים למעלה, צריכים גם הם להשתנות אם יום אחד אחליט להרחיב את "531 הפיקסלים"? מה עוד צריך להשתנות ולמה?
דחף ראשוני של מתכנת טוב הוא להוסיף הערה:
Sass

הלוגו של Sass: קיצור של Syntactically Awesome Stylesheets. הספרייה יועדה למעצבים - ולכן השיווק שמתאים יותר לפלח שוק זה. מקור: http://sass-lang.com/
היו כמה ניסיונות להתמודד עם הבעיה בעזרת jQuery (או ספריות דומות): במקום לשכפל קוד לא קריא בקובץ CSS – העבירו חלק נכבד מ"קוד" העיצוב ל-jQuery (שיכולות ה-Selection שלו מקבילות כמעט ל-CSS). קוד jQuery נטען בעליה והחיל סגנונות עיצוב על גבי ה-HTML. באופן זה ניתן להשתמש ב-JavaScript שמספק יכולות מתקדמות למדי לשימוש חוזר בקוד.
הגישה היא נחמדה – עבור המפתח, אך יש מעט מאוד מעצבים גרפיים שיסכימו להתעסק עם קובצי JavaScript עבור משימת העיצוב. כמו כן יש השלכת ביצועים לא קטנה: jQuery צריך לטייל על ה-DOM בזמן ריצה – פעולה יקרה למדי.
בשנת 2007 שוחררה ספרייה חדשנית שהתהדרה בססמאות אלגנטיות. קראו לה Sass [א].
- קבועים (נקראים בטעות "משתנים") אשר מאפשרים לקבוע ערך פעם אחת ולהשתמש בו הרבה פעמים. שינוי עתידי ידרוש שינוי במקום אחד בלבד: הגדרת הקבוע.
- Mixins (מקבילות דקלרטיביות לפונקציות) – היכולת להגדיר פעם אחת מספר שורות שחוזרת על עצמן ולהשתמש בהן שוב ושוב. שימוש נפוץ הוא "לעטוף" בפקודה אחת את הצורות השונות בהן קוראים לפקודה בדפדפנים שונים, כך שהקוד יציג רק את הפעולה הרצויה מבלי לשכפל את התחביר של הדפדפנים השונים. rounded-corners או gradient הן דוגמאות טובות.
הנה דוגמה איך נראה Mixin בפועל:
.gradient(@color, @start, @stop) {
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%);
}
בהמשך, אוכל פשוט לקרוא ל:
JavaScript Meta-Languages
הרשו לי לחסוך לכם קריאה מיותרת: אותו התהליך שהתרחש עבור CSS – קרה בערך במקביל גם בשפת JavaScript. שפות "מטא" שאינן תואמות ל-JavaScript עצמה, אך מציגות שיפורים שונים, ומתקמפלות בסופו של דבר לקוד JavaScript סטנדרטי.
השפה הנפוצה בתחום היא ללא ספק 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 אלמנטים רבים משפת רובי וגם מפייטון (כלומר, גישת פייטון שהועדפה על גבי רובי).
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());
}
Generators
תהיתם פעם איך מפתחי ווב מנוסים מייצרים חלקים מורכבים ב-CSS שלהם?
למשל, אתם רוצים לייצר גרדיאנט מושקע שכזה:
- colorzilla gradient-editor הוא הכלי שייצר את קוד הגרדיאנט למעלה וישמח לייצר קוד שמתאים לכל הדפדפנים.
- CSS Layout Generator יסייע לייצר Layouting בעזרת CSS בלבד – פעולה שעשויה להיות מלאכת מחשבת
- השם עשוי להפתיע אתכם, אך CSS Button Generator ייצר כפתורים עגולים ויפים בעזרת CSS בלבד.
- kuler יספק לכם sets של 5 צבעים שמתאימים אחד לשני. לא עוד אתר בעיצוב גיאורגי (החליפו את המחוק בכל שם שנותן לכם קונוטציה לעיצוב גרוע).
- Pattern Cooler ייצר לכם תמונות רקע ש"מתחברות אחת לשנייה" ויוצרות טאפט.
חפשו בגוגל "Generators" ותראו שהאינטרנט מלא בכלים קטנים שמסייעים למפתחי ווב.
ולסיום – IDE מתקדם לפיתוח ווב
כלי פיתוח לווב, משום מה, תמיד היו מאותגרים. לרוב הם לא סיפקו הרבה יותר מ-Syntax Highlighting ו-Auto-Completion בסיסי מבוסס השפה. IDE מתוחכם יחסית ששינה את התמונה הוא Aptana והוא מסופק בחינם. עד לא מזמן, הוא כנראה היה ה-IDE המתקדם ביותר לפיתוח Web.Aptana הוא מורכב ומסורבל ופשוט לא מסודר נוח. מעולם לא חיבבתי אותו. העדפתי אפילו להשתמש ב++Notepad שהיה מוגבל אך זריז. עד שגיליתי את מה שמפתחי הווב המתוחכמים מכירים: IDE מבית IntelliJ בשם WebStorm.
כמובן שיש פה עניין של טעם אישי, אך אם אתם מפתחים ווב בחצי משרה או יותר, ומוכנים להשקיע bare 100$ בשביל איכות החיים שלכם – כדאי לכם להוריד גרסת ניסיון של Web Storm. אני לא אפרט את רשימת הפ'יצרים (תמיכה ב SASS, LESS, CoffeeScript, Node.js השלמה אוטומטית חכמה, Refactoring ו Debugger חזק – אופס, פירטתי). הדבר שאני הכי אוהב ב IDE הזה שהוא מרגיש לי טבעי ו"זורם איתי" בוייב הנכון. לא מקשה עלי, כמו Aptana. שלא תאמרו שלא ידעתם.
[א] לא לבלבל עם SaaS – Software as a Service
/
[ב] ההדמיה היא מוצלחת – אך בהחלט ניתן לראות שאלו הם "תרגילים" וכי תחביר השפה לא מספק כלים מיוחדים לסייע לתאר מקרים נפוצים אלו.
/
[ג] בעצם V8.
הגב
4 תגובות על "הטרנדים החמים בתחום הווב והמובייל (חלק ג')"
* היי, אנחנו אוהבים תגובות!
תיקונים, תגובות קוטלות וכמובן תגובות מפרגנות - בכיף.
חופש הביטוי הוא ערך עליון, אבל לא נוכל להשלים עם תגובות שכוללות הסתה, הוצאת דיבה, תגובות שכוללות מידע המפר את תנאי השימוש של Geektime, תגובות שחורגות מהטעם הטוב ותגובות שהן בניגוד לדין. תגובות כאלו יימחקו מייד.
שאלה,
באילו כלים כדאי לכתוב היום דפי HTML / CSS?
והאם יש כלים יעלים לכתיבת JavaScript?
תודה
האם זה לא בדיוק מה שכתוב בכתבה? כלים ל CSS ו JavaScript?
הeditor הכי טוב שיש כיום בחינם, לפי דעתי, הוא
sublime text 2
תודה עודד על הטיפ – לא הכרתי אותו.
שים לב לכיתוב: Sublime Text may be downloaded and evaluated for free, however a license must be purchased for continued use.
60$ ליוזר.
מקור: http://www.sublimetext.com/buy