ng-conf 2015 – סיכום היום השני

בהמשך לסיכום היום ראשון של ng-conf 2015, הגיע הזמן לסכם גם את יום ההרצאות השני.

Keynote

הועבר ע"י: MIŠKO HEVERY ו- RADO KIROV

Keynote מעולה שבו סקרו מישקו ורוד את אנגולר 2. מישקו התחיל ואמר שאין סיבה לחשוש מהשינויים רק כי הם חדשים ולא מוכרים לנו, ציין שהתחביר של אנגולר 2 פשוט יותר מהתחביר של אנגולר 1 ויש משמעותית פחות דברים לזכור, הוא הסביר את המוטיבציה לעבוד עם properties במקום attributes ומה בכלל ההבדל ביניהן ואמר שבאנגולר 2 נוכל להשתמש ולהעזר בכלים הרבה יותר חזקים ומועילים בזכות כל השינויים שנעשו. באמצע ההרצאה מישקו הזמין את רוד, חבר נוסף בצוות של אנגולר, וביחד הם הציגו אפליקציה שכתובה באנגולר 2 – במהלך ההדגמה הם הסבירו את התחביר החדש והראו כיצד הדברים עובדים.

Binding to the Cloud with Falcor

הועבר ע"י: JAFAR HUSAIN

ג'פר הוא Tech-Lead ב- Netflix וחבר בקבוצת TC39 והוא דיבר על ספריה שהם מפתחים ב- Netflix המשלבת ארכיטקטורה חלופית ל- MVC. הוא העלה טענה שבעקבות אופן השימוש באפליקציות וואב כיום – MVC לא באמת מצליחה במלאכת ה- Separation of Concerns, ה- View תלוי ב- Controller ולכן שינויי תצוגה רבים מחייבים גם שינויים ב- Controller. הוא הציג ספריה שהם עובדים איתה בנטפליקס בשם Falcor המפשטת את צורת העבודה מול השרת ומאפשרת לנו לעבוד עם המידע כאילו הוא נמצא אצלנו מקומית. הוא סיים עם משפט שבו אמר: "[באינטרנט של היום] אתה כבר לא מקבל דברים, אתה עושה דברים" והדגיש את הצורך בשינוי צורות החשיבה והעבודה שהיו קיימות בשנים האחרונות.

TypeScript and Angular 2.0

הועבר ע"י: JONATHAN TURNER

גו'נתן הוא ה- Program Manager של TypeScript במיקרוסופט, בהמשך להכרזות מאתמול על השקת אנגולר 2 והמעבר ל- TypeScript, הוא נתן סקירה נוספת של השפה וכתב איתה אפליקצית אנגולר 2. גו'נתן הסביר על הפיצ'רים השונים בשפה ואיך הם עובדים ואז קפץ לדמו שבו הוא כתב אפליקצית Todo list באנגולר 2 באמצעותה, במהלך הדמו הוא המשיך להסביר איך עושים דברים וסיים עם התוכניות לעתיד והפיצ'רים הנוספים שיגיעו ממש בקרוב, ביניהם תמיכה רחבה יותר ב- ES6 ובגרסה הבאה גם פיצ'רים מ- ES7.

What's new in ngAnimate

הועבר ע"י: MATIAS NIEMELÄ

מטיאס, חברנו מ- yearsofmoo, דיבר על אנימציות באנגולר ובעיקר על השינויים שנעשו ב-ngAnimate במסגרת אנגולר 1.4. הוא הציג את angular.animate, הסביר על callbacks שניתן להעביר על מנת לזהות מתי נגמרת אנימציה, הציג את הפיצ'רים anchors ו- ngTimeline וסקר יכולות נוספות שצפויות להגיע בגרסאות 1.5 ו- 2 של אנגולר.
קישור למצגת: http://yom.nu/ng-conf-2015-slides

Building Platforms with Angular

הועבר ע"י: JEN BOUREY

ג'ן היא ה- Tech-Lead של Google's Cloud Platform והיא דיברה על האתגרים בפיתוח אפליקציות גדולות ובעיקר על שיתוף קוד, מניעת התנגשויות וביצוע שינויים רוחביים. במהלך ההרצאה ג'ן הציגה את הספריות השונות שהם משתמשים בהן, ציינה שהפרויקט שלהם כולו כתוב באנגולר והוא מכיל כ- 200,000 שורות קוד ו- 25mb של ג'אווה-סקריפט. היא גם הציגה את מבנה הצוותים, הסבירה על מערכת ניהול החבילות שלהם, הציגה את אסטרטגית המעבר שלהם לאנגולר ולבסוף את הבדיקות שהם עורכים לאחר כל שינוי שנעשה בקוד.

Reactive all the things

הועבר ע"י: BEN LESH ו- MARTIN GONTOVNIKAS

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

Angular 1.3 meets Angular 2.0

הועבר ע"י: MICHAŁ GOŁĘBIOWSKI ו- ANDREW JOSLIN

מיכאל ואנדרו הציגו דמו שבו הסבירו כיצד לבצע מיגרציה מאנגולר 1.3 לאנגולר 2.0. הם המליצו להשתמש ב- ES6 כבר היום על מנת להקל על התהליך, להעזר בכלים כמו babel, לעבוד עם הגרסאות החדשות ביותר של אנגולר ולאמץ את הראוטר החדש. במהלך הדמו הם העבירו Service פשוט מאנגולר 1 לאנגולר 2 וסקרו את השינויים שנעשו במסגרת ההמרה, לאחר מכן הם עשו אותו דבר גם עם Directive ובנוסף הציגו את angular.component שעשוי להקל עלינו עוד יותר.

Digging into Angular Style Guide Decisions

הועבר ע"י: JOHN PAPA

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

Better i18n for your Angular apps

הועבר ע"י: CHIRAYU KRISHNAPPA ו- PASCAL PRECHT

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

Badges? We don't need no stinkin' badges!

הועבר ע"י: LUKAS RUEBBELKE ו- GEOFF GOODMAN

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

Build an Angular Material App

THOMAS BURLESON & NAOMI BLACK

הרצאה מעולה על Angular Material מאת תומאס ונעמי מגוגל. הם סקרו את הפרויקט, הסבירו למה חשוב לשים לב כשעובדים עם Material Design וסקרו את הפיצ'רים השונים של הספריה, ביניהם ה- Directives המובנים, התפריטים וההתנהגות הרספונסיבית. הם גם הציגו את הדוקומנטציה, הציגו את התמיכה של הספריה בנגישות, סיפרו מה עדיין חסר, הבטיחו שישלימו את הרוב עד הקיץ ולבסוף ציינו שהם עובדים במרץ על מנת לתמוך גם באנגולר 2. מי שרוצה להתחיל לעבוד עם הספריה, יש פרויקט ב- ES5 ופרויקט ב- ES6 שרק מחכים לכם.

Angular + React = Speed

הועבר ע"י: DAVE SMITH

דייב הציג את הבדלי המהירות ביוז-קייס מסויים בין אנגולר, React ואנגולר + React ביחד. הוא התחיל עם הסבר של 90 שניות על מה זה React והציג אפליקצית לוח שנה שבה פיצ'ר מסויים מומש במספר דרכים שונות. הוא השווה בלייב את המהירות בין הגרסאות השונות, הסביר שהיתרונות העיקריים ב- React במקרה הזה הם המהירות בזמן העלייה הראשוני ובשינויים, בעוד החסרונות הם בגודל הספרייה הגדול יחסית של 500kb ובהוספת framework נוסף לפרוייקט. לסיום דייב הציג את אותו רכיב בדיוק באנגולר 2, והמהירות הייתה מדהימה.

Change Detection Reinvented

הועבר ע"י: VICTOR SAVKIN

ויקטור סקר את הארכיטקטורה החדשה באנגולר 2 בכל מה שקשור לזיהוי שינויים וזרימתם במערכת. הוא הסביר את המבנה הפנימי החדש ומדוע לא צריך יותר מ- digest בודד על מנת לעדכן את כלל המערכת. הוא הסביר את היתרונות בשימוש ב- Immutable Objects ו- Observables באלגוריתם החדש ואמר שהוא מהיר פי 3-10 יחסית לאנגולר 1.3. ויקטור גם ציין שלא חייבים להשתמש ב- Immutable Objects או ב- Observables ואפשר גם בלעדיהם, ומי שרוצה יכול אפילו לשלב גם וגם. הוא גם כתב בעבר פוסט בנושא שמי שמעוניין מוזמן לקרוא.

(Super)Power Management

הועבר ע"י: IGOR MINAR

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

Angular Team Panel/QA

הועבר ע"י: GOOGLES

בסיישן שאלות ותשובות הצוות ענה על מגוון שאלות שהופנו אליהם מהקהל באולם ובאינטרנט. מס' דברים מעניינים שנאמרו הם שחשוב להם לתמוך ב- lazy loading של קבצים והם יעבדו על מנת שזה יהיה קיים כבר באנגולר 1.4, הם ביקשו עזרה מהקהילה עם תיקוני באגים ופיתוח של פיצ'רים נוספים ולשאלה על העלמותם של ה- Filters הם השיבו שהם לא נעלמו ובאנגולר 2 הם נקראים Pipes, למי שחשש.

לסיכום

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

את הפלייליסט עם כל ההרצאות ניתן למצוא כאן:

ng-conf 2015 – סיכום היום הראשון

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

Welcome

הועבר ע"י: BRAD GREEN ו- IGOR MINAR

בראד הינו מנהל פיתוח בגוגל, בין היתר הוא מנהל את הפרוייקט של אנגולר, ואיגור כרגע מוביל את אנגולר 2. שתי הכרזות משמעותיות קיבלנו מהם בהרצאה הזו, הראשונה הייתה בנוגע ל- Angular 2 – שוחררה גרסאת Alpha Preview והושק אתר חדש. והשנייה הייתה בנוגע ל- AtScript – גוגל תשתף פעולה עם מיקרוסופט, AtScript ישולב לתוך TypeScript וישוחרר ב- TypeScript 1.5. בנוסף, נאמר שהקבוצות של Angular ו- Angular Dart יאוחדו, כעת כולם יעבדו עם TypeScript ובסופו של דבר הקוד של אנגולר יומר הן ל- JavaScript והן ל- Dart, מה שיאיץ את פיתוח הפריימוורק ויעשה טוב לכולם. שמחתי לשמוע גם שהגרסה החדשה של אנגולר תושק עם Style Guide רשמי, תקח את עניין ה- performance ברצינות ותגיע עם Immutable data structures.
בנוגע למיגרציה מאנגולר 1 לאנגולר 2, מה שמדאיג ומפחיד לא מעט מתכנתים בקהילה, בראד ציין כי בגוגל יתחילו להעביר אפליקציות פנימיות לגרסה החדשה בסביבות חודש מאי, במהלך הדרך הם ילמדו, יסיקו מסקנות וימשיכו לעדכן את הקהילה. נראה שהם לוקחים את העניין הזה ברצינות.

State of 1.x

הועבר ע"י: PAWEL KOZLOWSKI ו- LUCAS GALFASO

פבל ולוקס סקרו את אנגולר 1 מבחינת הקהילה, המצב הקיים והחזון של הפרויקט לעתיד. הם ציינו ש- 50% מה- commits באנגולר בעצם הגיעו מהקהילה, הכריזו על 2 חברי ליבה (core contributors) חדשים, ביניהם נציג ישראלי ראשון – שחר תלמי. הם גם דיברו על כל מיני שיפורים ושינויים שנעשו (מפורטים במצגת בהמשך), אמרו שגרסת 1.4.0-RC.0 תגיע כבר בשבוע הבא והמליצו לכולם לעדכן לגרסאות החדשות ביותר ולא להשאר מאחור. בנוסף הם גם דיברו על המשך הפרויקט לגרסא 1.5 ואולי גם 1.6 וציינו שחלק מהפיצ'רים בגרסאות הבאות יהיו בעצם פיצ'רים שילקחו מאנגולר 2, כך שגם מי שישאר עם הגרסא הקיימת יוכל לקבל חלק מהפיצ'רים המגניבים של הגרסא החדשה. לסיכום, הם קראו לכולנו לקחת חלק פעיל בפרויקט, להציע פיצ'רים, לעבוד על באגים ולעזור לפרויקט לצמוח.
קישור למצגת: http://goo.gl/G5Kwkw

The new router

הועבר ע"י: BRIAN FORD

בריאן הוא הבחור שאחראי על הראוטר החדש. הוא התחיל עם דוגמאת קוד שבה הוא סקר אותו, עבר על ה- API והסביר איך הוא עובד כבר בגרסא 1.4. הוא אמר שהם ראו שהמון אנשים מאוד אוהבים את ui-router והם לקחו ממנו השראה בתכנון הראוטר החדש, ואפילו ציין שהם יעבדו על מיגרציה מ- ui-router במטרה להקל על הקהילה ולעזור לכולם לשדרג. הוא הוסיף שהראוטר החדש משתמש ב-route-recognizer, נתן קרדיט ל- Ember שפיתחו אותו ואמר תודה ל- Rob Eisenberg ולחברי צוות נוספת על עזרתם. למי שלא יכול לחכות, עלתה גם דוקומנטציה ראשונית.

Prototyping with Angular? YES!!

הועבר ע"י: KELLY KNIGHT ו- DIRK GINADER

קיילי ודירק הם UX Engineers בגוגל והם דיברו על איך הם עובדים עם אנגולר ליצירת prototypes והציגו מס' שיטות שהם משתמשים בהן. הם דיברו על angular-google-analytics – פרויקט שעוזר לשלב את Google Analytics באפליקציות אנגולר בקלות, הזכירו את cubic-bezier – אתר שמאפשר לבנות אנימציות ולראות אותן בלייב, הם הראו כיצד הם בנו prototypes הניתנים לשינוי בקלות באמצעות ה- URL, ואפילו הציגו prototypes הנשלטים באמצעות קול (ע"י Web Speech API), הם גם דחפו לשימוש ב- ngAria, מודול המשפר את נגישות האפליקציות שלנו בצורה כמעט אוטומטית ומאוד פשוטה. לסיום הם המליצו להשתמש ב- Google Sheets בתור דטא-בייס ל- prototypes בשל היותו מאוד פשוט וקל להטמעה.

Fast from the Start

הועבר ע"י: JEFF CROSS

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

Creating Container Components with Web Components and Angular

הועבר ע"י: KARA ERICKSON ו- RACHAEL L MOORE

ריצ'ייל וקרה הסבירו כיצד הן משתמשות ב- Directives במהלך העבודה שלהן. הן הסבירו קצת על Web Components ו- Shadow DOM והציגו יוז-קייס לדוגמה, הן סיימו עם השוואה בין Directives באנגולר 1 ל- Component Directives באנגולר 2.

ngTasty

הועבר ע"י: LEONARDO ZIZZAMIA

בהמשך להרצאה על performance ו- benchpress, לאונדרו הסביר כיצד יש להתייחס לביצועים כאשר מפתחים רכיבים שצריכים לעבוד מהר. הוא הסביר כיצד לתכנן, למדוד ולזהות מקומות לשיפור ונתן סיישן hands-on שבו הוא הריץ את benchpress על ngTasty והסביר כיצד זה עזר לו במהלך הדרך כשהוא פיתח את הספריה.

TypeScript and ES6

הועבר ע"י: DAN WAHLIN ו- ANDREW CONNELL

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

Community Building How-To: Make More Angular Devs Now

הועבר ע"י: JUDY TUAN

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

ng-wat?

הועבר ע"י: SHAI REZNIK

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

Accessibility Design Made Easy

הועבר ע"י: JULIE RALPH

ג'ולי מובילה את Protractor, כלי לבדיקות E2E המיועד לאפליקציות אנגולר. במהלך ההרצאה גו'לי דיברה על plugins ל- Protractor והסבירה כיצד הם עובדים, אך עיקר ההרצאה היה בנוגע לנגישות (Accessibility) – ג'ולי הסבירה מדוע המקום הנכון לבצע בדיקות נגישות זה בבדיקות ה- E2E, הסבירה כיצד להשתמש בפלאגין לבדיקות נגישות החדש, כיצד להפעיל את האפשרות ב- Chrome DevTools ועברה בקצרה על הפלט של בדיקה לדוגמה שהיא הריצה על הדוקומנטציה של אנגולר.
קישור למצגת: http://goo.gl/wgXRwb

Why Realtime Matters

הועבר ע"י: JAMES TAMPLIN

ג'יימס הסביר מה זה בעצם Real-time data, סקר את Firebase והסביר כיצד הוא עובד. במהלך ההרצאה ג'יימס הכריז על ההשקה של AngularFire 1.0 ופירט על הפיצ'רים השונים שהספריה מכילה. פיצ'ר נחמד שהוצג היה בהקשר של infinite scroll והוא הוצג באפליקציית ionic – ג'יימס הראה כיצד במס' שורות קוד בודדות הוא משלב pagination ומושך דינאמית מהשרת מידע נוסף במהירות ובקלות. לסיום ג'יימס הציג 2 פיצ'רים נוספים – הראשון נקרא Private Backups והוא מאפשר לנו לייצא את כל המידע שלנו מ- Firebase, השני הוא SEO Support והוא מיועד לשפר את ה- SEO של האפליקציה שלנו ולהפוך אותה נגישה יותר עבור מנועי החיפוש השונים.

ngModelOptions in 5 minutes

הועבר ע"י: KENT C. DODDS

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

How to Teach Angular to your Kids

הועבר ע"י: KATYA EAMES

קטיה פתחה במשפט: "היי, קוראים לי קטיה אימס, אני בת 16 ואני מתכנתת אנגולר" וזכתה למחיאות כפיים מהקהל, לאלו מכם ששמו לב לשם המשפחה שלה – כן, היא הבת של ג'ו אימס, אחד ממארגני ה- ng-conf. קטיה הסבירה כיצד היא נכנסה לתחום, איך היא השתלבה בזה במסגרת בית הספר, כיצד הגיעה לכתיבת האפליקציה הראשונה שלה באנגולר ואיך גם אנחנו יכולים ללמד את הילדים שלנו אנגולר. קטיה רצתה שנזכור 3 דברים עיקריים מההרצאה שלה: (1) אנגולר הוא דרך מצויינת ללמד ילדים לתכנת כי הוא מאוד מעניין, (2) אנחנו חייבים להיות מעורבים בתהליך (3) ושאנחנו אכן יכולים ללמד את הילדים שלנו אנגולר.

Run digest cycle in web worker

הועבר ע"י: DR. GLEB BAHMUTOV PHD.

ההרצאה של גלב התמקדה ב- scope וב- digest cycles באנגולר בהקשר של ביצועים. הוא הראה מקרה שבו ה- digest היה ארוך ותקע את הממשק, לאחר מכן הציג פתרון שבו הוא מעביר את ה- digest ל- web worker – כך שהוא ירוץ על thread אחר וישאיר את הממשק רספונסיבי.
קישור למצגת: http://slides.com/bahmutov/run-digest-cycle-in-web-worker

Sasqwatch is real

הועבר ע"י: WILLIAM SCOTT MOSS

וויליאם דיבר על performance ובעיקר על watchers ו- digest cycles. הוא הדגיש שלא צריך להשתמש בכל מה שאנגולר נותן ושצריך להתייחס להשפעות של היכולות המובנות על הביצועים – בהקשר הזה הוא עקץ עם משפט שמסכם את זה בצורה נהדרת לדעתי: "[כשאתם עושים הכל עם אנגולר] המשתמשים שלכם מאוכזבים, אבל לפחות המתכנתים שלכם עושים חיים". וויליאם המשיך והציג אפליקציה אמיתית שדרכה היא המחיש את הדברים, הוא פירט בנוגע לדברים שצריך ולא צריך לעשות, הציג best-practices והמליץ להשתמש באופטימיזציות הקיימות באנגולר 1.3 על מנת לשפר את ביצועי האפליקציה שלנו.

Ionic + Angular: Superpowers for Mobile App Development

הועבר ע"י: ADAM BRADLEY

אדם, היוצר של Ionic, הציג את המטרות והחזון של הפרויקט. הוא הציג מס' פיצ'רים מעניינים כמו collection-repeat העובד בדומה ל- repeat אך מרנדר רק את הפריטים המוצגים על המסך (כמו ב- UICollectionView של iOS), הסביר כיצד עובד ה- Cached views והציג פיצ'ר בשם "Swipe to go back" המאפשר לחזור אחורה באמצעות swipe כמו באפליקציות נייטיב. אדם הציג המון פיצ'רים נוספים, נתן live demo עם אפליקציה לדוגמה, הציג את ionicions – פונט לאייקונים, הראה כיצד ניתן לעבוד עם ה- console כאשר עובדים עם מכשירים אמיתיים ואימולטורים, הציג את ionic.io ואת השירותים החדשים שבאופק, הכריז רשמית על השקת Ionic 1.0 והדגיש שהצוות שלו יעבוד עם הצוות של אנגולר במטרה לתמוך גם באנגולר 2.
קישור למצגת: http://adamdbradley.github.io/ionic-present/

Angular Behind The Scenes

הועבר ע"י: RODRIC HADDAD

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

לסיכום

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

עדכון: למי שמעוניין, סיימתי לכתוב גם את סיכום היום השני של ng-conf 2015.

את הפלייליסט עם כל ההרצאות ניתן למצוא כאן:

כתיבת אפליקצית AngularJS 1.3 ב- ES6

כבר כמה חודשים שאני נלחם בחשק מוזר להתחיל לכתוב קוד ב- ECMAScript 6. היות ובשנתיים האחרונות אני עובד בעיקר עם AngularJS ולאור ההכרזות על AngularJS 2.0, זה בדיוק הזמן להתחיל ואפילו לקחת את האתגר צעד אחד קדימה – לכתוב אפליקצית AngularJS ב- ES6.
אז קדימה, מתחילים.

על מה נדבר?

אפשר לדבר על המון דברים בנוגע ל- AngularJS, באופן אישי אני מעדיף מאמרים פרקטיים ועניניים, אז מאמר בנוסח "למה אנגולר 2.0 זה אסון" לא תמצאו כאן, זה גם לא "מבוא ל- ES6". בחרתי לדבר על מיגרציה מ- AngularJS 1.x ל- AngularJS 2.0, או בעיקר על הכנה מקדימה למיגרציה שתבוא לידי ביטוי בשכתוב האפליקציה שלנו ב- ES6. כן, לכתוב ב- ES6 כבר היום, עם AngularJS 1.3 ובדפדפנים שאפילו לא לגמרי תומכים בתקן. אני רוצה לבדוק האם זה אפשרי, ואם כן – האם זה גם כדאי.

למה עכשיו?

מי שמפתח ב- AngularJS וסביר להניח שגם מי שלא, בוודאי שמע את ההכרזות האחרונות על AngularJS 2.0. מעבר לעובדה שרוב הדברים שאנחנו מכירים כיום כבר לא קיימים בגרסה החדשה, מסתבר שהפיתוח של הספריה כבר לא יהיה ב- JavaScript כפי שאנו מכירים אותה כיום – אלא ב- AtScript, שזו מעין גרסה משופרת של השפה, המתוארת כ-

AtScript = ES6 + Types + Annotations + Introspections

אומנם בצוות של אנגולר משתדלים לציין בכל הזדמנות שאנחנו בתור מפתחים לא חייבים לעבוד עם AtScript או אפילו עם ES6 על מנת להשתמש באנגולר 2.0, אומרים שנוכל לעשות הכל גם עם ES5 הישנה והמוכרת, אבל באותה נשימה גם אומרים שזה בהחלט יהווה יתרון וכדאי להשתמש ב- AtScript (שלמעשה, מדובר ב- ES6 עם כל מיני תוספות כפי שכבר הבנו).

מה המוטיבציה?

המטרה העיקרית היא לאפשר מעבר חלק ופשוט יותר בעתיד הן ל- AngularJS 2.0 והן ל- AtScript (במידה ונרצה) או לפחות ל- ES6. מתישהו יהיה כדאי לעבור ל- ES6 בכל מקרה, אז בואו נבדוק האם זה אפשרי כבר היום.

היכון, הכן, צא!

אתחיל עם העובדה שהדפדפנים היום לא לגמרי תומכים ב- ES6 בצורה רחבה, כך שאנחנו לא יכולים פשוט לכתוב ב- ES6 ולהריץ כמו שאנחנו רגילים, אנחנו זקוקים לאיזשהו כלי שיגשר על הפער הזה. ישנם מס' כלים המאפשרים לנו לכתוב ב- ES6 והם למעשה דואגים להמיר את הקוד שלנו (כל אחד בצורה שלו) לקוד שיכול לרוץ כבר היום, חלקם עושים את זה ב- runtime ואת חלקם צריך לשלב בתהליך ה- build, לא אכנס לזה יותר מדי כרגע – רק אגיד שאני בחרתי ב- Traceur ובמקרה הזה אני מריץ אותו ב- runtime.

כ- PoC בחרתי באפליקציה די פשוטה המכילה View, Controller ו- Service בסיסיים.
אני יוצא מנקודת הנחה שאתם כבר מכירים את התחביר של ES6, אם לא – למה אתם מחכים? בכל אופן, במקרה הזה שילוב של היכרות עם שפות נוספות והיגיון בריא אמור להספיק גם למי שלא מכיר את השפה.

נתחיל עם ה- Service (קובץ: alerts.service.js):

export class Alerts {
  
  constructor($window) {
    this.$window = $window;
  }
  
  fire(alert) {
    this.$window.alert(alert);
  }
}

ה- Controller (קובץ: main.controller.js):

export class MainController {
  
  constructor(Alerts) {
    this.Alerts = Alerts;
  }
  
  get headerTitle() {
    return 'Hello ECMAScript 6!';
  }
  
  buttonClick() {
    this.Alerts.fire('Awesome!');
  }
}

איתחול האפליקציה (קובץ: app.js):

import {MainController} from 'main.controller';
import {Alerts} from 'alerts.service';

angular.module('app', [])
  .controller('MainController', MainController)
  .service('Alerts', Alerts);

ולבסוף ה- View (קובץ: index.html):

<!DOCTYPE html>
<html ng-cloak>

  <head>
    <title>AngularJS 1.3 application written in ECMAScript 6</title>
  </head>
  
  <body ng-controller="MainController as Main">
  
    <h1 ng-bind="Main.headerTitle"></h1>
    <button type="button" ng-click="Main.buttonClick()">Click me!</button>
    
    <!-- traceur -->
    <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
    <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
    <script>traceur.options.experimental = true;</script>
    
    <!-- angularjs -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
    
    <!-- bootstrap our application -->
    <script>
      System.import('app').then(function(){
        angular.element(document).ready(function() {
          angular.bootstrap(document, ['app']);
        });
      });
    </script>
    
  </body>
  
</html>

זה עובד, אבל אתם לא חייבים להאמין לי – תראו בעצמכם ב- Plunker הבא.

מסקנות

כפי שניתן לראות, עשינו את זה די בקלות. חדי העין מביניכם אפילו ישימו לב שמלבד שמות הארגומנטים שאנחנו מעבירים ל- constructor, וגם את זה ניתן לשנות בקלות אם רק רוצים – ברמת ההגדרה למחלקות שלנו אין שום מושג שהן רצות בתוך AngularJS, השיוך היחיד שלהן לספריה נעשה ב- app.js ששם אנחנו מעבירים אותן ל- AngularJS בתור Controllers/Services בהתאם לצורך. אפשר לעשות את זה גם ב- ES5 – אך לדעתי ב- ES6 זה הרבה יותר אינטואיטיבי, פשוט ומתבקש.

ניתן לשים לב שאני נותן ל- Traceur להמיר את הקוד ל- ES5 ב- runtime, יש לזה השלכות מבחינת ביצועים וסביר להניח שחלקכם ירצו לבצע את ההמרה הזו מבעוד מועד. התייחסתי לזה רק בחצי משפט במהלך הפוסט, אז אזכיר שוב שניתן לבצע את ההמרה בשלב ה- build של הפרויקט ולהעביר לדפדפן את הקובץ הסופי.

לסיכום

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

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