MasterScripter

7 דברים שלמדתי בכנס Angular UP 2017

ממש לפני שבועיים (ויום, אם לדייק) קרו שני דברים מאוד מעניינים.
קודם כל, זה היה יום הולדתי! אם לא איחלתם לי מזל טוב, זה בסדר. אני מקבל איחולים בשוטף פלוס 30 🙂

הדבר השני שקרה באותו יום והיה מסקרן לא פחות היה כנס Angular UP 2017!
במרכז הכנסים של מלון דיוויד אינטרקונטיננטל בתל אביב התכנסו להם למעלה מ700 מפתחים שהמשותף לכולם היה האהבה לפרימוורק הפופולרי – אנגולר.
בכנס לקחו חלק למעלה מ20 דוברים מוכשרים, חלקם מהארץ וחלקם מרחבי העולם, וביניהם ניתן למצוא גם דמויות בולטות בקהילה:
ניר קאופמן, גיל פינק, פסקל פרכט ועוד רבים וטובים.

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

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

1. על Blockchain ואיך מפתחים Cryptocurrency

נתחיל בהתחלה – מה זה לעזאזל Cryptocurrency, או בעברית "מטבע מבוזר"?!
מטבע מבוזר הוא בעצם כסף, או אמצעי תשלום, שנוצר באמצעים טכנולוגיים וערכו נקבע לפי הסכמה בין רשת של משתמשים, בניגוד לכסף רגיל אשר ערכו נקבע לפי סחורה או לחלופין לפי קביעה של גוף מרכזי אחד.
קיימים היום לא מעט מטבעות מבוזרים, אבל על המוכר מביניהם בטח יצא לכם כבר לשמוע – ביטקוין! השווי הנוכחי של הביטקוין הוא 2499$, והרבה מטבעות מבוזרים מתבססים על הביטקוין עצמו.
ארי לרנר, שטוען שהיה קומיקאי עד שהגיע למסקנה שהוא בעצם לא כל כך מצחיק, הסביר על קצה המזלג איך מפתחים מטבע מבוזר (אבל לא רק) ומיישמים עקרונות מתוך הפיתוח באנגולר.
הבסיס לעקרונות האלו הוא התפיסה הטכנולוגית שנקראת Blockchain, אשר מתבססת על בלוקים של מידע מוצפן (באמצעות Hash functions ועץ מרקל) שנוצרים משיתוף P2P.
התפיסה הזו, שמוגדרת כרגע בשלב הניסוי, מטרתה לאפשר יצירת מערכות ניהול כלכליות ללא גורם מרכזי מנהל, הצורה בה הדברים מתנהלים היום.
היתרונות ברורים – לגורם מרכזי מנהל יש בסיס נתונים, והוא מטרה נוחה בהרבה לניסיונות חדירה וחבלה.
אם הנושא מעניין אתכם (יש כאלה שטוענים שזה העתיד..), אני ממליץ לקרוא את המאמר הבא, המנסה להסביר את עקרונות הBlockchain למפתחי WEB.

Ari Lerner Cryptocurrency
ארי לרנר והBlockchain, מתוך דף הפייסבוק של Angular UP

2. דרך מעניינת לניהול State באנגולר

אחד הויכוחים הסוערים ביותר בקרב קהילת האנגולר, לפחות בארץ, נוגע לניהול הState. החל מהאסכולה שטוענת שאתה לא צריך להוסיף ניהול סטייט חיצוני על אנגולר, דרך RxJS ועד angular-redux, הסוגיה מעוררת הרבה תרעומת בקהילה.
מקסים סלניקוב ניסה לשפוך קצת אור בנושא, או לפחות לתת את דעתו. ההצעה שלו הייתה להשתמש בRxJS כבסיס לפתרון – @ngrx/store. הספרייה שמיועדת לאנגולר והושפעה מRedux מציגה עקרונות דומים מאוד לרידקס. הסטייט הוא מבנה נתונים immutable אשר מיועד להכיל שלל סוגי מידע – מטמון, תגובות מהשרת, מידע מקומי, UI State, ועוד.
פעולות (Actions) מתארות שינויים בסטייט, Reducers הם פונקציות טהורות שמקבלות את הסטייט והפעולה שנעשית על מנת לחשב את הסטייט החדש, וניתן לגשת לסטייט שלנו דרך Store.
כמו בהרצאה עצמה, קיבלתם עכשיו קורס מזורז בRedux 😉
אני מוכרח להודות שעדיין לא שוכנעתי לצורך בניהול הסטייט באנגולר בתצורה הזו, אבל זו אופציה מעניינת אין ספק.

Maxim Salnikov Angular State Management
מקסים מסביר על פעולות, מתוך דף הפייסבוק של Angular UP

3. למה ומתי להשתמש ב- Service Workers

ההרצאה של פסקל פרכט הייתה אחת הטובות בכנס. יותר מזה, בשלב מסויים הוא לבש כובע של תוכי. בחיי.
פסקל דיבר על Service Workers, שזה נושא מאוד מאוד מעניין.
Service Worker זה בעצם שירות-רקע שמטפל בבקשות רשת (network requests).
הנה מה שאתם צריכים לדעת בגדול על Service Worker:

  • אידאלי להתמודדות עם מצבי אופליין וסנכרוני רקע
  • אידאלי להתראות פוש
  • לא יכול ליצור אינטרקציה ישירה עם הDOM
  • מושמד כשהוא לא פעיל

למי שלא מכיר, אני ממליץ לקרוא בהרחבה כאן ולהבין קצת יותר לעומק במה מדובר.
פסקל הראה מס' שימושים שונים לService Workers, והדגים בשידור חי כיצד הוא מתמודד עם מצב אופליין באפליקציה שמבוססת אנגולר, באמצעות הService Worker.
כמו כן, פסקל הראה גם כיצד הוא משתמש בService Worker על מנת לשפר את ביצועי הPWA שלו (Progressive Web App) באמצעות Lighthouse, כלי אוטומטי של גוגל לבדיקות ודו"חות.
ולמה זה כזה מרגש אותי? כי אומנם כרגע הפיצ'ר הזה נחשב עדיין כדרפט, והוא לא נתמך בכל הדפדפנים – אבל הפוטנציאל הטמון בו הוא עצום.

Pascal Precht Service Workers
פסקל והלייטהאוס, מתוך דף הפייסבוק של Angular UP

4. איך אפשר לעשות קסמים בעזרת הDevTools

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

$0 – יתן לכם את האלמנט האחרון שעשיתם עליו inspect. אפשר להעלות במספרים בשביל לקבל את האלמנטים הקודמים.
$_ – יתן לכם את האלמנט האחרון שהתייחסתם אליו.
באמצעות התוסף לכרום Augury, תוכלו גם להשתמש ב$_scope() בשביל לקבל את הscope של האלמנט.
debug() – יאפשר עצירה בbreakpoint.
undebug() – יבטל את מה שהפעולה הקודמת עשתה 🙂
monitorEvents() – יאפשר לכם לעקוב אחרי אירועים ספציפיים.

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

Tzook Shaked DevTools
צוק עושה קסמים בקונסול, מתוך דף הפייסבול של Angular UP

5. איך לקחת אנימציות באנגולר לשלב הבא

בערך באמצע היום שמעתי את גיל פינק מדבר על אנימציות באנגולר. הנושא לא היה חדש לי, שכן אני עובד הרבה עם אנימציות – הן באנגולר והן בריאקט.
אני חסיד גדול של אנימציות, ובעיני הן אלמנט קריטי לחווית המשתמש. אלוהים נמצא בפרטים הקטנים, והפרטים הקטנים – זה אנימציות!
אז מה בכל זאת גיל חידש לי? נתחיל בזה שמאוד אהבתי את הפלואו של ההרצאה שלו. הוא התחיל בלהציג את Web Animation API, שאומנם מוגדר כדרפט כרגע והתמיכה שלו בדפדפנים מאוד נמוכה,
אבל כולם מסכימים שזה העתיד של האנימציות בפיתוח הווב. אחר כך גיל הוביל את הקהל בתהליך המחשבה של בניית דקורטור אנימציות (Animation Decorator) בעצמנו, ולבסוף הגיע בצורה אלגנטית מאוד למקום אליו הוא כיוון מהתחלה – @angular/animations.
בנוסף, נגע גיל ב2 יכולות חשובות של האנימציות באנגולר – Groups, שמאפשר תזמונים שונים לאנימציות שמתרחשות במקביל, ו- Callbacks, שמתרחשים בתחילת האנימציה ובסיומה.
אם לא הספיק לכם – מידע מורחב בנושא האנימציות תוכלו למצוא באתר הרשמי של אנגולר.

Gil Fink Angular Animations
גיל פינק לא מתבלבל גם כשיש שגיאות, מתוך דף הפייסבוק של Angular UP

6. רובוטים יצילו את בני האדם מסנאים רשעים

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

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

סבסטיאן, בהרצאה מרתקת, הראה איך באמצעות התממשקות Bluetooth, שימוש בAngular וב- NaitveScript, הוא מצליח לכתוב (בקלות רבה) ממשקי WEB לשליטה במכשירים כאלה ואחרים.
בהרצאה הוא הדגים עם שני מכשירים – רחפן מסוג Parrot Mambo, ורובוט קטן ורוקד בשם MiP.

בין היתר הראה סבסטיאן איך פונקציונליות בBluetooth מחולקת לקבוצות סרוויסים (services), אשר מכילות מאפיינים (characteristics), ואיך תהליך ההתממשקות כולל בתוכו חמישה שלבים:

  1. Request device
  2. Connect to server
  3. Request service
  4. Request characteristic
  5. Read

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

 

Sebastian Witalec Bluetooth NaitveScript
סבסטיאן והרובוט החמוד שלו, שגם יודע לרקוד, מתוך דף הפייסבוק של Angular UP

7. ג'אווהסקריפט הולכת למות?

הנקודה האחרונה שאני רוצה להתייחס אליה מהכנס הזה היא ההרצאה של זיו בירר, למרות שבאופן די אירוני – היא לא קשורה כלל לאנגולר.
יתרה מכך, זיו בירר דיבר על האופציה שג'אווהסקריפט תעלם מהעולם.
זיו עלה למה שנקרא Lightning Talk, הרצאה של עשר דקות בלבד (יתר ההרצאות היו כחצי שעה). בעשר הדקות שלו דיבר זיו על Web Assembly.
ווב אסמבלי היא שפת דפדפן חדשה, אשר נמצאת בתהליך פיתוח מתקדם. המקור שלה הוא פרוייקט שאפתני בשם Asm.js, שבעקבות הצלחה חלקית שלו הוחלט לצאת לדרך עם הווב אסמבלי.
אז מה זה בעצם? ולמה הג'אווהסקריפט הולכת למות?
המטרה של השפה החדשה הזו היא להריץ אפליקציות כבדות בדפדפן – אבל לא סתם אפליקציות כבדות, אלא אפליקציות ממש כבדות. אפילו ברמת משחקים מטורפים.
נשמע מגניב לא? האמת היא שהשפה היא שפת מטרה, זאת אומרת שאנחנו לא הולכים לכתוב בה, אלא אנחנו נכתוב בשפות המוכרות לנו, והן יתקמפלו אליה.
הביצועים שלה אכן לא רעים (זיו הראה לנו סרטון), אבל אני חושב שבטוח להגיד שהיא עוד רחוק מלחסל את הג'אווהסקריפט.
ועדיין, שווה להתעדכן מה קורה שם מידי פעם..

לסיכום

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

אם הגעת עד לפה, הגיע הזמן להירשם לניוזלטר!

Summary
Article Name
7 דברים שלמדתי בכנס Angular UP 2017
Description
במרכז הכנסים של מלון דיוויד אינטרקונטיננטל בתל אביב התכנסו להם למעלה מ800 מפתחים שהמשותף לכולם היה האהבה לפרימוורק הפופולרי - אנגולר. בכנס לקחו חלק למעלה מ20 דוברים מוכשרים, חלקם מהארץ וחלקם מרחבי העולם. ריכזתי עבורכם 7 דברים מעניינים שלמדתי בכנס, בואו לקרוא!
Author
Publisher Name
MasterScripter
Publisher Logo
תגיות: , ,
אודות 
יזם בוטסטראפ, מתכנת ומנהל מוצר. שותף מייסד בקבוצת סיזן שמספקת שירותי פיתוח וליווי טכנולוגי לחברות וארגונים, וב-edge אתגרים בחינוך שמפתחת מוצרים דיגיטליים לבתי ספר. המייסד של PBC - מועדון ספרים מקצועי.

5 תגובות

  1. לידור

    10 ביולי 2017 - 19:56
    תגובה

    "ההצעה שלו הייתה להשתמש בRxJS כבסיס לפתרון ", לדעתי אתה מתכוון לngrx ..

    כי rxjs זה reactive extension ספריה לטיפול בפעולות אסינכרוניות, בצורה חכמה יעילה וקוד נקי, וכמובן שיטת הפוש(סטרים) של דאטה.

    כאשר ngrx זוהי באמת ספריה לניהול State.

    אגב מסכים שאין צורית בניהול state באנגולר!! 🙂

    כתבה מעניינת תודה ומזל טוב

    • שלומי זק

      10 ביולי 2017 - 21:41
      תגובה

      קודם כל תודה רבה לידור 🙂
      בגדול אתה צודק, אולם בכוונה רשמתי – RxJS כ-בסיס- לפתרון, מכיוון שngrx בהגדרתה היא:
      "RxJS powered state management for Angular applications, inspired by Redux"

      • לידור

        10 ביולי 2017 - 21:54
        תגובה

        אמממ אוקיי אבל אני חושב שקשה להגדיר את rx כngrx …. מה שכן ngrx משתמש בrxjs כדי לממש ריאקטיביות.. אבל בסדר מה שאתה חושב 🙂 עדין מאמר מעולה!

  2. רפאל

    23 ביולי 2017 - 16:14
    תגובה

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

השאר/י תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *