מקרה בוחן: כך שדרגנו את ה-Dashboard מ-AngularJS ל-Angular 5 Progressive Web App

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

 Hero Images/ Getty Images Israel

צלם/תמונה: Hero Images/ Getty Images Israel

מאת גל תדמור, Full-stack Developer ב-Cedato

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

חברות בתחום ה-Advertising Technology) ad-tech), שמאופיין בשינויים תכופים – טכנולוגיים או רגולטוריים – חייבות לשמור על יכולת תגובה מהירה לטרנדים בשוק הן מבחינת המוצר והן מבחינת שיטות הפיתוח. יתרה מכך, חברות בתחום שחוות צמיחה נדרשות לבחינה מעמיקה של תשתיות המוצר והפיתוח בהסתכלות קדימה ועם יכולות ל-scale.

זה בדיוק מה שעברה חברת הסטארטאפ Cedato, שנוסדה באוגוסט 2015 וכבר בשנת 2016 הבינה כי עליה לבחון אם הבסיס הקיים שלה חזק מספיק; האם מערכת שמבוססת על AngularJS תחזיק במבחן הזמן ותאפשר את כל הפיתוחים הטכנולוגיים שהלקוחות והשוק דורשים היום וידרשו בעתיד, והאם זה בכלל נכון להשקיע זמן פיתוח יקר בשלב זה? מצד אחד מדובר בחברה בתחילת דרכה, מצד שני היא חוותה צמיחה בזמן קצר וצריכה להתכונן לקצב דומה בעתיד. לאור כך, בתחילת 2017 החליטה החברה לצאת לדרך ולשדרג ה-dashboard של הפלטפורמה, שעד אז היה מבוסס על AngularJS.

מה ההבדלים בין הטכנולוגיות?

ריבוי ה-Frameworks שקיים היום גורם לתחושה של מרוץ בלתי אפשרי בקרב מפתחים, ופעמים רבות הלחץ לעמוד בקצב הפיתוחים ולענות על דרישות הלקוחות בזמן הקצר ביותר עולה בחשיבותו על בניית תשתית נכונה. בסופו של דבר, במסגרת הגדרת ה-UI של ה-dashboard מחדש, הוחלט לעבור מ-AngularJS ל-Angular.

מבחינת גוגל, בשנה האחרונה AngularJS נזרקה לפח ו-Angular הפכה לסטנדרט. בפועל יש עוד זמן עד שהמהפך יושלם לחלוטין, אז מה ההבדל בין הטכנולוגיות ולמה המעבר ביניהן הוא חשוב? AngularJS דומה ל-jQuery ו-React. זה קובץ JavaScript אחד שעושה הרבה קסם אבל היכולות שלו מוגבלות. למשל, אם רוצים Routing או אנימציות צריך לייבא עוד קובצי JS, זה נחמד אך לא מספיק. Angular, לעומת זאת, הוא Framework שלם שמגיע עם המון יכולות בבסיס שלו, במיוחד אם עובדים עם ה-Angular CLI. כשמייצרים פרויקט חדש הוא מגיע עם Webpack, תמיכה בספריות לצורכי בדיקות, יכולת לייצר קומפוננטות וישויות נוספות במהירות, ועוד.

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

למה בחרנו דווקא ב-Angular JS?

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

לפני המעבר בחנו אלטרנטיבות כגון React ו-Vue.js, אך היכולות הבסיסיות של כל אחת מהן היו לוקות בחסר מבחינתנו. השפות היו פחות קריאות ומעל הכל – לכתוב HTML, JS ו-CSS באותו הקובץ נראה לנו כמו רעיון די רע.

הכלים שבזכותם Angular ניצחה מבחינתנו היו TypeScript – השפה בה כותבים ב-Angular, ולמעשה JavaScript משודרגת – וה-Angular CLI, ה-Command Line Interface שמגיע יחד עם Angular. אלה אפשרו לנו תהליך פיתוח מהיר ופשוט, מבנה קבצים מסודר ותחושה שמתכנתים חדשים שיצטרפו לצוות יוכלו להבין את הפרויקט די מהר, ואכן הרבה דברים שנעשו בעבר בצורה מסורבלת, כמו מודאלים או תקשורת בין קומפוננטות, נהיו קלים יותר.

מאחר שהסביבה יחסית בחיתוליה, אין הרבה modules יציבים ב-npmjs לקומפוננטות יחסית טריוויאליות, כמו Date-picker או Grid-table, ולכן נדרשנו לייצר דברים די בסיסיים בעצמנו (ב-Dashboard הישן השתמשנו ב-AngularUI, וזה חסך לנו הרבה עבודה). עם זאת, יש הרבה דוקומנטציה ומדריכים מעולים בנושא וגם תמיכה רחבה מגוגל ומיקרוסופט, אז הייתה לרשותינו עזרה רבה ומועילה כשהיינו צריכים.

אבל איך מצליחים להישאר רלוונטיים למובייל?

בתכנון מחדש של ה-dashboard נאלצנו להביא בחשבון גם את גישת ה-Mobile-first. במקרה שלנו, אחת היכולות החשובות של המערכת כוללת הצגה, ניתוח והנפקה של טבלאות רחבות מאוד, דו”חות כבדים וגרפים מפורטים. ניתן היה לשער כי בשל כך לא ייעשה שימוש רחב בטלפון הנייד, אבל במציאות הלקוחות צריכים זמינות מיידית וזה רק עניין של זמן עד שתידרש גישה למערכת מהנייד. לכן בכל זאת היה חשוב לנו לספק את חוויית המשתמש הטובה ביותר ולהתאים את העיצוב ופיצ’רים מסוימים לגודל הדפדפן ולסוג המכשיר הנייד. חיפשנו איך בכל זאת נצליח לענות על דרישות הלקוח וגם לעמוד בזמני הפיתוח המקוריים שהוגדרו, ולאחר מחקר על Progressive Web Apps הבנו שאפשר להתקדם שלב אחד קדימה.

 Hero Images/ Getty Images Israel

צלם/תמונה: Hero Images/ Getty Images Israel

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

מבחינת חוויית המשתמש נדמה כי מדובר בלחיצת כפתור, אך ברמת התכנות כדי להפוך את ה-Web App ל-Progressive, יש לעמוד ברשימת קריטריונים שיאפשרו את ההתקנה כאפליקציה. הקריטריונים כוללים עבודה בשרת מאובטח (https בניגוד לhttp), מתן מענה לדפדפנים בהם ה-js כבוי וכן עמידה באחד הקריטריונים הכי חשובים – יישום של service worker. יישום זה מאפשר קריאת נתונים ששמורים ב-cache בזמן שאין חיבור אינטרנט זמין, כך שגם אם למשתמש אין גישה לאינטרנט ועדיין צריך לשלוף נתונים, יש לו האפשרות לשלוף נתונים המעודכנים 4 שעות אחורה. במקרה שלנו, יכולת זו היא מהותית למערכת הכוללת הצגה, ניתוח והנפקה של דו”חות וגרפים.

באמצעות תכנון נכון מראש והכרה בצורך של הנגשת הפלטפורמה במובייל, יכולנו לספק ללקוחות פלטפורמה שאינה כבולה רק לסביבת ה-desktop ויכולה לתת להם מענה בכל זמן ובכל מקום. לא היינו מרחיקים לכת ואומרים כי זהו תחליף מושלם ל-Native Apps, אבל עבורנו זה היווה פתרון מעולה שאפשר לנו לספק מוצר נוסף ללקוחות שלנו, באפס זמן פיתוח עבור Android/iOS.

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

הכתבה בחסות Cedato

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

כתב אורח

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

הגב

7 תגובות על "מקרה בוחן: כך שדרגנו את ה-Dashboard מ-AngularJS ל-Angular 5 Progressive Web App"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

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

סידור לפי:   חדש | ישן | הכי מדורגים
אני
Guest

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

למי שגלל ישר לתגובות – אסכם בקצרה:
1. איך הם “שידרגו”: הם כתבו הכל מחדש.
2. האם AngularJS עדיין רלוונטי? (הם לא ממש ענו על זה) התשובה היא כן אם הקוד שלך כתוב בזה. כנראה שלא, אם עוד אין קוד קיים.
3. למה אנגולר ולא אחרים? כי הם לא אוהבים HTML וקוד באותו עמוד

בקיצור, כתבת פרסום בלי הרבה תוכן. כמו שקורה פה הרבה

עופר
Guest
צודק לגמרי, גם אני תליתי תקוות והתאכזבתי. הם גם כתבו “זה קובץ JavaScript אחד שעושה הרבה קסם אבל היכולות שלו מוגבלות. למשל, אם רוצים Routing או אנימציות צריך לייבא עוד קובצי JS, זה נחמד אך לא מספיק” שזה די מצחיק כי דווקא Angular מגיע עם חלוקה מאוד מכוונת למודולים מאוד קטנים שצריך להביא בנפרד (Angular CLI עושה עבודה טובה בלהביא אותם בפרויקט הראשוני וב-webpack שאורז הכל, אבל הם עדיין קיימים). מה גם שזו לא סיבה להעדיף או לא להעדיף פריימוורק. חבל שהם לא דיברו על יתרונות אחרים ודווקא כן משמעותיים של Angular, כגון Angular Universal: server-side rendering וכן שיפורים משמעותיים… Read more »
הלל
Guest

בשביל הUI של האתר הייתי ממליץ על AngularMaterial ועל MDB Angular
הייתרון של הראשון זה שהוא חינם לגמרי אבל החיקון הוא שהוא לא רספונסיבי, והייתרון של השני זה שהוא הייתרון של השני זה שהוא רספונסיבי, החיסרון שלו שכדי להשתמש בו באופן מלא, צריך לשלם על רישיון

אורי
Guest

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

אורי
Guest

מסתבר שלינקים לא עובדים כאן.
הצטרפו לקבוצת המיטאפ Web Developers community והירשמו למיטאפ הקרוב Migrating to Modern Angular

מאור
Guest
דיברתם על להישאר רלוונטיים ועל טרנדים. אז צר לי להודיע לכם שאנגולר היא לא ממש טרנדית כרגע. לגבי שימוש באנגולר כי כותבים בה ב TypeScript ניתן לכתוב בTS גם בויו וגם בריאקט. “מאחר שהסביבה יחסית בחיתוליה” היא לא ממש בחיתוליה היא קיימת כבר מעל שנתיים. אני יגיד לך למה אין הרבה מודולים טובים לאנגולר? כי לא קל ולא כיף לפתח בה. תבדוק כמה ספריות UI יש למקבילות ריאקט וויו. CLI חזק, צריך אחד כזה רק בפריימוורק שעל כל קובץ שאתה מוסיף אתה צריך לעדכן כמה קבצים. הם יצרו את הבעיה ופתרו אותה בעזרת CLI. ל Vue יצא לא מזמן CLI… Read more »
מייקי
Guest

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

wpDiscuz

תגיות לכתבה: