בחודשים האחרונים אני נתקל בלקוחות רבים ששואלים אותי (ויועצים נוספים בקבוצה) "מה זה HTML5?". לעתים השאלה מנוסחת קצת שונה: "האם דפדפן X תומך ב- HTML5?" או "האם כדאי לי לפתח מערכת ב- HTML5?".

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

מורה הנבוכים ל- HTML5

ונתחיל מהשאלה הבסיסית ביותר:

מהו HTML5?

ובכן, בניגוד למה שחושבים לעתים, HTML5 זו לא טכנולוגיה חדשה שמחליפה את HTML4 או XHTML 1.1. בנוסף, לא כל אתר שמעוצב בצורה מושכת את העין ובשילוב אנימציות מעניינות הוא בהכרח מבוסס HTML5. קיימות לא מעט דוגמאות המוכיחות בדיוק את ההיפך...

אם כך, מהו HTML5?

ההגדרה המדויקת ביותר הינה:

אוסף תגים חדש ב- HTML, בשילוב אלמנטים חדשים ב- CSS3 ויכולות חדשות ב- JavaScript.

אוסף התגים, האלמנטים ויכולות ה- JavaScript החדשות מתרכזים סביב הנושאים הבאים:

1. ביצועים
2. Semantic Web
3. עיצוב
4. מדיה
5. גרפיקה
6. עבודה ב- Offline ואחסון מקומי
7. קישוריות
8. גישה לחומרה מקומית

כפי שניתן להתרשם מהרשימה, ה- HTML5 תוכנן בעקבות התובנה כי מערכות ה- Web המודרניות הינן אינטראקטיביות הרבה יותר ממה שהיה בשנת 1999, בה נקבע סטנדרט ה- HTML4, וכי דרושות יכולות חדשות ומשמעותיות על מנת שניתן יהיה להצעיד את האינטרנט לדור הבא של המערכות.

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

HTML5 מכיל תגים חדשים ב- HTML ההופכים את הדף לקריא הרבה יותר. למשל, רובכם וודאי מחלקים את דפי ה- Web שלכם באמצעות תגי Div שונים, כאשר כל Div אחראי לאיזור תוכן מסויים, והגדרת האיזור מתבצעת באמצעות ה- id attribute או class attribute.

לדוגמה:  <div class=’header’></div>, או <div class=’menu’></div>.

באמצעות HTML5 ניתן להחליף את התגים האלו ב: <header></header>, או <menu></menu>

תגים חדשים אלו מאפשרים בניית דף קריא הרבה יותר (מה שמכונה: Semantic Web), המאפשר גם לתוכנות שונות לקרוא את הדף ולהבין את מבנהו. רשימה מלאה של התגים החדשים ב- HTML5 ניתן לראות כאן.

 פינות מעוגלות. ב- Word זה קיים כבר שנים...

אם תשאלו כל מעצב Web מתחיל מהו האלמנט העיצובי החסר ביותר בפיתוח אתרי אינטרנט, תקבלו כנראה את אותה התשובה: פינות מעוגלות!. ובכן, (תופים בבקשה...) כחלק מ- CSS3 התווספה, סוף סוף, היכולת להגדיר פינות מעוגלות!
האלמנט border-radius מאפשר להגדיר את רדיוס עיגול הפינה, ובכך הוא עונה על תפילותיהם של מעצבים מתוסכלים ומפתחים מותשים, שנאלצו למצוא פתרונות עוקפים לבעיה הקרדינלית הזו.
אלמנט זה מתווסף לעוד אלמנטים רבים אחרים שהתווספו ב- CSS3, ומרכיבים ביחד אתו את HTML5.

- אחת היכולות המשמעותיות ביותר בעיני ב- HTML5 היא יכולת ה- Local Storage. יכולת זו מאפשרת, לראשונה, לשמור מידע בתחנת הקצה של המשתמש לאורך זמן, גם לאחר שהדפדפן נסגר. למעשה, נפתחת באמצעות יכולת זו האפשרות לממש Cache של נתונים בדפדפן, באופן שעשוי לשפר את הביצועים בצורה משמעותית.
לעתים אני שומע מלקוחות את התגובה הצוננת הבאה: "על מה כל ההתרגשות? אפשר לעשות אותו דבר ב- cookies כבר שנים!".
יש אמנם קווי דמיון מסויימים בין cookies ו- Local Storage, אולם חשוב לשים לב להבדלים:

• באמצעות Local Storage ניתן לשמור עד 10MB של נתונים, בעוד ש- Cookies מוגבלים ל- KB בודדים.
• ל- Cookies יש תאריך תפוגה, בעוד של- Local Storage אין.

השימוש ב- Local Storage פשוט ביותר:
localStorage[‘person’]=p

הסבר מקיף על השימוש ב- Storage תוכלו למצוא כאן.

זהו, כמובן, רק קצה הקרחון של היכולות החדשות ב- HTML5. מומלץ להתעדכן בשאר היכולות המתקדמות והמסקרנות.

HTML5 - סטנדרט שעוד לא נקבע סופית

אחד הדברים שחשוב להבין לגבי HTML5 הינו שמדובר בסטנדרט שעוד לא נקבע סופית, והוא בתהליכי גיבוש בימים אלה ממש. למעשה, התחזית האופטימית ביותר על מועד גיבושו הסופי של הסטנדרט מדברת על 2014, ורוב שאר התחזיות קובעות את שנת 2020 כתאריך מעשי יותר...

מצב זה מחייב זהירות מסויימת כאשר באים לפתח ב- HTML5, כפי שנראה בהמשך.

סטטוס עדכני של HTML5 ניתן לראות כאן:

http://dev.w3.org/html5/decision-policy/html5-2014-plan.html

אז לאחר שהבנו מהו HTML5, אפשר לעבור לשאלה הבאה, שהיא:

אילו דפדפנים תומכים ב- HTML5?

השאלה הזו, למרות שהיא נראית פשוטה, למעשה אינה כזו.

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

לאור זאת ניתן לומר כי השאלה לעיל אינה רלוונטית, והשאלה המעניינת באמת הינה:

אילו דפדפנים תומכים ביכולת שמעניינת אותי?

ופה התשובות משתנות מאוד.

לדוגמה, ל- Local Storage שתואר לעיל קיימת תמיכה מ- Internet Explorer 8 ומעלה, ו- Chrome 4 ומעלה.

מצד שני, ה- Application Cache (שמאפשר להפעיל יישומי Web גם כאשר התחנה היא Offline) נתמך ב- Internet Explorer 10 , והתמיכה של Chrome שונה במעט מהסטנדרט הקבוע.

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

וכעת נגיע לשאלה החשובה באמת:

האם כדאי לפתח מערכת ב- HTML5?

גם במקרה זה, השאלה למעשה אינה השאלה הנכונה. השאלה שבאמת חשוב לשאול היא:

האם כדאי לפתח מערכת שעושה שימוש ביכולת X של HTML5?

הדרך לענות על השאלה הזו, היא באמצעות מענה על השאלות הבאות:

1. האם שימוש ביכולת X ישפר משמעותית את המערכת שלי? (בין אם מדובר בהוספת גרפיקה, שימוש ב- Cache מקומי או הצגת פינות מעוגלות)
2. האם הדפדפנים הנמצאים בארגון תומכים ביכולת זו? (שימו לב – לא מעניינת אותנו התמיכה ביכולות שאנו לא משתמשים בהן!)
3. (שאלה אופציונלית) האם יכולת X כבר הוכרזה כחלק אינטגרלי מהסטנדרט של HTML5?

אם התשובה לשתי השאלות הינה חיובית – קדימה לדרך! אתם יכולים להתחיל לעשות שימוש ביכולות החדשות של HTML5 בביטחון רב יחסית, ולהתחיל להכיר את הדור הבא של יכולות ה- Web.

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

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

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

מכיוון שעל מנת לממש תקשורת דו-כיוונית על בסיס פרוטוקול http, לא צריך לחכות ל- WebSockets, ניתן לעבוד עם SignalR.

מה זה SignalR

SignalR היא ספריה חדשה לפיתוח בסביבת Asp.Net אשר מאפשרת בצורה מאוד פשוטה לממש התנהגות real-time במערכת שלכם. כלומר, הספריה מאפשרת לשרת ה- Asp.Net "לדחוף" הודעות לצרכנים (כאשר הצרכן יכול להיות java script או .Net desktop app).

SignalR מאפשרת ביצוע תקשורת דו-כיוונית בין שרת ה- Asp.Net לבין הקוד הרץ בדפדפן (ע"י קוד javascript). בנוסף, הספריה מספקת API מאוד פשוט על מנת לממש הן את צד השרת והן את צד הצרכן.

תרחישים המתאימים לשימוש ב- SignalR

ניתן לעשות שימוש ב- SignalR בכל מקום בו נדרש לקבל חיווי מהשרת על פעולה מסויימת (notification), לדוגמא:

Chat  – בכל פעם שאחד מהחברים הנמצאים בחדר, כותב הודעה, ההודעה "עולה" לשרת, והשרת "שולח" את ההודעה לכל החברים האחרים בחדר. שימו לב, החברים האחרים אינם "מושכים" את ההודעה, אלא השרת "שולח" אליהם את ההודעה.

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

וכמובן שקיימים גם תרחישים עסקיים הרלוונטים לתקשורת real-time (לדוגמא: מערכת המציגה פעולות המתבצעות בשוק ההון).

איך זה עובד

SignalR מפעילה מנגנון של fallback, עבור שיטת התקשורת. SignalR יודעת לבצע את התקשורת על בסיס 4 שיטות, כאשר בשלב ההתחברות של הצרכן (client) לשרת, מתבצע "משא ומתן" (negotiation) שקובע מה תהיה שיטת התקשורת – אם שיטה ראשונה לא אפשרית, בודקים האם השיטה השנייה נתמכת, וכו'.

להלן 4 שיטות התקשורת, על פי סדר העדיפות, למימוש ההתקשרות:

1. WebSockets – אפשרי רק אם גם השרת וגם הדפדפן תומכים.
   
2. Server Sent Events – תלוי בתמיכה של הדפדפן. רוב הדפדפנים תומכים בשיטה זו, פרט ל- Internet Explorer.
   
3. Forever Frame – נתמך רק ב- Internet Explorer
   
4. Ajax long polling – נתמך ברוב הדפדפנים.

WebSockets היא הטכניקה היחידה שמספקת תקשורת דו-כיוונית (duplex) אמיתית, ולכן שיטה זו בעדיפות ראשונה.

שאר השיטות הן טכניקות המאפשרות לדפדפן לקבל מידע מהשרת, אך הדפדפן, מתקשר מול השרת בפניות Ajax "רגילות".

עבור 4 השיטות האלו, ה- API של SignalR מספק הפשטה (abstraction), כך שה- API אחיד לכל אחת מהשיטות, ועבורינו המשתמשים, המימוש פשוט וקל.

איך משתמשים ב- SignalR

על מנת לעבוד עם SignalR, יש להתקין את צד השרת של SignalR בפרויקט מסוג Web Application. הדרך הקלה:

- יצירת פרויקט Web Application חדש (ניתן גם בפרויקט קיים)

- שימוש ב- NuGet לטעינת SignalR ע"י הפקודה הבאה: Install-Package Microsoft.AspNet.SignalR –pre.
לאחר מכן, נגדיר PersisitentConnection. מחלקה זו מהווה אחת מאבני הבניין המרכזיות של  SignalR. מחלקה זו חושפת את השירותים הבסיסים של SignalR, לדוגמא: קבלת הודעה מ"מנויים", שליחת הודעות ל"מנויים", אירועים של התחברות והתנתקות של "מנויים" וכיו"ב. בד"כ, נעבוד עם מחלקה אחרת - Microsoft.AspNet.SignalR.Hub, המספקת מעטפת מעל PersisitentConnection.

- הגדירו מחלקה היורשת מהמחלקה Microsoft.AspNet.SignalR.PersistentConnection

- נגדיר Override function אשר "דורסת" את הפונקציה המקורית OnReceived, ונממש בה שליחה של כל הודעה המתקבלת ממנוי כלשהוא, אל כלל המנויים (משהו בסגנון chat):

protected override Task OnReceived(IRequest request, string connectionId, string data)

{            

    // Broadcast data to all clients

    return Connection.Broadcast("server is sending: " + data);
}

RouteTable.Routes.MapConnection<SamplePersistentConnection>("echo", "/echo");

- עכשיו נוסף "מנוי":

זו האפליקציה ה"נרשמת" ל- "Connection" של SignalR, ויכולה לשלוח הודעת ולקבל הודעות מה-"Connection".

- הוסיפו דף Html

- העתיקו את הקוד הבא לדף ה- Html:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

</head>

<body>

<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
   1:  
   2:  
   3: <script src="Scripts/jquery.signalR-1.0.0-rc2.min.js" type="text/javascript">
   1: </script>
   2:  
   3: <script type="text/javascript">
   4:  
   5:       $(function () {
   6:  
   7: var connection = $.connection('/echo');
   8:  
   9:           connection.received(function (data) {
  10:  
  11:               $('#messages').append('<li>' + data + '</li>');
  12:  
  13:           });
  14:  
  15:           connection.start().done(function () {
  16:  
  17:               $("#broadcast").click(function () {
  18:  
  19:                   connection.send($('#msg').val());
  20:  
  21:               });
  22:  
  23:           });
  24:  
  25:       });
  26:  
</script>

<input type="text" id="msg" />

<input type="button" id="broadcast" value="broadcast" />

<ul id="messages">

</ul>

</body>

</html>

כעת, הריצו את הפרויקט (Ctrl+F5) ופתחו מספר מופעים שונים של דף ה- Html (ע"י בחירה ב- File->New Session בתפריט של ה- Internet Explorer).
ברגע שתזינו טקסט בדף אחד ותלחצו על כפתור ה-send, הטקסט יופיע בכל אחד מהדפים הפתוחים (כלל ה"מנויים").

לסיכום

אין צורך לחכות ל- WebSockets על מנת לתמוך בתקשורת דו-כיוונית באפליקציות Asp.Net.

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

כמו כן אתם מוזמנים להוריד את ה- EBook החינמי בנושא מכאן.

רוצים להתייעץ בנושאי פיתוח לווב? כנסו לפורום שלנו בעברית!

הפוסט נכתב ע"י טל בן שלום, יועץ בכיר בקבוצת היועצים של מיקרוסופט
(MCS ) העוסק בייעוץ בתחומי ארכיטקטורה, פיתוח, Azure ו- ALM.

לפני מספר ימים דפדפן IE10 בגרסת Windows 8 RT יאפשר הרצת Flash כברירת המחדל. עד היום נחסמה הרצת ה- Flash בדפדפן זה למעט אתרים שהופיעו ברשימת הרשאות מיוחדת.

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

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

העדכון יהיה זמין מתוך Windows Update.

פיתוח Flash מותאם ל- Windows RT

למפתחים אשר מעוניינים לפתח תוכן Flash לאתרים שלהם יכולים להציץ במסמך הזה המפרט את הדרישות הטכניות הדרושות לאתר על מנת שלא יופיע ברשימת האתרים החסומים (CV List). המסמך מפרט גם מה לעשות במקרה והאתר שלכם נכנס לרשימת ה- CV וכן Best Practices בנוגע לאתרים המותאמים למגע, ביצועים וכו’.

כלי מומלץ לבדיקת תאימות האתר שלכם -  Modern.IE

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

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

תזכורת – ספריית JsRender באה לספק לנו דרך טיפה יותר נחמדה כדי ליצור תבניות JS ב-5 HTML.
היתרון והחשיבות של תבניות ברור – לכתוב קוד מובנה פעם אחת ולהשתמש בהרבה מקומות והתחלנו לראות כיצד עושים זאת בחלק הראשון של המאמר.

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

JsRender מאפשר לנו לנווט למעלה ולמטה בהירארכיה של אובייקטים. לניווט למטה משתמשים בנקודה או סוגריים מרובעות. ל-Car יש מאפיין מסוג Art, ולו יש מאפיין בשם ImageUrl. כדי להגיע אליו אפשר להשתמש ב - Art.ImageUrl,
או Art[“ImageUrl”] :

<img class='pic' src = '{{>Art.ImageUrl}}' title='{{>Name}}'/>

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

There are no {{>#parent.data.Name}} currently for rent

כאן אנחנו עולים 2 רמות:

{{for Colors}}
  <li>
    <div style='color:{{>ColorName}}'>{{>ColorName || 'No color available'}}  {{>#parent.parent.data.Name}}
    </div>                      
  </li> 
{{/for}}

הרחבות

ניתן גם לכתוב פונקציות, ממירים, פרמטרים ו -Custom Tags על מנת להרחיב את היכולות, ולהרוויח עוד Reuse. בכל המקרים צריך תחילה לרשום את ההרחבה, ואז לצרוך אותה. נגדיר פונקציה toUpper שתעשה Upper Case לשמות המכוניות

$.views.helpers({
            toUpper: function (val) {
                return val.toUpperCase();
            }
        });

צריך לוודא שהקוד רץ בעליית הדף או לפני שימוש כמובן. כעת לגבי השימוש – קוראים לפונקציה עם ~ ומעבירים את הערך הרצוי:

{{>~toUpper(Name)}}

כעת נעשה ממיר, שיחליף את התנאי שעשינו מקודם לגבי שנת היצור של הרכב. תחילה נרשום את הממיר, נגדיר פונקציה בשם quality שמקבלת ערך, ומחזירה מחרוזת

$.views.converters ({
            quality: function (val) {
                return val > 2010? 'Premium':'Vintage';
            }
        });

ובמקום מה שהיה מקודם כתנאי, תהיה כעת המרה – נקרא לממיר ונעביר את שנת היצור בכפרמטר:

{{quality:Model}}

ניתן גם להגדיר פרמטרים לשימוש בתוך התבנית. ניתן להוסיף פונקציות ופרמטרים ככל שנרצה – כאן הוספנו פרמטר בשם noDataMessage

$.views.helpers({
            noDataMessage: { msg: 'No Data' },
            toUpper: function (val) {
                return val.toUpperCase();
            }
        });

ונצרוך אותו בתוך התבנית – במקום לכתוב את המחרוזת 'No Data' נשתמש בפרמטר שהגדרנו:

<div >Miles Per Gallon: {{>MilesPerGallon || ~noDataMessage.msg}}</div>

עוד לגבי תבניות

ניתן לשמור את התבנית עצמה כמחרוזת, בבסיס נתונים לדוגמה, ולצרוך אותה בזמן ריצה. כאן בדוגמה אנחנו יכולים לראות שאחרי שקיבלנו את רשימת הרכבים אנחנו מגדירים תבנית כמחרוזת, קוראים ל $.templates(tmplString) שהופך את המחרוזת לתבנית, קוראים ל render ומצימדים את התוצר ל DOM

$.get("/CarRentalService.svc/GetRentalCars", "", function (data) {
            var cars = data.d;
            var tmplString = "<li><div class='item'><div class ='caption'>{{>~toUpper(Name)}} {{>Model}} </div></li>";
            
            var tmpl = $.templates(tmplString);
            var htmlString = tmpl.render(cars);
            $("#carRentalList").html(htmlString);

נקבל:

• BMW 2009
• FIAT 2011
• MERCEDES 2012

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

כדי לרשום תבנית משתמשים שוב ב $.templates, עם עוד פרמטר של השם שניתן לתבנית - $.templates('customTmpl', tmplString)

$.get("/CarRentalService.svc/GetRentalCars", "", function (data) {
            var cars = data.d;
            var tmplString = "<li><div class='item'><div class ='caption'>{{>~toUpper(Name)}} {{>Model}} </div></li>";
            
            $.templates('customTmpl', tmplString);//רישום
            var htmlString = $.render.customTmpl(cars);//צריכה
            $("#carRentalList").html(htmlString);
        }, "json");

נריץ ונקבל את אותו פלט כמו מקודם.

סיכום

JsRender הינה ספרייה שעוזרת לנו לכתוב קוד מובנה ולהשתמש בו בהרבה מקומות. ראינו את ה syntax הבסיסי שנע בין מיצוב מאפיינים בתבנית, דרך תמיכה בלולאות, ניווט בהירארכיה של אובייקטים ותמיכה בתנאים. ניתן להרחיב את הפונקציונליות על ידי שימוש ב- functions, converters, tags ו – template parameters. היכולת להשתמש במחרוזות כתבניות, שילוב בין מחרוזות ועוד, מאפיינת את הספרייה כדינאמית וגמישה.

יש לכם עוד שאלות בנושאי פיתוח לווב? היכנסו לפורום Web Development שלנו בעברית! 

הפוסט נכתב ע"י עוזי רוזן, יועץ בכיר בקבוצת היועצים של מיקרוסופט (MCS) העוסק בייעוץ בתחומי ארכיטקטורה ופיתוח ושימש בעבר כמנהל פיתוח וארכיטקט במטריקס.

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

JsRender הוא עוד יהלום קטן בנוף האינסופי של סקריפטים חדשים שיוצאים בעת האחרונה והוא הממשיך הישיר של Jquery Templates שננטש באיזור 2011.

JsRender בא לספק לנו דרך טיפה יותר נחמדה כדי ליצור תבניות JS ב-5 .HTML ויש לו מספר שיפורים ומאפיינים ייחודים:

• אין תלות ב Jquery
  
• אין תלות ב DOM
  
• תומך ביצירת פונקציות הרחבה (בהמשך...)
  
• ביצועים גבוהים(String based rendering)

הבה נצלול פנימה קצת ונראה את האפשרויות השונות של הספריה.

הכנה

ניצור שירות שיספק לנו רשימת רכבים להשכרה. נקים פרויקט חדש מסוג Web Application Project.
אתם יכולים להשתמש בגרסה החינמית Visual Studio Express 2012 for Web.

נוסיף פריט חדש - Ajax-Enabled Web Service, נקרא לו CarRentalService ונגדיר את המחלקה Car:

public class Car
    {
        public string Name { get; set;}
        public int Model { get; set;}
        public List<Color> Colors { get; set;}
        public Art Art { get; set;}
        public bool IsInStock { get; set;}
        public int MilesPerGallon { get; set;}
        public int ListPrice { get; set;}
        public int CurrentPrice { get; set;}    }

    public class Color
    {
        public string ColorName { get; set; }
    }

    public class Art
    {
        public string ImageUrl { get; set; }
    }

וכמובן את השירות עצמו:

[ServiceContract(Namespace = "")]
public class CarRentalService
{
    [WebGet] 
    [OperationContract]
    public List<Car> GetRentalCars()
    {
        Car car1 = new Car
        {
            Name = "BMW",
            Model = 2009,
            Colors = new List<Color> { new Color { ColorName = "Blue" }, new Color { ColorName = "Black" } },
            Art = new Art { ImageUrl = "/Images/Bmw1.png" },
            IsInStock = true, 
            MilesPerGallon = 25,
            ListPrice = 50,
            CurrentPrice = 40
        };
        Car car2 = new Car
        {
            Name = "Fiat",
            Model = 2011,
            Colors = new List<Color> { new Color { ColorName = "Orange" }, new Color { ColorName = "Yellow" } },
            Art = new Art { ImageUrl = "/Images/Fiat.png" },
            IsInStock = true,
            MilesPerGallon = 30,
            ListPrice = 50,
            CurrentPrice = 60
        };
        Car car3 = new Car
        {
            Name = "Mercedes",
            Model = 2012,
            Colors = new List<Color> { new Color { ColorName = "White" }, new Color { ColorName = "Blue" } },
            Art = new Art { ImageUrl = "/Images/Mercedes.png" },
            IsInStock = false,
            ListPrice = 50,
            CurrentPrice = 60
            
        };
        return new List<Car>
        {
            car1, car2, car3
        };
    }

בסיס

כעת, נוריד את Jsrender מאתר הפרוייקט ב- GitHub ונוסיף לספריית Scripts.

נוסיף פריט חדש, דף HTML5, ונוסיף references ל- Jquery ו JsRender.

באופן כללי, ישנם תמיד 3 מרכיבים ביצירת תבנית:

1. התבנית עצמה.
   
2. אלמנט ה Html שיכיל את התבנית המלאה בנתונים.
   
3. קוד שיוצק תוכן לתבנית ומכניס אותה לאלמנט ה- HTML.

התבנית הינה קטע של Script עם טיפוס של text/x-jsrender בשם carRentalTemplate. שימו לב ל Syntax של JsRender בתוך התבנית, הכל במחרוזות, ויש התאמה לשמות המאפיינים ב Car, שם ושנת יצור, עטופים ב {{}}

<script id="carRentalTemplate" type="text/x-jsrender">
        <li>
            {{>Name}} {{>Model}}
        </li>
</script>

בצורה זו (שימוש ב <), הנתון עובר HtmlEncoding, אם רוצים לבטל את זה ולהציג Html, משתמשים בנקודותיים:

<script id="carRentalTemplate" type="text/x-jsrender">
        <li>
            {{:Name}} {{:Model}}
        </li>
</script>

אפשר גם לעשות מספר רץ במקום LI:

<script id="carRentalTemplate" type="text/x-jsrender">
        <div>{{>#index+1}} {{:Name}} {{:Model}}</div> 
</script>

בתוך ה BODY אנחנו רואים את ה'מיכל' – לשם נכניס את התבנית המלאה. במקרה זה מדובר ברשימה UL, והתבנית עצמה הינה אוסף של LI.

בעליה של הדף אנחנו פונים לשירות שבנינו קודם, ואז ממלאים את הרשימה עם תוכן:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js"></script>
   1:  
   2:     <script src="Scripts/jsrender.js">
   1: </script>
   2:     
   3:     <script id="carRentalTemplate" type="text/x-jsrender">
   4:         <li>
   5:             {{>Name}} {{>Model}}
   6:         </li>
   7:     
</script>
   1:  
   2:     
   3:     <script type="text/javascript">
   4:  
   5:         $.get("/CarRentalService.svc/GetRentalCars", "", function (data) {
   6:             var cars = data.d;
   7:             $("#carRentalList").html(
   8:             $("#carRentalTemplate").render(cars));
   9:  
  10:         }, "json");
  11:  
  12:     
</script>
</head>
<body>
    <ul id="carRentalList" />
</body>
</html>

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

כעת, אם נריץ את הדף נקבל את הפלט הבא:

• BMW 2009
• Fiat 2011
• Mercedes 2012
• BMW 2011

פשוט ונחמד. כעת בואו נראה כמה אפשרויות והרחבות.

אפשרויות

נוסיף קצת עיצוב לתבנית , הכל בעצם HTML ו- CSS במחרוזת:

<script id="carRentalTemplate" type="text/x-jsrender">
        <li>
            <div class ='caption'>
                {{>Name}} {{>Model}}
            </div>        
 </li>
    </script>

ב Car יש מאפיין IsInStock, בוליאני. JsRender תומך בתנאים בצורה של If-Else. אם IsInStock=true, נציג את הצבעים שניתן לבחור מהם, אם False, נציג הודעה.

{{if IsInStock}}
    <div class='available'>Available now!!</div>
{{else}}
    There are no cars currently for rent
{{/if}}

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

{{if Model > 2010}}
        Premium
{{else}}
        Vintage
{{/if}}

אגב, באותה שיטה אפשר לשאול על null:

{{if Color}}
    Not Null
{{else}}
    The instance is null
{{/if}}

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

<div >Miles Per Gallon: {{>MilesPerGallon || 'No Data'}}</div>

כעת, אם יש רכבים להשכרה, כלומר IsInStock=true, נרצה להציג את כל הצבעים לבחירה.
שימו לב שהאובייקט Car מכיל מערך של אובייקט אחר, Color. במקרה של מערך אנחנו יכולים להגדיר לולאה בתוך התבנית, רק צריך לציין את שם המאפיין שמחזיק את המערך, במקרה זה Colors

{{for Colors}}
   <li>{{>ColorName || 'No color available'}}</li> 
{{/for}}

אפשר לשלב נתונים דינמיים ממש בתוך ה Html, למשל, נרצה שכל שם של צבע יהיה בצבע המתאים:

{{for Colors}}
     <li> 
<div style='color:{{>ColorName}}'>{{>ColorName || 'No color available'}}
</div>
     </li> 
{{/for}}  

נריץ כעת ונקבל את הפלט הבא:

לסיכום

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

יש לכם עוד שאלות בנושאי פיתוח לווב? היכנסו לפורום Web Development שלנו בעברית! 

הפוסט נכתב ע"י עוזי רונן, יועץ בכיר בקבוצת היועצים של מיקרוסופט (MCS) העוסק בייעוץ בתחומי ארכיטקטורה ופיתוח ושימש בעבר כמנהל פיתוח וארכיטקט במטריקס.

השבוע שחררנו גרסה חדשה לסט כלי הפיתוח שנועדו למפתחי ווב, סט כלים אשר מרחיב את יכולות ASP.NET ומציע כלי פיתוח חדשים. בין אם אתם משתמשים ב- Web Forms, MVC, Web API או כל טכנולוגיה אחרת של ASP.NET, יש משהו חדש גם בשבילכם בעדכון זה.

שיפורים חדשים ב- ASP.NET

העדכון מוסיף תבניות ופיצ’רים חדשים ל-ASP..NET ביניהן:

• New ASP.NET MVC Templates
  • רוצים ליצור אפליקציית פייסבוק?תבנית חדשה תאפשר לכם במספר צעדים פשוטים ליצור אפליקציית פייסבוק באמצעות שימוש ב- ASP.NET MVC ותאפשר לכם לקבל מידע על פרופיל הפייסבוק שכרגע Logged in ולקבל מידע על גרף הרשת שלו. (עוד על כך בפוסט נפרד בקרוב).
  • תבנית חדשה של Single Page Application מאפשרת לכם לבנות אפליקציית ווב שעושה שימוש בצד הקליינט ב- Knockout, jQuery ו- ASP.NET Web API
• תמיכה בתקשורת בזמן אמת באמצעות SignalIR. מאפשר לכם להנות מהיתורנות של התמיכה החדשה ב- WebSocket שהתווספה ב- .NET 4.5 תוך כדי תמיכה אוטומטית לאחור בפרוטוקולים ישנים יותר של תקשורות, לקליינטים שעדיין לא עברו לפריימוורק החדש. אם עד היום לא עשיתם שימוש ב- SignalIR – זה הזמן לנסות ולראות כמה שזה מגניב.
• פונקציונליות חדשה ל- Web API, כולל תמיכה ב- OData, integretad tracing וחילול אוטומטי של תיעוד ל- API שלכם.
• פונקציונליות חדשה של Friendly URL’s המאפשרת למפתחי Web Forms לייצר כתובות ידודתיות יותר ולעבור בין גרסאות תצוגה של מובייל ודסקטופ בקלות.
• שיפור במנגנון ה- web publishing. לפרוייקטים מסוג web sites יש עכשיו אותה חווית פיבלוש כמו פרוייקטים מסוג web applications (כולל Azure web sites) ואתם גם יכולים כעת לפבלש רק קבצים מסויימים, לראות הבדלים בין הקבצים באתר המרוחק ובמכונה המקומית ועוד.
• שיפור ב- VS 2012 Page Inspector. הוספה תמיכה ב- JS selection mapping וכעת גם ניתן לראות עדכונים ב- CSS בזמן אמת.
• הוספה תמיכה בעורך של VS 2012 ל- Knockout IntelliSence והדבקה של JSON כמחלקה של .NET (מה שהופך את הצריכה של API חיצוניים לקלה יותר)
• עדכונים לכל התבניות האחרות של ASP.NET – תמיכה בגרסאות החדשות של jQuery, jQuery UI, Modernizer ועוד..

כיצד להתקין את העדכון?

אתם יכולים להוריד כעת את העדכון ולהתקין אותו מכאן: http://www.asp.net/vnext

כמובן שאתם צריכים Visual Studio 2012 מותקן במחשב שלכם, לא משנה מאיזה גרסה.

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

יש לכם שאלות נוספות בנושא ASP.NET או פיתוח לווב? כנסו לפורום שלנו בעברית!

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

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

סקירה של יכולת ה- Play To

יכולת ה- Play To נוגעת ל-3 קבוצות עיקריות:

• משתמשים – בכל מקום בו יש רשת משותפת (למשל בית, לאחר שאיפשרתם Sharing), מערכת ההפעלה Windows 8 תזהה אוטומטית את המכשירים התומכים ביכולת Play To. במידה והאפליקציה שלכם תומכת גם בסטרימינג למכשירים תומכים, אז סרגל הצד עם אייקון ה- Devices יאפשר למשתמש להזרים את הפלט למכשיר הנבחר. זה מאפשר חווית שימוש עקבית ונוחה לשימוש. אגב, אפליקציות הוידאו, התמונות והמוסיקה שמגיעות עם Win8 כבר תומכות ביכולת זאת ואפילו IE10 שמאפשר לכם להזרים למשל וידאו ומוסיקה מנגני HTML5.
• מפתחים – ה- PlayTo contract עוטף טכנולוגיות סטרימינג מורכבות יותר למימוש אשר נמצאות מתחת לפני השטח ומאפשר לכם המפתחים לפתח יותר בקלות אפליקציות התומכות ביכולות אלו (וגם דפי אינטרנט HTML5).
• התקנים – יכולת ה- Play To יכולה לעבוד עם Devices אשר אושרו לעבודה מול יכולת זאת. ישנן חברות גדולות אשר עובדות בשיתוף פעולה עם מיקרוסופט על מנת להציע יכולת אלו במגוון רב של מכשירים כולל: טלויזיות, מגברים, רמקולים, מערכות קולנוע ביתי ועוד וכמובן – Xbox 360 שתומך ביכולת זאת.

לבנות חווית שימוש עשירה וסוחפת

Play To מאפשרת בקלות לספק חווית multi-screen שתלהיב את המשתמשים שלכם ותשדרג את האפליקציה שלכם. כאשר אתם תממשו את יכולת ה- Play To תקבלו:

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

איך עובד ה- Play To ב- Windows 8? צד המשתמש

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

שלב ראשון – לאפשר Sharing ברשת הביתית ולצרף את המכשיר שלכם לרשת

Windows 8 מציעה חווית שיתוף קלה ברשת הביתית. Sharing מאופשר באופן אוטומטי לכל מחשב שהגדיר HomeGroup  או אם בחרתם בהתקנת מערכת ההפעלה Express Setup, אז HomeGroup כבר תהיה מאופשרת.
בנוסף, אם התחברתם לרשת קיימת, תשאלו האם לאפשר Sharing ולאפשר למעשה חיבור למכשירים שונים ברשת.

משתמש גם יכול ללחוץ לחיצה ארוכה על שם הרשת האלחוטית ולקבל את האופציה האם לאפשר Sharing:

לאחר שאפשרתם את ה- Sharing, מערכת ההפעלה תאתר אוטומטית את המכשירים ברשת שתומכים ב- Play To ותגדיר אותם תוך פחות מחצי דקה. משתמשים כעת יוכלו לראות את כל המכשירים שהתגלו בדף ה- Devices שנמצא ב- PC Settings:

לאחר שכל המכשירים ברשת שהתגלו כתומכי Play To זוהו והותקנו, מערכת ההפעלה כמובן תזכור אותם ותחפש אותם בצורה אוטומטית בפעם הבאה שתתחברו לרשת.

שלב שני – ביצוע סטרימינג מהאפליקציה שלכם לאחד המכשירים התומכים ב- Devices Charm

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

איך נראית חווית השימוש באפליקציה תומכת Play To

בואו נסתכל איך זה עובד בדיוק. באפליקציית התמונות, הוספה יכולת Play To המאפשרת להזרים את התמונות למכשירים תומכים. ניתן ללחוץ על ה- Devices Charm ולהזרים את המדיה לאחד מן המכשירים התומכים: במקרה הזה בצילום המסך אנו רואים 2 מכשירים תומכים שניתן להזרים אליהם: טלויזיה ומסך מחשב נוסף:

לאחר שבחרנו מכשיר (במקרה הזה טלוויזה), הוידאו יתחיל להתנגן על מסך הטלויזיה, ונוכל לראות שעל המסך שלנו ה- Control יציג היכן הוא מתנגן ואף יאפשר לנו לשלוט בהעברת התמונות:

שימו לב מספר תכונות חשובות:

• ניתן לנצל את הזמן וכבר במהלך הצפייה לטעון את האלמנט הבא בצורה אוטומטית (buffering) ועל ידי כך ליצור חווית שימוש נוחה ומהירה יותר
• אני יכול לשלוט לגמרי מה ה- source  (המכשיר שמבצע הזרמה) יקרין בזמן ש- Device מחובר אליו. במקרה הזה אני מאפשר לטאבלט למשל להיות מעין “שלט” המאפשר לי לדפדף בתמונות. במקרה של יישום מוזיקה נרצה לתת למשתמש לשלוט מהטאבלט או הנייד לשלוט בעוצמת הקול וכו’.
• במקרה שאני עובר לאפליקציה אחרת, סשן החיבור ימשיך לחיות ברקע כל עוד מתנגן סרט או SlideShow. במידה ולא מתנגן, לאחר 10 שניות האפליקציה תכנס למצב suspend והסשן ייפסק.
• המשתמש כמובן יוכל לבחור כמובן לסיים את החיבור על ידי לחיצה על Disconnect  ב- Devices Charm.

איך עובד ה- Play To ב- Windows 8? צד המפתח

זה די פשוט להוסיף את יכולת ה- Play To לאפליקציה שלכם:

1. עבור ה- View הנוכחי צרו אובייקט PlayToManager.
2. הרשמו לאירוע SourceRequested שיודיע לאפליקציה שלכם שהמשתמש לחץ על ה- Devices Charm.
3. הציבו בשדה PlayToSource את אובייקט המדיה אותו אתם רוצים להתקן שהמשתמש בחר. ברגע שהמשתמש יבחר Device, אובייקט המדיה יוזרם אליו.

בואו נראה איך זה נראה בקוד #C:

// Play To Contract

private Windows.Media.PlayTo.PlayToManager ptm = 
        Windows.Media.PlayTo.PlayToManager.GetForCurrentView();

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    ptm.SourceRequested += sourceRequestHandler;
}

private void sourceRequestHandler(
    Windows.Media.PlayTo.PlayToManager sender,
    Windows.Media.PlayTo.PlayToSourceRequestedEventArgs e)
{
    try
    {
        e.SourceRequest.SetSource(mediaElement.PlayToSource);
    }
    catch (Exception ex)
    {
        messageBlock.Text += "Exception encountered: " + ex.Message + "\n";
    }
}

אם אתם רוצים לראות דוגמא שלמה, אתם יכולים להוריד את האפליקציה הזאת שמגיעה עם הקוד המלא.

מתי נממש את ה- Play To Contract?

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

יכולת ה- Play To כבר מוטמעת כברירת מחדל בכל אפליקצייה המציגה וידאו או תמונה, אך יכולת ברירת המחדל תומכת בהקרנה של פריט מדיה בודד ולא ב- SlideShow או Playlist. אם תרצו יכולות אלו ועוד יכולות רבות אחרות – תצטרכו לממש בעצמכם את פיצ’ר ה- Play To על מנת לתמוך בתסריטי שימוש מתקדמים.
שימו לב אגב, שיכולת ה- Play To אינה תומכת במדיה מוגנת DRM.

Play To: עשה ואל תעשה

עשה

• תן חיווי למשתמש שהאפלקציה שלו מבצעת ברגע זה סטרימינג. תן גם מידע לאיזה מכשיר (כמו בתמונה למעלה).
• שמור על סשן החיבור של Play To בחיים כאשר המשתמש עובר Views בתוך האפליקציה.
• עבור Playlist של וידאו או מוסיקה – תמיד הגדר את האלמנט הבא next לניצול מרבי של הביצועים.
• קרא בעיון את ה- MSDN referense המכיל הוראות איך להשתמש ב- Play To.

אל תעשה

• אל תשתמש בכפתורים שונים על מנת לקבוע אם לבצע Play To למכשיר מסויים או להתנתק ממנו.
  התשמש תמיד ב- Device Charm על מנת לתת למשתמש את האופציה להתחבר או להתנתק מ- Device, על מנת שחווית השימוש תהיה עקבית בין כל האפליקציות תומכות פיצ’ר זה.

מה לגבי Play To לדפי אינטרנט?

בדומה לאפליקציות, יכולת ה- Play To מאופשרת אוטומטית בדפדפן IE10. זאת אומרת, ש- IE אוטומטית ינסה לזהות אלמנטים מתאימים להזרמה בדף. הוא יעדיף אובייקטיבים שנמצאים in focus, active in view והוא יתעלם מוידאו קצרים מ- 5 שניות או מתמונות קטנות מגודל של 300 על 300 פיקסל. תוכלו למשל להתחיל לצפות לבאמצעות הנייד שלכם בסרטון וידאו שנמצא באתר שלכם, להזרים אותו בקלות למכשיר הטלויזיה בסלון שלכם ולצפות בו בנוחות.

קראו עוד על כך ב- guidelines and tips for making webpages Play To friendly.

ביצוע בדיקות לאחר שמימשתם את יכולת  ה- Play To

אם הוספתם יכולת הזרמה לאפלקציה שלכם, תוכלו לבדוק בקלות האם היא מתפקדת כראוי באמצעות שימוש בקונסולת ה- Xbox שברשותכם (האופציה הקלה ביותר) או  שימוש ב- Windows Media Player או בקיצור WMP בתור מכשיר התומך ב- Play To:

1. חברו 2 מחשבים לרשת הביתית: אחד יהיה מחשב שמותקן בו WMP והוא ידמה מכשיר התומך ב- Play To. נכנה אותו המקלט.
   המחשב השני יהיה המכשיר בו מותקנת האפליקציה שלכם שממנה נבצע סטרימינג למחשב השני. נכנה אותו המשדר.
   וודאו שהמקלט והמשדר נמצאים על אותה רשת עם Sharing במצב enabled.
2. במקלט, פתחו WMP ותחת תפריט ה- stream בחרו enable remote control of my player..
3. במשדר, לכו ל- PC Settings > Devices < Add a Device והתקינו WMP
4. כעת, מכל אפליקציה שתומכת באופציית ה- Play To, תוכלו לשדר למחשב שהוגדר כמקלט.

מסקנות והיכן להמשיך מכאן

אני מקווה שבעזרת יכולת ה- Play To שהוצגה כאן תוכלו לתכנן אפליקציות עם חווית שימוש עשירה ומהנה יותר.

לשאלות נוספות אתם כמובן מוזמנים לפורום העברי בנושא פיתוח אפליקציות Windows 8 או לפורום פיתוח ב- Windows Phone.

וידאו ותיעוד

• סרטון היכרות קצר על יכולת ה- PlayTo
• הספרייה Windows.Media,PlayTo
• Quickstart: Streaming a slide show using Play To (Metro style apps using C#/VB/C++ and XAML
• Quickstart: Creating a Play To Receiver (Metro style apps using C#/VB/C++ and XAML

בפוסט הקודם דיברתי על ניצול נכון של משאבי הרשת באפליקציות Windows 8, היום נראה את יכולות ה networking יותר קרוב לביטים.

כמו תמיד, הבסיס לעבודה מול רשת הוא עדיין ה socket הותיק והטוב, אלו המחלקות העומדות לרשותנו בספריית Windows.Networking.Sockets :

המחלקה StreamSocket

אובייקט המשמש לשליחה וקבלת נתונים בפרוטוקול TCP (תזכורת: פרוטוקול TCP מבטיח הגעת הנתונים בסדר שנשלחו). בניגוד לאובייקט Socket הרגיל מתוך System.Net.Sockets,  אין לאובייקט StreamSocket את המתודות Read ו- Write ישירות על האובייקט אלה נעבוד עם ה- properties של InputStream ממנו נקרא בייטים שהגיעו ו- OutputStream אליו נכתוב בייטים לשליחה.

המתודה ConnectAsync משמשת לפתיחת ערוץ TCP מול גורם מאזין, אחד הפרמטרים בפתיחת החיבור הוא SocketProtectionLevel המאפשר לנו להגדיר את החיבור כ SSL עבור הצפנת המידע העובר ברשת.

המחלקה StreamSocketListener

האובייקט משמש להאזנה על socket מסויים לפתיחת ערוץ TCP מול יוזם החיבור – אובייקט StreamSocket.

דוגמת קוד מלאה לשימוש ב SteamSocketListener ו StreamSocket נמצאת כאן.

המחלקה DatagramSocket

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

לשליחת הודעות נשתמש ב property של OutputStream בדומה ל StreamSocket, לקבלת הודעות נרשם לאירוע MessageRecieved (לא קיים InputStream כיוון שאין חיבור קבוע בין המקור ההודעות למאזין).

דוגמת קוד מלאה נמצאת כאן.

המחלקה  StreamWebSocket

Web sockets מאפשרים לנו חיבור דו כיווני (full duplex) בין שרת לקליינט בפרוטוקול TCP, היות והתקשורת מתבצעת ב-  port 80/443, כך שמעבר בין firewalls ו- proxies נעשה באופן פשוט ואין צורך בפתיחת פורטים נוספים, כמו כן קיימת תמיכה בפניות cross-domain.

ע"י שימוש ב StreamWebSocket ניתן לתקשר עם שרתים תומכים ב web sockets (נוספה תמיכה ב .Net 4.5, Windows server 2012 ו iiS8.0) מתוך אפליקציות ה- windows 8 שלנו.

אופן השימוש באובייקט דומה ל StreamSocket, המטודה ConnectAsync מקבלת כתובת web socket – ws:// או wss:// (SSL) לפתיחת חיבור לשרת, שליחת וקבלת הודעות מתבצעת באמצעות ה InputStream ו OutputStream.

socket = new Windows.Networking.Sockets.StreamWebSocket();

    socket.connectAsync(uri).then(function () {

        writer = new Windows.Storage.Streams.DataWriter                                         (socket.outputStream);

        writer.writeString("data");

        writer.storeAsync().then(

        function () { socket.close(); socket = null; }, onError);

    }, onError);

דוגמאת קוד מלאה נמצאת כאן.

המחלקה MessageWebSocket

אובייקט המשמש לשליחת הודעה UDP style מעל web socket. אופן השימוש באובייקט זהה ל DatagramSocketUDP .

המחלקה ProximityStreamSocket שהייתה קיימת בגרסת ה preview לתקשרות הוסרה בגרסת ה release של windows 8, עבור פיתוח תקשורת עם מכשירים הנמצאים בטווח קרוב נשתמש בnamespace - Windows.Networking.Proximity כשהמימוש הפנימי משתמש ב StreamSocket, דוגמא למימוש נמצאת כאן.

התקנת Windows store application כוללת בתוכה פתיחת חוק ב firewall ליציאה לרשת דרך הגדרות ה Capabilities בקובץ ה manifest של האפליקציה:

ניתן להגדיר את ה Capabilities הבאים:

• Internet Client – רוב האפליקציות ישתמשו באפשרות זאת לגישה סטנדרטית לרשת.
• Internet Client & Server – מיועד לאפליקציות P2P כמו VOIP, יכולת זו כוללת בתוכה גם את היכולת של Internet Client כך שאין צורך להגדיר את שניהם.
• Private Networks Client & Server – מיועד לאפליקציות intranet עם domain controller או לאפליקציות שמשתמשות ברשתות Home ו Work (לא Public).

לשאלות נוספות אתם מוזמנים לפורום פיתוח אפליקציות Windows 8 בעברית!

הפוסט נכתב ע"י גלעד לוי, יועץ בכיר בקבוצת היועצים של מיקרוסופט (MCS ) העוסקת בייעוץ בתחומי ארכיטקטורה, פיתוח, CRM ו- ALM.

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

אופציה חדשה – shared scaling tier

Windows Azure מאפשרת לכם לארח 10 אתרים/אפליקציות ווב בחינם, בסביבת shared hosting. אתם יכולים לפתח ולבדוק 10 אתרים ללא כל עלות, באופן מיידי, בסביבת משאבים משותפים, כל עוד אתם לא עוברים את המגבלה של 5GB בחודש (או 165Mb ביום) – בהחלט מכובד ומספק יחסית לעלות (מזכירים – ללא עלות!..).

עד עתה, למי שרצה בצורה אלסטית להנות מיתרונות מחשוב הענן ולבצע הרחבת יכולות וגדילה או בקיצור scaling, היה יכול לבצע שדרוג ל- reserved instance בתשלום ולקבל משאבים לא משותפים. זוהי אופציה מצויינת ומומלצת. אך היום, אנו חושפים עוד אפשרות ביניים, במחיר זול יותר – אפשרות לבצע shared scalingבקלות!  מתוך הממשק ניהול לחצו על הטאב “Scale”, בחרו את האופציה שאתם מעוניינים ולחצו על “Save”. תוך מספר שניות יבוצע בצורה אוטומטית Re-Deployment לאתר וסיימנו!

מהו ה- Shared mode החדש?

שלא כמו ב- free tier, אתר שנמצא בסביבת shared, אינו בעל מגבלה כלשהי של גודל או תעבורה. עדיין אתם נהנים מ- 5Gb של תעבורה חודשית חינמית, אך מעבר לכך אתם משלמים pay-as-you-go, בתעריפים הרגילים (זאת אומרת ללא תשלום מראש, אלא תשלום רק עבור השעות שהפיצ’ר הופעל בהן).
אתר שפועל ב- Shared Mode עולה כרגע כ- 1.3 סנט לשעה בלבד (9.36 דולר בממוצע לחודש).

אתר שפועל ב- Shared Mode גם נהנה מיכולות ה- Custom Domain החדשות, המתוארות בהמשך פוסט זה.

מהו ה- Reserved Instance Mode?

זוהי אינה אופציה חדשה, אך חשוב להכיר ולהבין את ההבדלים בינה לבין Shared Instance.
במידה והאתר או האפליקציה שלכם דורשת זאת, אתם יכולים לבצע scaling למכונה וירטואלית (VM) קטנה, בינונית או גדולה, אשר כולה תהיה מיועדת אך ורק לכם, ללא שיתוף של לקוחות אחרים. במכונה זאת תוכלו להקים web site אחד או אפילו 100. אין הגבלה.

אתם יכולים להשתמש ב- instance אחד למכונה הוירטואלית שלכם, או להשתמש במספר Instances. הכל בהתאם לצרכי האפליקציה/אתר האינטרנט שלכם. כמובן שלבצע upsclae או downscale זוהי משימה פשוטה שמבצעים בקלות, על ידי הזזת ה- Slider המתאים.
scaling מעולם לא היה פשוט יותר!

שלא כמו Shared mode, אין תשלום pay-as-you-go, אלא אתם משלמים רק על אותו Instance שאתם צריכים, ללא קשר למספר האתרים שאתם מריצים על אותו Instance.
העלות ל- reserved instance למכונה וירטואלית קטנה מתחיל ב- 8 סנט לשעה.

Pay As You Go – מאפשר לכם לשלם בצורה נכונה ויעילה יותר

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

באמצעות ה- DashBoard, לוח הבקרה של Azure Portal תוכלו לנטר בזמן אמת את צריכת המשאבים של האתרים שלכם ולהחליט את ההחלטות הנכונות. לוח הבקרה מראה לכם את כמות ה- request לשנייה, כמות התעבורה, צריכת הזכרון והמעבד ועוד. שלא לדבר על העבודה שאנו משכללים עוד ועוד את הפורטל כל הזמן.

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

אתם יכולים להרים את האתר שלכם על סביבת Shared. ברגע שיש דרישה, לבצע scaling לסביבת Reserved. ברגע שנגמרה הדרישה – לבצע שוב downscale לסביבת ה- Shared וכו’. כל זאת בלחיצת כפתור וללא שינויים והגדרות או קונפיגורציות. פשוט קל ונוח ומשתלם כלכלית.

תמיכה משופרת ב- Custom Domain

אתרים אשר רצים בסביבת Shared או Reserved, יכולים להנות מהאופציה של custom domain. זאת אומרת, היכולת להצמיד שם מתחם לאתר שלהם, למשל www.mysite.com.

בעדכון האחרון הוספנו תמיכה ב- A-Records, מה שמאפשר לכם שם מתחם עם תחילית ה- WWW או בלעדיה. זהו פיצ’ר שהרבה משתמשים ביקשו. כמו כן שיפרנו את ממשק המשתמש של פורטל הניהול של Azure Web Sites, בכל הקשור לניהול שמות מתחם, כמו גם שיפורים רבים בנושא אימות בעלות על שמות מתחם ושיפור תהליך העברת שמות מתחם קיימים ל- Azure.

ביצוע Deployment באמצעות Git ו- Codeplex או GitHub

אחת מהפיצ’רים הפופולריים ביותר ששחרנו בקיץ היה יכולת ההפצה הישירה ממערכות source control כמו Git או TFS ישירות ל- Azure Web Sites, בקלות רבה כפי שרואים בצילומסך הבא:

אופציית ה- TFS מאפשרת לכם לפתח בקונספט ה- Continuous Integration ולבצע אוטומציה של בדיקות וקומפילציה כל פעם שאתם מבצעים check-in למערכת ניהול הקוד שלכם.

העדכון האחרון מרחיב את היכולות ומאפשר לכל מי שמשתמש ב- Git על גבי CodePlex או GitHub, להנות מאותן יכולות. זוהי יכולת המאופשרת בכל סוגי החבילות של Azure Web Sites, כולל הסביבה החינמית, סביבת ה- Shared וכמובן ה- Reserved.

כאשר תבחרו “Set Up Git Publishing”, תראו את היכולות החדשות מופיעות על המסך:

לחיצה על אחת מן האפשרויות תוביל אותכם לתהליך צעד אחר צעד, אשר יאפשר לכם בקלות “לחבר” את האתר שלכם למערכת ניהול הקוד אשר נמצאת ב- CodePlex או GitHub, כך שבכל פעם שתבצעו Check-In, Windows Azure תוכל “למשוך” את השינויים ולבצע קומפילציה והפצה אוטומטית. נחמד, לא?

סיכום

בעדכונים החשובים שבצענו ל- Windows Azure, אנו רואים יכולות משמעותיות המאפשרות גם למפתחי אתרים קטנים או כאלה אשר אינם דורשים משאבים חזקים, לפתח בקלות אתרים, אשר בעת הצורך יכולים להיות סקלביליים בקלות. כמו כן אנו רואים שיפורים רבים בנושא עבודה בצוות מול Source Control ו- Git, תסריט מאד פופולרי ונדרש. אנו מבטיחים להמשיך לשפר וכבר עכשיו אנו עובדים על שיפורים רבים נוספים שיעלו בקרוב, כמו תמיכה באימ’גים של Windows Server 2012 ו- .net 4.5. השארו מעודכנים!

אין לכם עדיין חשבון Windows Azure??.. פתחו עכשיו אחד בחינם לתקופה מוגבלת.

יש לכם שאלות בנושא פיתוח ל- Windows Azure? כנסו לפורום שלנו בעברית!

יש האומרים שאנשי פיתוח ווב מתחלקים לשתי מחנות. מצד אחד אנשי ה- server side - בדרך כלל הם אוהבים להתעסק בתכנות של לוגיקה ואלגוריתמיקה. מן הצד השני אנשי ה- Front end - אלו בדרך כלל אלופים ב- Java script ובבניית CSSים, עם ידע מעמיק בכל היכולות המיוחדות של כל הדפדפנים על מנת להוציא את מירב הפוטנציאל מכל דפדפן. 

לאנשי ה- server side יש בדרך כלל רתיעה מהעבודה על ה- Front end. הם בדרך כלל מתלוננים על כך שסביבות הפיתוח בתכנות Java Script ו- CSS לא עשירות כמו סביבות הפיתוח ב- C#, וכל הידע בנושא היכולות של הדפדפנים מצוי אך ורק בראשם של המתכנתים ולא בסביבות הפיתוח עצמן.
ובכן, תפיסה זו עלולה להשתנות עם Visual Studio 2012.

מה התחדש ב- Visual Studio 2012

טוב, אין ספק ש- Visual Studio 2012 לבדו לא יהפוך מתכנת Server Side למומחה Front End..  אך הגרסה החדשה של VS עושה צעד משמעותי בהקלת העבודה עבור מי שאינו מומחה Front End ובוודאי עוזרת מאוד למי שכבר מומחה. לראשונה, חוויית השימוש בפיתוח ווב דומה לחווית השימוש בכתיבת קוד Server Side כמו C#. בנוסף, Visual Studio 2012 כולל בתוכו ידע רב בנושא היכולות של הדפדפנים השונים ויודע להציע אוטומטית קוד אשר ממצה את הפוטנציאל הגלום בכל דפדפן.

שינוי באופן אוטומטי של תכונות שמתאימות לדפדפן ספציפי

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

כאשר נראה ליד התכונה (במקרה זה transform) את סימן ה snipet, נוכל ע"י הקשה על TAB לקבל את כל המופעים של תכונה זו בדפדפנים השונים:

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

עימוד אוטומטי לפי היררכיות תוך כדי הקלדה

עורך ה- CSS החדש כולל עימוד אוטומטי לפי היררכיות תוך כדי הקלדה לצורך שמירה על קובץ קריא ומסודר, צריך רק להקליד וה editor כבר מסדר את המבנה ההיררכי. תכונה זו מוכרת בהעורכי קוד של C# או VB.NET והוא עתה זמין גם בעורך CSS.

Picker מובנה בתוך עורך ה- CSS

עורך ה-CSS החדש מציע כלי מובנה לבחירת צבעים ותכונות נוספות שקשורות בתצוגה צבעונית. כאשר כותבים את תכונת ה- color ולוחצים Alt +tab נפתח color picker. הכלי מאפשר בחירה של צבע בצורה ויזואלית בעזרת העכבר והוא באופן אוטומטי יכניס את הקוד המתאים. הכלי מאפשר השוואה של הצבע הקיים עם הצבע החדש ועד שאני לא יבחר הוא לא ישנה. הכלי גם מאפשר לבחור באופן ויזואלי ערכים של תכונות נוספות כמו שקיפות (Opacity) ועוד.

דימוי חוויית ה- types על ידי תמיכה ב- XML Documentation Comments וזיהוי משתנים

אחד החידושים המשמעותיים ביותר לדעתי, הינו התמיכה ב- types של עורך ה- java script.
בניגוד ל- #C , ב- Java Script אין תמיכה מובנית ל- types, אלא שניתן לתת מידע על ה- type של הפונקציה על ידי כתיבת הערות XML Documentation Comments.
עורך ה- Java Script החדש לוקח את זה כמה צעדים קדימה ומשתמש בהערות אלו על מנת לדמה תמיכה מלאה ב- types. תמיכה זו מקלה מאוד את עבודת הצוות ומאפשרת למתכנתים להשתמש בפונקציות שנכתבו על ידי מתכנת אחר באופן יעיל יותר.

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

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

בנוסף לשימוש בהערות, העורך גם מזהה משתנים. Intelitrace חכם בזיהוי סוג המשתנה והתאמה אליו, באופן זה אנחנו חוסכים שגיאות של שימוש בתכונות שלא קיימות במשתנה הדינמי.

יכולת " goto definition"

בנוסף לעורך קבצי javascript הגרסה החדשה כוללת יכולת "goto definition" שהיתה מאד חסרה עד כה לניווט מהיר ויעיל בקוד שלנו. יש לציין שהיה ניתן לקבל את התכונה הזאת בגרסאות קודמות, אך רק ע"י התקנת תוספים ל VS. תכונה זו מאפשרת קפיצה ישירה למקור הפונקציה או להגדרתה הראשונית וכך להבין יותר את משמעותה. אחד השימושים היעילים בתכונה זו היא בשימוש בספריות עזר כגון jquery,dojoודומיהם. בעזרת תכונה זו ניתן לצלול לתוך קוד הספריה שאנחנו משתמשים בה, להבין מה בדיוק היא עושה ולדבג בעיות באתר.

לסיכום

פיתוח ווב באמצעות Visual Studio 2012 הפך להיות חוויה שיותר ויותר דומה לפיתוח #C. התכונות החדשות מגבירות באופן משמעותי הפרודקטיביות, חוסכות הרבה זמן ועוגמת נפש ובנוסף כוללות ידע חשוב על התכונות המיוחדות של הדפדפנים, אשר לא בהכרח מצוי אצל כל מתכנת.
תכונות נוספות שהוסיפו ל VS עבור מתכנתי ה WEB כוללות DOM Explorer חדשPage inspector, javascript console ועוד. ניתן לראות את הרשימה המלאה כאן.

לשאלות נוספות בתחום Web Development, כנסו לפורום שלנו בעברית!

הפוסט נכתב ע"י גלעד לוי, יועץ בכיר בקבוצת היועצים של מיקרוסופט (MCS ) העוסקת בייעוץ בתחומי ארכיטקטורה, פיתוח, CRM ו- ALM.

לאחרונה שמחנו לבשר על שחרור גרסה 5 של Entity Framework ביחד עם Visual Studio 2012, כחלק מן הרעיון לשחרר טכנולוגיות ומוצרים חדשים בו זמנית עם כלי פיתוח.

EF5 מגיעה ביחד עם התקנת VS 2012 או כחבילת Nuget עצמאית.

Entity Framework או בקיצור EF היא כלי Object/Relational Mapping המיועד לעזור למפתחי אפליקציות דוטנט לפתח בצורה קלה ונכונה יותר שכבת גישה לנתונים. לאחרונה EF הצטרף לרשימת הפרוייקטים ששוחררו בקוד פתוח לקהילת המפתחים, פרוייקטים כמו Azure SDK, ASP.NET MVC, Web API ו- Web pages with Razor ועוד היד נטויה..

מה חדש בגרסה 5

EF5 כוללת מספר פיצ’רים חדשים כמו גם תיקוני באגים לגרסה 4.3. רוב הפיצ’רים החדשים רלוונטים רק באם האפליקציה שלכם עושה שימוש ב- .NET Framework 4.5 ששוחררה ביחד עם EF5. בהמשך הפוסט פרטים נוספים אודות התאמה.

חלק מן התכונות והיכולות החדשות בספרייה: (כולל לינקים לסרטונים)

• Enum Support – מאפשר לכם תמיכה של Enums properties במחלקות.
• Spatial data types – יכולים להחשף על ידי המודל שלכם בעזרת שימוש ב- DbGeography ו- DBGeometry.
• ביצועים משופרים. פרטים נוספים כאן.
• CodeFirst יזהה אם על המכונה שלכם ניתן להשתמש ב- LocalDb או SQL Express על מנת לצור בסיסי נתונים חדשים. VS 2012 כולל LocalDB ואילו VS 2010 כולל SQL Express.
• Code First יוסיף טבלאות חדשות לבסיס הנתונים אם הוא לא כולל את הטבלאות שהמודל דורש.

ה- Designer החדש של VS 2012 כולל עוד מספר תכונות חדשות

• DbContext code generation – מודלים חדשים שתייצרו באמצעות ה- EF Designer ייצרו מחלקות POCO שיורשות מ- DBContext כברירת המחדל.
• Multipile Diagram עבור כל מודל – אפשרות לייצר מספר דיאגרמות עבור כל מודל.
• Tabled-Valued Functions אשר קיימות בבסיס הנתונים ניתנות להוספה למודל שלכם בקלות.
• Batch import of stored procedures – בעת חילול הקוד מבסיס הנתונים ניתן להוסיף למודל את כל ה- SP’s.

כנסו לדף הרשמי של EF על מנת ללמוד הכל אודות ספרייה נפלאה זאת.

מה בדיוק השתנה מהגרסה הקודמת

אתם יכולים לבדוק את רשימת הבאגים שתיקנו מגרסת EF5 RC.

גרסת חבילת ה- Nuget תעבוד ללא בעיה מול VS 2012 או VS 2010 ויכולה לעבוד מול .NET Framework 4 או 4.5. שימו לב שחלק מן הפיצ’רים החדשים יעבדו רק לאפליקציות המיועדות לגרסת 4.5 כמו למשל enum support, spatial data types, table-valued functions ושיפורים מסויימים בביצועים.

צריכים עזרה נוספת עם EF?
מומחי הקהילה שלנו ישמחו לעזור לכם בפורום Web Development בעברית!

עורך  ה-CSS החדש שהוצג ב- VS 11 למעשה הינו שכתוב מלא של העורך הישן מגרסה 2010, והוא מתאפיין בשלל יכולות חדשות, ביציבות ובביצועים מעולים. ברגע שתתחילו לערוך קובץ CSS או בלוק Style, תרגישו את ההבדל!

תקן CSS 3.0 הרחיב במידה ניכרת את העושר והמורכבות של ה- style sheets, והעורך החדש מסייע בניהול ובייעול של השינויים הללו. במאמר זה אתאר את החידושים העיקריים בעורך החדש.

השלמה אוטומאטית (Intellisense)

נתחיל בכך שהעורך החדש מאפשר לנו לבחור את תקן ה- CSS שאנו רוצים לעבוד מולו. מאד נוח למי שלא רוצה לעבוד בברירת המחדל (CSS 3.0) אלא בתקן ישן יותר.

לאחר שבחרנו את תקן ה- CSS איתו נעבוד, הדבר הראשון שתראו הוא מספרם המדהים של המאפיינים הזמינים, למעלה מ-250 מאפיינים. אם תתחילו את שם המאפיין במקף ("-"), תקבלו אף מאפיינים הספציפיים של הדפדפנים השונים. העורך כולל תמיכה במאפיינים ספציפיים של דפדפני IE באמצעות ms prefix, דפדפני מוזילה כגון FireFox באמצעות moz prefix וכן דפדפנים המבוססים על מנוע WebKit (תחילית –webkit) כגון Chrome ו-Safari.

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

בנוסף, אם תקלידו את האות הראשונה של כל מילה כשהיא מופרדת במקף, תקבלו קיצור דרך לצמצום הרשימה, כך שניתן לבחור שם מאפיין, כמו text-decoration-color, באמצעות הקלדת האותיות "tdc". כשתקלידו נקודתיים, יופיע שם המאפיין המלא:

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

בנוסף, בזמן ההקלדה ניתן לוותר על המקפים, וההשלמה האוטומאטית עדיין תעבוד כצפוי:

Color Picker

במידה והמאפיין צפוי לקבל ערך מסוג צבע, העורך יקפיץ את ה-Color Picker החדש.

הוא כולל פלטה רגילה של צבעים, יחד עם רשימת צבעים שהיו בשימוש לאחרונה, ו-Color Picker מפורט שנפתח בלחיצה על שני חצים למטה. באופן טבעי, הוא תומך בשמות צבעים סטנדרטיים, ב-hash codes ובצבעים בפורמטים RGB, RGBA, HSL, HSLA, ואף מאפשר לבחור צבע על ידי הצבעה על תמונה.

Smart & Hierarchical Indent

ה-formatter מציג כעת אינדנטציה היררכית (אותה ניתן לכבות בתפריט Tools/Options, לבחירתכם) ההופכת קבצי CSS שופעים במיוחד לקריאים יותר:

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

תמיכה בהאקים

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

גם ההאקים של מאפייני CSS בהחלט זוכים כאן למלוא הכבוד.גם הם זוכים לתמיכת IntelliSense מלאה:

תמיכה ב-Snippets

ה-CSS editor הוא עכשיו אותו העורך שמשמש לעריכת קוד ו-HTML, ככזה הוא תומך ב-Snippets. אלה שימושיים מאוד כאשר, לדוגמא, יש צורך להגדיר מספר מאפיינים עבור דפדפנים שונים. לדוגמא, להגדרת מאפיין column-gap, הקלידו cg ואז לחצו פעמיים tab.

הקלידו "8px" ולחצו על מקש Enter, וערכי כל מאפיינים יוגדרו כ-8px. הסמן יעבור אוטומטית להכנסת המאפיין הבא. כמובן שתוכלו להגדיר Snippets משלכם, בדיוק כמו שהייתם יכולים לעשות זאת עבור קוד.

תמיכה ב-Regions

כמו בכל עורך בתוך Visual Studio, גם כאן תקבלו יכולת הגדרת Regions וכן regions אוטומטיים בהתבבסס על בלוקי הגדרות CSS הניתנים לכיווץ:

קיימת גם תמיכה ב-Inline Regions – regions מיוחדים ללא שם, אשר הגדרתם אינה נשמרת בקוד אלא בקובץ .SUO מקומי, אשר לא מועבר ל-source control. בכך כל מפתח יכול ליצור regions שנוחים לו, מבלי לחשוש שהמפתחים האחרים בצוות לא יאהבו את ה-region. התכונה הזאת קיימת בעורך קוד של Visual Studio החל מגרסת 2010. על מנת ליצור inline region, מסמנים כל בלוק שרוצים ומקישים את הרצף Ctrl-M Ctrl-H (Hide). רצף מקשים Ctrl-M Ctrl-U (unhide) יבטל את ה-inline region:

Block Commenting

בנוסף, קיבלנו גם יכולת להפוך כל בלוק להערה על ידי הקשת רצף מקשים Ctrl-K Ctrl-C (comment), וכן ביטול ההערה על ידי סימון ההערה והקשת רצף מקשים: Ctrl-K Ctrl-U (uncomment). כמו כן, פתיחת הערה על ידי הקלדת /* מיד תשלים את */.

סיכום

הגרסה החדשה של Visual Studio מביאה איתה עורך CSS חדש ועשיר, בעל יכולות חזקות ביותר המשתוות ליכולות של עורך קוד ומשפרות את הפרודוקטיביות הן ביצירת CSS חדשים והן בתחזוקת קבצי CSS קיימים. העורך החדש הופך את החוויה לנעימה הרבה יותר, וזה כבר שווה את מעבר לגרסת Visual Studio חדשה!..

הורידו והתנסו ללא תשלום בגרסה החדשה של Visual Studio 11 Beta

הפוסט נכתב ע"י ולאד אזארכין ,מהנדס תמיכת Premier למפתחים (PFE), וכן מוביל טכנולוגי בתחום פיתוח Web ב-EMEA. בין יתר ההתמחויות, ולאד הוא מומחה בתחום ביצועים, ניטור, health, ו-troubleshooting של מערכות Web. בעבר ולאד היה יועץ פיתוח תוכנה, שימש בתפקידי ניהול טכנולוגי בכירים, הציג בכנסים וניהל קבוצת משתמשים.

אם יש לכם שאלות נוספות בנושא VS, אתם מוזמנים לבקר אותנו בפורום Visual Studio.

בין שלל החידושים של גרסת VS 11 Beta ששוחררה לאחרונה, הוצגה יכולת חשובה בעבודה עם נתונים: Strongly Typed Data Controls. במאמר זה נזכיר את "תבניות" הנתונים הללו ואת השיטה הנוכחית לביצוע Data Binding, נחקור את האתגרים שאנו נתקלים בהם כיום ונראה כיצד באמצעות VS 11 Beta ניתן להתמודד עם האתגרים האלה, לשפר גם את הפרודוקטיביות ואף להינות מביצועים טובים יותר.

הורידו והתנסו ללא תשלום בגרסה החדשה של Visual Studio 11 Beta

Data Binding – המצב כיום

כל מפתח WebForms מכיר את ה"תבניות" (Templates) שקיימות מהגרסה הראשונה של ASP.NET. תבניות אלו מאפשרות לנו לשנות את ה-markup המיוצר על ידי קונטרולים התומכים בהן, כגון GridView או Repeater, בהתאם לנתונים שאליהם הקונטרול מקושר (bound). על מנת לבצע את הקישור משתמשים במתודות עזר ()Eval עבור קישור חד-כיווני, ו- ()Bind עבור קישור דו-כיווני. שתי המתודות מקבלות בתור פרמטר מחרוזת שחייבת להיות זהה לשם המאפיין אליו נרצה לבצע את הקישור:

<asp:GridView runat="server" ID="lateBoundGrid" AutoGenerateColumns="false" >
    <Columns>
        <asp:TemplateField HeaderText="Id">
            <ItemTemplate>
                <span><%# Eval("Id") %></span>                       
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Title">
                <ItemTemplate>
                    <asp:TextBox runat="server" Text='<%# Bind("Title") %>' Id="title"/>                        
                </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Author">
                <ItemTemplate>
                    <asp:TextBox runat="server" Text='<%# Bind("Author") %>' Id="author"/>                        
                </ItemTemplate>
        </asp:TemplateField>
        </Columns>
</asp:GridView>

בזמן ריצה, יתבצע שימוש ב-Reflection כדי "להזריק" את ערכי המאפיינים מתוך האובייקטים המקושרים לתוך ה-markup. להלן הקוד (בצורה מפושטת), שיווצר מאחורי הקלעים כדי לבצע קישור של שדה Title ל- TextBox בשם title:

if ((this.Page.GetDataItem() != null))
{
  title.Text = Convert.ToString(this.Eval("Title"), CultureInfo.CurrentCulture);
}

נזכור כי הקישור מוגדר בעזרת מחרוזות המיצגות את שמות המאפיינים. כלומר, אנו משתמשים ב-Late Bound Expressions, מה שמספק לנו מספר אתגרים:

• חוסר בטחון בזמן קידוד – המחרוזות המוקלדות אינן נבדקות לא בזמן פיתוח ולא בזמן קומפילציה, כך שבמידה וטעינו, את השגיאה נקבל רק בזמן ריצה. 
• מחסור ב-Intellisense – חייבים להקליד את שמות המאפיינים במדויק באופן ידני – אין עזרה של Visual Studio.
• רגישות לשינויים – שינוי בשם מאפיין לא יגרום לשום התראה בזמן פיתוח וקומפילציה – את השגיאה נגלה רק בזמן ריצה (בשאיפה בבדיקות).
• השפעה על ביצועים – בשל שימוש ב-Reflection. למרות שמנגנון ה-Binding עושה שימוש ב-Caching של מאפיינים, וחיפוש המאפיין מתבצע רק פעם אחת על כל פעולת ה-DataBind, עדיין קיימת השפעה על ביצועיי הדפים (עוד על כך בהמשך המאמר).

הפתרון – Strongly Typed Data Controls

גרסת ASP.NET 4.5 המותקנת עם VS 11 Beta, מציגה את Strongly Typed Data Controls בתבניות, המאפשר הגדרת טיפוס האובייקט המקושר באמצעות מאפיין חדש: ItemType.

מאפיין זה קיים בכל קונטרול שיורש מתוך System.Web.UI.WebControls.DataBoundControl (כגון: GridView, FormView, CheckBoxList, DropDownList, ListBox ואחרים), וכן ב-Repeater שלא יורש מהנ"ל. כאשר מוגדר ה-ItemType, אנו יכולים להשתמש בביטוי Item ולקבל השלמה אוטומאטית (Intellisense) ב- VS 11 Beta:

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

מכיוון שכעת אנחנו עובדים Strongly Typed כל הקוד נבדק הן בזמן הקידוד והן בזמן הקומפילציה, וכך נקבל התראה אם משהו לא תקין מיד עם הופעת התקלה:

הביטוי Item מאפשר לנו קישור חד-כיווני. על מנת לבצע קישור דו-כיווני, עלינו להשתמש בביטוי BindItem, שגם הוא מספק לנו Intellisense מלא. להלן הדוגמא שהצגתי קודם אך הפעם עם שימוש ב-Strongly Typed Data Controls:

<asp:GridView runat="server" ID="stronglyBoundGrid" 
AutoGenerateColumns="false" ItemType="BookStore.Book" >
    <Columns>
        <asp:TemplateField HeaderText="Id">
            <ItemTemplate>
                <span><%# Item.Id %></span>                       
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Title">
                <ItemTemplate>
                    <asp:TextBox runat="server" Text='<%# BindItem.Title %>' Id="title"/>                        
                </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Author">
                <ItemTemplate>
                    <asp:TextBox runat="server" Text='<%# BindItem.Author %>' Id="author"/>                        
                </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

ומה לגבי הביצועים? בשימוש ב-Item, כלומר בקישור חד-כיווני, שהוא השימוש הנפוץ ביותר, אין שימוש ב-Reflection. מנוע ה-ASP.NET יתרגם את הקישור לקוד הדומה לקוד הבא:

Item = ((BookStore.Book)(Container.DataItem));            
target.SetDataBoundString(0, Convert.ToString(Item.Id, CultureInfo.CurrentCulture));

מהניסיונות שביצעתי*, הפעלת ()DataBind תוך שימוש ב-Item עורכת כמחצית מהזמן בהשוואה לשימוש
ב- ()Eval. לצערי, כאשר משתמשים בקישור דו-כיווני, המנגנון נשאר זהה לשימוש ב-()Bind, כך שלא מרוויחים בביצועים, אך עדיין מקבלים השלמה אוטומאטית.

* הנתונים הנ"ל הן תוצאות של ניסויים שלי בלבד ואינם נתונים רשמיים. בניסויים אחרים ובתסריטים אחרים התוצאה עשויה להיות שונה.

הורידו והתנסו ללא תשלום בגרסה החדשה של Visual Studio 11 Beta

הפוסט נכתב ע"י ולאד אזארכין ,מהנדס תמיכת Premier למפתחים (PFE), וכן מוביל טכנולוגי בתחום פיתוח Web ב-EMEA. בין יתר ההתמחויות, ולאד הוא מומחה בתחום ביצועים, ניטור, health, ו-troubleshooting של מערכות Web. בעבר ולאד היה יועץ פיתוח תוכנה, שימש בתפקידי ניהול טכנולוגי בכירים, הציג בכנסים וניהל קבוצת משתמשים.

בתאריך 9.2.2012 קיימנו במיקרוסופט ישראל ברעננה יום עיון בנושא:
Build Modern WebApplications with HTML5, CSS3 and JavaScript
שעסק בנושא החם ביותר היום – HTML5, התקן החדש שנבנה בימים אלו לבניית מערכות אינטרנטיות.
כל מפתח WEB חייב להכיר את שפת התגיות HTML על מנת לעצב את מבנהו של התוכן המוצג על גבי דפי אינטרנט ותקן HTML5 כולל בתוכו שינויים רבים שיאפשרו (וחלקם מאפשרים כבר היום) לשנות את כללי המשחק בבניית מערכות אינטרנטיות אשר מבוססות HTML, JavaScript וCSS.

חלק א' של יום העיון: פיתוח אפליקציות WEB באמצעות HTML5, CSS3, ו- JavaScript

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

קישור ישיר להורדת הסרטון.

חלק ב' של יום העיון: HTML5 API’s

בחלק זה של המפגש דנו ב API's החדשים בהם HTML5 עושה שימוש כגון: Canvas, Geolocation, Web Storage ועוד.

קישור ישיר להורדת הסרטון.

המצגת וחומרים מיום העיון נתנים להורדה כאן.

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

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

למי שלא יודע, הרעיון לכנס MIX נולד בשנת 2005 בסיומה של ועידת PDC05, כאשר שחררנו באותה תקופה את IE6, את פלטפורמת הווב ועוד מהלכים אשר גרמו לנו להבין שקהילת מפתחי הווב אולי צריכה כנס אשר יתמקד בטכנולוגיות המעניינות אותה. 4 חודשים מאוחר יותר נולד כנס MIX06 הראשון בלאס וגאס ומאז נשאר להתרחש שם כל שנה.

ב-6 השנים האחרונות קרו דברים נפלאים בכנס- MIX ומסביבו, אך במהלך השנים קרו גם מספר תהליכים אשר גרמו במהלך השבוע ל- Tim O’Brien מנהל חטיבת המפתחים במיקרוסופט העולמית להכריז בצורה רשמית:

לא יהיה MIX 2012.

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

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

אז מה כן יהיה?

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

מקווים שנראה כמה שיותר ממכם בכנס הבא!